Okay, so time to look at this.
Add to cart button and well we'll make it function how you would probably expect it's going to function.
It's going to add a product into our basket.
So back to the code and we'll go back first of all to our basket API because we do need to export the
mutation.
So if we add a comma and then say use add basket item mutation, this is what we're going to use to
update our basket of course.
So where we're going to use this is in our product card.
So let's next open up the product card where we have the button the add to cart button.
And just at the top of this component let's bring in the use Add basket item mutation.
So to use this the way that we use these mutation hooks is we say const.
Then open up square brackets.
And then we give our function a name.
This can be anything we want but I'm going to call it add basket item.
Just a name that makes sense to us.
And a second parameter inside.
Here we do this.
Inside an object we have access to is loading.
And then we can use the use add basket item mutation inside here.
So this should be available.
And if I do is then we can see we've got all of the different options.
If there's an error we can use is error although we're handling that centrally.
So the only one that we're really interested in is the is loading option.
So we can do something with our button whilst loading is taking place.
And then we can head down to our button itself.
And we can give this the onclick action.
So I'll say onclick.
And we'll need to do this in parentheses because we do need to pass this an argument.
And we'll add the arrow.
And then we'll use our ad basket item method and inside parentheses.
This takes an argument, but it's an object.
So we can see the argument there.
We need to specify the product id and the quantity inside curly brackets, so that this gets passed
as an object to our query.
So I'll open up curly brackets and we'll specify the product ID colon is going to be the product id.id
inside here.
And we're also going to specify the quantity.
And because this is a button inside our product card they can only add one item at any one time.
So we'll specify the quantity is one there.
And let's just move things down because I'm going off the edge.
So let's tidy things up a little inside here okay.
That will be fine.
Now what do we do for loading in this button.
Well typically most component frameworks do give us a loading option or a loading property.
And we do see things like onload and stuff like that here, but we don't actually have a flag that says
is loading or something where we can set this to be true.
So I'm just going to use disabled inside here.
And I'm effectively going to disable the button if we are loading and use that approach.
By the way, if you did want a loading button, then let's just go to the moon icon and the docs.
And for reasons that I'm not entirely sure about, let's go to material UI docs.
It's been quite some time.
That's this loading button, because it does exist in material UI, but it's been part of the labs of
material UI, which is kind of experimental stuff that hasn't made it into the main component library
functionality.
And if we take a look at Alli in the experimental APIs, They are not.
In fact, I'm going to have to search for this because I do not know where it will be in these docs.
But if we take a look at loading and then loading button, then we can see that this is coming from
my lab.
So that's a separate package we would need to install in order to make use of the functionality provided
in the lab options.
But what this does give us, if we were to use this is a loading property and it will provide a spinner
whilst loading is going on.
But because we've already got loading displaying on the nav bar, I'm going to say we don't really need
that inside here, and I'm going to use the disabled option to simply disable the button to prevent
the user from getting click happy and trying to continuously add products, whilst we're trying to add
one that I've just clicked on the button for.
So if we go and take a look and see how we're doing with this now I'm going to open up the Redux dev
tools because we're going to impact Redux.
I'll just check the console, make sure that's clean, and I'm just going to open up the Redux dev tools.
And is there a clear button I can use inside here?
And I don't think we can just clear this, because if we hit the reset button, that just resets to
the state we created the store with.
I don't think this has the desired effect.
Yeah.
It just takes us back to the initial state.
Okay.
So I'll just refresh the page to get it as clean as I can, and then we'll see what happens.
When we do click on the add product or Add to Cart button.
I'm expecting this not to work.
So I'm going to click the button.
We see the loading.
We see the button was disabled and we see the let's see the basket API execute mutation pending.
And that's this one.
And we've got our start and stop loading.
And then we've got the fulfilled option.
And if we take a look inside here Then consider me surprised.
But it looks like this could have actually worked.
I'm just going to check the state because I'm flummoxed as to how that would have worked.
And if I take a look at the basket API, do we have a basket inside here?
We do not, but I didn't really see an error.
Let's check the network tab and see if there's anything that we can see inside here.
So we've got the 201 created.
And if we take a look at the headers do we send the cookie up or we've got the cookie back.
Oh okay I see what's going on here.
So the server sent us back a cookie.
But we haven't needed to send up the cookie yet to our server.
So what I think will happen and where we'll see things not working as they should is if I go to the
shopping cart icon, then we see our basket is empty.
And the reason for that is that if we take a look at this next request, then we haven't configured
our application yet to send up a cookie, because if we do look at the request headers, then we do
not see the cookie inside here like we did in postman.
So there's two things we need to do to get this functionality to work, so that we can go and get our
baskets from the API server.
So let's go back to the code and just make these two small changes.
First of all, there's something we need to do in our program class for our cause configuration.
In order to send up cookies we need to allow credentials inside our cause configuration inside the API.
So inside the program class we need this allow credentials that allows our browser to send up the cookie.
And because it's an API change, I do not trust hot reload.
So I'm just going to use control R.
And sometimes I'm asked hey Neal, why do you keep using hot reload?
You complain about it all the time.
It never does or never seems to do what you want it to do.
Why use Netwatch?
It's just hope.
Really hope.
One day I'm sure that's going to work as I expect it to, and I don't want to miss out when that day
comes.
So I'll just continue to use Netwatch, but really just double check every single time.
So that's the API side of things.
We also need to do something on our client side, and we're going to do that in our base query, which
I put in the file base API inside our base query with error handling.
We're going to add another property here.
And we're going to specify credentials and set that to include which means we include the cookie along
with each request.
Sometimes I wish they'd changed that to allow cookies, but it's always been this way.
So that's just what we need to specify to get our cookies sent up.
What this should mean.
If I go back to the browser and take a look and refresh the page.
This time we still didn't get anything from our API and that's going to need some investigation.
So I'm just going to refresh again, see what I sent out for the fetch basket request.
And where is the basket request.
It's at the bottom here and it's saying no content.
But did I send up the cookie in the headers and still no cookie.
In fact, I think we're going to have to go back to our products, because if we do take a look at application
and cookies, because we didn't have the allow credentials enabled when we initially added a product,
that means we don't have a basket.
We'll never be able to get that basket.
It's just going to sit in our database and nothing's going to happen to it.
It's fine.
It's just our development database.
But what does need to happen is we need that cookie in this cookies area.
So we're only going to get that set once that allow credentials was enabled.
So back to the catalog and let's just add a product to the cart.
And what we do see now is we've got our basket ID.
So now if we go to the shopping cart icon I've still got basket is empty.
But what we get with Redux Toolkit query is we do get caching.
It is something we need to think about because I went to this page and I've effectively made the same
exact API query, then it's given us our cached result.
So I will need to refresh the page at this point.
And what we see now is our basket ID inside there.
Don't worry about caching.
We do have tricks up our sleeve we can use to handle that kind of situation that we will take a look
at.
But first of all, I just want to make sure we display our basket on our basket page and deal with that
side of things first.
And our next step is to make our basket page look more like we would expect it to in an e-commerce store,
and we'll take a look at that next.