Okay, so we've confirmed that we can get our basket back from our API.
And let's just double check the Redux dev tools again.
Actually, thinking about it, make sure that our component states or our global state is what we'd
expect it to be.
So I'll head back to Redux Dev Tools, and if we take a look and just click on the last request, we
can take a look at our basket API inside the queries, inside the fetch baskets and inside the data.
Then we can see that we've got our basket ID, and we've got the items inside that basket that we can
use to display the contents of our basket on this page.
Perfect.
So now we've confirmed that let's go back to VS code and start thinking about styling our basket page.
And I'll close the others inside here.
So we're going to display our basket items in a grid.
So I'll remove what we currently have.
In the return statement I'll open left angle brackets and then I'll specify grid two.
We need for this And we'll give the grid to a container property and we'll give it spacing equal to
two.
In this case.
And then below our grid two we add another grid two.
And we'll give this a size.
And this is going to take up two thirds of the available space.
So we'll give it a size of eight.
And inside here we're going to loop over our basket items.
So we'll specify data I dot items and then we'll use the map function.
And open parentheses will specify item at the arrow.
Open parentheses.
And then each item in here is going to effectively have its own basket item.
So I'll specify basket item which is a component we'll create soon but we don't have yet.
And we're going to pass down to this.
And I'll just call it item item.
And we'll give it a key equal to item dot product ID and we'll make it self-closing.
So we just need to create the list component.
And inside the basket folder I'll say new file.
And we'll call this basket item dot TSX.
And we'll use RFC to create the boilerplate.
And we'll populate what we need inside this component.
So first of all we're passing down our item our basket item to this component.
We need to add some props to type for props inside here.
And we'll say type props equals open curly brackets.
And we'll say item is of type.
And what did we call the basket item in our type.
We just called it item in fact okay.
So this is going to be a type of item okay.
And then we'll specify and destructure the props inside here.
So I'll say item and props.
And let's populate this.
Now we've got a bunch of material by components inside here for the styling.
So it's going to be a bit of typing that we need to do here to lay out our content in our page.
But first of all, let's just bring in the import for the basket item so that we can check things as
we go along inside our basket page and take a look at what we're doing for the basket item.
So we'll put each basket item in a paper component, and we'll give the paper an SE property and open
double curly brackets.
And we'll give each basket item a height of 140.
We'll give it a border radius of three so that we can round the corners.
We'll use Display Flex for the content inside.
We'll use justify content and say space between and align items of center and margin bottom of two between
each basket item and inside the paper.
Then let's give some space inside here we'll be using an outer box to control the styling of this component
or what's inside here.
And we'll use Display Flex again.
And we'll say align items and make that center.
Inside this box we'll go another box that's really just going to contain the product image.
So I'll just expand this.
And inside the right angle bracket there I'll specify the component for this one to be image.
Just a normal HTML image tag.
We'll specify the source to be the item dot picture URL.
We'll give it an alt tag equal to item again of well item dot name in this case.
And then we'll use the SE property to give our image a bit of styling.
So we want the width here to be 100, the height to be 100 as well.
We'll just go for square images.
But we'll use the object fit CSS property.
So even if it's not a square image, then it's going to be a square image and it will cover 100 by 100.
In our component we'll also use a border radius here of and we'll just put four pixels inside here.
And we'll have margin rights.
And we'll set that to eight.
And we'll have margin left which I could have used.
Mr..
I guess as four.
In fact, we can use margin.
Right.
Or we can shorthand that to Mr..
I'll just use Mr..
There and let's see, I've got the closing tag for the box here for the image, but actually, because
it's an image, we don't need a closing tag layer.
We can just make this self-closing by using the forward slash there.
So below this box we'll need another box.
And we'll give this display of flex.
We'll have a flex direction of column.
And we'll have the gap equal to one.
And in fact, let's just check our progress and see how we're doing.
So we've got our paper with the item image that looks okay and we've got our little rounded corners.
And over here on the left hand side we're going to have our basket items.
And on the right hand side is going to go our order summary in this section.
So we'll get the totals and things like that on the right hand side.
So inside this box then we'll first of all have typography.
And we'll give it a variance of H6.
And we'll specify the item name inside here.
And this just makes sure this is lined up correctly.
Sure that's fine.
And then below this typography we'll have another box.
And we'll use Display Flex once again.
And we'll use the align items of center.
And we'll use gap equal to three.
And then we'll have a couple of typography properties inside here to display the price and the quantity.
So I'll bring that down and give that an SE property.
And we'll just use font size and set this to 1.1 REM.
And inside this one we'll display our basket price here.
And we still don't have a helper function for this.
But I'll just specify the item dot price and divide it by 100.
And then we'll use the two fixed and specify two.
And then to the right of the curly brackets we'll use x and then item dot quantity.
And then let's just copy this one down for convenience.
And this one's going to be the subtotal if you like of the order total of the quantity times the price
here.
So we'll after the divide by 100 we'll multiply it by item dot Quantity.
Let's add a space there and we don't need the x item quantity.
So if we go take a look then we can see that we've got our price of the item times one.
And that gives us the price there.
And let's give the second one a bit of color in the typography.
And I'll just say color equals primary.
And below this box where we've got the pricing information we're going to add a grid or grid two in
this case.
And we'll give it the container and we'll give it spacing equal to one.
And we'll have align items and center.
And we'll have some buttons inside here so that the user can increase the quantity or decrease the quantity
or remove the item.
So we'll have a button.
In fact we'll make it an icon button because it's just going to have an icon inside it and inside the
icon button we'll have the remove icon, which we get from Mui icons material, and we'll give the icon
button a color, and we'll set this one to error so it's red.
We'll give it a size equal to small, and we'll give it the SE property and say border colon one and
border radius of one.
And we'll give it min width property of zero.
And let's just see how that's looking okay.
That's fine.
That's what we're looking for here a little button we can click on to minus the quantity or reduce the
quantity.
We'll have another icon button below this to add.
So I'll change remove and say add for this one which we get from Material Icons.
And the color for this one will set to success.
And in between these two buttons we'll will add typography, and we'll give this a variance equal to
H6.
And inside here can go the item dot quantity.
And if we take a look great we can see the number inside there.
And the other thing that I'd like to add to our basket items is to have an X on the top right here,
so that we can remove the entire item from a basket.
Even if there's ten of these, we can click one button to remove the whole thing from our basket as
well.
So inside here, below the or just above the paper we'll have another button.
So I'll just add the or the icon button I should say another icon button here.
And let's just use the same properties here.
I'll just copy this and paste it in here.
So small icon button with the same SE properties.
And we'll make this, or we'll give this a color equal to error as well, because it's going to be for
removing.
And in this one we'll use the close icon.
And we'll also give this an additional property.
And because we're inside a flex container at this point we can use align Self and set this to start
so that it should appear in the top right of this as well.
So we'll be able to click this button to remove the icons.
And maybe we should give this a bit of margin on the right and the top just to move it away from the
edge there.
So let's do that as well.
And we're getting quite busy in this property.
So let's just rearrange things slightly so I don't go too far off the edge of the screen, which is
always quite difficult when dealing with significant components inside a component.
And we'll just give it margin rights of one and margin top of one.
And I just need a comma there.
And let's go take a look.
And sure that's a bit more like it.
So now we've got our basket items.
Marvelous.
And supposing I go back to the catalog and I pick a different product and I add let's add a hat to the
cart.
That should have worked.
No problem.
And if I go back to the shopping cart, where's my hat?
It doesn't exist inside the basket and that's no good.
But what's going on here is react query is doing its job and caching things, because in order to go
and get the basket, we've made the same request to our API, but it's not showing up here.
We will get the new item if I refresh the page and we can see it inside there.
But what I would like to happen, of course, is when I do add something new to the basket and then
I go to look at the basket.
I would like to see it on this page without needing to refresh.
So we're going to take a look at how we deal with that using react query.
Next.