WEBVTT 00:00.000 --> 00:03.060 Okay, so we've confirmed that we can get our basket back from our API. 00:03.060 --> 00:05.850 And let's just double check the Redux dev tools again. 00:05.880 --> 00:10.650 Actually, thinking about it, make sure that our component states or our global state is what we'd 00:10.680 --> 00:11.460 expect it to be. 00:11.460 --> 00:16.320 So I'll head back to Redux Dev Tools, and if we take a look and just click on the last request, we 00:16.320 --> 00:27.120 can take a look at our basket API inside the queries, inside the fetch baskets and inside the data. 00:27.120 --> 00:33.060 Then we can see that we've got our basket ID, and we've got the items inside that basket that we can 00:33.060 --> 00:38.670 use to display the contents of our basket on this page. 00:38.700 --> 00:39.750 Perfect. 00:39.780 --> 00:46.650 So now we've confirmed that let's go back to VS code and start thinking about styling our basket page. 00:46.650 --> 00:50.370 And I'll close the others inside here. 00:50.370 --> 00:54.210 So we're going to display our basket items in a grid. 00:54.210 --> 00:56.160 So I'll remove what we currently have. 00:56.160 --> 01:00.720 In the return statement I'll open left angle brackets and then I'll specify grid two. 01:00.750 --> 01:08.450 We need for this And we'll give the grid to a container property and we'll give it spacing equal to 01:08.480 --> 01:09.080 two. 01:09.110 --> 01:10.520 In this case. 01:10.580 --> 01:13.940 And then below our grid two we add another grid two. 01:14.660 --> 01:16.910 And we'll give this a size. 01:16.970 --> 01:20.570 And this is going to take up two thirds of the available space. 01:20.570 --> 01:23.270 So we'll give it a size of eight. 01:23.660 --> 01:27.590 And inside here we're going to loop over our basket items. 01:27.590 --> 01:33.590 So we'll specify data I dot items and then we'll use the map function. 01:33.590 --> 01:37.580 And open parentheses will specify item at the arrow. 01:37.610 --> 01:39.770 Open parentheses. 01:39.860 --> 01:47.120 And then each item in here is going to effectively have its own basket item. 01:47.120 --> 01:54.380 So I'll specify basket item which is a component we'll create soon but we don't have yet. 01:54.380 --> 01:57.710 And we're going to pass down to this. 01:58.940 --> 02:02.300 And I'll just call it item item. 02:02.300 --> 02:08.900 And we'll give it a key equal to item dot product ID and we'll make it self-closing. 02:08.900 --> 02:11.450 So we just need to create the list component. 02:11.450 --> 02:15.770 And inside the basket folder I'll say new file. 02:15.800 --> 02:19.280 And we'll call this basket item dot TSX. 02:19.310 --> 02:22.580 And we'll use RFC to create the boilerplate. 02:22.580 --> 02:25.460 And we'll populate what we need inside this component. 02:25.460 --> 02:29.750 So first of all we're passing down our item our basket item to this component. 02:29.750 --> 02:33.140 We need to add some props to type for props inside here. 02:33.140 --> 02:36.380 And we'll say type props equals open curly brackets. 02:36.380 --> 02:39.890 And we'll say item is of type. 02:39.890 --> 02:44.870 And what did we call the basket item in our type. 02:44.870 --> 02:46.850 We just called it item in fact okay. 02:46.880 --> 02:50.420 So this is going to be a type of item okay. 02:50.420 --> 02:53.660 And then we'll specify and destructure the props inside here. 02:53.660 --> 02:56.060 So I'll say item and props. 02:56.090 --> 03:00.560 And let's populate this. 03:00.560 --> 03:04.760 Now we've got a bunch of material by components inside here for the styling. 03:04.790 --> 03:10.490 So it's going to be a bit of typing that we need to do here to lay out our content in our page. 03:10.490 --> 03:15.440 But first of all, let's just bring in the import for the basket item so that we can check things as 03:15.440 --> 03:21.200 we go along inside our basket page and take a look at what we're doing for the basket item. 03:21.200 --> 03:29.750 So we'll put each basket item in a paper component, and we'll give the paper an SE property and open 03:29.750 --> 03:31.280 double curly brackets. 03:31.280 --> 03:34.880 And we'll give each basket item a height of 140. 03:34.910 --> 03:39.710 We'll give it a border radius of three so that we can round the corners. 03:39.740 --> 03:43.640 We'll use Display Flex for the content inside. 03:44.480 --> 04:01.310 We'll use justify content and say space between and align items of center and margin bottom of two between 04:01.310 --> 04:04.580 each basket item and inside the paper. 04:04.580 --> 04:11.990 Then let's give some space inside here we'll be using an outer box to control the styling of this component 04:12.710 --> 04:14.240 or what's inside here. 04:14.240 --> 04:16.370 And we'll use Display Flex again. 04:17.780 --> 04:21.980 And we'll say align items and make that center. 04:22.820 --> 04:28.550 Inside this box we'll go another box that's really just going to contain the product image. 04:29.030 --> 04:30.890 So I'll just expand this. 04:30.890 --> 04:36.500 And inside the right angle bracket there I'll specify the component for this one to be image. 04:36.500 --> 04:38.990 Just a normal HTML image tag. 04:39.020 --> 04:44.030 We'll specify the source to be the item dot picture URL. 04:44.030 --> 04:51.320 We'll give it an alt tag equal to item again of well item dot name in this case. 04:51.680 --> 04:55.310 And then we'll use the SE property to give our image a bit of styling. 04:55.310 --> 05:01.790 So we want the width here to be 100, the height to be 100 as well. 05:01.790 --> 05:03.080 We'll just go for square images. 05:03.080 --> 05:07.100 But we'll use the object fit CSS property. 05:07.100 --> 05:14.510 So even if it's not a square image, then it's going to be a square image and it will cover 100 by 100. 05:14.540 --> 05:23.390 In our component we'll also use a border radius here of and we'll just put four pixels inside here. 05:23.390 --> 05:25.850 And we'll have margin rights. 05:27.080 --> 05:28.850 And we'll set that to eight. 05:28.850 --> 05:32.360 And we'll have margin left which I could have used. 05:32.390 --> 05:32.840 Mr.. 05:32.930 --> 05:35.450 I guess as four. 05:35.480 --> 05:36.800 In fact, we can use margin. 05:36.800 --> 05:37.130 Right. 05:37.130 --> 05:38.900 Or we can shorthand that to Mr.. 05:38.930 --> 05:40.100 I'll just use Mr.. 05:40.130 --> 05:47.060 There and let's see, I've got the closing tag for the box here for the image, but actually, because 05:47.060 --> 05:48.980 it's an image, we don't need a closing tag layer. 05:48.980 --> 05:53.030 We can just make this self-closing by using the forward slash there. 05:53.750 --> 05:56.960 So below this box we'll need another box. 05:59.090 --> 06:04.010 And we'll give this display of flex. 06:04.040 --> 06:07.490 We'll have a flex direction of column. 06:07.490 --> 06:10.490 And we'll have the gap equal to one. 06:10.580 --> 06:13.250 And in fact, let's just check our progress and see how we're doing. 06:13.250 --> 06:19.850 So we've got our paper with the item image that looks okay and we've got our little rounded corners. 06:19.850 --> 06:23.690 And over here on the left hand side we're going to have our basket items. 06:23.690 --> 06:29.600 And on the right hand side is going to go our order summary in this section. 06:29.600 --> 06:33.500 So we'll get the totals and things like that on the right hand side. 06:34.040 --> 06:38.660 So inside this box then we'll first of all have typography. 06:40.160 --> 06:43.610 And we'll give it a variance of H6. 06:43.760 --> 06:49.370 And we'll specify the item name inside here. 06:49.520 --> 06:51.860 And this just makes sure this is lined up correctly. 06:51.890 --> 06:52.730 Sure that's fine. 06:52.730 --> 06:56.390 And then below this typography we'll have another box. 06:57.290 --> 07:00.680 And we'll use Display Flex once again. 07:00.890 --> 07:04.790 And we'll use the align items of center. 07:05.720 --> 07:08.660 And we'll use gap equal to three. 07:10.760 --> 07:18.070 And then we'll have a couple of typography properties inside here to display the price and the quantity. 07:18.100 --> 07:21.970 So I'll bring that down and give that an SE property. 07:21.970 --> 07:28.210 And we'll just use font size and set this to 1.1 REM. 07:29.710 --> 07:34.690 And inside this one we'll display our basket price here. 07:34.690 --> 07:36.910 And we still don't have a helper function for this. 07:36.910 --> 07:42.880 But I'll just specify the item dot price and divide it by 100. 07:44.080 --> 07:47.950 And then we'll use the two fixed and specify two. 07:48.040 --> 07:54.040 And then to the right of the curly brackets we'll use x and then item dot quantity. 07:54.040 --> 07:57.970 And then let's just copy this one down for convenience. 07:58.990 --> 08:06.820 And this one's going to be the subtotal if you like of the order total of the quantity times the price 08:06.820 --> 08:07.060 here. 08:07.060 --> 08:14.550 So we'll after the divide by 100 we'll multiply it by item dot Quantity. 08:14.580 --> 08:18.750 Let's add a space there and we don't need the x item quantity. 08:18.750 --> 08:25.770 So if we go take a look then we can see that we've got our price of the item times one. 08:25.770 --> 08:27.900 And that gives us the price there. 08:27.900 --> 08:33.540 And let's give the second one a bit of color in the typography. 08:33.540 --> 08:35.970 And I'll just say color equals primary. 08:35.970 --> 08:42.660 And below this box where we've got the pricing information we're going to add a grid or grid two in 08:42.660 --> 08:43.650 this case. 08:44.220 --> 08:49.350 And we'll give it the container and we'll give it spacing equal to one. 08:49.350 --> 08:53.070 And we'll have align items and center. 08:55.050 --> 09:02.220 And we'll have some buttons inside here so that the user can increase the quantity or decrease the quantity 09:02.220 --> 09:03.810 or remove the item. 09:05.820 --> 09:07.920 So we'll have a button. 09:09.210 --> 09:16.350 In fact we'll make it an icon button because it's just going to have an icon inside it and inside the 09:16.350 --> 09:23.280 icon button we'll have the remove icon, which we get from Mui icons material, and we'll give the icon 09:23.280 --> 09:28.770 button a color, and we'll set this one to error so it's red. 09:28.800 --> 09:38.940 We'll give it a size equal to small, and we'll give it the SE property and say border colon one and 09:38.940 --> 09:44.700 border radius of one. 09:44.700 --> 09:48.390 And we'll give it min width property of zero. 09:49.170 --> 09:51.330 And let's just see how that's looking okay. 09:51.360 --> 09:51.840 That's fine. 09:51.840 --> 09:57.090 That's what we're looking for here a little button we can click on to minus the quantity or reduce the 09:57.090 --> 09:58.050 quantity. 09:58.080 --> 10:02.730 We'll have another icon button below this to add. 10:02.730 --> 10:09.330 So I'll change remove and say add for this one which we get from Material Icons. 10:09.450 --> 10:14.400 And the color for this one will set to success. 10:15.030 --> 10:21.450 And in between these two buttons we'll will add typography, and we'll give this a variance equal to 10:21.480 --> 10:23.070 H6. 10:24.150 --> 10:27.330 And inside here can go the item dot quantity. 10:27.330 --> 10:31.290 And if we take a look great we can see the number inside there. 10:31.290 --> 10:38.280 And the other thing that I'd like to add to our basket items is to have an X on the top right here, 10:38.280 --> 10:42.960 so that we can remove the entire item from a basket. 10:42.960 --> 10:48.240 Even if there's ten of these, we can click one button to remove the whole thing from our basket as 10:48.240 --> 10:48.660 well. 10:48.660 --> 10:56.760 So inside here, below the or just above the paper we'll have another button. 10:57.330 --> 11:03.540 So I'll just add the or the icon button I should say another icon button here. 11:04.260 --> 11:08.580 And let's just use the same properties here. 11:08.580 --> 11:14.130 I'll just copy this and paste it in here. 11:14.250 --> 11:18.660 So small icon button with the same SE properties. 11:20.700 --> 11:26.250 And we'll make this, or we'll give this a color equal to error as well, because it's going to be for 11:26.250 --> 11:27.240 removing. 11:28.470 --> 11:32.820 And in this one we'll use the close icon. 11:32.820 --> 11:35.640 And we'll also give this an additional property. 11:35.910 --> 11:44.460 And because we're inside a flex container at this point we can use align Self and set this to start 11:44.490 --> 11:49.950 so that it should appear in the top right of this as well. 11:50.070 --> 11:54.360 So we'll be able to click this button to remove the icons. 11:54.780 --> 12:01.890 And maybe we should give this a bit of margin on the right and the top just to move it away from the 12:01.890 --> 12:02.520 edge there. 12:02.520 --> 12:04.680 So let's do that as well. 12:04.890 --> 12:07.710 And we're getting quite busy in this property. 12:07.740 --> 12:14.370 So let's just rearrange things slightly so I don't go too far off the edge of the screen, which is 12:14.370 --> 12:20.190 always quite difficult when dealing with significant components inside a component. 12:20.190 --> 12:26.610 And we'll just give it margin rights of one and margin top of one. 12:26.850 --> 12:28.380 And I just need a comma there. 12:28.380 --> 12:29.700 And let's go take a look. 12:29.730 --> 12:31.410 And sure that's a bit more like it. 12:31.410 --> 12:33.750 So now we've got our basket items. 12:33.750 --> 12:34.560 Marvelous. 12:34.560 --> 12:40.620 And supposing I go back to the catalog and I pick a different product and I add let's add a hat to the 12:40.620 --> 12:41.520 cart. 12:42.030 --> 12:42.870 That should have worked. 12:42.900 --> 12:43.650 No problem. 12:43.650 --> 12:47.130 And if I go back to the shopping cart, where's my hat? 12:47.130 --> 12:52.080 It doesn't exist inside the basket and that's no good. 12:52.170 --> 12:58.200 But what's going on here is react query is doing its job and caching things, because in order to go 12:58.200 --> 13:02.550 and get the basket, we've made the same request to our API, but it's not showing up here. 13:02.550 --> 13:07.350 We will get the new item if I refresh the page and we can see it inside there. 13:07.350 --> 13:13.140 But what I would like to happen, of course, is when I do add something new to the basket and then 13:13.140 --> 13:14.580 I go to look at the basket. 13:14.580 --> 13:18.240 I would like to see it on this page without needing to refresh. 13:18.240 --> 13:22.170 So we're going to take a look at how we deal with that using react query. 13:22.200 --> 13:23.160 Next.