WEBVTT 00:00.110 --> 00:05.390 So our next task on the list, and the last task for this particular section is just to give our product 00:05.390 --> 00:07.370 details page some actual detail. 00:07.400 --> 00:08.660 Currently we do not have much. 00:08.660 --> 00:10.640 So let's head back to VS code. 00:10.640 --> 00:12.650 And let's see. 00:12.650 --> 00:16.970 Let's just go to our product details and we'll just close the others. 00:16.970 --> 00:18.590 Now we're already fetching our product. 00:18.620 --> 00:22.520 So really it's just a matter of styling our page. 00:22.520 --> 00:28.250 So in order to layout our page we're going to take a look at using material UI grid system to do this. 00:28.250 --> 00:35.300 And if we go and take a look at the material UI docs and we take a look inside here for the grid in 00:35.300 --> 00:38.900 the components, there is a grid that's now been deprecated. 00:38.930 --> 00:41.450 They've updated the grid in material UI. 00:41.480 --> 00:43.460 So we're going to be using grid version two. 00:43.490 --> 00:45.380 And how this works. 00:45.440 --> 00:50.660 Well it uses flex behind the scenes for high flexibility and effectively. 00:50.660 --> 00:54.140 Just like other styling frameworks we get 12 columns to work with. 00:54.140 --> 01:01.130 And this allows us to layout our page how we want to using this grid system, and it gives us quite 01:01.160 --> 01:03.350 a bit of control about where things line up. 01:03.350 --> 01:07.550 For our product details page, we're really just going to have a left area and a right area. 01:07.580 --> 01:12.110 The left area is going to show the image of the product, and the right area is going to show the details. 01:12.110 --> 01:14.930 So let's take a look at actually using this. 01:14.960 --> 01:21.950 We've got an example in here we have an outer grid that has or is given the property container as it 01:21.980 --> 01:23.480 contains grid items. 01:23.480 --> 01:30.470 But we still use grid and specify a size of how many columns we want this grid item to take up. 01:30.470 --> 01:31.790 That's the idea of this. 01:31.790 --> 01:35.360 And that's what we will implement inside here. 01:35.660 --> 01:43.430 And also by the way, we'll also take a look at using a simple table to also lay out the content inside 01:43.430 --> 01:44.000 here. 01:44.000 --> 01:46.700 And where is the table. 01:47.480 --> 01:48.050 Here we go. 01:48.050 --> 01:48.800 Here's the table. 01:48.800 --> 01:54.500 So we'll also make use of the table inside here to display the details of the product as well. 01:54.500 --> 01:56.090 Something along these lines. 01:56.090 --> 02:01.100 So let's go take a look and layout our page as we want it. 02:01.160 --> 02:05.210 So let's start implementing this and we'll make use of the grids. 02:05.210 --> 02:08.330 And we can't use grid anymore. 02:08.330 --> 02:10.280 And we can use grid two. 02:10.790 --> 02:12.830 And that's what we'll make use of. 02:12.860 --> 02:14.450 Looks a bit weird because we've got the two. 02:14.450 --> 02:18.260 But that's the way we've imported it here as a named import. 02:18.380 --> 02:22.850 The way they used it in the docs was they specified grid two here. 02:22.850 --> 02:28.040 And then instead of using grid two like that, they specified grids. 02:28.130 --> 02:31.760 And then we could use grid like so. 02:31.760 --> 02:36.740 And that would work fine because we're using grid two because that's where we're importing it from. 02:36.740 --> 02:38.720 Either approach will work. 02:38.720 --> 02:46.010 I do prefer the named import approach, although it does look kind of a bit weird using grid two, but 02:46.010 --> 02:47.810 it still works just the same way. 02:47.810 --> 02:53.870 And I think I actually prefer this for a training course, because it makes it very clear which version 02:53.870 --> 02:55.610 of the grids I am using. 02:55.610 --> 02:57.110 As I'm typing it out. 02:57.140 --> 03:01.120 Now we need a container, first of all for a grid container. 03:01.120 --> 03:06.520 So we'll give this the property of container and we'll give it some spacing between the grid items of 03:06.520 --> 03:07.420 six. 03:07.450 --> 03:11.170 I'm also going to give this a max width property of large. 03:11.170 --> 03:13.840 So it doesn't take up the full width of the screen. 03:13.840 --> 03:16.990 And we can come back and adjust that if we need to. 03:17.020 --> 03:21.370 And I'm also going to centralize this in the center of the page. 03:21.370 --> 03:25.150 And we can do that by giving left and right margin to auto. 03:25.150 --> 03:32.530 So I'm going to specify mm for left right margin and set that to auto inside the grid I'm going to have 03:32.530 --> 03:34.390 a grid to again. 03:34.480 --> 03:39.010 And I'm going to give this a size six. 03:39.010 --> 03:41.710 So it takes up half the width of the page. 03:41.710 --> 03:43.570 Inside here is just going to go an image. 03:43.570 --> 03:45.640 So we're going to use a normal image tag here. 03:45.670 --> 03:49.960 Material UI doesn't have a specific image tag that we can use. 03:49.960 --> 03:52.840 We'll just use the standard HTML image tag here. 03:52.840 --> 03:59.560 And for the image source we're going to specify the product dot picture URL. 03:59.560 --> 04:03.640 and we've still got the optional chaining going on here. 04:03.640 --> 04:06.100 So we don't know if we've got the product yet. 04:06.100 --> 04:13.810 So to avoid using the optional question mark layer, we can check to see if we have the product before 04:13.810 --> 04:16.870 we return the product details. 04:16.870 --> 04:22.120 So we'll check and we'll say if not product then we're going to return a div. 04:22.120 --> 04:24.340 And we're just going to say loading dot dot dot. 04:24.340 --> 04:27.910 I'm going to presume we're not really doing error handling here. 04:27.910 --> 04:33.460 I'm going to presume as long as we've got the correct ID of a product that exists in our database, 04:33.460 --> 04:35.710 we're going to get it back eventually. 04:35.710 --> 04:38.170 So I'm just going to have a div that says loading. 04:38.170 --> 04:43.480 If we do not have a product when the component first mounts, and for the alternate, we'll just use 04:43.480 --> 04:47.560 the product name as the alternate here as well. 04:47.890 --> 04:51.220 And we'll give this some inline style. 04:51.250 --> 04:54.910 And we'll open curly brackets and more curly brackets. 04:54.910 --> 04:58.690 And we're going to set the width property to 100%. 04:58.690 --> 05:01.240 So it takes up all of its available width. 05:01.270 --> 05:04.810 Now, below the grid with the size of six, we're going to have another grid. 05:04.840 --> 05:06.790 So I'm going to specify grid two again. 05:06.850 --> 05:12.940 And inside this one we'll also give it the size of six. 05:13.000 --> 05:17.080 So it takes up the available space on the right hand side. 05:17.110 --> 05:20.530 And inside here we're going to have typography. 05:20.890 --> 05:24.400 And we're going to give it a variant of H3. 05:24.400 --> 05:26.980 And this is just going to be for the title of the product. 05:26.980 --> 05:30.520 So it's going to be products dot name. 05:31.660 --> 05:34.330 Below the typography we'll have a divider. 05:34.330 --> 05:37.750 And this is another component we can get from Mui material. 05:37.780 --> 05:43.090 So we'll bring that in and we'll give this some styling and say six equals. 05:43.090 --> 05:44.410 And we'll give it a margin. 05:44.410 --> 05:50.020 Bottom of two to add a bit of space between this and the next line. 05:50.020 --> 05:52.720 And we'll use typography again. 05:52.780 --> 05:55.840 This one will give a variant of H4. 05:55.870 --> 06:02.830 We'll give it a color equal to Secondary and inside here this is going to be for the product price. 06:02.830 --> 06:09.070 So we'll use a dollar and open curly brackets and open parentheses. 06:09.070 --> 06:12.070 And we'll specify the products dot price. 06:12.250 --> 06:16.480 And for the time being we're just going to do the calculation in here. 06:16.480 --> 06:18.970 Because we get this back as a long from our API server. 06:18.970 --> 06:22.660 We need to divide this by 100 to give us the decimal price. 06:22.660 --> 06:24.610 And then to display it as a decimal. 06:24.640 --> 06:30.010 We'll say two fixed and two decimal places below the typography. 06:30.880 --> 06:33.460 Here we will have a table. 06:35.530 --> 06:40.420 And we need to use the table container from Mui material. 06:40.420 --> 06:48.130 And inside here we can specify that we want to use a table also of course from Mui material. 06:48.670 --> 06:51.070 And we need to give our table a bit of styling. 06:51.070 --> 06:54.550 So I'm just going to drop down the right hand angle brackets. 06:55.210 --> 07:05.140 And I'm going to say sx equals curly brackets and inside the table is going to go a table body. 07:07.150 --> 07:11.740 And in the table body, just for the time being I'll just say table goes. 07:11.740 --> 07:17.890 Here I want to demonstrate a way to use this so that we can loop over the different properties that 07:17.890 --> 07:25.570 we want to display in the table body without having a giant component full of table rows and table cells. 07:25.600 --> 07:27.910 I want to show an approach where we can loop over that. 07:27.910 --> 07:33.130 So I'm just going to say table goes here and cover that in the next lesson. 07:33.130 --> 07:38.290 For now we're just going to concentrate on getting the layout specified inside here. 07:38.320 --> 07:42.130 Now below the table container we're going to have another grid. 07:42.130 --> 07:44.080 So a grid within a grid. 07:44.080 --> 07:47.080 So I'm going to say grid two once again. 07:47.170 --> 07:51.910 And this is going to be a container because it's going to be a container for another grid. 07:51.910 --> 07:54.430 And we'll give this a spacing of two. 07:54.430 --> 08:00.670 And we'll give this margin top And set that to three. 08:00.700 --> 08:03.820 Inside this grid we're going to have another. 08:03.850 --> 08:06.190 Well we're going to use grid two again. 08:08.080 --> 08:12.280 And we're going to give this to size equal to six. 08:12.910 --> 08:18.370 And what we're going to have inside here we're going to give the users the opportunity once we've got 08:18.370 --> 08:25.660 the functionality in place of course, to add or update the quantity of this item in their shopping 08:25.660 --> 08:26.110 cart. 08:26.140 --> 08:32.410 So what we'll have is we'll use a text field from again material UI. 08:33.070 --> 08:35.200 And this is self-closing. 08:35.200 --> 08:39.370 We just need to use this or give this some properties inside here. 08:39.370 --> 08:44.230 So I'm going to specify a variant of outline for the text input. 08:44.260 --> 08:49.660 We're going to give it a type equal to number because it's going to be the number of items in the basket. 08:49.660 --> 08:55.030 And we'll give it a label equal to quantity in basket. 08:55.240 --> 09:00.190 And by the way you may notice me using a difference with the quotes here, it really doesn't matter. 09:00.190 --> 09:03.910 We can use either double quotes or single quotes. 09:04.420 --> 09:11.050 And I think just for convenience, when I type in the quotes directly myself, it's just quicker and 09:11.050 --> 09:14.440 easier to use a single quote, but it doesn't make any difference. 09:14.440 --> 09:21.280 Well, it might be nice to be consistent, but single double quotes, it's fine both ways. 09:21.280 --> 09:27.760 And then I'll specify full width so it takes up all of its available space inside the grid. 09:27.760 --> 09:33.700 And I'm going to give it a default value equal to one inside that text field. 09:34.090 --> 09:43.600 And below this grid to the will have another grid two and add its closing tag. 09:44.710 --> 09:50.650 And we'll give this one also the size of six. 09:51.040 --> 09:54.370 And inside here is going to be a button. 09:54.880 --> 10:00.150 And we'll give the button some properties and give it a color equal to primary. 10:00.150 --> 10:10.230 This time the size of the button can be large, the variance can be contained, and we'll again use 10:10.230 --> 10:10.890 the full width. 10:10.890 --> 10:13.170 So it takes up all of its available space. 10:13.170 --> 10:17.610 And I'll just say add to basket as the label for that button. 10:17.610 --> 10:19.830 So we should have something to look at. 10:19.830 --> 10:22.200 We've still got a bit more work to do inside here. 10:22.200 --> 10:24.660 We may need to come back and adjust some styling. 10:24.660 --> 10:27.720 I'm sure we will, but let's see how we're getting on so far. 10:27.750 --> 10:34.350 And if I go back to the product details page and I refresh the page, then we can see we're making some 10:34.350 --> 10:34.830 progress. 10:34.860 --> 10:37.170 Okay, there's a few things that we need to look at. 10:37.260 --> 10:41.130 The button height doesn't match the text field. 10:41.130 --> 10:45.720 I don't know why this is a material design choice, but for some reason it is. 10:45.840 --> 10:50.580 Our text fields are much bigger than in height terms than our buttons, so it looks a bit weird side 10:50.610 --> 10:53.790 by side, but otherwise that seems fine so far. 10:53.820 --> 10:58.890 A bit more work to do, and we'll finish up the styling of this in the next lesson.