1 00:00:00,260 --> 00:00:00,560 All right. 2 00:00:00,560 --> 00:00:03,740 So now we want to show the orders and the order list screen. 3 00:00:03,740 --> 00:00:09,530 And we don't have we have our back end route and controller function created, but it's not doing what 4 00:00:09,530 --> 00:00:10,010 we want. 5 00:00:10,040 --> 00:00:13,040 So let's go into back end order controller. 6 00:00:13,040 --> 00:00:14,960 And we have this get orders. 7 00:00:14,960 --> 00:00:18,350 So this is what we want to add to and it's going to be very, very simple. 8 00:00:18,350 --> 00:00:23,660 All we want to do is get the orders using find, right? 9 00:00:23,660 --> 00:00:24,950 So we're getting all of them. 10 00:00:24,950 --> 00:00:26,660 So we pass in an empty object. 11 00:00:26,690 --> 00:00:32,210 We also want to populate from the user collection, the ID and the name, and then we can just do res 12 00:00:32,210 --> 00:00:36,800 dot status 200 and Jason pass in the order. 13 00:00:36,800 --> 00:00:38,290 So very, very simple. 14 00:00:38,300 --> 00:00:46,730 Now we can go to our front end and let's go to the slice, the orders API slice and we're going to add 15 00:00:46,730 --> 00:00:48,170 a get orders. 16 00:00:49,100 --> 00:00:50,930 Action creator down here. 17 00:00:50,930 --> 00:00:52,640 So get orders. 18 00:00:54,170 --> 00:01:01,070 It's going to be a query and inside that we'll say query and the URL is just going to be the orders 19 00:01:01,070 --> 00:01:03,320 URL and it's going to be a get request. 20 00:01:03,320 --> 00:01:09,680 And then I'm just going to add keep unused data for five and then we can export that with use get orders 21 00:01:09,680 --> 00:01:12,680 query because it's called get orders. 22 00:01:12,680 --> 00:01:16,220 So you just want to add use at the beginning and query at the end. 23 00:01:16,520 --> 00:01:17,720 So that's all set. 24 00:01:17,750 --> 00:01:19,790 Now we'll go into our order screen. 25 00:01:19,790 --> 00:01:22,790 So admin order, I'm sorry, order list screen. 26 00:01:22,790 --> 00:01:30,110 Those are the two different things and we want to import a few things from here or into here. 27 00:01:30,110 --> 00:01:32,390 So we want the link container. 28 00:01:34,140 --> 00:01:40,260 Link container and that's going to be from React router bootstrap. 29 00:01:40,260 --> 00:01:44,040 And then we want the table and button from React Bootstrap. 30 00:01:44,160 --> 00:01:53,790 I want the far times icon so far times and that's going to be from react icons far we want the message. 31 00:01:55,110 --> 00:01:57,660 Component and also the loader component. 32 00:01:57,660 --> 00:02:00,990 And then we want to import the query that we just created. 33 00:02:00,990 --> 00:02:10,530 So use get orders, query from our slice and make sure you do 2.. slash because now we're in the admin 34 00:02:10,530 --> 00:02:12,660 folder in the screens folder. 35 00:02:12,840 --> 00:02:16,140 Now to get the data from this query is very simple. 36 00:02:16,140 --> 00:02:22,290 We can just go right here and we'll say const, open up some curly braces, get the data, we're going 37 00:02:22,290 --> 00:02:23,910 to rename it to orders. 38 00:02:23,910 --> 00:02:26,610 And then we also get is loading an error. 39 00:02:26,610 --> 00:02:32,880 And just to test this out, we can go ahead and console log the orders just to make sure we're getting 40 00:02:32,880 --> 00:02:33,420 them. 41 00:02:34,210 --> 00:02:40,600 And down here you'll see we have an array with two orders. 42 00:02:41,050 --> 00:02:41,350 Okay? 43 00:02:41,380 --> 00:02:43,060 Because we only have two in the database. 44 00:02:43,060 --> 00:02:44,950 You might have more or less. 45 00:02:45,760 --> 00:02:47,770 So next thing. 46 00:02:49,050 --> 00:02:50,580 Is to do the output. 47 00:02:50,580 --> 00:02:52,920 So we have quite a bit to do here. 48 00:02:52,920 --> 00:02:56,640 I'm going to just make this a fragment and then we're going to. 49 00:02:58,120 --> 00:03:02,830 Put an H one in here and we want to check to see if loading. 50 00:03:03,280 --> 00:03:09,010 So basically, if it's loading, we want to show the loader and if there's an error, we want to show 51 00:03:09,010 --> 00:03:10,120 the message. 52 00:03:10,120 --> 00:03:15,040 And if neither one of those are true, then we're going to go on to have our table. 53 00:03:16,420 --> 00:03:18,160 So let's just end that. 54 00:03:19,460 --> 00:03:23,390 And let's see, we need to make sure we have our ending curly brace. 55 00:03:23,390 --> 00:03:26,390 So I just want to make sure there's no errors or anything good. 56 00:03:27,260 --> 00:03:31,490 Now in the table, let's do the table head. 57 00:03:31,640 --> 00:03:42,200 So we'll add the beginning and ending tag, and then we're going to have a tr with a t h ID user date, 58 00:03:42,230 --> 00:03:46,990 total paid delivered, and then just an empty t h. 59 00:03:47,870 --> 00:03:49,490 So it should look like that. 60 00:03:49,490 --> 00:03:52,040 Actually, I don't think I don't want the border. 61 00:03:55,300 --> 00:03:55,870 Good. 62 00:03:56,200 --> 00:04:04,900 Now we need to map through the orders and output a table row for each one with these columns. 63 00:04:04,900 --> 00:04:08,470 So under the t head, let's do a T body. 64 00:04:10,370 --> 00:04:14,390 And in the body we're going to map through. 65 00:04:14,390 --> 00:04:16,040 I'm just going to type this out. 66 00:04:16,040 --> 00:04:18,350 So orders, dot, map. 67 00:04:18,350 --> 00:04:21,920 And then for each one we'll call order. 68 00:04:23,000 --> 00:04:28,130 And then we're going to set that to parentheses and each one is going to have a table row. 69 00:04:30,200 --> 00:04:31,520 Okay with the key? 70 00:04:31,550 --> 00:04:37,460 The key will be the ID, Then we'll have our first column with the ID, Then we want the user name, 71 00:04:37,460 --> 00:04:44,030 but we want to make sure that the user is there first and then we'll have the created at with the date. 72 00:04:44,510 --> 00:04:46,160 The total price. 73 00:04:46,820 --> 00:04:49,940 And let's just check that out for now. 74 00:04:50,690 --> 00:04:51,820 Okay, that looks good. 75 00:04:51,830 --> 00:04:58,640 Now for paid and delivered, we want to have a conditional to make sure that if it's paid then it will 76 00:04:58,640 --> 00:04:59,990 show the paid at field. 77 00:04:59,990 --> 00:05:01,940 If it's not, we'll show an X. 78 00:05:01,940 --> 00:05:13,280 So I'm going to say if the order dot is paid, then that else that. 79 00:05:13,910 --> 00:05:24,470 Okay, so if it is paid, then let's put actually, you know what, we want to put a TD around this 80 00:05:24,470 --> 00:05:25,490 whole thing. 81 00:05:28,120 --> 00:05:28,840 Like that. 82 00:05:28,840 --> 00:05:33,850 And then if it is paid, we're going to show the paid at. 83 00:05:34,730 --> 00:05:37,190 So yeah order dot paid at. 84 00:05:37,220 --> 00:05:41,150 Else If it's not, then we're going to show the the x and make it red. 85 00:05:41,240 --> 00:05:42,950 So both of these are paid. 86 00:05:42,980 --> 00:05:45,020 Now we're going to do the same thing for delivered. 87 00:05:45,020 --> 00:05:54,650 So I'll just copy that and then we can just change is paid to, is delivered and we want delivered at 88 00:05:54,650 --> 00:05:55,340 here. 89 00:05:56,920 --> 00:05:58,210 And same thing. 90 00:05:58,210 --> 00:06:01,390 We just want to show the X and neither are delivered. 91 00:06:01,390 --> 00:06:03,640 So it's going to show that x mark. 92 00:06:04,640 --> 00:06:05,000 All right. 93 00:06:05,000 --> 00:06:10,460 So whenever someone makes an order, you can log in as an admin and you can come here and you can see 94 00:06:10,460 --> 00:06:11,960 all the orders. 95 00:06:11,960 --> 00:06:17,450 And actually, one more thing we want to add is a details button to go to the order, the actual order 96 00:06:17,450 --> 00:06:18,170 page. 97 00:06:18,170 --> 00:06:21,230 So let's add another TD. 98 00:06:22,810 --> 00:06:29,410 Close that and then inside that TD, we're going to have a link container that's going to go to the 99 00:06:29,410 --> 00:06:30,520 order page. 100 00:06:31,570 --> 00:06:36,850 Close that and then inside that will have a button say details. 101 00:06:37,490 --> 00:06:38,450 Save that. 102 00:06:38,450 --> 00:06:41,780 Now, if I click on the details, it takes us to the page. 103 00:06:41,900 --> 00:06:48,400 So in the next video, what I want to do is as an admin, we should be able to mark it as delivered. 104 00:06:48,410 --> 00:06:50,120 So we'll do that next.