Now are newsletters are all looking good, and there's one thing or a couple of things we need to do with this but we're not going to do it until the end of the application because it involves the database. There's no point at all in doing this on the front end immediately because we don't want to update this data.

What we want to do is save that for after we built out the rest of our grids and visuals, then write our components. So we have everything structured and it's going to be super easy since it's just a couple of post requests.

Basically what we want to do is focus on the rest of our grids and components and visuals and then we'll do that. So in this video we're going to start building out this request feature that we have in the design.

This is the rest of the application. So, we have 3 boxes, we have this list of items, and we also have an add requests button. If you click the Add button, we can add a new service request.

This is a form we've already built, so this will be really simple. The only major thing we really need to do here is build out our item components, because we've already got the general idea of what we want to do with the boxes so we don't need to worry too much about that.

So really most of this is going to be logic at this point, just moving data around. Now we've already got a good grid going on with newsletters so we can already we can just throw in the same grid for this entire component and this requests component.

So just to give you an idea of how the requests actually work, basically, the user can upload a request to fix something in their apartment, And then admins can come in here and move them to in-progress and complete.

A normal user also will see the screen except for they will only see their requests that are pending, in-progress, and complete. and they can't move them at all. All they can do is view them and add more, whereas the admin can add them and can move them around.

It might seem a little intimidating now but it's actually very easy to implement. So let's go ahead and start building this right now by just throwing in the grid and a couple divs or components, to get this going.

We're going to need a component containing these items. Let's create a new folder in our components directory and let's call it requests.

Now let's create a new file in requests and say requestsGrid.js and let's fill this out.

requestsGrid.js

import React, { Component } from 'react';

class RequestsGrid extends Component {
    render() {
        return (
            <div className='requests-grid'>
                content here
            </div>
        )
    }
}

export default RequestsGrid;

Now what we need to do is give an actual grid, and we need to actually use this component. So we need to do is hook it up to our dashboard component. So let's go to dashboard.js and you'll see right now we're just returning an <h4>, instead let's return the grid.

Now let's actually put in the CSS grid. Let's create a new file in our style folder called requests-grid.scss and this is where we're going to want to build a very similar grid to our newsletter grid. Let's open newsletter-grid.scss and let's just copy this all and paste it in requests-grid.scss, and let's rename it to .requests-grid.

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 box-s] 16rem [box-e archive-s] 1fr [archive-e e];
    grid-template-columns: [box-s archive-s] 16rem [box-e archive-e latest-s] 960px [latest-e];

    grid-column-gap: 6.1rem;

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

We will want to change some of these later, but for right now, let's just get everything working in here with a few of our JSX items and then we will refactor. Let's import this into our main.scss.

It's lining up the same in our grid, but we don't have any objects in here right now, so let's go and view this in Firefox and then end the video.

As you can see we have the grid we need, and that's awesome. It looks exactly like what we need in our design. So it should be really easy to throw in our components and then develop them.

So in the next video let's lay out a few of our components and we'll start off with the new requests button, since it's the same exact button that's in our newsletters. We want to implement that button. Okay that's the first thing we'll do, then we'll move on to everything else.

Let's commit our code.

git status
git add .
git commit -m "started building requests feature"

I'll see you in the next video.

Resources

Code at this stage