So this should be pretty quick, we really only have one new component in here which is this product component which we already have all the data for. So really all we have to do is build this component and build this other component right so we've got the order review component and we got the order product component and then we just have to throw the data in and we're good.

So let's go ahead and let's head over to our application, and let's close all of our files so we can start fresh here. All right let's go ahead and let's head over into the bootstrap.js file and let's create a new route, and let's call this route order-review or let's say order/review. And then let's create a new component in our components directory and let's make a new folder and let's call it order.

Now let's create a new file inside of this directory called review.js. Okay, now let's go, and let's import React and component from react and let's say class review extends Component render, and we will return a div with a className of review, let's export the component and lets put in the page title okay.

review.js

import React, { Component } from 'react';

class Review extends Component {
    render() {
        return (
            <div className='review'>
asdfasdfasdf
            </div>
        )
    }
}

export default Review;

But before we put in the page title let's just make sure this is all working so we're going to put in some random text, I'm going to go into bootstrap.js and I'm going to import it so import review from ./components/orders/review.

bootstrap.js

import Review from './componets/order/review';

Okay cool, now let's go down here and replace this component with review. So we have order review component is review. Okay cool, so all I've done in this video so far is add this route add the import and build the component here in review.js okay.

Let's head over to Google Chrome and let's go to that route. Okay so from shop we don't really have a way to get to that component, so let's open up our cart and the idea is we want to be able to hit check out to go there. So let's go ahead and modify our checkout button to basically throw us over there. Let's go to ShopCart.js and in here we'll go to the cart checkout button which is in the cart content and in the cart footer.

Okay so let's go ahead and on this a tag what we need to do is say onClick is equal to and then let's pass in an arrow function that says history.push and we'll say /orders/review.

<a onClick={() => history.push('/order/review')} className='cart-footer__checkout'>

Okay, let's head up top and let's import history from '../../history';. Okay, that should navigate us over, let's go ahead and check it out. Hit check out and we're brought to order/review and we see our content.

Okay, a couple more things I want to do before I end the video, let's get rid of these links right, so we want to get rid of the links and then we want to give it a page title like this logging title here right, or this purchase history title and then what we want to do is we want to align it on our grid. So it's where the content is like on these components right.

So let's go ahead and let's start off by getting rid of the links. So to do that we have to go to our review.js and first get access to our actions so we need to import connect from react-redux and we need to import star actions from ../../actions. Let's head down here and let's say review is equal to connect we'll pass in null from mapStateToProps because we don't need that yet at least yet we don't. Let's pass in actions and let's bind it to review.

review.js

import React, { Component } from 'react';

import { connect } from 'react-redux';
import * as actions from '../../actions';

class Review extends Component {
    render() {
        return (
            <div className='review'>
asdfasdfasdf
            </div>
        )
    }
}

Review = connect(null, actions)(Review);

export default Review;

Okay, now we're set and we can set those links, so let's type out a componentDidMount method part of the React component lifecycle. So right as the component mounts, we want to say this.props.setHeaderLinks set it to nothing, this.props.setNavbarLinks set it to nothing.

review.js

class Review extends Component {

    componentDidMount() {
        this.props.setHeaderLInks([]);
        this.props.setNavbarLinks([]);
    }

Okay now we might need some headerLinks but let's just see if this is working then we'll reference our design and see what we need for the headerLinks, I don't think we need any though, okay, let's check it out. All right you'll see on order review we don't have the links now which is what we want.

Okay, I'm going to look at the design, it looks like we want the login, and that doesn't make any sense though because we're at the checkout and really the only way to be at the checkout is if you're logged in. So let's go ahead and leave it without it, all right. And if you really want it there then just get rid of setHeaderLinks and it will be back.

Okay so what we need to do now is add in this title, so let's go into our application, and let's import it, let's say import PageTitle from '../pageTitle';. Now what we'll do is get rid of this asdfasdf title here and we'll say PageTitle and we'll say className is review__page-title and the title content is order review.

review.js

<div className='review'>
    <PageTitle className='review__page-title' title='Order Review'/>
</div>

Okay, I think that's all we need. I'm going to check it in page title and see what our props are, yeah that's all we need, the className in the title. Okay, we're set let's go ahead and look at that and you'll see we have it in there now.

So really nice, easy to use component, just a couple lines and we got that already okay. Next thing I want to do is I want to place it on the grid, so in order to do this, we need to create a CSS file and do so. So let's go down here into style and let's create a new folder called order and a new file in order called review.scss. In here we'll say .review and we will say grid row is content start to content end, and grid column is start to end.

review.scss

.review {
    grid-row: content-s/content-e;
    grid-column: s/e;
}

Now what we need to do is import this into our main.scss file, so let's go down here to the bottom here and let's say review and let's say @import order/review that should be good.

main.scss

// REVIEW
@import 'order/review';

Let's go ahead and check this out, and you'll see it's aligned now the way it is on the rest of our components and the way it is on that design okay. So since that doesn't stretch into design we'll look at it like this. Okay, it looks really good. Obviously there's going to be a few differences but it's whatever right.

Okay so that's how we do that. Let's go ahead and in the next video what I want to do is actually show you a way we can kind of clean up our text a bit, because you might notice that it looks a little different throughout our application and there's a property that we need to add in that you might not have ever thought of, I know I didn't when I discovered it.

So I want to show you how to do that just because it's such a clear example right here that it's different right. Because we're hopping over and it's just completely different, not completely but there's inconsistencies okay. So what I want to do is show you how we can basically smooth the text okay, so let's go ahead and commit our code, and then in the next video we'll do that and then we'll continue on with building this component.

Terminal

git status
git add .
git commit -m "setup order review component and added page title component"

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

Resources

Source code