WEBVTT 00:00.020 --> 00:00.260 Okay. 00:00.290 --> 00:01.010 Our last task. 00:01.010 --> 00:02.000 Well, maybe two tasks. 00:02.000 --> 00:04.160 There's something I want to check before we move on. 00:04.160 --> 00:07.670 Maybe a bug that's hard to spot with what we've done so far. 00:07.670 --> 00:09.440 But I just want to check something as well. 00:09.440 --> 00:14.240 But we're going to implement well, start to implement the checkout page so that when we do click on 00:14.240 --> 00:17.840 this button, of course we get taken to a checkout component. 00:17.840 --> 00:19.130 So back to VS code. 00:19.130 --> 00:27.500 Let's clean this stuff at the top and we will in our features folder we will create a new feature. 00:27.500 --> 00:35.150 So we'll say new file and I'll say checkout forward slash checkout page dot TSX. 00:35.150 --> 00:39.830 And we'll just create a boilerplate for a functional component inside here. 00:40.490 --> 00:43.880 And we're not going to do much with this right now. 00:43.910 --> 00:48.260 We'll defer this to another section devoted to checkout functionality. 00:48.260 --> 00:53.030 But we use typography and we'll just give it a variant of H3. 00:53.030 --> 01:03.870 And inside here I'm just going to specify or put a label in saying only authorized users Is should be 01:03.900 --> 01:10.920 able to see this as we're going to ensure that our users do log in when they do go to the checkout. 01:10.950 --> 01:15.750 Most of our apps are going to be anonymous, apart from things like the checkout the orders page and 01:15.750 --> 01:17.280 when we get to it, the admin page. 01:17.280 --> 01:21.030 But for the majority of our application, it's going to be for anonymous access. 01:21.030 --> 01:25.350 But when they do try and get through to the checkout page, if they're not logged in, then we're going 01:25.380 --> 01:28.020 to ask them to log in at that point. 01:28.170 --> 01:34.980 So let's go to our basket page so that we can update this or not our basket page. 01:34.980 --> 01:39.060 It needs to be the order summary actually and go to this definition. 01:39.180 --> 01:41.070 And where we've got our button. 01:41.070 --> 01:42.840 Do we have the route inside here. 01:42.840 --> 01:45.180 Did I provide that. 01:45.510 --> 01:46.590 I did not. 01:46.620 --> 01:46.950 Okay. 01:46.980 --> 01:50.190 So we'll add a route inside here for the button. 01:50.190 --> 01:59.970 And we'll use the components equals link which we get from React Router. 01:59.970 --> 02:02.230 And then we can give it the two property. 02:02.230 --> 02:04.990 And we're just going to say forward slash checkout. 02:04.990 --> 02:10.300 And we'll also do the same for the other button inside here to continue shopping. 02:10.330 --> 02:12.550 And we'll just paste in what I have there. 02:12.550 --> 02:15.820 But this is going to go to our catalog instead. 02:16.780 --> 02:21.400 And we also need to update our routes to accommodate the new checkout component as well. 02:21.400 --> 02:26.260 So I'll just copy the basket one down and use checkout here. 02:26.260 --> 02:29.170 And we will go to the checkout 02:31.060 --> 02:32.110 page. 02:32.680 --> 02:36.610 And if we take a look at our progress, that should be all we need to do here. 02:36.610 --> 02:40.450 If I click on checkout then we can see the text. 02:40.510 --> 02:42.040 And of course we're not logged in. 02:42.040 --> 02:43.900 So we should not be able to see that text. 02:43.900 --> 02:46.120 But we're not ready for that functionality yet. 02:46.120 --> 02:50.380 That's just a reminder that we need to implement authentication. 02:50.380 --> 02:51.760 But we'll come on to that. 02:51.790 --> 02:55.300 Not in the next section actually, but in the section afterwards. 02:55.300 --> 02:57.340 So we'll have this around for a little while. 02:57.340 --> 03:01.810 There is a bug I think I'm going to check so we can see our basket. 03:01.810 --> 03:05.760 And if we clear our basket, we get the basket is empty. 03:05.760 --> 03:08.340 If we go back to the catalog, we add something to the cart. 03:08.370 --> 03:14.430 Everything looks fine, but I do want to check what happens if we do not have any kind of basket at 03:14.430 --> 03:14.760 all. 03:14.760 --> 03:16.680 And I've got some errors in the console. 03:16.680 --> 03:18.960 Is that a problem? 03:19.050 --> 03:27.540 I don't know, let's refresh the page and let's clear out the basket again and clear this. 03:27.570 --> 03:28.380 It says it's empty. 03:28.380 --> 03:30.780 If I go to the catalog I'll add something in. 03:30.930 --> 03:35.100 And sure, it looks like we do have a problem to solve. 03:35.670 --> 03:42.210 And what we've got here is a non serializable value was detected in an action in the path payload patches, 03:42.210 --> 03:44.580 value value etc.. 03:45.300 --> 03:46.980 Aha okay. 03:47.550 --> 03:49.170 So that's one thing to look at. 03:49.170 --> 03:54.150 If I clear the console and I add something else, is this a consistent error or only when our basket 03:54.150 --> 03:54.990 is empty. 03:54.990 --> 04:05.020 So it is an issue and it is something that we need to take a look at and it's coming from our. 04:05.080 --> 04:07.120 Well, it's coming from this page bundle. 04:07.120 --> 04:12.280 It looks like it's not causing us a problem in our user interface, but for sure we need to take a look 04:12.310 --> 04:16.630 at what this is trying to tell us and what we need to do to resolve it. 04:16.720 --> 04:21.730 And if we click on one of these links inside here that help us out and tell us what the kind of problem 04:21.730 --> 04:27.340 is, and it tells us to take a look at the reducers handling this action type, blah, blah, blah. 04:27.340 --> 04:31.780 But it's talking about non-serialized items in my store. 04:31.810 --> 04:38.020 If we click on this and it says, can I put functions, promises or other non serializable items in 04:38.020 --> 04:38.950 my store? 04:39.100 --> 04:45.400 And it's a recommendation that we only put plain serializable objects, arrays and primitives into your 04:45.400 --> 04:45.730 store. 04:45.760 --> 04:51.010 Technically it's possible to insert non serializable items into the store, but doing so can break the 04:51.010 --> 04:53.860 ability to persist and rehydrate the contents. 04:53.860 --> 04:57.550 So what did we put into our store that's non serializable. 04:57.550 --> 05:02.020 If we go back to the error then it's telling us that it's got a problem with the item. 05:02.020 --> 05:09.000 What is the item This does not look like a non serializable object to me, but it is a class that we've 05:09.030 --> 05:11.400 used here and we can see it's got a constructor. 05:11.400 --> 05:14.070 And a class is something that can have methods. 05:14.070 --> 05:19.710 And we already saw from the documentation here that functions are not serializable in a Redux store. 05:19.710 --> 05:25.890 So even though we don't have any functions in our class, that's what it's got an issue with. 05:25.890 --> 05:32.820 And if we go back to the basket API and we take a look at what we're doing inside our add item, it's 05:32.820 --> 05:36.780 this is the problem here where I've used new item for convenience. 05:36.810 --> 05:38.760 It doesn't like this at all. 05:38.760 --> 05:44.700 So we'll change this to instead of using the class constructor we'll just use it as a type. 05:44.700 --> 05:46.110 Or we don't even need to do that. 05:46.110 --> 05:52.350 We can just use curly brackets and then spread the products, and then add on the quantity as the second 05:52.350 --> 05:53.640 parameter inside here. 05:53.640 --> 05:58.770 And of course TypeScript being TypeScript now tells us that, hey, we've got another type of problem 05:58.770 --> 06:04.980 and property product ID is missing in type, etc. so we'll need to be a bit more specific about the 06:04.980 --> 06:06.300 product ID inside here. 06:06.300 --> 06:10.920 So I'll say product ID and we'll set that to the product.id. 06:11.160 --> 06:14.130 And now we're clean of any errors inside here. 06:14.130 --> 06:19.890 So it doesn't like using a class to add something to an array inside our store. 06:19.890 --> 06:21.060 So now we know. 06:21.060 --> 06:26.970 And if we go back and take a look, let's refresh the page and see if we can repeat the behavior and 06:26.970 --> 06:28.200 add something to the cart. 06:28.200 --> 06:29.880 And this time it's clean. 06:29.880 --> 06:35.700 Just to be sure, I'm just going to clear this out of the cart and go back to the catalog and add something 06:35.730 --> 06:36.390 to the cart. 06:36.420 --> 06:38.700 Sure enough, that warning has gone away. 06:38.700 --> 06:41.850 That wasn't actually the problem that I came back here to look at, though. 06:41.880 --> 06:43.740 There is another thing that I want to check. 06:43.740 --> 06:50.580 If we go to our application and our cookies, let's just clear our cookies and we'll refresh the page 06:50.580 --> 06:55.800 so that we really do genuinely not have a basket at all at this time. 06:55.800 --> 06:58.380 If we click on the shopping cart, that's fine. 06:58.380 --> 06:59.370 The basket is empty. 06:59.370 --> 07:05.410 If I go back to the catalog and then I try and add something to the cart, then we've got an error inside 07:05.410 --> 07:05.710 here. 07:05.740 --> 07:07.240 Our nav bar is not updated. 07:07.240 --> 07:13.150 And if we take a look at the console, then we can see that we cannot read properties of null reading 07:13.150 --> 07:16.090 items in our basket API. 07:16.210 --> 07:19.930 So we've got an issue when it's a brand new customer let's say. 07:19.930 --> 07:22.900 And they're trying to add something to the basket for the first time. 07:22.930 --> 07:25.600 The functionality on the back end would be fine. 07:25.600 --> 07:32.680 We've got our basket ID, and I can refresh the page to get the application into a working state, and 07:32.680 --> 07:36.700 then I'll be able to add and remove items from the cart as before. 07:36.700 --> 07:38.470 But it's when it's a new basket. 07:38.470 --> 07:41.500 That's the issue that we also need to correct here as well. 07:41.500 --> 07:46.570 And for this one, these small bugs can sometimes be the most annoying to deal with. 07:46.570 --> 07:50.740 And let's take a look at what we need to do to resolve this. 07:50.740 --> 07:57.940 And inside our basket API, once again, we'll need to check to see if something is a new basket or 07:57.970 --> 07:59.890 we already have a basket. 07:59.890 --> 08:03.880 So inside the on query started for the add basket item. 08:03.910 --> 08:09.650 Obviously we don't need to worry about whether or not it's a new basket for a remove item, but let's 08:09.650 --> 08:14.480 create a variable and we'll use let because we'll change this further down in the code. 08:14.480 --> 08:17.390 We'll use const when this value isn't going to be updated. 08:17.390 --> 08:21.110 And I'll say let is new basket equals false. 08:21.110 --> 08:23.900 Just inside the on query started. 08:23.900 --> 08:30.680 And then we've got our check for our product ID to see if we're working with a product or a basket item. 08:30.680 --> 08:36.200 So just below this line of code we're going to check to see if not draft. 08:36.830 --> 08:41.420 And if we have a basket ID and we'll need to make that optional. 08:41.810 --> 08:49.310 And if that is the case we do not have a basket ID we're going to set the is new basket equal to true. 08:49.310 --> 08:55.310 And then for this code where we're checking to see if we have an existing item, we'll wrap this in 08:55.310 --> 08:59.900 a conditional as well and say if not is new basket. 08:59.930 --> 09:06.040 We know we're working with an existing basket and we can take this code and put it inside that conditional, 09:06.040 --> 09:08.440 so that will still work fine. 09:08.440 --> 09:14.950 The same functionality we had before, but if it is a new basket, then we're effectively just going 09:14.980 --> 09:17.860 to invalidate the cache for the first time. 09:17.860 --> 09:19.990 They add something to a new basket. 09:19.990 --> 09:23.860 Then we're going to invalidate the cache, which means we're going to go and fetch the basket from the 09:23.860 --> 09:26.470 API for the first time that we use this. 09:26.470 --> 09:35.260 So below the await query fulfilled, we'll add a check inside here and say if is new basket then we're 09:35.260 --> 09:44.020 going to dispatch and we'll say basket api dot util dot invalidate tag or tags. 09:44.020 --> 09:48.130 And in parentheses and square brackets we'll specify basket. 09:48.280 --> 09:51.520 And what we should find now is that resolves the behavior. 09:51.520 --> 09:53.200 We're not going to get an instant response. 09:53.200 --> 09:55.210 When we very first add an item to our basket. 09:55.210 --> 10:01.150 We're going to go out and use the original approach we had with cache invalidation rather than updating 10:01.150 --> 10:02.050 the cache. 10:02.050 --> 10:04.360 So let's see if this has had the desired effect. 10:04.360 --> 10:08.960 I'm just going to repeat the behavior that I did before I removed the basket ID from our cookies. 10:08.960 --> 10:12.740 I'll refresh the page and we go back to an empty basket. 10:12.740 --> 10:17.720 And what we should find if we add to cart now, we don't see the instant update in our navbar. 10:17.720 --> 10:19.730 But what we do not get now is any errors. 10:19.730 --> 10:22.520 Our console is clean, the navbar is updated. 10:22.520 --> 10:28.250 If we go to our shopping cart, we can see the item in the cart and everything should work as it did 10:28.280 --> 10:28.640 before. 10:28.640 --> 10:34.700 Now and at this point forward, we're going to see the instant optimistic updates in our user interface 10:34.700 --> 10:35.690 as well. 10:35.690 --> 10:37.580 So that's what we're looking for. 10:37.760 --> 10:41.450 And now we've completed the functionality in our basket. 10:41.450 --> 10:44.420 That's all of it we need for the client side just now. 10:44.420 --> 10:46.880 So we've got to another milestone. 10:46.880 --> 10:50.390 So we're going to commit our changes into source control. 10:50.480 --> 10:55.850 So I'll click on the version control tab and we'll stage our changes. 10:55.850 --> 11:01.040 And we'll give it a commit message of end of section seven. 11:01.130 --> 11:04.820 And we'll commit the changes and sync them up with GitHub. 11:04.820 --> 11:07.310 And we'll wrap up with a summary.