WEBVTT 00:00.020 --> 00:01.790 Okay, so time to look at this. 00:01.820 --> 00:09.500 Add to cart button and well we'll make it function how you would probably expect it's going to function. 00:09.500 --> 00:11.870 It's going to add a product into our basket. 00:11.870 --> 00:21.110 So back to the code and we'll go back first of all to our basket API because we do need to export the 00:21.110 --> 00:21.950 mutation. 00:21.950 --> 00:28.910 So if we add a comma and then say use add basket item mutation, this is what we're going to use to 00:28.940 --> 00:31.460 update our basket of course. 00:31.460 --> 00:33.980 So where we're going to use this is in our product card. 00:33.980 --> 00:39.440 So let's next open up the product card where we have the button the add to cart button. 00:39.440 --> 00:47.000 And just at the top of this component let's bring in the use Add basket item mutation. 00:48.380 --> 00:53.390 So to use this the way that we use these mutation hooks is we say const. 00:53.390 --> 00:55.280 Then open up square brackets. 00:55.280 --> 00:57.080 And then we give our function a name. 00:57.080 --> 01:00.760 This can be anything we want but I'm going to call it add basket item. 01:00.760 --> 01:02.920 Just a name that makes sense to us. 01:02.920 --> 01:05.020 And a second parameter inside. 01:05.020 --> 01:06.190 Here we do this. 01:06.220 --> 01:11.560 Inside an object we have access to is loading. 01:12.460 --> 01:19.840 And then we can use the use add basket item mutation inside here. 01:19.990 --> 01:21.760 So this should be available. 01:21.760 --> 01:25.390 And if I do is then we can see we've got all of the different options. 01:25.390 --> 01:30.400 If there's an error we can use is error although we're handling that centrally. 01:30.430 --> 01:35.440 So the only one that we're really interested in is the is loading option. 01:36.520 --> 01:41.680 So we can do something with our button whilst loading is taking place. 01:41.680 --> 01:45.070 And then we can head down to our button itself. 01:45.070 --> 01:47.710 And we can give this the onclick action. 01:47.710 --> 01:49.450 So I'll say onclick. 01:49.870 --> 01:56.320 And we'll need to do this in parentheses because we do need to pass this an argument. 01:56.530 --> 01:57.820 And we'll add the arrow. 01:57.820 --> 02:03.220 And then we'll use our ad basket item method and inside parentheses. 02:03.220 --> 02:05.260 This takes an argument, but it's an object. 02:05.260 --> 02:06.790 So we can see the argument there. 02:06.790 --> 02:12.670 We need to specify the product id and the quantity inside curly brackets, so that this gets passed 02:12.670 --> 02:15.220 as an object to our query. 02:15.220 --> 02:25.480 So I'll open up curly brackets and we'll specify the product ID colon is going to be the product id.id 02:25.480 --> 02:26.650 inside here. 02:26.650 --> 02:29.230 And we're also going to specify the quantity. 02:29.230 --> 02:36.640 And because this is a button inside our product card they can only add one item at any one time. 02:36.640 --> 02:39.940 So we'll specify the quantity is one there. 02:39.940 --> 02:44.230 And let's just move things down because I'm going off the edge. 02:45.400 --> 02:50.110 So let's tidy things up a little inside here okay. 02:50.110 --> 02:51.310 That will be fine. 02:51.790 --> 02:54.040 Now what do we do for loading in this button. 02:54.040 --> 02:59.880 Well typically most component frameworks do give us a loading option or a loading property. 02:59.910 --> 03:05.190 And we do see things like onload and stuff like that here, but we don't actually have a flag that says 03:05.220 --> 03:09.240 is loading or something where we can set this to be true. 03:09.270 --> 03:12.420 So I'm just going to use disabled inside here. 03:12.420 --> 03:19.770 And I'm effectively going to disable the button if we are loading and use that approach. 03:19.800 --> 03:28.410 By the way, if you did want a loading button, then let's just go to the moon icon and the docs. 03:28.410 --> 03:35.100 And for reasons that I'm not entirely sure about, let's go to material UI docs. 03:35.100 --> 03:36.900 It's been quite some time. 03:38.730 --> 03:45.840 That's this loading button, because it does exist in material UI, but it's been part of the labs of 03:45.840 --> 03:52.410 material UI, which is kind of experimental stuff that hasn't made it into the main component library 03:52.440 --> 03:53.760 functionality. 03:53.850 --> 03:58.250 And if we take a look at Alli in the experimental APIs, They are not. 03:59.180 --> 04:03.800 In fact, I'm going to have to search for this because I do not know where it will be in these docs. 04:03.800 --> 04:10.280 But if we take a look at loading and then loading button, then we can see that this is coming from 04:10.610 --> 04:12.290 my lab. 04:13.310 --> 04:19.190 So that's a separate package we would need to install in order to make use of the functionality provided 04:19.190 --> 04:21.200 in the lab options. 04:21.200 --> 04:27.050 But what this does give us, if we were to use this is a loading property and it will provide a spinner 04:27.050 --> 04:28.790 whilst loading is going on. 04:28.790 --> 04:33.380 But because we've already got loading displaying on the nav bar, I'm going to say we don't really need 04:33.380 --> 04:38.810 that inside here, and I'm going to use the disabled option to simply disable the button to prevent 04:38.810 --> 04:44.900 the user from getting click happy and trying to continuously add products, whilst we're trying to add 04:44.900 --> 04:47.750 one that I've just clicked on the button for. 04:48.500 --> 04:54.170 So if we go and take a look and see how we're doing with this now I'm going to open up the Redux dev 04:54.200 --> 04:57.130 tools because we're going to impact Redux. 04:57.130 --> 05:02.230 I'll just check the console, make sure that's clean, and I'm just going to open up the Redux dev tools. 05:03.280 --> 05:07.270 And is there a clear button I can use inside here? 05:07.270 --> 05:11.500 And I don't think we can just clear this, because if we hit the reset button, that just resets to 05:11.530 --> 05:13.540 the state we created the store with. 05:13.840 --> 05:15.910 I don't think this has the desired effect. 05:15.940 --> 05:16.390 Yeah. 05:16.390 --> 05:18.220 It just takes us back to the initial state. 05:18.250 --> 05:18.760 Okay. 05:18.760 --> 05:23.470 So I'll just refresh the page to get it as clean as I can, and then we'll see what happens. 05:23.470 --> 05:30.160 When we do click on the add product or Add to Cart button. 05:30.370 --> 05:32.230 I'm expecting this not to work. 05:32.230 --> 05:33.400 So I'm going to click the button. 05:33.400 --> 05:34.270 We see the loading. 05:34.270 --> 05:44.710 We see the button was disabled and we see the let's see the basket API execute mutation pending. 05:44.890 --> 05:47.560 And that's this one. 05:47.560 --> 05:49.810 And we've got our start and stop loading. 05:49.810 --> 05:52.240 And then we've got the fulfilled option. 05:52.240 --> 05:56.950 And if we take a look inside here Then consider me surprised. 05:56.950 --> 06:01.090 But it looks like this could have actually worked. 06:01.090 --> 06:07.840 I'm just going to check the state because I'm flummoxed as to how that would have worked. 06:07.870 --> 06:13.930 And if I take a look at the basket API, do we have a basket inside here? 06:13.930 --> 06:16.960 We do not, but I didn't really see an error. 06:16.990 --> 06:21.310 Let's check the network tab and see if there's anything that we can see inside here. 06:21.310 --> 06:23.650 So we've got the 201 created. 06:24.280 --> 06:30.760 And if we take a look at the headers do we send the cookie up or we've got the cookie back. 06:30.910 --> 06:32.980 Oh okay I see what's going on here. 06:32.980 --> 06:34.990 So the server sent us back a cookie. 06:34.990 --> 06:38.590 But we haven't needed to send up the cookie yet to our server. 06:38.590 --> 06:45.550 So what I think will happen and where we'll see things not working as they should is if I go to the 06:45.550 --> 06:49.570 shopping cart icon, then we see our basket is empty. 06:49.570 --> 06:56.280 And the reason for that is that if we take a look at this next request, then we haven't configured 06:56.280 --> 07:02.070 our application yet to send up a cookie, because if we do look at the request headers, then we do 07:02.070 --> 07:05.910 not see the cookie inside here like we did in postman. 07:05.910 --> 07:11.520 So there's two things we need to do to get this functionality to work, so that we can go and get our 07:11.520 --> 07:13.920 baskets from the API server. 07:13.920 --> 07:17.940 So let's go back to the code and just make these two small changes. 07:17.940 --> 07:22.200 First of all, there's something we need to do in our program class for our cause configuration. 07:22.200 --> 07:30.540 In order to send up cookies we need to allow credentials inside our cause configuration inside the API. 07:30.570 --> 07:37.980 So inside the program class we need this allow credentials that allows our browser to send up the cookie. 07:38.670 --> 07:42.870 And because it's an API change, I do not trust hot reload. 07:42.870 --> 07:44.820 So I'm just going to use control R. 07:45.270 --> 07:49.410 And sometimes I'm asked hey Neal, why do you keep using hot reload? 07:49.410 --> 07:50.700 You complain about it all the time. 07:50.700 --> 07:53.870 It never does or never seems to do what you want it to do. 07:53.900 --> 07:56.300 Why use Netwatch? 07:56.360 --> 07:57.620 It's just hope. 07:57.620 --> 07:59.240 Really hope. 07:59.780 --> 08:06.050 One day I'm sure that's going to work as I expect it to, and I don't want to miss out when that day 08:06.050 --> 08:06.650 comes. 08:06.650 --> 08:12.410 So I'll just continue to use Netwatch, but really just double check every single time. 08:12.740 --> 08:14.420 So that's the API side of things. 08:14.420 --> 08:23.060 We also need to do something on our client side, and we're going to do that in our base query, which 08:23.060 --> 08:28.490 I put in the file base API inside our base query with error handling. 08:28.490 --> 08:31.310 We're going to add another property here. 08:32.090 --> 08:39.740 And we're going to specify credentials and set that to include which means we include the cookie along 08:39.740 --> 08:41.000 with each request. 08:41.030 --> 08:44.540 Sometimes I wish they'd changed that to allow cookies, but it's always been this way. 08:44.540 --> 08:49.310 So that's just what we need to specify to get our cookies sent up. 08:49.310 --> 08:50.390 What this should mean. 08:50.420 --> 08:54.910 If I go back to the browser and take a look and refresh the page. 08:55.000 --> 09:01.750 This time we still didn't get anything from our API and that's going to need some investigation. 09:01.750 --> 09:06.550 So I'm just going to refresh again, see what I sent out for the fetch basket request. 09:06.550 --> 09:08.890 And where is the basket request. 09:08.920 --> 09:13.450 It's at the bottom here and it's saying no content. 09:13.660 --> 09:18.790 But did I send up the cookie in the headers and still no cookie. 09:18.790 --> 09:24.790 In fact, I think we're going to have to go back to our products, because if we do take a look at application 09:24.790 --> 09:31.090 and cookies, because we didn't have the allow credentials enabled when we initially added a product, 09:31.210 --> 09:32.890 that means we don't have a basket. 09:32.890 --> 09:34.720 We'll never be able to get that basket. 09:34.720 --> 09:38.920 It's just going to sit in our database and nothing's going to happen to it. 09:38.950 --> 09:39.430 It's fine. 09:39.430 --> 09:40.810 It's just our development database. 09:40.810 --> 09:45.340 But what does need to happen is we need that cookie in this cookies area. 09:45.340 --> 09:49.090 So we're only going to get that set once that allow credentials was enabled. 09:49.090 --> 09:53.620 So back to the catalog and let's just add a product to the cart. 09:53.710 --> 09:57.430 And what we do see now is we've got our basket ID. 09:57.790 --> 10:03.400 So now if we go to the shopping cart icon I've still got basket is empty. 10:03.400 --> 10:10.300 But what we get with Redux Toolkit query is we do get caching. 10:10.300 --> 10:15.340 It is something we need to think about because I went to this page and I've effectively made the same 10:15.340 --> 10:19.540 exact API query, then it's given us our cached result. 10:19.570 --> 10:22.300 So I will need to refresh the page at this point. 10:22.300 --> 10:26.680 And what we see now is our basket ID inside there. 10:26.800 --> 10:28.030 Don't worry about caching. 10:28.030 --> 10:34.390 We do have tricks up our sleeve we can use to handle that kind of situation that we will take a look 10:34.420 --> 10:34.600 at. 10:34.600 --> 10:41.590 But first of all, I just want to make sure we display our basket on our basket page and deal with that 10:41.590 --> 10:42.700 side of things first. 10:42.700 --> 10:49.210 And our next step is to make our basket page look more like we would expect it to in an e-commerce store, 10:49.210 --> 10:51.370 and we'll take a look at that next.