WEBVTT 00:00.020 --> 00:04.850 Okay, the next thing we're going to take a look at is the brand and the types. 00:04.850 --> 00:10.250 We're going to create a reusable select input so that the admin can choose from a drop down list of 00:10.250 --> 00:12.590 the available brands and the available types. 00:12.590 --> 00:16.070 So we'll head back to VS code to do list. 00:16.070 --> 00:23.450 And inside the Shared components folder we'll create another new file and we'll just call this app select 00:23.450 --> 00:25.700 input TSX. 00:25.850 --> 00:33.050 And inside here I'm going to actually use the app text input as a starting point. 00:33.050 --> 00:39.050 So I'm just going to control a control C this whole thing and paste that inside to our app. 00:39.050 --> 00:42.620 Select input and of course make some changes. 00:42.620 --> 00:50.240 So instead of the or as well as the label and the name, we'll also have items as a prop inside here. 00:50.240 --> 00:54.500 And that's going to be a string array to represent the different options that we're going to pass to 00:54.530 --> 00:55.130 this. 00:55.130 --> 01:03.260 And instead of text field props we're going to use select input props which we get from movie material. 01:04.880 --> 01:07.400 So we'll bring that in as well. 01:09.230 --> 01:14.510 And then we'll change the name from app text input to app select input. 01:15.470 --> 01:19.370 And otherwise the rest of the top parts stays the same. 01:20.090 --> 01:22.460 And we can remove the text field. 01:22.460 --> 01:24.950 Obviously we're not going to use that. 01:25.550 --> 01:30.350 And instead we'll start with a form control from UI material. 01:31.220 --> 01:35.330 And inside the form control we'll give it some props of full width. 01:35.330 --> 01:42.260 And we'll use the error property here and set it equal to double exclamation mark and the field state 01:42.260 --> 01:43.460 dot error. 01:43.970 --> 01:49.820 And then inside here we're going to use an input label again from UI material. 01:49.850 --> 01:54.530 And in here we'll specify the props dot label. 01:55.130 --> 02:00.320 And then below this we can use our select input from UI material. 02:00.350 --> 02:08.150 And at its closing tag and inside the props for the select we'll specify the value is equal to the field 02:08.150 --> 02:12.130 dot value, or it's going to be an empty string. 02:12.730 --> 02:14.770 And then we'll specify the label. 02:14.980 --> 02:18.100 And again we'll use props dot label. 02:19.780 --> 02:22.180 And we'll give this an Onchange event. 02:22.180 --> 02:26.680 And we're going to get this from the field on change. 02:28.960 --> 02:33.250 And then inside the select we need to loop over the items we're passing in here. 02:33.250 --> 02:40.990 So we can use props dot menu dot items dot map. 02:40.990 --> 02:48.280 And then inside here we'll open double parentheses and we'll specify the item and the index. 02:48.280 --> 02:50.710 Because we're only working with an array of strings here. 02:50.710 --> 02:52.540 We don't have an ID for these. 02:52.540 --> 02:55.300 So I'll add the arrow open more parentheses. 02:55.300 --> 02:59.710 And then inside our select input it takes menu items. 02:59.740 --> 03:04.300 Again we get from UI material and add its closing tag. 03:04.300 --> 03:09.490 And we'll specify its value equal to be item. 03:10.000 --> 03:13.300 And the key is going to be equal to the index. 03:13.300 --> 03:20.170 And inside here we'll specify the item as the label for the menu item. 03:20.500 --> 03:22.090 And below the select. 03:22.090 --> 03:28.120 Because we don't have a helper error text inside the select input like we do with the text field. 03:28.120 --> 03:35.380 Below this we can use a form helper text component again from Mui material. 03:35.380 --> 03:42.100 And inside here we can specify the field state dot error dot message. 03:42.100 --> 03:48.730 And I've got a warning inside here because I've got the text field stuff being imported as well. 03:48.730 --> 03:54.010 So we can remove that and everything seems okay with this. 03:54.010 --> 03:56.230 So let's head back to our product form. 03:56.230 --> 04:02.290 And we're going to need to go and get our brands and the types from our Redux store. 04:02.290 --> 04:04.390 So we'll use the query to do that. 04:04.390 --> 04:10.870 And we'll specify const data equals use fetch filters query. 04:11.110 --> 04:14.470 And that will give us a list of our types and our brands. 04:14.470 --> 04:18.100 And let's head down to the input fields we're using for this. 04:18.250 --> 04:21.370 So we've got the brand and the types here. 04:21.370 --> 04:30.400 So just above or just inside the grid with the size of six I'll specify data dot brands, use double 04:30.400 --> 04:38.590 Ampersands and take the closing curly brackets and just put it to the end of the app text inputs. 04:38.590 --> 04:42.820 But of course change app text input to app select inputs. 04:43.270 --> 04:49.210 And let's move this down so that I don't go off the edge of the screen there. 04:52.660 --> 04:56.410 And inside here we just need to pass the items. 04:56.410 --> 04:58.060 So we'll specify items. 04:58.060 --> 05:00.880 And that's going to be data dot brands. 05:01.690 --> 05:03.040 And we've got a complaint. 05:03.040 --> 05:05.290 And what is this complaint. 05:06.520 --> 05:09.580 And it's our select input props. 05:09.610 --> 05:12.970 It's telling us that we're missing a bunch of properties from the type. 05:12.970 --> 05:20.130 And it looks like we've got an auto width, a multiple, a native possibly more properties as well that 05:20.130 --> 05:25.800 are required to be passed to this particular input based on these props. 05:26.310 --> 05:30.390 But I don't want to provide these things that I'm not going to be using. 05:30.390 --> 05:32.040 I don't want this to be multiple. 05:32.070 --> 05:34.530 I don't want to specify native. 05:34.530 --> 05:36.750 I don't want to specify auto width. 05:36.750 --> 05:42.150 So what we can do is we can head back to our app, select inputs and where we've got the type of select 05:42.150 --> 05:43.170 input props. 05:43.170 --> 05:48.210 This clearly has some required properties specified in there. 05:48.210 --> 05:53.970 But one TypeScript trick we can use is we can specify before the select input props. 05:53.970 --> 06:01.680 We can specify partial and then in angle brackets, specify the select input props, and the partial 06:01.680 --> 06:09.240 makes all of the properties defined in this type as optional, even if some of them are required. 06:09.240 --> 06:14.850 This partial is going to make them all optional, and if we go back to our product form, we can see 06:14.850 --> 06:16.980 that the warning has now gone away. 06:17.010 --> 06:19.020 That shouldn't affect us using it that way. 06:19.020 --> 06:21.510 So I'm just going to copy this app. 06:21.510 --> 06:29.790 Select input Into my clipboard and replace the app text input below that specifies the type. 06:31.500 --> 06:36.810 And I'll swap that for data dot types instead and change the name to. 06:36.840 --> 06:42.450 Type and the label to be type as well. 06:42.870 --> 06:44.490 And that should be that. 06:44.490 --> 06:51.180 So if we go across and take a look at our Create product form, then what we should have now is drop 06:51.210 --> 06:52.590 down list for our brands. 06:52.590 --> 06:56.760 And we can select and we can select our type as well. 06:56.760 --> 07:03.240 And that appears to be working and we can't unselect once we've selected we're committed. 07:03.240 --> 07:04.680 But we can always change it of course. 07:04.680 --> 07:06.420 But we don't see the validation in that case. 07:06.420 --> 07:13.740 But what should happen if I go back and create and I click submit, then we do get the validation there 07:13.740 --> 07:14.580 that does go away. 07:14.580 --> 07:18.900 Once we do select the brand or the type we're looking at. 07:19.290 --> 07:26.280 And while I'm here, since the price is going to be a bit confusing the way it's labeled, let's just 07:26.280 --> 07:32.570 specify the label of this as price incense, so that it's clear to the admin when they use. 07:32.570 --> 07:35.390 This is something I did want to adjust. 07:35.390 --> 07:39.770 I just want to put the price in cents. 07:40.370 --> 07:45.620 So 100 is going to be 100 cents, which equals $1 of course. 07:45.620 --> 07:52.010 And another thing I just wanted to adjust inside the product form is because if we go back to our inventory, 07:52.040 --> 07:54.680 all of this is very squashed up against this. 07:54.680 --> 08:00.290 I just want to give this a bit of padding and where we've got our pagination inside, not the product 08:00.290 --> 08:07.580 form, the inventory page, let's just go down to where this box is, and we'll just give it the property 08:07.580 --> 08:10.640 and specify p colon three. 08:10.640 --> 08:15.530 And if we take a look that should move away the pagination from the edges there. 08:15.530 --> 08:17.660 And that's a bit more like it okay. 08:17.660 --> 08:20.180 So now we've got our select input. 08:20.180 --> 08:24.290 What we'll take a look at next is dealing with the image upload. 08:24.290 --> 08:29.720 And we'll add the functionality so that the user can drag and drop an image into a drop zone. 08:29.720 --> 08:32.000 And we'll take a look at that next.