Then we need to develop an action to set the component we want to actually display the detailed component and then go from there.

Okay, let's proceed by going into our code and closing out this terminal and instead of returning just a div let's return let's do this let's get rid of this div and let's put some parentheses and then let's return a div and let's give it a class name of purchases_purchase and then we'll say purchase again.

purchase.js

this.props.purchases.map(purchase => {
    return (
        <div className='purchases__purchase purchase'>

        </div>
    )
})

That will give us a lot of flexibility when we get to the SCSS side of things. Okay, in here we kind of basically just want an image so let's say okay, that should be good. Now what we need to do is give this a class name of purchase__img.

Cool, so that's all we really need, we're going to have to apply some styles in here obviously. Let's go ahead and let's go to our application in the browser and first let's give this div a key and let's just say it's of purchase ID cool that should be good, let's go try it out now.

purchase.js

this.props.purchases.map(purchase => {
    return (
        <div key={purchase._id} className='purchases__purchase purchase'>
            <img className='purchase__img' src='http://via.placeholder.com/80x80'/>
        </div>
    )
})

All right, that looks really good, a lot better.

You'll see that it's the size of this, and yeah were good there. We're just using a placeholder image because that's an image.

Now what we need to do is basically give it a grid and make it look like that. So let's make sure that there is eight of these in here at least. So let's go into our code and let's go into index.js actions and let's head over to user, all right so we're in user.js in our actions folder. Let's just copy this a few more times, right, a bunch of times actually and let's rename the ids to 2, 3, 4, 5, 6, 7 and that's perfect because we started in a zero right, so that's good.

user.js

import { 
    SET_USER_PURCHASES
} from './types';

export function fetchUserPurchases() {
    return ({
        type: SET_USER_PURCHASES,
        payload: [
            {
                _id: 0,
                title: 'purchase 1',
                amount: 8.02
            },
            {
                _id: 1,
                title: 'purchase 1',
                amount: 19.40
            }
        ]
    })
}

Okay, now what we need to do is rename these purchases okay so we don't really need a title because you'll notice that in here it doesn't have a title. Although the PurchaseDetail has a bunch of data so honestly the best idea is to put all these things in here and then copy and paste it okay, so let's drag this screen over a bit.

Now let's open this up k let me drag it came and then what we want to do let's just hit command + z a bunch let's get rid of all these okay cool, and what we want to do is basically add a few things on here. Now, okay, yeah so let's add in orderNumber. And we'll just add in like some random strings right, and then we have orderDate which is going to be a data object and we'll just say new date on all of these okay, it doesn't need to be a specific date for each.

All we need to know is that it's a date and we need to parse it correctly so when we pull it from a back end it will not crash and parse correctly like a normal date object. Okay, now here's the deal we need a total, let's rename amount to total, and then we don't need a title anymore or we never did, all right, but we need a shipping address.

Now we're not going to just put the shipping address straight in here, what we're going to do is attach a user object in here. Now we obviously are not dealing with actual models from our database in here. But on the back end the way I set this up is that I'm setting it up the same exact way I'm typing here okay.

So when we fetch it from a database, it's going to basically have these properties already okay. In here we're going to have shipping address 1234 West State Street. Right, I'll just put that in and then let's give a user name, lets put name is going to be Jordan Hudgens, okay we're set up there. So what we need to do now is to provide, let's see what do we need to do? Track shipment provide receipt that's all not data, so credit card, let's just put credit card in here.

user.js

import { 
    SET_USER_PURCHASES
} from './types';

export function fetchUserPurchases() {
    return ({
        type: SET_USER_PURCHASES,
        payload: [
            {
                _id: 1,
                total: 19.40,
                orderNumber: 'A0048248343',
                orderDate: new Date(),
                creditCard: '-0000'
                user: {
                    name: 'Jordan Hudgens',
                    shippingAddress: '1234 West State Street'
                }
            }
        ]
    })
}

Now here's the deal with the way we're doing this with stripe we're not going to actually have access to user credit cards because that's really tough to handle all the billing stuff basically because of the information you're dealing with, credit cards, people's money right. That's really sensitive information that you could mess up and that would not be good to your customers.

All right, so we're using Stripe to handle most of that. So we're not really going to have access to the credit card so it's just going to say 00 for aesthetic purposes okay. So we have this now let's get rid of this object and let's basically just copy this one a bunch of times okay.

{
    _id: 1,
    total: 19.40,
    orderNumber: 'A0048248343',
    orderDate: new Date(),
    creditCard: '-0000'
    user: {
        name: 'Jordan Hudgens',
        shippingAddress: '1234 West State Street'
    }
}

Now what I want to do is I want to go through and modify a lot of this data okay, just to mix it up a bit. So just modify a lot of these pieces of data, so it looks different when we click it right, change the names and then let's change some of these orderNumbers and totals, obviously change the id's as well.

Now I think you get the idea here, we're not going to modify any more of them or at least I'm not, you can feel free to mess around with all the data but you get the idea. These are all unique, or they are supposed to be. What I do want to change however I want to change the ID for at least all these okay, so they are truly unique.

So they at least have different ids because in Mongo when you generate a new object it's always going to have a unique ID. Okay, so we have about one to many objects I'm going to get rid of this last one. Okay cool, we're good there, let's go ahead and actually do something with this data now, a lot of random boring coding, but you'll see now we're fetching all this data, so that's what we want.

Let's go ahead and create the grid for now by going into purchase-history.scss and in purchases we'll just say display is grid, grid template rows is we want two rows and then grid template, here we'll make, lets do template columns and then we'll say repeat auto fit and then we'll say 80 pixels and then we'll make the width the purchases like 80 times 4 plus a little bit so we'll say like 360 even though 80 times 4 is 320.

purchase-history.scss

.purchases {
    display: grid;
    grid-template-columns: repeat(auto-fit, 80px);
    width: 360px;
}

Let's see what this looks like, you'll see that looks pretty good.

Now what we want to do is give it a little grid gap so let's say that it has a grid gap of 10 pixels and see what that looks like. All right looks good, it looks like our design and yet it looks really nice.

So let's just add in a little bit of space in between these, so we need to have about 37 pixels above and below, so say 36px on each of those. Okay, so in purchase history let's just say that margin is 37 pixels zero.

purchase-history.scss

.purchases {
    margin: 37px 0;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, 80px);
    width: 360px;
}

And you'll see it is now down there and like our purchases, so it looks really good.

So what we need to do now is we need to basically throw this PurchaseDetail over here to the right, so let's make that grid really quick. Okay, so in PurchaseHistory we just need to say grid and then we need to say grid template columns is 1fr 1fr, all right let's see if this messes things up at all. All right, it does quite a bit.

So we'll have to specify some rows as well. So let's say, we have a, so this is a purchase history. Do we want it in purchase history? Let's check purchase history component, yeah so see we have all these items, we've got the border bottom, the title, purchases, and detail. So we need to account for all of this, so what we need to do is we need to, okay I'm just trying to think of the best way to do this.

This is what we should do, we should just take this Purchases and PurchaseDetail and put it in its own div. So let's say div and we'll say className is equal to purchase history content and then we'll paste this in here. There we go, so purchase history content then we have purchase and detail.

purchaseHistory.js

<div className='purchase-history__content'>
    <Purchases className='purchase-history__purchases'/>
    <PurchaseDetail className='purchase-history__detail'/>
</div>

Okay, that way we don't have to put the grid on purchase history we can just put it on here and have it auto fit. So let's go back into purchase-history.scss and let's remove this grid and put another attribute in here called content, another selector and we'll paste that in there. So now the grid exists on content which if you remember we just did is there's only two items so it will work well.

purchase-history.scss

.purchase-history {
    &__content {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    &__page-title {
        border-bottom: 1px solid #CCC;
    }
    &__border-bottom {
        border-bottom: 1px solid #F2F2F2;
    }
}

.purchases {
    margin: 37px 0;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, 80px);
    width: 360px;
}

See it automatically does it for us, it looks like our design, we've even got the lines in there, very well.

All right, next thing I want to do before we move on is you know how there's a margin right here 37 pixels, we want to apply that here as well and we could easily just copy that over. But it would be a lot easier to instead just go to our purchase-history.scss and instead of applying it on purchases we just apply it on the content that way it will apply it to both these items because they exist within the content.

.purchase-history {
    &__content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 37px 0;
    }

See, it looks great to me.

All right, so let's end the video here and in the next video we'll click this button to set a purchase detail all right. And then we'll develop the actual purchase detail to display that information. Okay, so let's go ahead and commit our code and move on to that video.

Terminal

git status
git add .
git commit -m "finished purchases component"

All right I'll see in the next video.

Resources

Source code