All right.
So now that we're able to add a new product with sample data, now we want to be able to edit.
Okay, So we're going to start with the back end.
Okay.
And there's going to be quite a bit that goes into this, including image upload.
So the next few videos will be all about editing the product and uploading the image and so on.
So let's go to our back end and go to controllers.
We want to go to our product controller and we're going to create a new route.
So let's just let's see, what should we do here?
We'll just grab the first.
First one here.
Let's go under the.
The function we created in the last video.
And this one is going to be to update a product and it's going to be a put request.
So let's say put and then it's going to be API slash products slash and then whatever the ID, it's
going to be private and admin and let's call it update product.
Okay.
And then we can get rid of these these lines here.
And we want to first get the the data that's coming in from the body.
So I'm going to destructure it from request dot body and we're going to want to get the name of the
product, the price, the description.
The image brand category.
And let's get count in stock.
Okay, So those are the things you want to get from the body.
Then we're going to find the product that we're updating.
So find by ID, pass in request, params ID, then check for the product.
And if it's there, then we're going to go ahead and update the fields.
So I'm just going to go ahead and add this in.
So product dot name is going to equal the name from the form coming in from the body, the price description,
image brand category and the count and stock, and then we're going to save it and then respond with
that updated product.
Okay.
Else.
So if the product isn't found, then we're just going to do a 404 and say resource not found.
All right.
So and then let's make sure we export it.
So update product.
Good.
Now we need to create a route for it.
So let's go into our product routes.
So product routes and let's add.
Let's see.
We already have a route for slash colon ID and we have a get request.
Now let's add a put.
So if we have a put request to that route, we want to add in the protect middleware.
The admin middleware.
And then the function is update product, which we also want to bring in here.
And that should do it for the back end.
All right.
And that doesn't include uploading the image.
We're going to do that in the next video.
But let's go to our front end slice.
So we can collapse that and let's go.
Product.
Products.
API Slice.
We'll go under our Create product and let's say update product that's going to be a mutation.
And let's see, we're going to have a query.
And the query is actually going to take in not just the ID but all the data.
So let's say data and then the URL is going to have the ID in it.
So data.
Dot underscore ID.
And then we have the method which is going to be put the body, which is going to be data.
And underneath that we're going to invalidate product tags just so we clear the cache.
Then we're going to export it.
So let's say use update product mutation.
Okay.
And I just want to look at this is defined but never used product list screen.
So let's see.
Product list.
Screen.
Brand category.
Yeah.
I don't think we need this.
Actually.
I don't think we need the F eight times at least.
At least at the moment.
So we can get rid of that just to get rid of that warning.
So now what we want to do is create a product edit screen.
So in screens and then in admin we'll create a new file here called Product Edit Screen Dot JS.
And let's just add the route for it.
So I'm going to go to my Index.js.
And we're going to bring that screen in.
So import product.
Edit screen and that's going to be an admin screen, so be sure that you add it here.
And let's see as far as the path goes.
We're not going to do the page number stuff yet.
Um, that's for when we do pagination.
For now, it's just going to be.
Admin slash and then product.
Slash and then the ID slash and then edit.
Yeah, that should be right.
So let's save that and then these should be going to the correct.
Let's see if we click on one of these.
Uh oh.
You know what?
I need to change.
This shouldn't be product list screen.
It should be product.
Product edit screen.
Yep.
So now if we click on any one of these.
Products.
Any one of these edit buttons, it should take us to slash the ID, slash edit and now we're seeing
our component, our screen.
So from here, let's start off with just bringing in what we need.
So we're going to import.
We need use state and use effect.
We're going to need a couple things from React router.
Dom So yeah.
Link And then let's also get.
Use navigate.
And let's get use params because we do have to get the ID from the URL and then let's bring in.
Let's bring in a few things from React Bootstrap.
So from that, we're going to need form and we're going to need button.
And then let's import our message.
Component.
Let's import our loader component.
Our form container.
And we're going to need the toast.
So react to testify.
And let's bring in.
The mutation that what is going on here?
The mutation that we just created.
So we're going to import use.
Let's see, use update product mutation.
And then I just want to check.
What else do we need here?
Because we're going to have to get the single product.
So we also want the get product details query.
So let's add that as well.
We'll say use product details query.
So that should be everything we need, at least for now.
And then let's see in the component here, we need to get the correct product ID from.
That'll get it from the URL.
I just want to rename it though to product ID and then let's create all of our state.
So we'll say const and we're going to want, let's see name.
Setname.
We're going to want price image brand category count in stock and description.
And then let's get the data for the current product so we can do that with Const and we're going to
use the query that we brought in.
So let's say actually.
Yeah, we're going to use the query, but we need curly braces here and then we'll set that to use product.
Or is it yet.
Yeah it's use get product details query and that's going to get passed in the product ID that we get
from the URL.
And then in here we can then get our data.
Which we're going to call product.
And then we can also get is loading.
Yeah, product is loading.
And then let's get refetch and let's get the error.
Okay.
And we can test that out now by just console logging product.
And if we come over here and we check out our console, you'll see a couple undefined that's just while
it's loading and then we end up with the actual product data.
Good.
So let's also initialize our update.
So it's going to be from use update product mutation.
We have our update product function, which we can call and then also is loading, which I'm going to
rename to loading.
Loading update.
And we also want to initialize our navigate.
And let's see, we want to fill the form.
So basically we're going to have a form that's going to have all the product details.
So we're going to add a use effect here.
I love how copilot knows exactly what I'm about to do.
So And the reason, by the way, the reason it's doing that is because it's looking at the first version
of the course, and a lot of this stuff is the same.
Well, actually, no, we didn't even use.
We didn't even use Redux toolkit.
But it's still knows to, like, give us this stuff, which is pretty cool.
I know a lot of people are scared about AI and, you know, losing their jobs and stuff, which could
be a possibility in the future.
But in the near future, I think it's great to have these tools to work with.
I think it makes it just makes you a more productive developer.
But anyway, that's a that's a whole separate video.
So in our use effect here, we'll just have the product as a dependency and we're going to check.
For the product.
And let's see if let's say if product.
Then we're going to set all the state because we're fetching the product here.
And if there's a product, we're going to then set all of our state fields to the the the fields that
are in that product, in that object.
All right.
Now, down here in the output, let's we'll just make this a fragment.
And then we're going to have a link to go back.
So say go back and it's going to go back to admin slash product list.
And then this.
Yeah, the classes look okay, so we should have a go back.
Okay, good.
Now we're going to have our form container.
Remember, we created that form container component.
We're going to use that.
And let's put an H one here, edit product, and then we're going to check the loading.
Although we don't want is loading.
We want to check for loading update.
And then then we want to check for our is loading.
So in here, let's say is loading.
And then if that's true, then we want to show the loader.
Else.
If there's an error, then we want to show the message.
Else then we want to continue on to show our form.
So we'll have a form with we'll add the handler after let's just add a form tag and we'll have a group
for the name and let's just end that.
Group and then we'll have a label for the name and then our form control, which will have the type
of name, the placeholder, the value, which is the name and the component state, and then the Onchange,
which we'll call set name.
And that should do it for the form control for the name.
And you can see that it's outputting the name.
If I go back and I go to edit, let's say the mouse here, you'll see that that will be in the field.
So now we basically just want to copy the form group and create the rest of our fields.
So let's go under that form group and the next one is going to be the the price.
So we'll just change this.
Price change that.
Type is going to be number for this.
And then placeholder.
And value is going to be price.
And then this is going to call we want this to call set price.
Okay.
If we save that, Take a look.
Good.
And then let's add another form group.
And this one's going to be.
For the brand.
Actually, you know what?
The image input is going to go here, but we're not going to do that just yet because that takes a bunch
of extra work.
So I'm going to put a comment here and say image input, placeholder.
And then this one here is going to be the brand.
So let's see.
Get rid of that brand and the type.
Wait, did I put type name for this one?
I'm sorry.
This should be type text, not name.
And then here, say type text.
And enter brand.
Brand and then set brand.
Okay.
Then the next one is going to be the count in stock.
And I'm just going to recopy this so I don't have the type name.
Okay.
So this group is going to be for account in stock.
So let's change this.
Actually, I'll just.
Say count in stock.
Okay.
I just want to change this, though, to count space in stock.
And then value.
So that's correct.
This we just want to uppercase the C and that should do it.
Let's take a look.
Okay.
These are kind of close together.
Um, maybe we should add a little bit of margin.
So like on the form group.
We say class name.
Let's say MY-3.
Let's see what that looks like.
Or maybe let's do two.
Yeah, so let's add that.
To all the form groups.
Just to give it some space.
Yeah, it looks better.
All right, so now I'll copy this form group again, and then the next thing after count in stock is
going to be our category.
And oh, and by the way, count in stock should be number.
So now this one.
Is going to be category.
Let's change this to category and set category should be uppercase C.
Type is text.
Okay.
That looks good.
Category electronics.
And then the last one is going to be the description.
So let's go under the form group and let's change these.
To description.
And let's see.
We'll get rid of this.
Subscription.
And.
Set description.
Have an uppercase D there.
Cool.
So now we just need the button at the bottom.
So that's going to be under the form group.
We're going to add our button type is going to be submit variant primary and.
Yeah, we can add that class.
And I'm not going to add an onClick here.
So let's end the button and then we'll just say update for the text.
Okay, so now we just want to be able to submit it.
So I'm going to add on to the form.
Let's see.
So we have our opening form tag, we'll say on submit, and we're going to set that to, let's say,
submit.
Handler and we'll put that right up here.
So const submit handler.
And let's see what it gives us.
Yeah, we could go ahead and go with that.
So we're creating this object here, um, setting the underscore ID to the product ID from the URL.
And the reason we're doing that is because in the slice, right?
So we're using the update product from the slice, from the mutation, which is this right here.
And it gets passed in the data.
And here we're passing, we need to pass the ID into the URL.
In fact, we could.
We could just do product ID like that and then instead of underscore ID.
Say product ID?
Yeah, let's just do it that way.
All right.
And then we have our name price, image, brand category count and stock and description.
Then.
Let's see, we're calling update product.
And then we'll check for the error.
If there is, then we'll show a toast.
Uh, else.
Then we're just going to show a success message, and then we're going to navigate to the product list.
Yeah.
So I think that that that should do it.
Um.
Trying to see if there's anything else.
So in the get products in our slice.
So this right here, get products I'm going to add.
Provide provided tags and set that to product.
Otherwise we may have to refresh the page.
All right.
So now we should be able to edit products and of course we want to edit the sample one that we just
created.
So the workflow is you click the button, you say, Yes, I want to create a product.
It adds this, and then you go here and then you'd change this to whatever you want.
Let's say test product, let's say test product one price, say 1999 and brand.
I don't know.
We'll say Sony count and stock ten category.
Electronics and description.
This is the description.
All right.
So if we click update, we get product updated.
And now you can see test product one 1999.
So it updated all of the fields.
Just make sure that they did actually get updated and that's that.
Now we can't do anything with the image yet.
We don't even have an image input.
So there's going to be two steps to adding that functionality.
First, we need a back end endpoint that will actually upload an image to the server.
And then we also need to add the front end so that we actually have an image input, we can select it
and then submit to that back end endpoint.
So we're going to work on that in the next two videos.