Okay, the next thing we're going to take a look at is the brand and the types.
We're going to create a reusable select input so that the admin can choose from a drop down list of
the available brands and the available types.
So we'll head back to VS code to do list.
And inside the Shared components folder we'll create another new file and we'll just call this app select
input TSX.
And inside here I'm going to actually use the app text input as a starting point.
So I'm just going to control a control C this whole thing and paste that inside to our app.
Select input and of course make some changes.
So instead of the or as well as the label and the name, we'll also have items as a prop inside here.
And that's going to be a string array to represent the different options that we're going to pass to
this.
And instead of text field props we're going to use select input props which we get from movie material.
So we'll bring that in as well.
And then we'll change the name from app text input to app select input.
And otherwise the rest of the top parts stays the same.
And we can remove the text field.
Obviously we're not going to use that.
And instead we'll start with a form control from UI material.
And inside the form control we'll give it some props of full width.
And we'll use the error property here and set it equal to double exclamation mark and the field state
dot error.
And then inside here we're going to use an input label again from UI material.
And in here we'll specify the props dot label.
And then below this we can use our select input from UI material.
And at its closing tag and inside the props for the select we'll specify the value is equal to the field
dot value, or it's going to be an empty string.
And then we'll specify the label.
And again we'll use props dot label.
And we'll give this an Onchange event.
And we're going to get this from the field on change.
And then inside the select we need to loop over the items we're passing in here.
So we can use props dot menu dot items dot map.
And then inside here we'll open double parentheses and we'll specify the item and the index.
Because we're only working with an array of strings here.
We don't have an ID for these.
So I'll add the arrow open more parentheses.
And then inside our select input it takes menu items.
Again we get from UI material and add its closing tag.
And we'll specify its value equal to be item.
And the key is going to be equal to the index.
And inside here we'll specify the item as the label for the menu item.
And below the select.
Because we don't have a helper error text inside the select input like we do with the text field.
Below this we can use a form helper text component again from Mui material.
And inside here we can specify the field state dot error dot message.
And I've got a warning inside here because I've got the text field stuff being imported as well.
So we can remove that and everything seems okay with this.
So let's head back to our product form.
And we're going to need to go and get our brands and the types from our Redux store.
So we'll use the query to do that.
And we'll specify const data equals use fetch filters query.
And that will give us a list of our types and our brands.
And let's head down to the input fields we're using for this.
So we've got the brand and the types here.
So just above or just inside the grid with the size of six I'll specify data dot brands, use double
Ampersands and take the closing curly brackets and just put it to the end of the app text inputs.
But of course change app text input to app select inputs.
And let's move this down so that I don't go off the edge of the screen there.
And inside here we just need to pass the items.
So we'll specify items.
And that's going to be data dot brands.
And we've got a complaint.
And what is this complaint.
And it's our select input props.
It's telling us that we're missing a bunch of properties from the type.
And it looks like we've got an auto width, a multiple, a native possibly more properties as well that
are required to be passed to this particular input based on these props.
But I don't want to provide these things that I'm not going to be using.
I don't want this to be multiple.
I don't want to specify native.
I don't want to specify auto width.
So what we can do is we can head back to our app, select inputs and where we've got the type of select
input props.
This clearly has some required properties specified in there.
But one TypeScript trick we can use is we can specify before the select input props.
We can specify partial and then in angle brackets, specify the select input props, and the partial
makes all of the properties defined in this type as optional, even if some of them are required.
This partial is going to make them all optional, and if we go back to our product form, we can see
that the warning has now gone away.
That shouldn't affect us using it that way.
So I'm just going to copy this app.
Select input Into my clipboard and replace the app text input below that specifies the type.
And I'll swap that for data dot types instead and change the name to.
Type and the label to be type as well.
And that should be that.
So if we go across and take a look at our Create product form, then what we should have now is drop
down list for our brands.
And we can select and we can select our type as well.
And that appears to be working and we can't unselect once we've selected we're committed.
But we can always change it of course.
But we don't see the validation in that case.
But what should happen if I go back and create and I click submit, then we do get the validation there
that does go away.
Once we do select the brand or the type we're looking at.
And while I'm here, since the price is going to be a bit confusing the way it's labeled, let's just
specify the label of this as price incense, so that it's clear to the admin when they use.
This is something I did want to adjust.
I just want to put the price in cents.
So 100 is going to be 100 cents, which equals $1 of course.
And another thing I just wanted to adjust inside the product form is because if we go back to our inventory,
all of this is very squashed up against this.
I just want to give this a bit of padding and where we've got our pagination inside, not the product
form, the inventory page, let's just go down to where this box is, and we'll just give it the property
and specify p colon three.
And if we take a look that should move away the pagination from the edges there.
And that's a bit more like it okay.
So now we've got our select input.
What we'll take a look at next is dealing with the image upload.
And we'll add the functionality so that the user can drag and drop an image into a drop zone.
And we'll take a look at that next.