Okay.
In the last video we created a few end points for orders, including the Create Order End Point.
So now we're going to implement start to implement them in the front end.
So let's go to slices and we're going to want a new slice for orders.
So let's create, let's say orders API, slice dot JS and we're going to bring in the initial API slice,
which is basically like the parent to the rest of these these API slices, users products and orders.
And then I also want the orders URL.
So let's say import the orders URL from constants which we should have in there.
Okay.
So we have the orders URL right here.
And then we're going to create our slice.
We want to make sure we export it.
So we'll say export, const, slice, and we're going to inject endpoints because basically we're injecting
them into here into the API slice, which is connected to our store right here.
So hopefully you understand how the structure of everything works.
And then we want to say endpoints and yeah, we're going to use the builder, although I prefer to put
parentheses.
Around that.
Okay.
And then we'll close that up.
Okay.
So the first thing I want to do here first endpoint is going to be create.
Order, and that's going to be a mutation.
So we're going to say builder mutation.
And then inside there we'll say query and.
Instead of passing body, let's let's call it order, because that's what it is.
That's what the data will be, is the order.
And then we need to put in the URL that we want to hit, which is going to be just slash API slash orders.
So the orders URL, the method is going to be post and then the body.
So for the body, we're just going to have an object and spread across the order.
All right.
And then we need to export, so let's say export, and you're going to make sure that you put use on
the beginning of this name.
So use and then mutation on the end.
So use create order mutation.
And make sure you export it as well.
Okay, Now, before we implement this or start to create our place order screen, there's one other
action creator that I want to put into the cart, and that's to clear the cart items because once we
place the order, right, once the order is created, we want to clear the cart.
So let's come right here and let's say clear.
Uh, cart items.
And we're going to set that to a function that has state.
Pass in state and action.
Okay.
And inside here, let's set the state cart items.
Just set it to an empty array and then update the cart.
So update local storage and let's make sure that we export that as well.
Clear cart items.
So now we can use that wherever we bring it into.
Now the place order screen, we want to do that next.
So screens and let's create, let's say place order dot or place order screen let's stay consistent.
Dot JS x.
RFC.
Okay.
And I think what I'm going to do before anything is just add the route before I forget.
So we're going to go to Index.js and let's import the place order screen.
And this is of course, this is going to be a protected route.
So we're going to put that in here.
All right.
So if I actually you know what?
I'm going to turn off LastPass again.
All right.
So now if I were to, let's see, continue select the payment method that takes us to the place order
screen, which right now is just, you know, just that.
So we want to continue on here.
And this is probably going to take two videos to finish this entire screen.
But let's start with our basic imports.
So we're going to need use effect.
So we're going to bring that in because we need to check to see if there's no shipping address.
If there's no shipping address, we need to redirect the shipping.
If there's no payment method, we need to redirect to the payment and we're going to do that in the
use effect.
Then we want to import from React router Dom, we want link and we also want use navigate because,
because we're going to want to redirect if those things aren't there.
So let's import that from React router Dom.
Then we want some stuff from actually we need use selector right now.
So let's take that and that's so we can get the cart state.
And then we also need some stuff from React Bootstrap.
So let's say import.
And I want the button.
Let's see.
We want button row.
Call.
List group.
And image and card from React Bootstrap.
And then I just want the checkout steps component as well.
All right now.
We brought in use navigate.
So let's go into the function here and let's go ahead and initialize that.
And then we want to get the cart state using use selector.
Then we're going to have our use effect.
Okay, so we'll pass in our arrow function and dependency array.
Okay.
Now in the use effect.
Yep, that's exactly what I want.
So we're getting the cart state.
And remember, we have a shipping address in there and that's an object that has address.
So we're checking if that's not there.
And if it's not, we're going to navigate to shipping.
We're going to then check for the payment method in the cart.
And if that's not there, we're going to redirect.
And since we use that stuff in here, we have to add it to the dependency.
So let's say cart dot payment method and we want the cart dot shipping address actually shipping address
dot address.
And then navigate.
So if I save that, it's not going to redirect us because we do have our shipping address and we do
have our payment method.
All right.
Now in the return.
Let's just make this an empty fragment here.
And we want to have our checkout steps at the top.
And since this is the fourth step, we're going to pass in all four steps.
Okay, So now we can see all of them.
They're all links as well.
And I think for now we're just going to add the two columns and then in the next video we'll finish
it up.
So let's put a row and we'll end the row.
And then we're going to have one column that is eight wide.
And for now, I'll just put in the text column.
And then we're going to have another one that is four wide.
So if we save that, we should just see our columns.
Okay, so now we have our create order in our slice ready to fire off.
We also have the clear cart items in the cart slice and we've created our page here.
Check to see if there's a shipping address and payment method.
And now in the next video we'll finish up with the UI on the Place order page.