Okay, so now we're going to create our cart screen When we hit Add to Cart, it takes us to the cart
route, but we don't have a screen hooked up.
So let's go into our front end and go into screens and we're going to call this cart screen dot JS X
and create a react component.
And then we're just going to bring in a couple things for now.
So let's say import.
This is going to be from React router dom.
And what I want to bring in from here is link and the use navigate hook.
Okay.
And then.
Let's import.
A few things from React Bootstrap.
So from here, I'm going to bring in, let's say, row.
And call.
We're going to want a list group.
We're going to want an image.
What else?
Form.
And let's see.
So form then we have button.
And card.
I think that's all we need for now.
All right.
And then let's let's bring in the trash icon, because we're going to be able to remove stuff from the
cart.
So I'm going to import a trash.
And for some reason, auto import isn't working right.
But we're going to bring that in from React icons and then slash for for font.
Awesome.
And then also, let's bring in our message component that we created.
So let's see.
Message.
Yeah, that's not coming up either for some reason.
So message is going to be from dot, dot slash components, slash and message.
All right.
Now, inside our components, inside the function here, let's initialize our navigate.
So we'll say const, navigate equals.
Use navigate.
And you know what?
Let's also bring in our use dispatch and use selector from React Redux, because we're going to need
those two to to get our state and to interact with our state actions.
So let's also import, we'll say use dispatch and use selector.
Okay.
And that's going to be from React Redux.
Okay, so we have navigate and then we'll also let's also do use dispatch.
So call this dispatch.
And I guess.
I guess for now, we'll just.
We'll just leave it like this just so we can have a root.
So let's go into our index.js in the front end.
And we're going to bring in our cart screen, so we'll copy that down and change this to cart.
This one here.
Change that.
To cart.
And we're going to add this right here.
So cart screen and the route itself is just going to be slash cart.
Let's see.
What do we got?
Okay, that's fine.
So if I come over here now and I click on my cart link, we should see cart screen.
All right.
We can close that index.js up.
So let's figure out what we want to do next.
We have our items in our in local storage and we have it in the Redux state.
So in order to get those cart items, we're going to use our use selector.
So let's go, right?
Um, let's see.
We'll go right under here and let's get our cart state.
So we'll say const and call this cart and then we're going to use use selector and we're going to pass
in here a function.
And that takes in our state.
And we want the state dot cart just like we did in the header to get the cart items.
Then I'm going to take.
The cart items.
I'm going to destructure say cart items and we want to get that from our cart state.
So now we should have access to those.
Now let's go.
Down into our output here.
So where we have the return and let's get rid of that text and what we'll put here is a wrapper is a
row because we're going to have a column that'll have our cart items.
So we're going to return a row and then inside that we'll have a call.
Let's say MD equals eight.
Okay, so we'll have this.
This will be responsive.
And then for the H one.
I'm just going to put a style attribute in here style prop and just set the margin bottom.
To, let's say, 20 pixels.
And then inside the H one, we'll just say shopping cart.
Okay.
And you can save and take a look now under the H one.
Basically, if the cart is item, I just want to say your cart is empty and then a link to go back.
So let's put some curly braces in here and we'll say cart items, which is an array of items in our
cart and we'll say if the length is equal to zero, then let's open up some parentheses else, let's
open up some parentheses.
And in the first one, so if it is equal to zero, then we're going to have our message component,
which we just brought in.
So we'll say message.
And let's say your cart.
Your cart is empty.
And then we'll just have a link after that.
So we already brought in link so we can say link to.
Let's go to the home page and we'll say, go back.
Okay.
Else.
If there is something in the cart, then let's just add our list group wrapper element and I'm going
to just give it a variant of flush.
So variant set that to flush.
And then just for now, we'll just say items.
So let's save and it says items because we do have something in our cart.
All right.
And just to test it out, if I go to my application tab, remember, we can empty our cart by doing
this.
So if I get rid of it and then reload, now it says your cart is empty and we have a go back button.
Okay, so that's working how it should if I add something to the cart.
Then it just says items for now.
So we have our route.
We have our card screen showing, although it doesn't show much.
So let's let's go ahead and just add the rest of our UI here for the shopping cart and we can close
up that sidebar for now.
So basically we're working within this list group so we can get rid of the text of items and let's map
through the cart items.
So we'll say cart items, dot map.
And inside map.
We're going to have our arrow and we want this just to point to some parentheses.
So what do we want to show per item?
And we'll call each one item.
And let's start off with a wrapped list group item so we can basically take our list group and say dot
item and just add a key because this is the wrapper for our map, our loop.
So for the key, let's say item and we'll use dot underscore ID.
Okay, so that's our list group item.
Now in here, we're going to have another row.
So let's do that and we're going to have a few columns.
So first one, let's say call and let's say MD equals two.
So on medium screens, this will take up to.
And this is this is going to be the image.
So let's use our image and let's say source.
In the source for this is just going to be whatever the item dot image is.
Okay.
And then we'll give it an alt of the name.
So item dot name.
And let's also make it fluid and let's make it rounded.
Okay, we can test that.
All right, So we have our item.
Let's add another item just so we can see what happens when we have multiple items.
So there's the next one.
So that's the first column in the row.
Now we're going to add another one.
So this call is going to be three on medium screens and up.
So let's say call MD three.
And in here we're going to have, let's say, a link to.
Now this is going to go to the actual product item page.
So that's going to be some backticks.
And then slash product slash and then whatever the ID is, which we can get with item dot underscore
ID.
Okay.
And then let's close that link and we just want the item name.
So item dot name.
Check it out.
Okay.
There we go.
And then we'll have another column with the price.
So let's say call and this one is going to be on medium screens and up.
It's going to take up to.
Uh, yeah.
So two.
And then this will be the price.
I'm going to put a money sign in front of it.
So let's say item dot price.
Okay, good.
We have the price.
Now we're going to have the the quantity, because I want to be able to change the quantity from here
for each one.
So let's create another column.
And for this one, we'll do MD.
MD two as well.
Okay.
And then I'm just going to grab from, let's see, where did we have this on the product screen?
Where we have our quantity picker.
So let's see.
Form.
Yeah.
So this form right here that has this expression, I'm going to grab that.
So from this form control.
Right.
So form control, that whole thing.
I'm just going to I'm just going to copy that and then I'm going to paste that in here.
And I think.
Let's see.
Do we want to change anything here?
So the value so the value is actually going to be the item dot quantity.
And then.
Let's see.
We're not going to do the on change just yet, so let's actually get rid of that for just for now.
Or we can just have an empty function for now.
So we'll just.
Yeah, we'll just do that for now.
And then this is going to be the same because remember, we just want a number for, for however many
is in stock.
And then the option, let's see, key X plus one because it's it's a zero based array.
So we're adding one.
Yeah, that should all be good.
So let's save that and see.
Product is not defined.
Okay.
So where we have product, we want to change that to item.
All right.
So now we have and you can see it's only going to have as many that is in stock.
So we'll just leave it like that for now.
And then let's create one more column for the button to delete.
So under the last call.
Let's say call and let's say MD set that to two.
And this is where we want to have our button and we're going to give it a type of button and then a
variant.
Of light, and then that button is going to surround the trash icon so far, trash.
Let's check it out.
Okay.
So I think that looks pretty good.
Now we want to work on this column, right?
So if we look at the.
The return.
Here we have this this column is is this whole thing.
Right?
It takes up eight, eight slices of the 12.
So let's go under that which ends right here and let's create a new column and let's set that 1 to 4.
Right?
Because eight and four is 12.
So this will take up the rest of the space and we're going to want a card here.
And did I bring in card?
Yes, I did.
All right.
So this will be wrapped in a car.
And this is basically where we're going to have our, you know, our total and then our proceed to checkout
and so on.
So I'm going to have a list group, let's say list group.
We'll do a variant of flush, not flush, flush.
Okay, so we have our list group and then let's have a list group dot item.
And inside that, let's have an H two and this will be the subtotal.
So let's say subtotal.
And the way we'll do this is in parentheses.
We're going to have our cart items and we're going to use reduce.
So cart items and let's say dot reduce.
And that's going to take in a function with an accumulator and the item or the current item.
And then all we want to do is take that accumulator and add the item quantity.
So item dot qty and pass in zero as the default for the accumulator.
And then after the parentheses, we'll just put the word items.
So let's see if that works.
Okay, so we get subtotal two items right now under the age.
And we want the price here.
So what we'll do is we'll have a money sign and then let's once again reduce or add reduce to the cart
items.
So reduce.
And we're going to do the same thing where we pass in accumulator and.
The current item.
And then we want to take the accumulator, we want to add the item dot quantity, but we want to get
the price this time, not just the total numbers.
So we're going to multiply that by item dot price and then set zero as the default.
And then we want two decimal places.
So after this parentheses, let's say two fixed and pass in two here.
So we can save that and check it out.
So we get 979.
Which looks to be right.
Okay.
And let's just test if we do add another quantity, like let's say we add another mouse here.
So if I do that.
Actually.
Wait a minute.
I want to choose two for this.
So if I do that, I get two here, and that updates the price.
Okay, Now let's see.
Under the price we're going to have or under the list group item, we're going to have another list
group item.
So list group dot item.
And this is where we want our checkout or proceed to checkout button.
So let's add button.
And we'll say proceed.
To check out.
And the button.
We're just going to give this a couple things here.
So let's say type equals button.
And then let's add a class name.
Of BTN Dash Block.
And I want it to be disabled.
If there's if there's nothing if there's no car items.
So we can do that by setting the disabled attribute to an expression of cart items dot length.
If that is equal to zero, then we want this to be disabled.
So let's save that.
And now we have our proceed to checkout.
Okay.
If we click that, that's not going to do anything at the moment.
We'll handle that later.
But I just want to get everything displayed here.
Now the quantity will display, right?
If we go somewhere else, like if we go to the page and we change the quantity.
If I change it to three.
Then it shows here.
But if I change it here to two, you can see it's not even changing.
So what I want to happen is when I select a quantity from here, I want it to actually call add to cart
and then change the quantity to whatever I choose.
So the way that we can do that is by just adding on to where we have our quantity control.
So right here.
Let's see.
So on the form control element, where we have the on change.
Let's let's have this call.
Let's say Add.
Add to cart handler.
All right.
And then that's going to take in.
The item and it's going to take in whatever the value is which we can get with e dot target dot value.
But I just want to make sure that that's a number.
So I'm going to wrap it in number.
So e dot target dot value.
All right.
Now we have to create this add to cart handler.
So let's go up here.
And we'll put this right here.
Let's say const add to cart handler.
Okay.
Actually, I'm sorry.
It's not going to take in the event.
What this is going to take in is going to be the item or we'll say product and then the quantity.
So Q, T, and I'm going to make this async.
And what I want to do is dispatch the add to cart.
Remember in our reducer.
Or I should say in our slice.
Let's see.
Cart, slice.
We have this add to cart.
So I want to use that now in order to use that.
We have to bring it in.
So let's go back to our cart screen and let's say import.
Add to cart and that's going to be from our cart slice.
All right.
And then let's see.
Back in our add to cart handler.
We already have our dispatch.
Okay.
We use to use dispatch hook.
So we're now able to dispatch our action, our add to cart.
So we're going to do that right here, let's say dispatch and we're going to pass in here add to Cart.
And we're just going to pass in an object where we spread across the product that was passed in and
pass in the quantity.
And I think that should do it.
Let's save it.
Okay.
And then now if I change this, let's say to.
See how that changed to two now and it changed my total items to three.
If I change this to one changes my total items to one.
So I'm changing the state.
Right.
And we can see that down here.
If I open up, let's see, let's go to our redux Dev Tools.
And I want to see I want to be able to see this.
So if we look at the cart.
We look at the price right there.
If I change the quantity, let's go back to two.
You can see that the price changed.
Right, if you look at the cart items.
So we should see the quantity here.
Right there.
Quantity too.
If I change this to four it updates in the state.
So that's exactly what we want to happen.
Okay.
Now the next thing that I want to do in the last thing for now when it comes to the card is I want to
be able to remove the item.
So we're going to do that in the next video.