All right, guys.
So now we're able to get our products.
I want to now be able to add a new product.
So we're going to work on the back end first.
So let's jump into back end.
And if we go into our products controller, all we have right now is get products and get product by
ID.
So we want to create a new endpoint.
I'm just going to copy this first one.
And let's go right here and then let's change this to, let's say, create.
We'll say create a product.
And it's going to be of course, it's going to be a post request.
And it's going to be API products and then the access is going to be private and admin.
And we'll change the name of this to, let's say, create.
Product.
Okay.
And then let's see.
We're going to get rid of.
Let's just get rid of this stuff here and oh, wait, what am I doing?
This should be const.
Now, the way this is going to work is when we click create product, it's going to create it right
away with just some sample content.
So you'll click create product and then you'll see it in the list.
Then you can go and you can edit it and update the fields.
So we're going to create that product, let's say const product, and we're going to set that to a new
product.
Okay, Using the model, you should have the model being brought in.
And in this object is where we want to put our fields.
So we're going to have a sample name for the name, the price set to zero.
The user, of course, is the logged in user.
The image is going to come from images sample Jpeg.
Okay.
So basically that's going to be in front end public images and you should have this sample Jpeg and
of course you can change that to whatever you want and then the next thing is going to be the brand.
So we'll say sample brand, sample category count in stock will be zero, number reviews will be zero,
the description will just say sample description and that should do it.
So now underneath we created that product variable.
We want to save it and we want to save the actual product into this variable.
Then we're going to respond with that with a status of 201, which means something was created.
Okay, so now we can go ahead and export that, let's say, create product.
And we need to also create the route.
So let's go into routes and then product routes.
And from here we want to bring the middleware in because we haven't done that yet.
So let's say import, protect and admin from our middleware, our auth middleware, and then let's see,
we're going to add a new route.
So it's actually going to be just a slash, which is slash API products.
So we have get.
So let's add post onto this because that's it's a post request that we're looking for.
We're going to add the Protect middleware and we're going to add the admin middleware.
And then we want the create product which we need to bring in.
So in the import, let's add create product.
And that should do it.
So now if we make a post request, we should be able to create a new product and it will just contain
the sample data.
So now we can go to our front end.
And let's go to our slice.
So sauce slices and then products API slice and we're going to create a mutation.
So let's go under the last query here and let's call this create product, set that to a mutation and
we have a query with a actually we don't we're not passing in any data because again, it's just going
to create that sample data and then we can go ahead and edit it.
So we don't need to pass anything in.
We just want to hit the products URL with a method of post.
And I'm also going to add invalidate tags and set that to product.
Because what this will do is it will stop it from being cached so that we have fresh data.
Okay.
So that we don't have to like re re if we don't put this, we'll have to reload the page after we click
create new product.
So now let's export that.
So we're going to say use create product mutation.
And now we'll go into our product list screen.
So screens, admin, product list.
And then from here, we want to bring in along with the get product query.
We want to bring in use product or create product mutation and then we'll get what we need from it.
Say const and put some brackets from our mutation.
And the name of the function we call is going to be create product and we'll also get is loading.
But we're going to rename that to Loading Create.
Okay.
And then we need.
Let's see.
So on the button we have, which is where is it?
Right here.
So this button right here, we're going to add a click handler, too.
So let's say on click.
And when we click this, we're going to call a function called create product handler.
And we'll add that up here.
And no, we don't want to do that because all that stuff is going to be added automatically.
So what we do want to do first is make this a synchronous.
And I'm going to just do a confirm since.
Since we're well, we're not deleting it, but since it's just a button we push and it automatically
creates like it doesn't take us to a form or anything.
I just want to have a confirm that they want to add a new product.
So let's say Window dot confirm is just a better user experience.
I think So we'll say, Are you?
We'll say.
Are you sure?
You want to create a new product?
Okay.
And then in here, we'll do a try.
Catch.
And inside the try, we're going to await on our create product.
And we don't have to we don't have to pass anything in because that gets added in the back end.
And then we just want to refetch and we can get refetch from our use Getproducts query up here, we'll
say Refetch.
And then if there's an error.
So if there's an error, we're just going to do our toast.
Say, toast, Dot.
Oops.
Did I not bring in?
No.
We need to bring that in.
So import.
Toast from from.
What is going on here?
Reactos defy.
And then we're going to call Toast.
And just pass in our message.
And I believe it should be let's make this error.
So I believe this should be e r dot data dot message or error dot error.
And I think that should do it.
So let's save that.
Let's see.
What's this for?
Times is defined but never used.
Loading.
Create.
Okay, so the loading create.
I'm going to put that.
Let's see.
We're going to put that right above.
This is loading.
So we'll just say if loading create is true, then show a loader.
And I think that's it.
So let's save and let's come over here and let's click Create product.
It says, Are you sure you want to create a new product?
I'll click okay.
And now you can see we get a new product with all the sample data.
Good.
So I think that should do it for this video.
In the next one, we're going to make it so that we can then edit the data for this product.