Okay, we've got our account where we, let's see purchase history, what we need to do is we need to implement the purchases. Okay, we need to implement this purchase's component on container purchases. Okay, so what we need to do is go into our code and we need to create a new component in our account and we need to call it purchases.js.

In here we need to import React and component from react and we need to make a class called purchases and we need to extend component, we need to then render a div and we need to give this a class name with an object. Okay we need to give it a string literal we need to say hey this contains a class name called purchases right, but we also need to pass in a class name for our props.

So we'll put this in brackets and we will put in a dollar sign and we will say the class name we will then go up here and we will say in the render function constant class name is equal to this.props. So we're taking class name out of it. Cool, so that's the basic set up, let's export it now. So export default purchases and we'll see what we've got to do now.

purchases.js

import React, { Component } from 'react';

class Purchaes extends Component {
    render() {
        const { className } = this.props;

        <div className={'${className} purchases'}>

        </div>
    }
}

export default Purchases;

Okay, we've got the div everything's good in here. So now what we need to do is we need to fetch some data from a server to display these purchases. Now we're not going to implement that since this is front end right now.

So what we'll do is we'll create dummy data but we'll create the reducer to fetch it and all that junk okay or the action creator. So let's go ahead and use this component, let's just say Purchases go here. And then let's head over to our purchaseHistory.js and underneath our page title let's just import it and use it okay, Purchases.

purchaseHistory.js

<div className='purchase-history'>
    <PageTitle className='purchase-history__page-title' title='Purchase History'/>
    <Purchases/>
</div>

Okay so this will require that under page title we import it, so import Purchases from ./purchases.

purchaseHistory.js

import PageTitle from '../pageTitle';
import Purchases from './purchases';

Now let's pass in a class name of purchase-history__purchases.

purchaseHistory.js

<div className='purchase-history'>
    <PageTitle className='purchase-history__page-title' title='Purchase History'/>
    <Purchases className='purchase-history__purchases'/>
</div>

Cool so that looks good, let's go test it out see if it's working. Login, and we've got an error, let's inspect the element and see what we're getting. Okay, we have nothing was returned from render. So we didn't return anything in purchases.js, so yeah we didn't return this div we just declared it. So let's go in here and return the div, so just wrap that div with a return.

purchases.js

return {
    <div className={'${className} purchases'}>
        purchases go here
    </div>
}

Okay that should be good, let's go ahead and save that and let's enter Google Chrome again and let's see what's going on. Okay, it says purchases go here, cool, so that's the general area we wanted it in.

We also want a purchase detail okay, so let's create that component but not put anything in it. And the reason I want to create it now is because I just want to copy this boilerplate so we don't have to write it out again at least until we get on to other components. Let's say purchaseDetail.js. Okay so in the purchaseDetail component paste this in here and let's rename this to purchaseDetail. Okay, now in here we're just going to say purchase detail goes here and we're just going to rename this class name to purchase-detail and then we're going to leave it like so okay.

purchaseDetail.js

import React, { Component } from 'react';

class PurchaesDetail extends Component {
    render() {
        const { className } = this.props;

        return (
            <div className={'${className} purchase-detail'}>
                purchase detail goes here
            </div>
        )
    }
}

export default PurchaesDetail;

Now what we're going to do is we're going to go into purchaseHistory.scss and we're going to put another file in here called, well not another file. We're going to put the purchases in here and we're also going to put the purchase detail in here.

purchase-history.scss

.purchases {

}

.purchase-detail {

}

So all of our purchase components are going to exist in purchase-history.scss that way we don't have to create 5 billion files. All right now it makes sense with the components because it's going to be a little bit more complex whereas styles is a lot more straightforward. We don't need to have a bunch of stuff in here other than a bunch of lines of styles, super straightforward in here. In here though we want to separate these into different files because they're in their own components, so that makes sense.

Let's go ahead and render a purchase detail now, make sure you import that so import PurchaseDetail from './purchaseDetail';. Let's give this a class name of purchase-history__detail and we're good there. Okay, now let's see what we've got to do, okay so we have all that, let's go check our application, and you'll see we have items here.

So first problem is this is right underneath purchases, we want to define a grid to actually lay these items out and then we want to throw a little bit of styling in here. So I'm going to check this border real quick so I can keep it on my mind, so it's 1 #ccc all right. So let's go into our code and let's say that the purchases, let's see, the page title, let's give it to the page title, and this is a really good application of putting a class name in here right, we don't have to apply it to every title, we can apply it just to this page title.

So let's go into purchase-history.scss and uncomment this out, and let's say that the border bottom is 1 pixel solid CCC.

purchase-history.scss

.purchase-history {

    &__page-title {
        border-bottom: 1px solid #ccc;
    }
}

.purchases {

}

.purchase-detail {

}

Okay, so we're likely going to have to put some padding on here maybe, I don't know, let's check it out, we might but I don't think we will actually. Oh I guess we will, okay, so let's go ahead and that's because we applied a margin to these. So what we need to do is we need to go into vs code and there's a couple of ways we can do this. We can go into page-title.scss and we can get rid of this by overwriting it and then change it to the padding back in our component. Or we can just change this to padding and we won't notice it anywhere, padding-bottom: 59 px.

page-title.scss

.page-title {
    color: #666;
    font-family: 'Titillium Web';
    font-size: 30px;
    font-weight: 600;

    margin-top: 38px;
    padding-bottom: 59px;
}

See, now it's down there.

But you'll notice back in like, oops I didn't mean to go to Invision, let me go back to my local host. Okay, let's go back to signin you'll notice that the button is still where it belongs, it's just that it's padding now not margin.

Okay cool, the elements now pretty big, it's no longer just that high because it's got all the space here. Okay so we've got that in there, that looks good. Now what we need to do is we need to see we need to add a line down here, I just want to take care of that now. We want to add in this line down here. It's an F2F2F2 this time not ccc.

So we're going to put in a separate div for that. Let's go to our code and let's get out of page title and let's put under here let's just put bottom border okay, and let's say border bottom we'll just copy this entire thing and I'll just replace the CCC with F2F2F2. I'm surprised you can't just say #F2 but you can't. Okay so that's what we're doing.

purchase-history.scss

&__page-title {
    border-bottom: 1px solid #CCC;
}
&__border-bottom {
    border-bottom: 1px solid #F2F2F2;
}

Now, we need to actually define this as a div in our purchase history, let's go to purchaseHistory.js and let's put a line down here or a div and let's say className is purchase-history__border-bottom.

purchaseHistory.js

return (
    <div className='purchase-history'>
        <PageTitle className='purchase-history__page-title' title='Purchase History'/>
        <Purchases className='purchase-history__purchases'/>
        <PurchaseDetail className='purchase-history__detail'/>
        <div className='purchase-history__border-bottom'></div>
    </div>
)

Now this might look a little weird at first, let's go look at it in the browser. Okay so it looks like you can't see it, maybe it's there but this monitor might have different color, I'm not sure, it looks like I can't see it. Purchase history border bottom, oh we called it border bottom, call it bottom-border, okay there we go, now it should appear. Okay, you'll see that it's really really subtle but you can see it.

Okay so look at this and then look at our design okay it looks very similar in that we have this title, and we have these two lines, we just don't have the content in there. But we've set up our components for this okay, we have even the class names in our PurchaseHistory and then we have PurchaseDetail and we have purchases.

So this is all set up, all you need to do now is create a couple action creators that will mimic fetching this data from a server and then we need to map over it in here and display it. Then what we need to do is make it so when we click on one of these items we set the selected item okay, the detail item, and then in PurchaseDetail we just need to map over that, or not map over it but extract the props out of it.

Okay, we need to extract the data out of that and display it in a nice little grid. So let's go ahead and develop a couple of those actions in the next video. Let's go and commit our code.

Terminal

git status
git add .
git commit -m "setup purchase history child components and corresponding styles"

Resources

Source code