All right, so now we want to make these delete buttons work.
So in our slice, our cart slice, just like we have this add to cart, we're going to have a remove
from cart.
So let's go to the end of this which ends right here and let's add remove from cart.
Okay.
And then that's going to be.
A function that takes in the state.
And.
Action.
Okay.
Just like this one did.
So state and action.
And the ID that we're going to pass to this remove from Cart is going to be in the actions payload.
So what we'll do is we'll use filter, we'll say state and then the cart items, which is the array
of items in our state.
We're going to set that to state dot cart items, dot filter.
And we're going to pass in a function and we're going to say for each, for each item, we'll just use
X and then let's say where x dot underscore ID is not equal to action dot payload, which will be the
ID of the one we want to delete.
So basically we're returning all the cart items that don't equal the one we want to delete.
Okay.
That way the one we want to delete is is gone from the UI.
So once we do that, we need to update local storage and we already have this update cart in the utils
file which will update local storage.
So we're just going to return.
The update cart and pass in state.
Okay.
And that's it.
And we just want to export this as well, like we did with Add to Cart.
All right.
Now in the card screen, we can bring that in.
So right here.
Where we brought in at Dakar.
We'll also bring in remove from Cart.
And then we're going to have a handler just like we did here.
Actually, I'll just copy this.
So instead of add to cart handler, let's say remove.
From cart handler and then we want to dispatch instead of add to Cart, we want to dispatch remove from
Cart.
And all that's going to get passed in is an ID.
In fact, this function is going to get passed in an ID and then we can get rid of this, this object
that we're passing in and just pass the ID in, because whatever we pass in here is what gets passed
in as the action payload.
Just like with add to Cart, the action payload was the entire item because that's what we passed in
right right here to add to cart.
So we just want to call this handler when we click the delete button.
So let's go down here to our delete to this button and let's say on click then.
Now it's important you don't just put remove from cart handler right in here.
It needs to be a function that then calls that.
Otherwise it's going to be called right away and it's just going to delete all your items.
So make sure that you have a function here and then call remove from cart, actually remove from cart
handler and then we're going to pass in the item dot underscore ID.
All right, So now if we come over here, I click this, then that goes out of our cart and it also
updates the price and everything.
Okay.
And even if you have to two or more quantity, it's still going to delete the whole thing from your
cart.
Right?
So even if I have three here, if I click delete.
Deletes all of it.
All right.
And see how everything responds.
The price, the number of items, the little thing up here that says the number of items, it's all
reactive from your state, from your main redux state, which is how we want this to work.
So now the last thing I want to do in this video is let's just add something to the cart.
So when I click this proceed to checkout, basically I want this to redirect us to the shipping page
where we start to add our shipping info.
But if we're not logged in, I want it to redirect us to the login page because anything after that
you have to be logged in.
You have to be a user that's registered in the system.
So what we can do, we already brought in use, navigate the hook and then we also initialized navigate
right here.
So all we want to do now is have that button, call a checkout handler.
So down here where we have our checkout button, let's go right under disabled and let's give it an
onClick.
So on click, we're going to want to just call check out.
Handler.
Okay.
And then.
We're going to create that up here.
So const.
Checkout handler, and then we'll set that.
To a function.
And we're just going to use navigate.
So it just this will just redirect and we want to pass in here.
Actually, we can just use quotes, but we're going to do slash login and then put a question mark and
then say redirect.
Equals and then slash shipping.
Because ultimately, like I said, what's going to happen is if we're not logged in, then it's going
to redirect us to log in.
If we are logged in, then it will proceed to shipping because in the log in screen, we're going to
check for this redirect.
And if it's here, then we're going to redirect to whatever this is in this case shipping.
All right.
Now, this is as far as we can go without having user authentication because any further to add shipping
and go through checkout and pay and all that, we need to be logged in.
So we're going to go on to the next section where we'll start on the back end because that's where our
authentication is going to start.
We're going to set up Json web tokens.
We're going to be able to save it in an Http only cookie.
And then once we've done that, we have an authentication API.
We can then move to the front end and implement it there.