Alright add to cart, checkout, okay so we have our form here. So the goal here is to basically put in a few more components, let's start off with the... where is this? Let's start off with the products here.

So what I want to do is head over to our reviewForm.js right and we want to put this, not in our form okay, we want to put this inside of our review.js. But it wouldn't really matter, it's probably a better idea to make it part of the form so let's make it part of the form. Okay, so above the line let's say div and basically this is going to be where our component exists.

So let's make a component instead of using a div, let's go into order, let's create a new file and let's say reviewProducts.js, in here we'll import react and component from react and we'll say class review products extends Component okay, we'll render a div and we'll return that okay so let's return a div, and for the class name what we're going to do is basically what we've been doing in every single file we'll say class name is equal to we'll put some ticks here and put some braces around it, this is the worst syntax ever, it's so hard to type.

Anyway that's what we'll do, we'll say className and we'll say review-products then right here we'll say constant takes in a class name and that's equal to this.props and then down here we'll export default reviewProducts.

reviewProducts.js

import React, { Componet } from 'react';

class ReviewProducts extends Component {
    render() {
        const { className } = this.props;
        return (
            <div className={`${className} review-products`}>

            </div>
        )
    }
}

export default ReviewProducts;

Now the thing is in here we're going to basically display all of our products right. So it'd be a good idea to hook this up to redux right now so we can fetch it and put it in our mapStateToProps function right, so we can return it to our props. So let's go ahead and type out our mapStateToProps function, all right it takes in state of course and we'll say constant and we'll say current products because that's what they are is equal to state.user because the user has their own cart products right and then we'll return cart products.

And then let's make sure we use our import so let's say import connect from react redux. So really all this should be a review and pretty much just tedious code for you to write at this point since we've done this so many times okay, just go ahead and write this all out. And then at the bottom here we need to say review products is equal to connect and we'll pass in mapStateToProps and no actions, we don't need to use any actions here because we're fetching them in the review.js so it's going to be already fetched for us, okay, and then in here we'll say review products and we're set.

So now what we need to do is map over the cart products and display them. So what I want to do right now is not map it over to complexly, what we want to do is just render the title okay just to get started. So we'll say this.props.cartProducts.map and then we'll say prod and then we'll do that, and we'll just say... well we'll call this product because I don't want you to think production or something okay and we'll say H1 product.title okay we're good there. So get this all in, it's about 27 lines of code with spaces and this is everything we need for the reviewProduct component right now.

This is basically all we need for the review product component. Don't get me wrong though, we still need to type out the reviewProduct component. We need the order review product, the actual product component. Right now it's just an H1 and I'm also going to give this h1 a key of product._id.

reviewProducts.js

import React, { Componet } from 'react';

import { connect } from 'react-redux';

class ReviewProducts extends Component {
    render() {
        const { className } = this.props;
        return (
            <div className={`${className} review-products`}>
                {
                    this.props.cartProducts.map(product => {
                        <h1 key={product._id}>{product.thtle}</h1>
                    })
                }
            </div>
        )
    }
}

function mapStateToProps(state) {
    const { cartProducts } = state.user;
    return { cartProducts }
}

ReviewProducts = connect(mapStateToProps)(ReviewProducts);

export default ReviewProducts;

So hopefully this gave you a little bit of time to write it out as I was explaining that and typed in that id. So that should be good, let's go ahead and let's just ensure our application is still running, looks good to me.

Now let's use this product in our form okay, so we want to go in here and let's import it, okay so I'm going to say import ReviewProducts from ./reviewProducts. Now once I've imported that want I want to do is just kind of move things around a bit in here because our imports are kind of all over the place, let's pull that up, let's move history above form button and let's do that, okay, so I want to put all of our self-made components here at the bottom, then just other stuff that we have in the middle, and then we have our redux and react stuff up here on top, so we're good to go.

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';

import history from '../../history';

import { FormButton } from '../formFields';
import ReviewProducts from './reviewProducts';

All right let's go ahead and let's go down here and above the line we'll say ReviewProducts and give it a className of review-form__products and we'll close it that off okay, so that's all we need to do. Let's go ahead and let's go check it out in the browser and see what our application form looks like now. Okay looks like nothing, I'm just going to go to cart and hit check out, looks like nothing again let's go see if we have any errors. Okay, it looks like we have an object, we have one product that... this must be from a different console log which is why it's a good idea to remove console logs as you go.

Anyway, what we want to do is get content in here okay. Clearly we can't see anything but it's probably because we just don't have it on our grid, let's inspect our element and hover over our elements here and see if we can find it. So we have our form let's open up the form so form products you see it's right there it's pointing at the bottom and there's nothing there, that's because it's not on our grid.

So what we need to do is introduce that into our grid okay. So let's go into our application and let's head over to review.scss and what I want to do on this form here is I want to create something up here okay, so right before line, so the very first thing we want to put 1fr and we'll say products end and then we'll say products start before that okay so that will give us our products. Now let's go into our reviewForm.scss and let's place it now. So let's say products and we'll say grid row is products start to products end.

Okay, let's go check it out now, okay, still nothing. So what we need to do is declare a height. Or what we can do better yet is just go into review.scss and say instead of 1fr this needs to be like 400 pixels okay we'll see what that looks like. Okay you'll see we have our products there, but it's still not in the right place though for some reason.

Okay, so products start to products end, let's go back to reviewForm.scss and it's because we didn't put the s on products start, so put that back in there and let's see what it looks like. All right, you see we have our products in here now except for there is nothing there, it's just some space. So let's go into our reviewProducts.js and on this h1 we want to make sure we're returning it okay or it's not going to display.

Okay now let's come back into Chrome and we should see it, let's make sure it's fetching. Let's just mess around with it a little bit, it looks like it's not displaying still. Let's go ahead and go through our application right here in the JSX. All right, let's see review form products we've got h1's but it's not containing the title. It looks like it's all empty for some reason and that's probably because we don't have a title or something on that product.

And that's true because if you remember the cart product model contains only an ID, a quantity, and a product. So really what we need to be doing is saying product.product.title okay, and then we should rename this to CartProduct because you might get pretty confused with it saying product.product. So let's make sure it says cartProduct because those are two different models.

Okay let's go ahead and try this out now. Check out and you'll see we now have something in our order.

Okay, so we've created this component we're displaying what is in our cart, let's go ahead and hit back and add some products and see what happens. Okay, I'm going to go in and add ruby, okay that looks good. I'm going to hit graph database one more time and you'll see it increments instead of adding another one. Alright let's hit check out, and you'll see we have four products in here now.

So all we need to do now is build a component that contains all of these right here right. You just need to build this and throw in all this data and then finish off with this title up here okay, name, quantity,and price. So that's going to be pretty much the same exact grid.

So in the next video what we'll do is we will start building out the component to do this. So let's go a head and commit our code.

Terminal

git status
git add .
git commit -m "built order review products component"

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

Resources

Source code