WEBVTT 00:00.350 --> 00:05.420 Okay, let's next work on improving our catalog page that we're currently looking at. 00:05.450 --> 00:09.260 It doesn't look great at the moment, so let's go and adjust that. 00:09.260 --> 00:11.300 And currently we've got this unordered list. 00:11.330 --> 00:12.500 Things are going to change now. 00:12.500 --> 00:17.210 So let's go and add a couple more components inside the catalog folder. 00:17.240 --> 00:20.900 Let's create a new file called Product Lists. 00:21.650 --> 00:23.870 And we'll create another new component. 00:23.870 --> 00:28.940 And this is going to be for a product card dot TSX. 00:28.970 --> 00:31.190 And let's start with the product list. 00:31.190 --> 00:34.940 Let's use the RFC snippet to create the functional component. 00:34.940 --> 00:36.650 And we'll go to our catalog. 00:36.650 --> 00:39.050 And we're going to take the unordered list. 00:39.050 --> 00:45.410 And I'm going to cut this and I'm going to paste it into the product list. 00:45.740 --> 00:47.240 So no styling changes yet. 00:47.240 --> 00:49.400 I'm just really shuffling code at this point. 00:49.400 --> 00:53.870 But we do need to pass the products down to our products list, and we'll do that the same way that 00:53.870 --> 00:54.530 we did before. 00:54.530 --> 01:00.890 We're going to create a type called props, specify products, and that's going to be a type of product 01:00.890 --> 01:01.760 array. 01:02.000 --> 01:04.010 And inside the products list. 01:04.040 --> 01:11.900 We'll destructure the products and give it the type of props and pass in products into the curly brackets. 01:11.990 --> 01:18.170 And then we'll go back to the catalog and in place of our product list, or in place of the unordered 01:18.170 --> 01:24.380 list, I should say we're going to have our products list, and we're going to pass down the products 01:24.530 --> 01:27.140 to that component. 01:27.170 --> 01:30.020 And literally nothing has changed. 01:30.020 --> 01:31.820 We'll still be able to refresh our page. 01:31.820 --> 01:33.830 Everything has stayed the same. 01:33.860 --> 01:36.590 So let's now go to our product card component. 01:36.590 --> 01:39.770 And we'll use the snippet again to create this. 01:39.770 --> 01:43.850 And we're going to pass down an individual product to the product card. 01:43.850 --> 01:49.250 So once again we'll use type props equals open curly brackets. 01:49.250 --> 01:51.140 And this time it's going to be product. 01:51.140 --> 01:55.340 And we're going to pass in or use the type of product there. 01:55.340 --> 02:01.850 And once again we're going to destructure the product and give it the type of props. 02:01.850 --> 02:06.150 And now we can go about the business of styling our product card. 02:06.600 --> 02:10.920 So we're going to use a card from material UI to do this. 02:10.920 --> 02:15.390 So we bring in the card from UI material and inside the card. 02:15.420 --> 02:21.450 This can take properties and we can give our card for example elevation. 02:21.450 --> 02:26.640 And I'll set it to three which makes it appear above the page. 02:27.030 --> 02:30.360 And we'll come back soon to do a bit more styling with this. 02:30.390 --> 02:36.300 We'll just get the elements in place first of all, and we'll use card media, because we'll display 02:36.300 --> 02:39.540 the product image inside the card. 02:39.540 --> 02:44.910 And the card media doesn't need to have children components inside the card media. 02:44.910 --> 02:48.840 So we can just use the or close it off on this line. 02:48.840 --> 02:50.520 And we'll give this some properties. 02:50.520 --> 02:55.350 Now one of the properties we're going to use here is the CSS property. 02:55.470 --> 02:58.080 And this is quite powerful. 02:58.080 --> 03:03.960 This allows us to supply styling classes to our different material UI components. 03:03.960 --> 03:10.410 So I'm going to give this a height, for instance, and I'm going to set it to 240 pixels, and I'm 03:10.410 --> 03:16.620 going to give the background size the styling class, I'm going to set it to cover. 03:16.620 --> 03:20.550 So this means it's going to cover the full amount of its available space. 03:20.580 --> 03:22.860 We can also supply the image. 03:22.860 --> 03:27.210 And this is going to be the product dot picture URL. 03:27.660 --> 03:31.800 And we'll give it a title and set it to product dot name. 03:31.800 --> 03:35.700 And below the card media we're going to have our card content. 03:36.300 --> 03:37.800 And this does take children. 03:37.800 --> 03:39.990 So we'll add its closing tag. 03:40.020 --> 03:42.210 And then we'll have typography. 03:42.210 --> 03:46.050 And we'll use Gutter Bottom to give it some margin at the bottom. 03:46.050 --> 03:50.010 And we'll give it a variant of subtitle two. 03:50.040 --> 03:59.130 And once again we'll use that property to give it some styling classes and say s equals and double curly 03:59.130 --> 03:59.850 brackets. 03:59.850 --> 04:01.470 And we're going to give this a color. 04:01.980 --> 04:10.020 And we can use material theme colors for this and we will stick to using material theme colors, because 04:10.020 --> 04:16.050 we're going to introduce a dark mode and a light mode and material. 04:16.500 --> 04:23.040 When the mode changes, will automatically set the appropriate color for the theme color that we're 04:23.040 --> 04:23.640 choosing here. 04:23.640 --> 04:25.620 So I'm going to go for secondary domain. 04:25.620 --> 04:31.860 That's how we specify that we want to use the secondary theme color from material UI in here. 04:31.860 --> 04:34.260 And inside the typography. 04:34.290 --> 04:38.610 This is going to be the product dot name. 04:38.610 --> 04:42.570 And below this typography we're going to have another typography element. 04:42.600 --> 04:45.480 And we're going to give this some properties as well. 04:45.480 --> 04:48.570 And we'll give it a variant of H6. 04:49.170 --> 04:53.700 We'll give it the SE property so we can supply some styling classes. 04:53.700 --> 04:57.630 And we'll give it a color of secondary. 04:57.660 --> 05:01.890 In fact this is the one I wanted to be secondary main not the one above. 05:01.920 --> 05:05.160 So let's just change what we're doing in here. 05:05.190 --> 05:08.130 What I wanted for the product name was to make it uppercase. 05:08.130 --> 05:10.380 So we're going to use text transform. 05:10.380 --> 05:13.170 And we're going to set this to uppercase. 05:13.170 --> 05:18.660 And the secondary main is going to go in this next typography. 05:19.170 --> 05:22.890 And inside here we're going to set we'll have a dollar. 05:22.890 --> 05:26.640 And then we'll open curly brackets and then parentheses. 05:26.640 --> 05:30.840 And this is going to be the products dot price. 05:30.840 --> 05:32.880 And we want to divide this by 100. 05:32.880 --> 05:36.300 So we use the forward slash 100. 05:36.300 --> 05:42.300 And because we want to display this as a currency we're going to say two fixed and specify two decimal 05:42.300 --> 05:43.350 places. 05:43.950 --> 05:48.780 And below the card contents we can have card actions. 05:48.780 --> 05:51.420 And this is where our buttons are going to go. 05:51.600 --> 05:53.730 And we'll give this some styling. 05:53.730 --> 05:55.950 And we'll specify s x equals. 05:55.950 --> 05:57.780 And we want to centralize this. 05:57.780 --> 06:01.710 So we can use justify content and say space between. 06:01.710 --> 06:04.830 Now I'm going to talk about the flex CSS system soon. 06:04.830 --> 06:12.820 But the idea of this is that the children inside card Actions justify content is going to give them 06:12.820 --> 06:16.660 equal distance space between each element inside the card actions. 06:16.660 --> 06:18.250 And we're going to have two buttons. 06:18.250 --> 06:24.460 We want one on the left of the card, one on the right of the card, and the space between setting is 06:24.460 --> 06:30.220 effectively going to mean that one's positioned on the left and one's floated if you like, to the right. 06:30.220 --> 06:35.650 So we're going to have a button inside here and say add to cart. 06:35.650 --> 06:42.790 And I'll just copy this button down and we'll just use this button to view the details of the product. 06:42.790 --> 06:46.960 So let's go back to our catalog component now. 06:46.960 --> 06:50.740 And I'm going to do something different with this button. 06:50.740 --> 06:53.920 I don't want it inside the catalog component. 06:53.920 --> 07:00.130 So I'm just going to cut it from here and move it into the app dot TSX. 07:00.310 --> 07:06.310 And I'm going to position it below for the time being of the title. 07:06.730 --> 07:12.640 And I'm just going to use the update import to bring in the button into the app dot TSX. 07:13.240 --> 07:15.280 And in the catalog component. 07:15.310 --> 07:19.150 We don't need the ad products added in there. 07:19.150 --> 07:21.610 So I can remove that from here. 07:21.610 --> 07:24.730 And let's just clean things up in here. 07:24.730 --> 07:27.940 So let's remove the import for the button. 07:27.940 --> 07:30.730 So we've got a catalog and that's displaying the product list. 07:30.730 --> 07:34.390 So inside the product list we want to display our product cards. 07:34.480 --> 07:37.990 So instead of this unordered list we're going to have a box. 07:37.990 --> 07:40.600 We're going to use box from movie material. 07:40.630 --> 07:49.810 Now this box is really just like a div that allows us to use the SE property or other styling classes 07:49.810 --> 07:50.770 inside. 07:50.770 --> 07:52.930 This particular component is very useful. 07:52.930 --> 07:58.990 We'll use it quite often, but it's really just like a div in many ways, and it allows us to apply 07:59.020 --> 08:04.480 styling classes, use the SE property that we've used before, and let's take a look at how we're going 08:04.510 --> 08:05.020 to use this. 08:05.020 --> 08:08.290 So I'm going to specify SE because that's available to us here. 08:08.290 --> 08:11.860 And then we can use the display flex. 08:12.190 --> 08:18.190 And I will talk about display, flex and the flexbox system in CSS soon. 08:18.190 --> 08:23.470 But for now we're just going to lay out what we need, and we're going to give it the flex wrap property. 08:23.470 --> 08:28.540 Which means that because we're going to have well, we've got 18 products and they're not all going 08:28.570 --> 08:31.780 to fit on one line. 08:31.780 --> 08:33.640 We need them to wrap around. 08:33.640 --> 08:36.670 So we'll use flex wrap and specify wrap. 08:36.670 --> 08:39.490 We'll give it a gap of three. 08:39.670 --> 08:41.230 And this is not pixels. 08:41.230 --> 08:46.480 This is a spacing which the default is set to eight pixels. 08:46.480 --> 08:52.360 So a gap of three means it's effectively going to be 24 pixels gap between them. 08:52.360 --> 08:56.200 And we're going to say justify content and specify center. 08:56.470 --> 09:04.660 And then inside the loop instead of this list item, we're going to display our product card. 09:04.990 --> 09:07.780 And we're going to pass down the products. 09:08.050 --> 09:14.230 And we might as well change the name of item to product here instead of item, and then just pass down 09:14.230 --> 09:20.240 the product to the product card, and we've still got a warning or something going on in the app.tsx. 09:20.540 --> 09:28.220 And that's because of the ad products, which we no longer need to pass down to the catalog component. 09:28.220 --> 09:34.010 And if we go and take a look at our progress, then not quite what I'm looking for. 09:34.040 --> 09:40.520 Obviously we're missing the images, but we do have product cards, but they're not equal size. 09:40.520 --> 09:44.150 We've got five up here, we've got six here, we've got six here. 09:44.150 --> 09:47.390 So that's definitely not the look that I'm going for. 09:47.390 --> 09:51.080 But we can see the beginnings of what we're going for here. 09:51.590 --> 09:54.170 So let's just go back and give this a bit more styling. 09:54.170 --> 09:58.640 And we need to sort out the heading and the button there as well and centralise that. 09:58.640 --> 10:00.230 But let's go back to our product card. 10:00.260 --> 10:03.980 Because the card itself, we didn't give it any styling properties. 10:03.980 --> 10:08.840 So let's suggest that we'll use the SE property again and we'll add a few things inside here we're going 10:08.870 --> 10:10.910 to set the width of the cards. 10:10.910 --> 10:14.360 And we're going to set it to 200 or 280. 10:14.390 --> 10:18.630 And we're going to give it a border radius of two. 10:18.660 --> 10:22.260 Because the cards typically are material design, two are square. 10:22.290 --> 10:24.030 I'd prefer them to be a bit rounded. 10:24.060 --> 10:26.370 We'll use display and set. 10:26.400 --> 10:34.650 Flex will have a flex direction of column so that the cards go or the contents go across. 10:35.070 --> 10:39.420 And we'll use justify and add a comma and justify. 10:39.450 --> 10:42.210 And we're going to say space between. 10:42.210 --> 10:48.780 And if we go and take a look at what this has done for us, now we can see that our cards are nicely 10:48.780 --> 10:49.590 uniform. 10:49.590 --> 10:51.060 We're still missing the images of course. 10:51.090 --> 10:53.310 We'll sort that out very soon. 10:53.340 --> 10:58.830 And I just want to get the heading centralized above here as well, just in the short term. 10:58.830 --> 11:01.620 So everything looks as it is supposed to. 11:01.920 --> 11:06.810 So let's go and adjust the heading which is in the app dot TSX. 11:06.810 --> 11:12.420 And we'll use the box again just so that we can use Display Flex on. 11:12.450 --> 11:16.800 And I'm going to need to add the quick fix and update the import there. 11:16.800 --> 11:22.100 So we'll take the typography and the button and paste them inside here. 11:22.580 --> 11:28.280 And with this box component we can use the SE property again if we want. 11:28.280 --> 11:36.500 But because the box is kind of a styling utility component, we can also specify display and flex directly 11:36.500 --> 11:37.220 inside here. 11:37.250 --> 11:43.820 Now the default behavior of display flex is that the children will be displayed in a row. 11:43.820 --> 11:47.720 So these should be appearing side by side if I go and take a look. 11:47.750 --> 11:49.190 And that is the case. 11:49.190 --> 11:52.160 But we'd also like to centralize these as well. 11:52.160 --> 11:57.020 So we can use justify content and specify center. 11:57.020 --> 12:00.410 And this should move them over to the center. 12:00.470 --> 12:01.760 And great. 12:01.760 --> 12:04.190 But we could do with some gap between them. 12:04.280 --> 12:06.230 So we can specify gap. 12:06.380 --> 12:08.240 And I'm going to say three. 12:08.240 --> 12:12.260 And if we go and take a look we can see that they're now separated from each other. 12:12.260 --> 12:14.810 And we can also use margin bottom. 12:14.810 --> 12:19.100 Or let's use margin y for above and below margin. 12:19.100 --> 12:21.110 And I'll set that to three as well. 12:21.140 --> 12:22.520 And if we go take a look. 12:22.550 --> 12:24.020 Well that's a bit more like it. 12:24.020 --> 12:25.460 But we're still missing the images. 12:25.460 --> 12:27.380 So let's go and add these now. 12:27.380 --> 12:33.080 And if we go to the course assets folder and we open the course assets we've got an images folder. 12:33.080 --> 12:36.830 Just copy this into your clipboard in its entirety. 12:36.860 --> 12:43.700 Head back to VSCode and inside the public folder in the client folder just right click. 12:43.730 --> 12:47.960 And if you're on a mac, reveal in Finder or Reveal in Windows Explorer. 12:47.960 --> 12:55.760 If you're on windows and just right click and paste the images inside there. 12:56.180 --> 12:58.910 And what we should have is the images. 12:58.910 --> 13:03.080 And we've got a list of our products and all of the different products have images. 13:03.080 --> 13:09.050 And if we go back to our browser and we refresh the page now, we can see that the product images are 13:09.050 --> 13:11.450 displayed here as well. 13:11.690 --> 13:15.830 So without too much effort, we've now got presentable looking product cards. 13:15.830 --> 13:19.460 And we should still have the add product functionality. 13:19.460 --> 13:20.930 And sure we do. 13:20.940 --> 13:26.130 I'm not seeing the image there for some reason, but this is not functionality that is going to remain. 13:26.130 --> 13:28.380 But we can add products, albeit without images. 13:28.380 --> 13:32.580 And the way that the flexbox lays them out is like so. 13:32.610 --> 13:37.770 We'll probably change this to a grid system because that gives us a bit more control and flexbox, but 13:37.830 --> 13:39.240 that's pretty okay. 13:39.270 --> 13:39.960 So great. 13:39.990 --> 13:41.190 Now we've got our product cards. 13:41.190 --> 13:45.750 And before we do move forward I just want to open up the console, Chrome DevTools, make sure there's 13:45.750 --> 13:49.350 no errors because I can see that there is an error inside here. 13:49.350 --> 13:52.380 I just want to refresh the page and see if that persists. 13:52.380 --> 13:54.960 And sure, we know what this problem is. 13:54.960 --> 13:56.220 We've seen it before. 13:56.250 --> 14:00.870 Each item in a list inside react needs to have a unique key. 14:00.870 --> 14:07.170 So let's just go back to the product list and give our product cards the key property and set it to 14:07.200 --> 14:09.570 product.id. 14:09.990 --> 14:11.580 That should resolve that warning. 14:11.580 --> 14:14.070 And if I just refresh the page again, great. 14:14.100 --> 14:15.510 Now the warning has gone. 14:15.510 --> 14:17.430 But I do want to point out what it says here. 14:17.460 --> 14:20.400 Download the react DevTools for a better experience. 14:20.400 --> 14:23.130 We're going to take a look at that next.