WEBVTT 00:00.020 --> 00:00.260 Okay. 00:00.290 --> 00:02.240 Our next task is to create the basket component. 00:02.240 --> 00:05.000 So let's go to let's close all this stuff down. 00:05.000 --> 00:13.730 And inside our basket folder let's create a new file and we'll call it basket page dot TSX. 00:13.730 --> 00:16.610 This is going to be a react component this time. 00:16.610 --> 00:19.580 So we'll use our snippet for the boilerplate the RFC. 00:20.000 --> 00:24.560 And this gives us our function that we used to return JSX. 00:25.160 --> 00:27.650 And we'll also update our route. 00:27.650 --> 00:30.050 So we'll go to routes TSX. 00:30.050 --> 00:33.470 And let's just copy the contact down in this case. 00:33.470 --> 00:36.590 And we'll specify basket as the path. 00:36.590 --> 00:42.530 And we'll use our basket page component so that we get taken to our new component. 00:42.740 --> 00:46.970 We're going to use this with our shopping cart icon that we have in the navbar. 00:46.970 --> 00:50.570 So our next stop is going to be the navbar dot TSX. 00:50.750 --> 00:55.940 And let's see where we've got our shopping cart icon. 00:55.940 --> 01:03.140 Then we're going to specify the icon button component to be a link that we get from React Router Dom. 01:03.140 --> 01:08.090 So I'll say component here equals. 01:08.090 --> 01:13.010 And then we're going to use the link component that we get from React Router Dom. 01:13.010 --> 01:15.950 And because it's a link, we need to give it the two property. 01:15.950 --> 01:19.700 And we'll just say in quotes forward slash baskets. 01:19.700 --> 01:23.660 And if we take a look at our browser, we'll head back to our application. 01:24.530 --> 01:28.670 And if we click on the shopping cart then we get taken to our basket page. 01:28.700 --> 01:29.240 Excellent. 01:29.240 --> 01:33.290 So let's head back to VS code and we'll go back to our basket page. 01:33.290 --> 01:36.830 And we'll start to configure what we need inside here. 01:37.370 --> 01:40.520 So we're going to go and get our basket from the API. 01:40.520 --> 01:43.550 We don't have anything in our client browser yet for a cookie. 01:43.550 --> 01:44.720 So we don't have a basket here. 01:44.720 --> 01:50.720 What we did in postman doesn't come across to what we're doing inside our browser, but we will make 01:50.750 --> 01:54.050 use of the use fetch basket query. 01:54.050 --> 02:00.620 So I'll say const open curly brackets and then equals use fetch basket query. 02:00.650 --> 02:03.950 And we will have inside here the data. 02:03.950 --> 02:07.280 And we'll also make use of the Isloading property. 02:08.120 --> 02:10.640 We'll check to see if we are is loading. 02:10.640 --> 02:15.710 And we will return a div saying loading baskets. 02:15.710 --> 02:24.630 Or in fact let's make that typography so that dark mode and light mode operate the same way as it changes 02:24.630 --> 02:25.350 the text color. 02:25.350 --> 02:30.150 And I'll just add that import from material and just add dot dot dot. 02:30.180 --> 02:35.010 After that, we're going to have our loading indicator anyway that we centralized earlier on. 02:35.010 --> 02:39.510 But this is just in addition to say what's going on as it's going on. 02:39.510 --> 02:46.080 And below this we'll say if no data or not data, then we will return. 02:46.080 --> 02:53.700 And again we'll use typography here and we'll give this one a variant of H3. 02:54.090 --> 02:57.930 And we'll just specify your basket is empty. 02:57.930 --> 03:05.760 And what we'll return in the short term is we'll just have a data and then the basket ID. 03:05.760 --> 03:08.850 So when we do have a basket we'll see something. 03:09.150 --> 03:12.960 But for now what we'd expect to see is your basket is empty. 03:12.960 --> 03:13.620 So great. 03:13.650 --> 03:15.720 That's what we're looking for right now. 03:15.720 --> 03:19.770 And what we'll take a look at next is inside our catalog. 03:19.770 --> 03:21.660 We've got this add to cart button. 03:21.780 --> 03:26.730 We'll add the functionality so that we can indeed add an item into our basket. 03:26.730 --> 03:28.890 And we'll take a look at that next.