1 00:00:00,200 --> 00:00:02,930 All right, so now we want to make these delete buttons work. 2 00:00:02,930 --> 00:00:08,780 So in our slice, our cart slice, just like we have this add to cart, we're going to have a remove 3 00:00:08,780 --> 00:00:09,440 from cart. 4 00:00:09,680 --> 00:00:19,220 So let's go to the end of this which ends right here and let's add remove from cart. 5 00:00:20,190 --> 00:00:20,520 Okay. 6 00:00:20,520 --> 00:00:21,990 And then that's going to be. 7 00:00:23,100 --> 00:00:26,490 A function that takes in the state. 8 00:00:26,490 --> 00:00:27,210 And. 9 00:00:27,210 --> 00:00:28,170 Action. 10 00:00:28,710 --> 00:00:28,940 Okay. 11 00:00:29,070 --> 00:00:30,540 Just like this one did. 12 00:00:30,660 --> 00:00:32,250 So state and action. 13 00:00:32,250 --> 00:00:38,760 And the ID that we're going to pass to this remove from Cart is going to be in the actions payload. 14 00:00:39,450 --> 00:00:46,710 So what we'll do is we'll use filter, we'll say state and then the cart items, which is the array 15 00:00:46,710 --> 00:00:48,330 of items in our state. 16 00:00:48,360 --> 00:00:54,300 We're going to set that to state dot cart items, dot filter. 17 00:00:55,290 --> 00:01:02,370 And we're going to pass in a function and we're going to say for each, for each item, we'll just use 18 00:01:02,370 --> 00:01:12,210 X and then let's say where x dot underscore ID is not equal to action dot payload, which will be the 19 00:01:12,210 --> 00:01:14,160 ID of the one we want to delete. 20 00:01:14,160 --> 00:01:20,370 So basically we're returning all the cart items that don't equal the one we want to delete. 21 00:01:20,700 --> 00:01:20,930 Okay. 22 00:01:20,970 --> 00:01:24,780 That way the one we want to delete is is gone from the UI. 23 00:01:25,020 --> 00:01:33,030 So once we do that, we need to update local storage and we already have this update cart in the utils 24 00:01:33,030 --> 00:01:36,060 file which will update local storage. 25 00:01:36,060 --> 00:01:37,770 So we're just going to return. 26 00:01:38,410 --> 00:01:43,090 The update cart and pass in state. 27 00:01:45,170 --> 00:01:45,500 Okay. 28 00:01:45,500 --> 00:01:46,040 And that's it. 29 00:01:46,040 --> 00:01:50,660 And we just want to export this as well, like we did with Add to Cart. 30 00:01:52,350 --> 00:01:52,680 All right. 31 00:01:52,710 --> 00:01:55,600 Now in the card screen, we can bring that in. 32 00:01:55,620 --> 00:01:57,000 So right here. 33 00:01:57,630 --> 00:01:59,190 Where we brought in at Dakar. 34 00:01:59,190 --> 00:02:01,440 We'll also bring in remove from Cart. 35 00:02:02,230 --> 00:02:05,900 And then we're going to have a handler just like we did here. 36 00:02:05,920 --> 00:02:07,600 Actually, I'll just copy this. 37 00:02:09,740 --> 00:02:15,110 So instead of add to cart handler, let's say remove. 38 00:02:15,700 --> 00:02:22,660 From cart handler and then we want to dispatch instead of add to Cart, we want to dispatch remove from 39 00:02:22,660 --> 00:02:23,290 Cart. 40 00:02:23,290 --> 00:02:26,500 And all that's going to get passed in is an ID. 41 00:02:26,530 --> 00:02:33,460 In fact, this function is going to get passed in an ID and then we can get rid of this, this object 42 00:02:33,460 --> 00:02:39,220 that we're passing in and just pass the ID in, because whatever we pass in here is what gets passed 43 00:02:39,220 --> 00:02:41,500 in as the action payload. 44 00:02:41,500 --> 00:02:46,990 Just like with add to Cart, the action payload was the entire item because that's what we passed in 45 00:02:46,990 --> 00:02:49,000 right right here to add to cart. 46 00:02:49,180 --> 00:02:52,720 So we just want to call this handler when we click the delete button. 47 00:02:52,720 --> 00:03:01,270 So let's go down here to our delete to this button and let's say on click then. 48 00:03:01,270 --> 00:03:06,250 Now it's important you don't just put remove from cart handler right in here. 49 00:03:06,250 --> 00:03:08,530 It needs to be a function that then calls that. 50 00:03:08,530 --> 00:03:12,490 Otherwise it's going to be called right away and it's just going to delete all your items. 51 00:03:12,490 --> 00:03:20,600 So make sure that you have a function here and then call remove from cart, actually remove from cart 52 00:03:20,630 --> 00:03:25,010 handler and then we're going to pass in the item dot underscore ID. 53 00:03:26,760 --> 00:03:32,340 All right, So now if we come over here, I click this, then that goes out of our cart and it also 54 00:03:32,340 --> 00:03:34,680 updates the price and everything. 55 00:03:35,100 --> 00:03:35,490 Okay. 56 00:03:35,490 --> 00:03:40,800 And even if you have to two or more quantity, it's still going to delete the whole thing from your 57 00:03:40,800 --> 00:03:41,180 cart. 58 00:03:41,190 --> 00:03:41,420 Right? 59 00:03:41,430 --> 00:03:44,640 So even if I have three here, if I click delete. 60 00:03:45,540 --> 00:03:46,680 Deletes all of it. 61 00:03:47,280 --> 00:03:47,610 All right. 62 00:03:47,610 --> 00:03:49,110 And see how everything responds. 63 00:03:49,110 --> 00:03:54,510 The price, the number of items, the little thing up here that says the number of items, it's all 64 00:03:54,510 --> 00:04:00,950 reactive from your state, from your main redux state, which is how we want this to work. 65 00:04:00,960 --> 00:04:06,000 So now the last thing I want to do in this video is let's just add something to the cart. 66 00:04:06,300 --> 00:04:13,260 So when I click this proceed to checkout, basically I want this to redirect us to the shipping page 67 00:04:13,260 --> 00:04:15,150 where we start to add our shipping info. 68 00:04:15,150 --> 00:04:21,630 But if we're not logged in, I want it to redirect us to the login page because anything after that 69 00:04:21,630 --> 00:04:23,100 you have to be logged in. 70 00:04:23,100 --> 00:04:26,340 You have to be a user that's registered in the system. 71 00:04:26,340 --> 00:04:34,260 So what we can do, we already brought in use, navigate the hook and then we also initialized navigate 72 00:04:34,260 --> 00:04:34,950 right here. 73 00:04:34,950 --> 00:04:40,170 So all we want to do now is have that button, call a checkout handler. 74 00:04:40,170 --> 00:04:48,240 So down here where we have our checkout button, let's go right under disabled and let's give it an 75 00:04:48,270 --> 00:04:49,320 onClick. 76 00:04:50,860 --> 00:04:55,720 So on click, we're going to want to just call check out. 77 00:04:56,700 --> 00:04:57,690 Handler. 78 00:04:58,550 --> 00:04:59,120 Okay. 79 00:04:59,120 --> 00:05:00,050 And then. 80 00:05:02,030 --> 00:05:04,040 We're going to create that up here. 81 00:05:04,980 --> 00:05:06,450 So const. 82 00:05:08,580 --> 00:05:12,600 Checkout handler, and then we'll set that. 83 00:05:13,870 --> 00:05:15,370 To a function. 84 00:05:16,130 --> 00:05:18,410 And we're just going to use navigate. 85 00:05:18,410 --> 00:05:23,630 So it just this will just redirect and we want to pass in here. 86 00:05:23,630 --> 00:05:31,790 Actually, we can just use quotes, but we're going to do slash login and then put a question mark and 87 00:05:31,790 --> 00:05:33,650 then say redirect. 88 00:05:34,370 --> 00:05:37,840 Equals and then slash shipping. 89 00:05:37,850 --> 00:05:43,010 Because ultimately, like I said, what's going to happen is if we're not logged in, then it's going 90 00:05:43,010 --> 00:05:44,410 to redirect us to log in. 91 00:05:44,420 --> 00:05:49,640 If we are logged in, then it will proceed to shipping because in the log in screen, we're going to 92 00:05:49,640 --> 00:05:51,080 check for this redirect. 93 00:05:51,080 --> 00:05:55,700 And if it's here, then we're going to redirect to whatever this is in this case shipping. 94 00:05:56,210 --> 00:05:56,540 All right. 95 00:05:56,570 --> 00:06:03,500 Now, this is as far as we can go without having user authentication because any further to add shipping 96 00:06:03,500 --> 00:06:07,160 and go through checkout and pay and all that, we need to be logged in. 97 00:06:07,160 --> 00:06:13,010 So we're going to go on to the next section where we'll start on the back end because that's where our 98 00:06:13,010 --> 00:06:14,660 authentication is going to start. 99 00:06:14,690 --> 00:06:16,610 We're going to set up Json web tokens. 100 00:06:16,610 --> 00:06:20,360 We're going to be able to save it in an Http only cookie. 101 00:06:20,360 --> 00:06:24,920 And then once we've done that, we have an authentication API. 102 00:06:24,920 --> 00:06:27,650 We can then move to the front end and implement it there.