WEBVTT 00:00.320 --> 00:01.460 Okay, so we're almost there. 00:01.460 --> 00:04.970 We've got a few bits to clean up inside our product details page. 00:04.970 --> 00:10.250 Just sort out this button and deal with the details for our product details page. 00:10.250 --> 00:13.190 And back to the components. 00:13.190 --> 00:17.000 And let's do something with the table first of all. 00:17.000 --> 00:25.340 So above the return statement and below the if statement, I'm just going to create a const called products 00:25.370 --> 00:26.720 details. 00:26.750 --> 00:31.160 And I'm going to set it equal to and open up square brackets. 00:31.160 --> 00:33.080 I want this to be an array. 00:33.740 --> 00:35.540 And I'm going to create an object. 00:35.540 --> 00:38.330 And one of the properties is going to be the label. 00:38.330 --> 00:39.710 And I'm going to say name. 00:39.710 --> 00:41.510 And that's going to be for the product name. 00:41.510 --> 00:48.110 And I'm going to give it a value and say product dot name and add a comma and then copy this down four 00:48.110 --> 00:49.190 more times. 00:49.220 --> 00:56.270 The next property will be for the description, and I'll give it a value of product description. 00:56.810 --> 01:03.440 The third one can be for the type, and we'll give the value as the product type. 01:03.890 --> 01:09.110 The fourth one can be for the brand and I'll give it a value of product brand. 01:09.380 --> 01:15.410 And finally we'll have the quantity in stock as the label. 01:15.440 --> 01:19.520 And this of course will be the quantity in stock property. 01:19.580 --> 01:24.020 So the way that we're going to use this, we'll just take the opportunity to loop over each of these 01:24.020 --> 01:32.960 elements in this array and use that to display the table rows that we're going to have inside our table. 01:32.990 --> 01:40.790 So I'll remove that placeholder text and we'll have a table row and we'll open it up. 01:40.790 --> 01:41.900 So we've got children. 01:41.900 --> 01:44.630 And this is going to be what we're looping over. 01:44.630 --> 01:46.010 So we're going to give it a key. 01:46.010 --> 01:51.290 And in fact before the table row we need to open curly brackets and we'll say product details dot map. 01:51.830 --> 01:53.540 And we'll open parentheses. 01:53.570 --> 01:55.370 Open more parentheses. 01:55.370 --> 01:59.660 And I'm going to specify the detail and the index. 01:59.690 --> 02:03.530 Now the detail is going to be the object that we've declared here. 02:03.530 --> 02:07.070 And index is just the index of the elements in the array. 02:07.070 --> 02:10.520 That's what we'll use for the key inside our table. 02:10.520 --> 02:15.310 So I'll just use the arrow and then open up parentheses. 02:15.310 --> 02:21.100 And let's cut our table row and put it inside the curly brackets there. 02:21.130 --> 02:26.200 The thing that we're looping over, because each one of these properties is going to have its own row 02:26.200 --> 02:26.920 in the table. 02:26.920 --> 02:29.440 So we'll give our table row a key because we need to. 02:29.470 --> 02:33.700 It's going to be something that react needs to identify uniquely. 02:33.910 --> 02:40.030 And then for each table row we'll have a table cell and add its closing tag. 02:40.060 --> 02:43.480 And we'll give it a property. 02:43.480 --> 02:47.620 And we'll just use the font weight and set it to be bold. 02:47.620 --> 02:52.180 And this can be for the detail dot label. 02:52.810 --> 02:55.240 And we'll have another table cell below this. 02:55.240 --> 02:57.520 So we'll say table cell. 02:57.520 --> 02:59.860 And we won't give this any properties. 02:59.860 --> 03:02.920 And we'll say detail dot value. 03:02.920 --> 03:07.900 And if we go take a look and see how we're doing, we can see that we've got the details now of our 03:07.900 --> 03:08.770 products. 03:08.800 --> 03:10.000 Great. 03:10.000 --> 03:16.030 But maybe I'd like the font to be a bit bigger for each of these cells inside here. 03:16.030 --> 03:18.910 And let's go take a look at how we can do that. 03:18.910 --> 03:22.810 And if we go up to our table, we can control this at a higher level. 03:22.870 --> 03:28.030 And we'll specify s x equals and double curly brackets. 03:28.570 --> 03:32.290 And inside here we want to target effectively. 03:32.290 --> 03:33.970 So we're using the ampersand. 03:34.450 --> 03:39.880 Then say TD for the table delimiter for each of the table cells. 03:40.420 --> 03:43.150 And then we add a colon and open curly brackets. 03:43.150 --> 03:45.310 And we could specify font size. 03:45.310 --> 03:51.250 And we can set this to one REM a little bit tricky to get this and figure out how to do this. 03:51.250 --> 03:55.450 But if we want to target each of these, what would be in HTML? 03:55.480 --> 04:02.380 This would be a t r and then the table cells would be TDs inside the table row. 04:02.380 --> 04:04.180 So that's what we're targeting here. 04:04.210 --> 04:09.370 Just to increase the font size for each of these rather than specifying it in each one. 04:09.370 --> 04:11.830 It's just really a demonstration of how to target that. 04:11.860 --> 04:17.170 And if we go take a look then we can see the font size has indeed increased from what it was before. 04:17.530 --> 04:18.280 So great. 04:18.280 --> 04:19.450 That's what we're looking for there. 04:19.450 --> 04:24.300 And I just want to deal with this button as well, because I don't like the way it's a different height 04:24.300 --> 04:27.900 to the text field, and I don't know why. 04:27.900 --> 04:31.590 There isn't a way that we can just expand this to match the text field, but there isn't. 04:31.590 --> 04:33.630 So we have to control that manually ourselves. 04:33.630 --> 04:37.320 So let's just adjust the button height as well. 04:37.650 --> 04:43.680 And inside the button let's use the SE property again and we'll give this a height property. 04:43.680 --> 04:47.730 And the text field is 55 pixels in height. 04:47.730 --> 04:52.170 So if we set the height then it should match with the text field. 04:52.170 --> 04:54.480 And indeed it does so great. 04:54.510 --> 04:58.650 Now if we go back to our catalog and we pick a different product, let's pick one of these hats for 04:58.650 --> 04:59.670 instance. 04:59.850 --> 05:03.570 Then we can see the details of the hats. 05:03.600 --> 05:04.440 Marvelous. 05:04.440 --> 05:09.150 That final bit of styling actually brings us to the end of what we're doing inside this section. 05:09.180 --> 05:15.030 This section was mostly about routing, but since we've routed to the product details, we've also taken 05:15.030 --> 05:17.040 the opportunity to style this. 05:17.070 --> 05:18.450 Let's see how it looks in dark mode. 05:18.450 --> 05:21.750 And we can see the colors changing for things like the button. 05:21.750 --> 05:27.780 It makes it a much lighter blue and the text as well, because we're using typography effectively, 05:27.780 --> 05:33.810 then it automatically changes that text as well to a light color instead of a dark color. 05:33.810 --> 05:34.890 So marvelous. 05:34.890 --> 05:40.950 Now we've got the beginnings of our application, and we've got the routing functionality enabled as 05:40.950 --> 05:41.340 well. 05:41.370 --> 05:42.870 Before we go, let's just double check. 05:42.870 --> 05:47.010 I haven't missed anything and we'll take a look at the the Chrome DevTools. 05:47.010 --> 05:54.510 That can be quite worrying, but please do remember if you see a console dev log look like this, that 05:54.510 --> 06:01.950 doesn't mean it's a problem, because hot reload all of these images that we see that's hot module reload. 06:02.100 --> 06:09.510 So we only consider this to be a problem if the problem persists after we refresh the page. 06:09.510 --> 06:15.690 And if the problem does not persist, and we click on a product details and we go back to our catalog 06:15.690 --> 06:17.430 and we click around. 06:17.460 --> 06:21.240 As long as we don't see the persistent problem then it isn't a problem. 06:21.240 --> 06:24.630 It's just hot reload doing its thing as we're making code changes. 06:24.660 --> 06:29.880 Clearly it's trying to load something whilst we're writing code and it's encountering problems, so 06:29.880 --> 06:32.970 it's nothing to worry about on that basis. 06:33.150 --> 06:35.240 So now we've achieved the next milestone. 06:35.240 --> 06:37.880 We've implemented routing in our application. 06:37.880 --> 06:39.920 We'll be using routing all the way through by the way. 06:39.950 --> 06:44.810 So all we've done really in this section is set it up so it's ready for us. 06:44.810 --> 06:49.940 And we'll explore other features of the router as and when we need them in our application. 06:49.940 --> 06:51.830 So let's go back to VS code. 06:51.830 --> 06:55.730 And we're ready to commit our changes into source control. 06:55.850 --> 06:56.630 I'll mention it. 06:56.630 --> 07:00.230 Now these store DB dash m files. 07:00.230 --> 07:01.670 You may see them you may not. 07:01.700 --> 07:04.160 They're just noise that come along with SQLite. 07:04.190 --> 07:05.720 Please ignore them. 07:05.720 --> 07:08.930 You can ignore them and git ignore if you wish to. 07:08.960 --> 07:13.850 I typically am almost blind to these now because I see them so often, but they're meaningless. 07:13.850 --> 07:14.780 They're tiny. 07:14.810 --> 07:16.070 They don't do any harm. 07:16.070 --> 07:17.870 They don't give us any benefit. 07:18.170 --> 07:21.560 They're just something that come along with a SQLite database. 07:21.560 --> 07:26.960 I'm just going to continue, not to worry about them and send them up to GitHub with this commit as 07:26.960 --> 07:27.170 well. 07:27.170 --> 07:32.300 So I'm just going to stage all of the changes and I'm going to say end of section four. 07:32.330 --> 07:34.430 In this case commit the changes. 07:34.430 --> 07:37.190 And we're going to sync this up with GitHub. 07:37.190 --> 07:40.340 And we'll wrap up after this with a summary.