1 00:00:00,290 --> 00:00:00,590 Okay. 2 00:00:00,590 --> 00:00:07,400 In the last video we created a few end points for orders, including the Create Order End Point. 3 00:00:07,400 --> 00:00:11,210 So now we're going to implement start to implement them in the front end. 4 00:00:11,210 --> 00:00:16,730 So let's go to slices and we're going to want a new slice for orders. 5 00:00:16,730 --> 00:00:27,290 So let's create, let's say orders API, slice dot JS and we're going to bring in the initial API slice, 6 00:00:27,590 --> 00:00:34,280 which is basically like the parent to the rest of these these API slices, users products and orders. 7 00:00:34,280 --> 00:00:36,590 And then I also want the orders URL. 8 00:00:36,590 --> 00:00:45,860 So let's say import the orders URL from constants which we should have in there. 9 00:00:46,010 --> 00:00:46,250 Okay. 10 00:00:46,280 --> 00:00:48,350 So we have the orders URL right here. 11 00:00:49,170 --> 00:00:52,350 And then we're going to create our slice. 12 00:00:52,350 --> 00:00:53,790 We want to make sure we export it. 13 00:00:53,790 --> 00:00:59,970 So we'll say export, const, slice, and we're going to inject endpoints because basically we're injecting 14 00:00:59,970 --> 00:01:06,300 them into here into the API slice, which is connected to our store right here. 15 00:01:07,110 --> 00:01:10,260 So hopefully you understand how the structure of everything works. 16 00:01:10,440 --> 00:01:17,070 And then we want to say endpoints and yeah, we're going to use the builder, although I prefer to put 17 00:01:17,070 --> 00:01:18,390 parentheses. 18 00:01:19,500 --> 00:01:20,970 Around that. 19 00:01:22,180 --> 00:01:22,690 Okay. 20 00:01:22,690 --> 00:01:25,090 And then we'll close that up. 21 00:01:25,660 --> 00:01:26,080 Okay. 22 00:01:26,080 --> 00:01:30,430 So the first thing I want to do here first endpoint is going to be create. 23 00:01:31,120 --> 00:01:34,570 Order, and that's going to be a mutation. 24 00:01:34,570 --> 00:01:37,080 So we're going to say builder mutation. 25 00:01:37,090 --> 00:01:41,050 And then inside there we'll say query and. 26 00:01:42,020 --> 00:01:46,310 Instead of passing body, let's let's call it order, because that's what it is. 27 00:01:46,310 --> 00:01:48,590 That's what the data will be, is the order. 28 00:01:49,660 --> 00:01:57,310 And then we need to put in the URL that we want to hit, which is going to be just slash API slash orders. 29 00:01:57,310 --> 00:02:02,170 So the orders URL, the method is going to be post and then the body. 30 00:02:02,810 --> 00:02:07,760 So for the body, we're just going to have an object and spread across the order. 31 00:02:09,600 --> 00:02:10,050 All right. 32 00:02:10,050 --> 00:02:15,870 And then we need to export, so let's say export, and you're going to make sure that you put use on 33 00:02:15,870 --> 00:02:17,820 the beginning of this name. 34 00:02:17,820 --> 00:02:20,220 So use and then mutation on the end. 35 00:02:20,220 --> 00:02:22,590 So use create order mutation. 36 00:02:23,300 --> 00:02:25,970 And make sure you export it as well. 37 00:02:27,320 --> 00:02:34,730 Okay, Now, before we implement this or start to create our place order screen, there's one other 38 00:02:34,730 --> 00:02:43,820 action creator that I want to put into the cart, and that's to clear the cart items because once we 39 00:02:43,820 --> 00:02:47,660 place the order, right, once the order is created, we want to clear the cart. 40 00:02:47,960 --> 00:02:51,170 So let's come right here and let's say clear. 41 00:02:52,040 --> 00:02:54,260 Uh, cart items. 42 00:02:54,470 --> 00:02:58,730 And we're going to set that to a function that has state. 43 00:02:59,940 --> 00:03:02,130 Pass in state and action. 44 00:03:04,680 --> 00:03:05,160 Okay. 45 00:03:05,160 --> 00:03:10,590 And inside here, let's set the state cart items. 46 00:03:10,590 --> 00:03:13,560 Just set it to an empty array and then update the cart. 47 00:03:13,560 --> 00:03:18,180 So update local storage and let's make sure that we export that as well. 48 00:03:18,180 --> 00:03:19,620 Clear cart items. 49 00:03:19,620 --> 00:03:23,160 So now we can use that wherever we bring it into. 50 00:03:23,400 --> 00:03:26,730 Now the place order screen, we want to do that next. 51 00:03:26,730 --> 00:03:36,090 So screens and let's create, let's say place order dot or place order screen let's stay consistent. 52 00:03:36,120 --> 00:03:37,590 Dot JS x. 53 00:03:38,980 --> 00:03:40,060 RFC. 54 00:03:41,520 --> 00:03:42,390 Okay. 55 00:03:42,960 --> 00:03:48,780 And I think what I'm going to do before anything is just add the route before I forget. 56 00:03:48,780 --> 00:03:55,350 So we're going to go to Index.js and let's import the place order screen. 57 00:03:55,350 --> 00:03:58,110 And this is of course, this is going to be a protected route. 58 00:03:58,110 --> 00:03:59,940 So we're going to put that in here. 59 00:04:01,560 --> 00:04:01,980 All right. 60 00:04:01,980 --> 00:04:05,280 So if I actually you know what? 61 00:04:05,280 --> 00:04:08,940 I'm going to turn off LastPass again. 62 00:04:14,080 --> 00:04:14,710 All right. 63 00:04:16,110 --> 00:04:23,370 So now if I were to, let's see, continue select the payment method that takes us to the place order 64 00:04:23,370 --> 00:04:26,370 screen, which right now is just, you know, just that. 65 00:04:27,050 --> 00:04:29,450 So we want to continue on here. 66 00:04:30,050 --> 00:04:34,760 And this is probably going to take two videos to finish this entire screen. 67 00:04:34,760 --> 00:04:38,210 But let's start with our basic imports. 68 00:04:38,210 --> 00:04:40,540 So we're going to need use effect. 69 00:04:40,550 --> 00:04:48,080 So we're going to bring that in because we need to check to see if there's no shipping address. 70 00:04:48,080 --> 00:04:50,570 If there's no shipping address, we need to redirect the shipping. 71 00:04:50,570 --> 00:04:54,560 If there's no payment method, we need to redirect to the payment and we're going to do that in the 72 00:04:54,560 --> 00:04:55,580 use effect. 73 00:04:55,610 --> 00:05:04,310 Then we want to import from React router Dom, we want link and we also want use navigate because, 74 00:05:04,460 --> 00:05:08,660 because we're going to want to redirect if those things aren't there. 75 00:05:08,660 --> 00:05:13,280 So let's import that from React router Dom. 76 00:05:13,280 --> 00:05:20,180 Then we want some stuff from actually we need use selector right now. 77 00:05:20,180 --> 00:05:24,170 So let's take that and that's so we can get the cart state. 78 00:05:24,290 --> 00:05:27,540 And then we also need some stuff from React Bootstrap. 79 00:05:27,540 --> 00:05:28,920 So let's say import. 80 00:05:29,740 --> 00:05:31,960 And I want the button. 81 00:05:33,190 --> 00:05:33,610 Let's see. 82 00:05:33,610 --> 00:05:35,650 We want button row. 83 00:05:36,040 --> 00:05:37,210 Call. 84 00:05:38,100 --> 00:05:39,480 List group. 85 00:05:40,410 --> 00:05:45,810 And image and card from React Bootstrap. 86 00:05:45,810 --> 00:05:49,080 And then I just want the checkout steps component as well. 87 00:05:50,940 --> 00:05:52,170 All right now. 88 00:05:52,860 --> 00:05:54,450 We brought in use navigate. 89 00:05:54,450 --> 00:05:59,160 So let's go into the function here and let's go ahead and initialize that. 90 00:05:59,160 --> 00:06:02,850 And then we want to get the cart state using use selector. 91 00:06:02,880 --> 00:06:05,850 Then we're going to have our use effect. 92 00:06:09,680 --> 00:06:15,500 Okay, so we'll pass in our arrow function and dependency array. 93 00:06:16,970 --> 00:06:17,510 Okay. 94 00:06:17,510 --> 00:06:19,250 Now in the use effect. 95 00:06:20,050 --> 00:06:21,770 Yep, that's exactly what I want. 96 00:06:21,790 --> 00:06:23,380 So we're getting the cart state. 97 00:06:23,380 --> 00:06:28,540 And remember, we have a shipping address in there and that's an object that has address. 98 00:06:28,540 --> 00:06:30,640 So we're checking if that's not there. 99 00:06:30,640 --> 00:06:33,870 And if it's not, we're going to navigate to shipping. 100 00:06:33,880 --> 00:06:36,670 We're going to then check for the payment method in the cart. 101 00:06:36,670 --> 00:06:39,040 And if that's not there, we're going to redirect. 102 00:06:39,040 --> 00:06:42,580 And since we use that stuff in here, we have to add it to the dependency. 103 00:06:42,580 --> 00:06:51,730 So let's say cart dot payment method and we want the cart dot shipping address actually shipping address 104 00:06:51,730 --> 00:06:53,140 dot address. 105 00:06:53,740 --> 00:06:55,630 And then navigate. 106 00:06:56,250 --> 00:07:01,290 So if I save that, it's not going to redirect us because we do have our shipping address and we do 107 00:07:01,290 --> 00:07:03,000 have our payment method. 108 00:07:04,290 --> 00:07:04,710 All right. 109 00:07:04,740 --> 00:07:07,320 Now in the return. 110 00:07:08,090 --> 00:07:11,420 Let's just make this an empty fragment here. 111 00:07:11,420 --> 00:07:15,200 And we want to have our checkout steps at the top. 112 00:07:15,200 --> 00:07:19,610 And since this is the fourth step, we're going to pass in all four steps. 113 00:07:20,380 --> 00:07:21,850 Okay, So now we can see all of them. 114 00:07:21,850 --> 00:07:23,410 They're all links as well. 115 00:07:24,180 --> 00:07:31,560 And I think for now we're just going to add the two columns and then in the next video we'll finish 116 00:07:31,560 --> 00:07:31,860 it up. 117 00:07:31,860 --> 00:07:35,280 So let's put a row and we'll end the row. 118 00:07:37,000 --> 00:07:41,350 And then we're going to have one column that is eight wide. 119 00:07:41,500 --> 00:07:44,410 And for now, I'll just put in the text column. 120 00:07:45,510 --> 00:07:49,050 And then we're going to have another one that is four wide. 121 00:07:50,530 --> 00:07:54,160 So if we save that, we should just see our columns. 122 00:07:55,250 --> 00:08:01,270 Okay, so now we have our create order in our slice ready to fire off. 123 00:08:01,280 --> 00:08:07,490 We also have the clear cart items in the cart slice and we've created our page here. 124 00:08:07,490 --> 00:08:10,700 Check to see if there's a shipping address and payment method. 125 00:08:10,700 --> 00:08:15,260 And now in the next video we'll finish up with the UI on the Place order page.