Now, when we log out and log in you'll see account information is selected by default. We want to switch that to purchase history because we want to by default be on purchase history because that's what the design tells us.

Okay, so let's go into the code, and let's close this terminal and let's go into account.js, and let's switch account information to false and purchase history to true, okay cool, that's good.

account.js

const navbarLinks = [
    {
        _id: 0,
        title: 'Purchase History',
        active: true,
        component: <PurchaseHistory/>
    },
    {
        _id: 1,
        title: 'Account Information',
        active: false,
        component: <AccountInformation/>
    }
]

Now, let's close out all of our code tabs, and let's open up purchaseHistory.js, and let's give this div a class name of purchase-history.

purchaseHistory.js

import React, { Component } from 'react';

class PurchaseHistory extends Component {
    render() {
        return {
            <div className='purchase-history'>
                purchase history
            </div>
        }
    }
}

export default PurchaseHistory;

Okay cool, now let's go down to our code, let's create a new folder called account, let's create a new file in our account/style folder called purchase-history.scss. Let's go into our main.scss and import, well let's create another file in account and let's call it account-information.scss and then let's go into main and import these both, import account information, import purchase history, and make sure you remember to put the account slash in front of these so we get them from the account folder.

Okay, so we have both of those, now we can start coding in them. Let's close out account information and lets go into purchase history and say .purchase-history. Okay cool, now let's check what we have in our purchase history so we can actually write some styles for it.

Okay, we have nothing. I forgot we didn't write anything in there yet, let's go into Chrome and start writing code. Okay so we have purchase history which is a title and then we have this line with this contents.

Basically it's kind of the same idea we want to do with our form. We want to put in a title and then another component that contains our stuff or we can just put in a title and then some more JSX. Okay, so let's go ahead and go to our code and let's put that title in by first importing pageTitle from ../pageTitle. Okay, now let's use it. So page title className is going to be purchase-history__page-title and the title will be PurchaseHistory, obviously.

purchaseHistory.js

import React, { Componet } from 'react';

import PageTitle from '../pageTitle';

class PurchaseHistory extends Component {
    render() {
        return {
            <div className='purchase-history'>
                <PageTitle className='purchase-history__page-title' title='Purcahse History'/>
            </div>
        }
    }
}

export default PurchaseHistory;

Alright let's try this out now, but let's first go into purchase-history.scss and let's put an &__page-title, okay cool we have our first class in there.

purchase-history.scss

.purchase-history {
    &__page-title {

    }
}

Let's go to the Chrome and see what's going on.

Alright, you'll see it's right where it belongs except for the sides aren't really where they belong. So what we need to do is put that in our content grid. Okay, if you remember what we did in the signin.scss, we basically need to put it on the content row because it's replacing signin right it's in the same place as signin would be otherwise.

So let's take the row and column here and let's comment out page title while we're at it in signin.scss, let's close it out. And let's comment out page title here in purchase-history.scss too. We're most likely not going to use this but I want it to be there just so we have access to it.

Let's call these in here, or let's put these in here, row and column, and let's go see what happens.

purchase-history.scss

.purchase-history {
    grid-row: content-s/content-e;
    gird-column: s/e;
    // &__page-title {

    // }
}

Nothing so far.

I'm going to inspect the element and let's just check what our HTML is looking like. Okay, it looks like something's going on here, it's because we have a div that contains it. So technically purchase history is not on our grid. So what we need to do is we need to go to our code and instead of putting purchase history there we need to put account there.

So let's take this grid and row and let's create a new file in a account called account.scss. And let's just say .account and I'm doing all these files strictly for readability and clean code right, because although it makes a ton of files it makes it super clean because we know where everything is.

main.scss

@import 'account/account';
@import 'account/purchase-history';
@import 'account/account-information';

Okay, let's import this into main alright that should line it up, let's go check it out in the browser.

Okay, we didn't name it. See if we go into this div here and that element and we say class is equal to account it's going to line it up, see.

So what we need to do is we need to go to our code and we need to give that div a class name. So let's close out main.scss and I'm going to open up account.js and let's give this initial div a class name of account.

account.js

render() {
    return {
        <div className='account'>
            { this.renderContent() }
        </div>
    }
}

We could even get rid of this div entirely and apply the rows and stuff to PurchaseHistory like we just did and that would work, but let's just do this because we've done this. Let's go to Chrome and you'll see it's where it belongs, even when we reload it.

Okay so that kind of sets that up. Let's go ahead and let's look at PurchaseHistory really quick, I'm going to close that and let's go into our design. We basically need to start developing two components here okay we've got the PurchaseHistory items right here and then we've got the PurchaseHistory details.

So we're going to call this component purchases and well this is the thing, we might have another space in the application that might need a component called Purchases. See like, I believe, actually right here, see we have Purchases in here. Well I guess this is kind of like another cart product okay.

So what we need to do, I guess thats in the login here. What we need to do is we need to call this, we can just call it Purchases and it can contain a purchase. And this is going to be purchase details so when we click on any of these it's going to show the detail. Now I'm not sure what the idea of this is right here, like maybe this is an entire purchase right and then this contains it all right.

So this is a sticker, this is a sticker and it all adds up to 8.02 or maybe it means that each one of these is a specific purchase. Now that I'm thinking about it it might be that if there's only one purchase in this PurchaseHistory like it might have one here and here and so on.

So what we'll do is we'll start developing this and I'll give you a brief idea of what we need to do in the next video and we'll tackle it from there, so let's go out and commit our code.

Terminal

git status
git add .
git commit -m "setup purchase history component"

Okay, I'll see you in the next video.

Resources

Source code