And before we deal with form submission, actually we're going to deal with the editing of a form.
First of all, I was getting ahead of myself.
So we also want to go back to our inventory.
And I don't have a way to cancel this at the moment.
So that's something else that we need to do.
And let's see I'm back in the inventory.
So we need to deal with this edit functionality.
So we'll head back to VS code to deal with this inside our product form.
And we'll store the selected product.
When they click on the edit button we'll store the selected product inside local state.
And then we can simply use that in our product form.
So we need to do that from the inventory page.
So let's open up the inventory page.
And inside here we'll add some more local state.
So I'll say const and selected products and set selected products equals use state.
And we'll just give it an initial value of null.
And we will give it a type of products or null, and we'll create a helper function here and say const
handle selects products equals.
And we'll pass in a product as a parameter, which is going to be a type of product.
And we'll add the arrow, open curly brackets and we'll say set selected product and pass in the product.
And then we're going to enable the edit mode here as well.
So we'll specify set edit mode and set that to be true.
And then for our product form we will pass down both the setting of the edit mode and also the product
as well.
And we'll pass the set edit mode function down so that we can enable our cancel button to take us back
to the inventory.
So we'll have set edit mode as a prop that we pass down.
And we'll set that equal to set edit mode.
And we'll also pass the product down and set that to be the selected Products.
And then we can head over to our product form and we'll pass these in as props.
So I'll say type props equals and we'll have our set edit mode.
And the signature of this function is going to be the value.
What are we going to set this to which is a boolean.
And it returns void.
And we've also got the products which is going to be a type of product.
Or it's going to be null.
And sometimes you'll see me adding semicolons here.
But whether I add them or not is not important.
It doesn't matter.
We don't get any complaints.
If we miss them off, we don't get any complaints if we put them in.
And it's just habits really.
With C sharp where you'll sometimes see me adding these even though I know they're not needed there.
Then inside our product form we can specify the type we're using.
So I'm going to say props and then destructure the set edit mode and the product inside here.
And let's just deal with the set edit mode first of all.
So down in our cancel button we'll just give this an on click and add empty parentheses and say set
edit mode and set that to false.
And that will take us back to the inventory of course.
So we need to get our product inside here if we have it.
So inside the product form.
And we'll use a use effect for this effectively a side effect.
When we load up our product form we'll check to see if we have the product.
If we have then we're going to reset our form to use the product fields.
So we'll also add another thing that we need from react hook form is the reset function.
And just above the onsubmit I'm going to add the use effect.
Here.
We'll add its callback function and add its dependency array.
And we'll check to see if we have the product.
And if we do we're going to reset our form effectively to that product and for our dependencies, if
we just double check what we need, we need the product and the reset here.
So I'll specify product and reset.
Now something else we need to think about as well.
Because our products, if we go and take a look at the product type, it's not going to quite match
our create product definition inside our schema because we have inside here we have the picture URL.
If we take a look at our schema, we do not have a picture URL, but we do have a file.
So there's a bit of a mismatch between what we're going to reset our form to and what we currently have
inside our schema.
So we need to make some more adjustments inside here.
And not only do we need a file property, but we also need the picture URL property to help us reset
the form.
So I'm going to add an additional property inside here for the picture URL.
And this is going to be a type of Zod string.
And we're going to make it optional because we cannot make this required because there's no way that
we can specify the picture URL before we've uploaded a photo when we're using the create option.
But also we don't want the file to be required when we're editing the form.
So we need to make a few tweaks inside here.
So the file schema again I'm going to use optional for this one as well.
But we still do want the validation to take place when they're creating a product.
So how does that work then.
Well we can refine our schema here as well.
And there's a refined method that we can use to help us do this.
And we can pass in our refine method as an argument, some data or the data which is going to be our
form fields.
And we can check and I need to put data in extra parentheses here.
We'll add the arrow and then we're going to check data dot picture URL or data dot file and then add
a comma, open curly brackets.
And if either we do not have the picture URL or the file, then we'll provide a message and say please
provide an image and we'll specify path as file as this is the field that we want them to complete.
If either of these are missing, if we have the file we don't want to validate because we've met validation.
If we have the picture URL, that means we're editing a product and we don't have to supply the file.
So that's the idea of what we're doing inside there.
And it also means because we're refining it here, we can make both of these optional above.
And this is going to be the only validator for the file field.
So I've still got a warning on my inventory page.
And that's because I haven't used the handle select product yet and that needs to go where our edit
button is.
So let's go down to our buttons and the edit one will give this an onclick and we'll add the parentheses.
Add the arrow and we'll say handle select products and we'll pass in the product.
And the inventory page should be clean now of any errors.
And it is great okay.
So let's go and test.
And let's just refresh this page.
And what we should be able to do now is edit products.
And if I click on the angular blue boots we get taken to our product details page.
And I can see that I've got the details populated inside here, but I don't see the preview of the image.
So we need to make a further adjustment to our form as well, so that we do display the preview of the
product if we have it on the right hand side.
So let's go back to our product form and select the product form inside here come down to where we're
using the watch file.
And inside here we'll just use a ternary instead of double ampersand.
So if we have the watch file then we're going to display this image.
And I'll just copy this into my clipboard.
The image tag I'll add the colon, open more parentheses and paste in the image there.
But instead of the watch file preview I'll specify the product dot picture URL.
And what that should mean is that we see the current image of whatever product it is we're editing.
So I'll click on this one.
And sure enough, we do.
And we'll still be able to drop an image in there.
And that's going to update the preview.
And then if we do submit the form, once we've hooked this up to our API, obviously the new image is
going to go up then.
So that's our form now complete fully editing and creation.
And next we'll take a look at hooking all of this up to our API so that we can actually submit this
to our back end server.
And that's coming up next.