So one thing I want to fix before we go on is I want to make the scroll right, we don't want it to be going off into way off, right. We want to be able to scroll it like this right on a scale. Now this is a really easy fix, and then it will introduce another problem which is just a tiny front end little bug right, that we don't even need to fix but we're going to, because I want to show you.

So let's go in here and let's say in shop-cart.scss go to .cart-content around line 44. Let's go into products right and grid row, it's supposed to only go about there, right. But it's kind of extending past the 675 pixels so what we need to do is say overflow-y has a value of scroll okay, really simple.

shop-cart.scss

&__products {
    grid-column: s/e;
    grid-row: products-s/products-e;
    display: grid;
    overflow-y: scroll;
}

And now what we can do is go to our app and it's all fixed and now we can scroll. Now make sure you scroll on the content here because, okay I guess you can scroll on the side here too. But yeah, basically it works, it scrolls and it looks good, but now you'll see it kind of looks ugly up here because it just cuts off. So what I want to do is go into our code and I want to go to the title and get rid of the margin-bottom 50 pixels. And I want to go into products and I want to say padding-top is 50 pixels.

Okay, so when we scroll it will still go up there because it's still part of it it's just going to start the content 50 pixels down. So let's see what this like. Okay, I guess it has the same effect, I thought it would allow us to scroll, I'm going to comment that out and see what happens. Obviously going to start it up here but oh how strange that margin's still there, interesting.

Okay, what I'm going to do is, oh it's because we made this 80 pixels obviously. Let's make it 30 pixels again and let's save that and now it's going to start very close to it or over in a bit. See that?

So what we need to do is go in here and we need to say it's first 35 pixels, the title. Okay, it'll push it down a bit, let's make it 40 pixels. Okay, so the titles going to be 40 pixels high. Now what we need to do is we need to give it a padding. So let's say that products has a padding top of 50 pixels. Now it's going to start it down but you'll notice when we scroll it goes up there still, so it looks good.

So that's what I wanted to fix before we go on. So now what we need to do is we need to modify this content to actually take in a model. So what we're going to do is we're going to have this fetch this data from the server because it's going to belong to the user.

So what we need to do is go into our application close out shop-cart.scss and in cart ShopCart we have these products right, what we want to do is fetch data and throw data in there. So let's go ahead and introduce another action and to access that action we first need to connect our component to our store. So let's go up here and let import in brackets we're going to say connect from react-redux and then what we will say is import star as actions from ../../actions.

Then at the bottom after we've imported these two lines we'll go down here and we'll say ShopCart the component class is equal to connect and then we'll pass in mapStateToProps because we're going to be using data from our store and we're going to pass in actions so we have access to our actions. Then we're going to bind it to ShopCart and we're going to go verify that this is still running in our browser and that we didn't have any errors and it looks like we have an error, and that's because we didn't write out our mapStateToProps function.

So let's say function mapStateToProps state and we will return state for now. So I just added in these lines to the function and this connect statement, okay, and then I added in these two imports at the top end we should be good to go.

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

function mapStateToProps(state) {
    return (
        state
    )
}

ShopCart = connect(mapStateToProps, actions)(ShopCart);

So let's go ahead and see what it looks like in Chrome again. All right still the same thing, these are just the key errors, don't worry about that. Good thing is it's working, we now have access to our actions so we can actually fetch our data correctly.

So let's go ahead and first let's try fetching our products and then I'll show you what we need to change. We need to introduce another action right because in user.js we have fetch user purchases right, and that's not what we're referring to. In shop.js we have fetch shop products okay. What we need is another model that will allow us to fetch user cart products, fetch cart products okay. Because it's going to contain a product, okay, the object is going to look something like this.

Let me just show you real quick. Okay so imagine that this is our fetch cart products, we have payload and it's going to contain an object which is going to contain a product and that is going to have the product ID. Okay that product ID might be graph database right, so it might be one. So very similar to what we're doing with belongs to okay. So we might have one, okay, it's going to have 1 id so we have the product is id 1, okay so it's graph database, that's the product we're dealing with.

And then we have an amount or a quantity, and that quantity is going to be like okay they want four of this one sticker, okay. And that's going to be over and over again with different products right. So like you might have javascript in the browser one time okay. So let's reference or design.

Right, so web application development in rails. It contains the ID to that product, that shop product and then the amount of how many of that shop product that you actually want on your account. And this fetch cart products is going to be data pulled from this specific user okay. Now this is more backend stuff but I'm trying to explain it the best I can so you understand how it works on a front end, even though we're not going to dive into the back end in this react course right, that's in the python side of things which I'm making a course on that as well.

So let's go ahead and what we're going to do when we get to that is we're not going to be using IDs, at least for this course, when we get into the back end we use IDs because what you do on the back end is you basically convert that ID to the object on the back end. So really what the user is going to be receiving is the entire object right, what the client side is receiving, the react application from the database is the entire product.

So really what we're going to do is we're going to pass in the whole object and such, right, but we even could just implement a way to filter it and then like say okay give this back to us, all right, let's say fetch a product with this id. Now we could do that, so I'm training to think if we should right, we could fetch the IDs right and then fill them up and fetch it but we'll just do it this way.

All right so let's get rid of this payload, I just wanted to explain that and let's keep our original payload. The problem with doing this is that we get this id, title, description, price and belongs to, but we don't get any quantity we can't keep track of the quantity right. And then we don't want to mess with these because these are just the product in the database, so it's just saying hey this is the product, it's like a blueprint of the product it's not an actual one that you're going to purchase right.

So let's go ahead and introduce an action into user that behaves very similar to fetch shop products. So let's copy this entire fetch shop products call right, copy that in our shop.js in our actions and head over to user.js in actions. And what we're going to do is we are going to paste this in right below set purchase detail.

All right, now what we're going to do is modify this obviously to the way we want, the way I just explained it, so we have all of our deals. Now the user is not every time just going to be purchasing random ones right. And I'm going to show you how we can modify this later on okay, so we can add more to the cart or move it in our front end here. For now I'm going to remove all of them except for two right. So all we have is graph database and JavaScript in the browser.

Next thing I'm going to do is cut this out and I'm going to say product and paste it back in as an object. Then below that I'm going to say quantity is 2 and then I'm going to do the same thing for graph database here. I'm going to say product paste it in and then I'm going to put a comma after it and say quantity is one, all right.

Now again this is all slightly different than it actually works on the back end. But it's the only way to really show you how it works on the front end without showing you how to do it on the backend so this is the best way we can go about it in the front end course without actually hitting an API. Okay so we're there with that, now what we want to do is introduce another type okay and this is going to be SET_CART_PRODUCTS okay.

And again just familiarize yourself with the idea that this is in our user okay, these cart products belong to the user so you can think of the user as having that right. Your user is going to have a name, your user is going to have a password, your user is going to have an address, your user is also going to have a set of cart products, your user is going to have a cart of their own.

The reason we do that is because if you sign out of your account and you sign back in you want to still see what's in your heart, a lot of websites do that. Also when you close your browser and you come back and you're still signed you want to see your products and those are going to be stored in your account on your back end even if you haven't purchased them yet.

Okay let's rename this function to setCartProducts and then let's introduce this type into this import here.

import {
    SET_USER_PURCHASES,
    SET_PURCHASE_DETAIL,
    SET_CART_PRODUCTS
} from './types';

And let's go into types.js and let's export it. So let's go up to user, and let's put a comment but with no space and let's say user cart, I guess we can put a space because we're saying user and then what we're going to say is export constant and then paste SET_CART_PRODUCTS in there, and then say is equal to SET_CART_PRODUCTS.

// USER CART
export const SET_CART_PRODUCTS = 'SET_CART_PRODUCTS';

Okay, now what we're going to do is come out of types and we're importing it into our user.js and we're using it in setCartProducts. Now what we're going to do is we are going to rename this setCartProducts to fetchCartProducts, okay. We're just calling the type SET_CART_PRODUCTS because we're setting them but we're fetching them from a database right theoretically.

Okay, what we're going to want to do now is we are going to want to actually export this function in our index.js in actions. Okay, so go into index.js in our actions, import it from user and export it down here, it doesn't matter where you put it in the export but I'm obviously going to line it up with the way we're importing it and keep it organized.

Okay, a lot of stuff to take in right now but we are just going slowly and we'll get it done okay. All right head over to our reducers and go into userReducer.js, in user reducer we're currently handling SET_USER_PURCHASE and SET_PURCHASE_DETAIL. Okay, so what we wanted to do is we want to introduce another action up here and we want to say case SET_CART_PRODUCTS. Okay now make sure you include this in the import from our actions/types in our reducer here.

userReducer.js

import {
    SET_USER_PURCHASE,
    SET_PURCHASE_DETAIL,
    SET_CART_PRODUCTS
} from '../actions/types';

export default function(state = INITAL_STATE, action) {
    switch (action.type) {
        case SET_CART_PRODUCTS:

Now in here you want to return and let's say ...state and then let's introduce another piece of data into our store here and let's say cart products. Okay and in cartProducts we are going to fill that with action.payload which are our cart products back in user.js fetchCartProducts, so were going to fill it with this payload here. Okay, these two objects are the product and quantity belonging to each.

Okay, let's go into userReducer.js and let's introduce this into our initial state because we currently don't have it in here. Let's say cartProducts is empty. Okay, that's what we want but a comma there to. Okay, so we're all set there, now what we need to do is verify everything's working and then try fetching them and setting them. So let's got to Chrome, go to our browser and everything's working properly obviously, except for some of these key errors that we've discussed a few times. I just want to make it clear that these are supposed to be here or at least they are here and it doesn't matter yet.

Okay so now what we need to do is go into our application, let's go into shopCart.js and in state we need to get this data out. So let's see what it looks like in redux dev tools, so let's go to Chrome let's open up the dev tools to the left, it opens up our tree here and you'll see now that the user has cart products.

But we haven't actually set it, so we need to actually fetch it, the reason it's not setting is because we're never fetching it. So let's go into our code and what we need to do is say okay ShopCart, when that mounts we want to fetch our cart products, so let's say this.props.fetchCartProducts. Okay that should work, let's go ahead and look in our component tree in redux dev tools and see if they're there. All right, you'll see now that we have two cart products in our user.cartProducts which is exactly what we want.

They're referencing the product and they have a quantity of 2, and a quantity of 1.

So let's go ahead and let's now pull this out of our mapStateToProps, so let's go into vs code go down here and we want to say constant and in braces let's say cartProducts is equal to state.user, so we're going to pull that out of the user reducer, and then were simply going to return it. Okay, now we have access to it in our props so we can pass it into our cart content. So let's just verify that this is here by console.logging our cart products. So it's going to display that it's empty at first because it's going to fetch it and then it'll display that they're there.

So let's go into our application in the browser and you'll see above all these errors, or somewhere in here, you'll find that it's logging them okay. We have our products, and it has the product and the quantity for each okay.

Now, what we need to do is take these and we need to populate this with our data, and we've already set it up to take in a product and a quantity okay, so it should be really easy. We need to go into our code and we need to basically just replace products here with this.props.cartProducts okay. Save that and let's go into our application in the browser and see what it looks like. Okay, it works great, except for we still have this error, except for it's a little bit different it's saying "hey you can't put an object in here." Okay, so we need or it has the same id right.

So we need to go in vs code and we need to simply go up here to CartContent and say on this CartProduct that we want the key to be product._id okay, we want to take the id out of our product okay. And right now we're saying that this whole thing is a product so we don't really have an ID. So let's just introduce an id into each of these okay, and we could use the id of the product, but I mean even this model will have an ID in the backend. So we want to introduce an id into each of these okay, so put an id into these, luckily we only have two, so we have zero and 1 on these.

Now if you go to our application that error is gone because it has an id, it's taking that id and putting it as the key. Okay so let's go back into shopCart.js and the next step is actually mapping all this data into our CartProduct. Okay, so we fetched our cartProducts we're throwing them into our CartContent component in our ShopCart component. And then it is mapping over them and displaying however many we have and it's throwing in the key for each one of those. So we should only see two on count, and we should see two products.

Okay so let's look at that one more time you'll see we only have 2 products and it says cart 2.

All right so let's go ahead and commit our code. And then let's hop into putting that data within these components effectively. So let's go to vs code.

Terminal

git status
git add .
git commit -m "setup cartproduct model and action creator to fetch and set user cart products"

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

Resources

Source code