Okay.
Our next task is to create the basket component.
So let's go to let's close all this stuff down.
And inside our basket folder let's create a new file and we'll call it basket page dot TSX.
This is going to be a react component this time.
So we'll use our snippet for the boilerplate the RFC.
And this gives us our function that we used to return JSX.
And we'll also update our route.
So we'll go to routes TSX.
And let's just copy the contact down in this case.
And we'll specify basket as the path.
And we'll use our basket page component so that we get taken to our new component.
We're going to use this with our shopping cart icon that we have in the navbar.
So our next stop is going to be the navbar dot TSX.
And let's see where we've got our shopping cart icon.
Then we're going to specify the icon button component to be a link that we get from React Router Dom.
So I'll say component here equals.
And then we're going to use the link component that we get from React Router Dom.
And because it's a link, we need to give it the two property.
And we'll just say in quotes forward slash baskets.
And if we take a look at our browser, we'll head back to our application.
And if we click on the shopping cart then we get taken to our basket page.
Excellent.
So let's head back to VS code and we'll go back to our basket page.
And we'll start to configure what we need inside here.
So we're going to go and get our basket from the API.
We don't have anything in our client browser yet for a cookie.
So we don't have a basket here.
What we did in postman doesn't come across to what we're doing inside our browser, but we will make
use of the use fetch basket query.
So I'll say const open curly brackets and then equals use fetch basket query.
And we will have inside here the data.
And we'll also make use of the Isloading property.
We'll check to see if we are is loading.
And we will return a div saying loading baskets.
Or in fact let's make that typography so that dark mode and light mode operate the same way as it changes
the text color.
And I'll just add that import from material and just add dot dot dot.
After that, we're going to have our loading indicator anyway that we centralized earlier on.
But this is just in addition to say what's going on as it's going on.
And below this we'll say if no data or not data, then we will return.
And again we'll use typography here and we'll give this one a variant of H3.
And we'll just specify your basket is empty.
And what we'll return in the short term is we'll just have a data and then the basket ID.
So when we do have a basket we'll see something.
But for now what we'd expect to see is your basket is empty.
So great.
That's what we're looking for right now.
And what we'll take a look at next is inside our catalog.
We've got this add to cart button.
We'll add the functionality so that we can indeed add an item into our basket.
And we'll take a look at that next.