Okay, now let's see how we can actually send up our data as form data from our form rather than as
JSON.
So let's head back to our code.
And inside here we're getting our data in from our form.
And then we're just passing it pretty much directly to our update product method or create product method.
But I want to send this as form data instead.
So slightly different.
And in order to send this as form data, let's create a helper function just above the onsubmit and
I'll say const create form data equals and we'll pass in the items, which is going to be a type of
create product schema.
And we'll add the arrow open curly brackets and we'll specify const form data equals new form data a
type that we get natively in JavaScript.
And then we need to populate the form data fields with what we get from this items list.
So we'll use a for loop and say const key in item.
And then we'll use form data dot append.
And we'll pass in the key and the item.
And then in square brackets the key.
And that needs to be items not item there.
And we've got a complaint.
And the complaint is element implicitly has an any type.
Because expression of type string can't be used to index type name string description, string price
number etc..
And okay so this is going to get tricky using our create product schema.
Let's just try using field values and see if that solves the problem.
And it does.
So now that we have create form data let's try and use it inside here.
So I'll say const form data inside here equals.
And I'll use our create form data function and pass in the data.
And it's okay with that.
And let's just swap the data inside here for form data and I'll need to specify data colon form data.
And we've got a type issue here because our base API is expecting this to be a type of create product
schema.
But it's not now it's a type of form data.
That's fine.
We'll fix that soon and we'll do the same for the create product.
We'll just pass in form data as the parameter.
And again we've got the same type issue there.
So let's go across to our admin API.
And we'll just change the type of the data.
And instead of create product schema we'll just use form data.
And we will do the same here as well and specify it form data.
And one is happy one is unhappy.
And the one that's unhappy is of course I've given this a type of product schema there.
I just need to change that to form data as well.
And also inside here we need to look at the update product because I'm using the spread operator here
to append on effectively the ID to the data we're sending up.
That's not going to send it up as form data.
That's going to go up as something else if I use it that way.
And inside here before the return statement I'll use data dot append.
And I'll specify the name of ID and I'm going to set that to the id.
But the ID when it's form data this has to be a string.
And this is a type of number.
So we'll need to use the two string here to convert the ID property to be a type of string.
And then instead of the spread operator usage here, we can just send up the data for the body of this
request.
And we've got an unused import here that can go.
And it looks like we've still got a problem inside our product form.
So let's go here next.
And inside the product form we've got a complaint still about the data.
And of course it's telling us that type void is not assignable to type form data.
And when you see this, the first thing you want to look at is where's this data coming from?
If I take a look at form data, it's got voids.
Why does this have void?
Well, I've forgotten to return it from the method that I've created it in.
So we need to return the form data.
Otherwise it will return void.
And then all of the errors go away.
Okay.
So now with that in place, because this is now a type of form data that we're passing.
This is how it should be sent up to the API.
Let's take a look.
So we'll head back to our browser.
And let's once again try and update these angular blue boots.
And I'll click on the edit button.
I'll change this to Angular Blue Boots one and I'll click on submit.
We get a loading, we see more loading.
And we can see finally we've got an update to our product.
Wahoo!
So a bit of an effort to get there, but let's just try and create a new product as well.
And while that highlights another problem that we need to deal with because we've still got the selected
products inside our component as well.
So whenever quick change, we need to make where we've got our update products, or in fact we can just
clear the selected products after we're successful anyway.
So after the set edit mode, we'll just say set selected.
Do I even have access to that here?
I do not.
So that's something else that we need to pass down from our inventory to our form as well.
So let's see on the inventory page we've got our set selected product method.
We'll need to also pass that down to our product form.
So I'll use the set selected product method.
And I'll set that equal to the set selected products.
And then inside our product form we can make use of that.
So I'll just add it as an additional thing in the props.
And that takes no parameters and returns void.
And then inside our submit method after the set edit mode is false, we'll set the selected and I need
to bring that into my props or de-structured props as well.
So I'll just add that set selected products, and then I'll use that in the on submit.
And I'll set that to be null.
And it does take a parameter of course.
So inside here we'll set the value that's going to be a type of product.
Or it's going to be null.
And that will allow us to use that in our Onsubmit method.
So another small change.
Let's just check that is working as well.
So I'll update the angular blue boots once again.
I'll just change the number for simplicity to two.
I'll click submit and that gets updated in our inventory.
Then I'll click create.
And this time we have a clean product form to work with.
So I'll just say test products and select a brand and the type and the price.
I'll just say 2000 and the quantity I'll just set to 100.
And the description will just be this is a test product which should meet the required ten character
limits.
And then I'll just drop in a image for this as well.
And I'll click submit and we get the final field is required.
So a bit more work to do here as well.
And where is that coming from as well.
So if we open up our Chrome DevTools let's see if we can get access to the validation error.
And we've got the objects and the message.
But it's a 400 coming back from our API server.
So if we take a look at this object and in the datas, then we can see that this is a validation error
coming back from our API server.
It's not coming back from our client side validation.
So when we're converting our fields into form data, we also need to take care of this as well.
So another small change we'll need to make inside here inside the Onsubmit.
When we're getting our form data, then we need to get the file from our watch file and not the field
values that we have inside here.
So below the form data variable I'll check to see if we have a watch file.
And if we do I'll use form data dot append and specify file and pass watch file as the thing that we're
sending up for that.
And that should solve that particular problem as well.
So let's go back to the browser and take a look.
We'll click on create and give this another go test products.
And just pick any old brand and any old type and give it a random price and a quantity and say this
is a test.
Products.
It's.
And then I'll just drop an image in once again and I'll click submit and see what happens this time.
And this time we do get success.
So we should have a new product inside our inventory now.
And I've called it test product.
So will it be on page two.
Nope.
It should be on page number three.
And we can see our test product is indeed available now inside our inventory.
And we should be able to edit this and say Test product one and click submit.
And great that is working as I would want it to.
So a bit of an effort.
But now we've got the ability to create and update products.
The next thing on our list is the delete method.
And please feel free to give this a go on your own.
So pause the video and see if you can get that functionality to work.
It means updating our Redux or RTK query, of course, and it means enabling that functionality in the
component.
So give that a go and I'll demonstrate the solution to that in the next lesson.