What we need to do is just leave a couple comments in requestsGrid.js and we want to put in the request boxes or the status boxes or something. We're going to call them request boxes and then we're going to need to come in here and say the actual requests.

requestsGrid.js

import React, { Component } from 'react';

import Button from '../button';

class RequestsGrid extends Component {

    handleAddRequest = () => {
        this.props.history.push('/request/new');
    }

    render() {
        return (
            <div className='requests-grid'>
                <Button className='requests-grid__button' icon='fas fa-plus' callback={() => this.handleAddRequest()}/>
                {/* requestBoxes */}
                {/* requests */}
            </div>
        )
    }
}

export default RequestsGrid;

OK. So the request boxes are going to contain the action box component and the requests are going to continue request components, so this is kind of like four components we're looking at right here. So let's start developing the action boxes and then we'll move on.

So let's create a new file in requests and let's call it requestsBoxes.js and we want to set up our new component.

requestsBoxes.js

import React, { Component } from 'react'

class RequestsBoxes extends Component {
    render() {
        return (
            <div className='requests-boxes'>
                pending
                inprogress
                complete
            </div>
        )
    }
}

export default RequestsBoxes;

We'll build those out later, for right now let's import our boxes to our component.

requestsGrid.js

import React, { Component } from 'react';

import Button from '../button';

import RequestsBoxes from './requestBoxes';

class RequestsGrid extends Component {

    handleAddRequest = () => {
        this.props.history.push('/request/new');
    }

    render() {
        return (
            <div className='requests-grid'>
                <Button className='requests-grid__button' icon='fas fa-plus' callback={() => this.handleAddRequest()}/>
                <RequestsBoxes/>
                {/* requests */}
            </div>
        )
    }
}

export default RequestsGrid;

Let's go view this in our application in the browser.

Great. Now what we want to do is build the requests component for now so we can throw it on the grid. So let's create a new file and call it requests.js And another good reason we're doing this now is because we can just copy what we have in boxes since It's a plain component and pasted into requests.

requests.js

import React, { Component } from 'react'

class Requests extends Component {
    render() {
        return (
            <div className='requests'>
                item 1
                item 2
                item 3
                item 4
            </div>
        )
    }
}

export default Requests;

Now let's go ahead and let's import this into our grid.

requestsGrid.js

import React, { Component } from 'react';

import Button from '../button';

import RequestsBoxes from './requestsBoxes';
import Requests from './requests';

class RequestsGrid extends Component {

    handleAddRequest = () => {
        this.props.history.push('/request/new');
    }

    render() {
        return (
            <div className='requests-grid'>
                <Button className='requests-grid__button' icon='fas fa-plus' callback={() => this.handleAddRequest()}/>
                <RequestsBoxes/>
                <Requests/>
            </div>
        )
    }
}

export default RequestsGrid;

Let's go ahead and look at our application in the browser now.

It's not really how we want it to be. So let's give them some styles and lay them out on the grid so we can see better what's going on. I'm going to open up Firefox and basically Firefox is what I'm going to be referencing so we can understand the grid a bit.

So one thing I want to do before we move on, and before we get the styles, in is I want to move that requireAuth from dashboard just so we don't have to log in every time. So let's go to bootstrap.js and let's just copy the route and then comment it out and just get rid of requireAuth on this one. That way when we want to switch back we can just undo this comment and use this route.

Okay. So the only reason I did this so we don't have to log in every time we make a change so that whenever we reference our app when we make a change, it's just going to reload and it's going to be here. We should have done that with newsletter's the entire time.

Wow. OK. So you also notice that this exposes kind of a flaw in our tabs and it's that every time we reload our browser it automatically selects newsletter, but we'll be fixing that later on with redux most likely.

So before we move on let's just throw in the style files for for the request grid components and then let's throw them on the grid and give them a background color so we can clearly see where they belong.

All right so let's go to our style folder and say new file requests-boxes.scss and then let's make another file and say requests.scss, and let's go import these into our main.scss

Feel free to structure the styles however you want. I'm just throwing them all in. Let's look at our requests-grid.scss and let's kind of structure this grid differently.

requests-grid.scss

.requests-grid {
    justify-content: center;
    grid-row: content-s/content-e;

    display: grid;
    grid-template-rows: [add-s] 4.7rem [add-e s boxes-s] 16rem [boxes-e] 1fr [e];
    grid-template-columns: [boxes-s] 16rem [boxes-e requests-s] 960px [requests-e];

    grid-column-gap: 6.1rem;


    &__button {
        grid-row: add-s/add-e;
        grid-column: requests-s/requests-e;
        justify-self: end;
        align-self: center;
        margin-right: 1rem;
    }
}

So take a look at this and get this all in. It should be fine. Let's go in to make sure that didn't mess up our grid.

OK everything looks good still. Now let's give our components in here a background color then place them where they belong on the grid, besides the button, which is already in the proper place. So we'll go to requests-boxes first, and add in a background color.

requests-boxes.scss

.requests-boxes {
  background-color: cornflowerblue;
}

Next is requests.scss. We can pick these colors. They have a lot of weird colors in here, but I'm going to put moccasin.

requests.scss

.requests {
  background-color: moccasin;
}

Here's what they look like.

So now that we selected a color let's just align them on the grid. OK so the boxes belong on the boxes, so we already have the names, so there's not too much to think about here.

requests-boxes.scss

.requests-boxes {
  background-color: cornflowerblue;
  grid-column: boxes-s/boxes-e;
  grid-row: boxes-s/boxes-e;
}

So what we need to do is we need to refactor our grid a bit so that it can extend all the way down.

requests-grid.scss

.requests-grid {
    justify-content: center;
    grid-row: content-s/content-e;

    display: grid;
    grid-template-rows: [add-s] 4.7rem [add-e s boxes-s] 1fr [boxes-e e];
    grid-template-columns: [boxes-s] 16rem [boxes-e requests-s] 960px [requests-e];

    grid-column-gap: 6.1rem;


    &__button {
        grid-row: add-s/add-e;
        grid-column: requests-s/requests-e;
        justify-self: end;
        align-self: center;
        margin-right: 1rem;
    }
}

Now that that won't take up all of the space immediately because it's a fractional unit and we haven't specified a height for that component. But once we add in content it's going to extend as far as it needs to which is exactly what we want because technically we don't want it to extend to the bottom of the component.

Let's just declare a height of 500px, to see what the space will look like with our boxes.

requests-boxes.scss

.requests-boxes {
  background-color: cornflowerblue;
  grid-column: boxes-s/boxes-e;
  grid-row: boxes-s/boxes-e;

  height: 500px;
}

Let's just move on with that and get the requests in there. So let's go into our requests.scss and let's put this on the grid.

requests.scss

.requests {
    background-color: moccasin;
    grid-row: s/e;
    grid-column: requests-s/requests-e;
}

That should be good. Let's check it out.

Everything's looking nice. So we have our grid set up now but we need to do is start developing these progress components, pending, in-progress, and complete. In the next video we'll get those going really quickly.

Let's commit our code.

git status
git add .
git commit -m "built requests components and placed on grid"

I'll see you in the next video.

Resources

Code at this stage