1
00:00:00,200 --> 00:00:05,270
So now we want to show the orders on the profile and we already have the back end route for this.

2
00:00:05,300 --> 00:00:10,580
If you remember in our controller we have where is it?

3
00:00:11,950 --> 00:00:15,220
So this right here get logged in users orders.

4
00:00:15,220 --> 00:00:22,270
So we just have to make a request to this to the endpoint that this controller function is hooked to

5
00:00:22,270 --> 00:00:26,050
and it will find all the users orders and return them.

6
00:00:26,050 --> 00:00:33,310
So let's go into the slice, the order slice, we can close up back end and we'll go into the orders

7
00:00:33,340 --> 00:00:34,810
API slice.

8
00:00:35,450 --> 00:00:38,270
And let's see, we'll put this.

9
00:00:39,400 --> 00:00:42,880
We'll just put this right at the bottom here after the PayPal one.

10
00:00:43,450 --> 00:00:50,020
And let's say get my orders and it's going to be a query.

11
00:00:51,830 --> 00:00:55,700
So in this query, we want the URL, which is going to be.

12
00:00:56,450 --> 00:00:57,890
It's actually going to be.

13
00:00:57,890 --> 00:00:58,460
Let's see.

14
00:00:58,460 --> 00:01:00,260
We want to use Backticks here.

15
00:01:02,070 --> 00:01:03,420
So it's going to be.

16
00:01:04,230 --> 00:01:05,940
The order's URL.

17
00:01:07,600 --> 00:01:09,920
Orders underscore URL.

18
00:01:09,940 --> 00:01:15,430
And then let's do slash and then my orders or mine.

19
00:01:15,430 --> 00:01:16,270
I'm sorry.

20
00:01:18,140 --> 00:01:22,040
So just make sure if you go in your backend order routes.

21
00:01:24,090 --> 00:01:25,830
So I use mine.

22
00:01:25,830 --> 00:01:29,070
But if you use my orders, then you can use that as well.

23
00:01:29,070 --> 00:01:35,490
Whatever you put here is what you want to put here and let's make sure that we close that off.

24
00:01:35,490 --> 00:01:42,780
And then right here we're going to say keep unused for five and then simply export it with use.

25
00:01:42,810 --> 00:01:44,760
Get my orders query.

26
00:01:45,640 --> 00:01:49,840
Okay, now we can go into our profile screen and we can use that.

27
00:01:50,580 --> 00:01:53,160
So let's import it.

28
00:01:54,720 --> 00:01:56,160
So import.

29
00:01:57,570 --> 00:01:58,730
Use?

30
00:01:58,740 --> 00:01:59,080
Yep.

31
00:01:59,130 --> 00:02:00,480
Use get order.

32
00:02:00,480 --> 00:02:02,220
No, it should be get.

33
00:02:02,930 --> 00:02:03,560
Wait a minute.

34
00:02:03,560 --> 00:02:04,430
I name that right?

35
00:02:04,430 --> 00:02:04,730
Yeah.

36
00:02:04,760 --> 00:02:06,530
Get my orders.

37
00:02:07,540 --> 00:02:10,539
So get my orders.

38
00:02:10,539 --> 00:02:14,320
Query from the orders API slice.

39
00:02:14,970 --> 00:02:16,890
And let's see.

40
00:02:17,010 --> 00:02:23,310
Let's go right under where we did the mutation here and we'll say const.

41
00:02:25,450 --> 00:02:29,740
From Get My Orders query and we're going to pull out.

42
00:02:29,830 --> 00:02:33,850
Actually, it's going to be curly braces and we're going to pull the data.

43
00:02:34,730 --> 00:02:36,640
And call that orders.

44
00:02:36,650 --> 00:02:39,290
And we also want is loading.

45
00:02:39,910 --> 00:02:41,710
And we also want error.

46
00:02:43,670 --> 00:02:44,150
Okay.

47
00:02:44,150 --> 00:02:48,110
And then what we can do is go down to the next column.

48
00:02:49,410 --> 00:02:51,090
The empty column here.

49
00:02:51,680 --> 00:02:54,410
And we want to construct our orders.

50
00:02:54,650 --> 00:02:59,180
So let's put an H two, and then I'm going to check to see if they're loading.

51
00:02:59,950 --> 00:03:03,190
So we'll say if is loading.

52
00:03:03,760 --> 00:03:04,840
Then.

53
00:03:05,640 --> 00:03:06,960
Do something.

54
00:03:08,290 --> 00:03:11,650
Uh, else then we want to also check for an error.

55
00:03:11,650 --> 00:03:15,520
And if there's an error, then we're going to show our message.

56
00:03:16,120 --> 00:03:18,760
So let's put in message.

57
00:03:20,410 --> 00:03:24,250
We'll do variant a variant of danger.

58
00:03:27,580 --> 00:03:30,730
And inside the message we're going to.

59
00:03:31,950 --> 00:03:36,750
Say error and just to be safe, we'll do our question marks.

60
00:03:37,520 --> 00:03:39,500
So just like that.

61
00:03:43,250 --> 00:03:43,670
All right.

62
00:03:43,670 --> 00:03:47,380
And then so that ends there.

63
00:03:47,390 --> 00:03:54,290
So after the error, we want to say else, then we're going to go ahead and show our table and everything

64
00:03:54,290 --> 00:03:55,010
else.

65
00:03:55,010 --> 00:03:56,660
So for the table.

66
00:03:59,490 --> 00:04:03,700
What's use as far as attributes here?

67
00:04:03,720 --> 00:04:04,620
Striped.

68
00:04:05,560 --> 00:04:06,130
Do I want?

69
00:04:06,130 --> 00:04:07,330
I don't want bordered.

70
00:04:07,360 --> 00:04:08,770
We'll do striped.

71
00:04:10,470 --> 00:04:13,560
Hover responsive and stable.

72
00:04:13,560 --> 00:04:15,360
Small for the class name.

73
00:04:17,220 --> 00:04:20,100
And let's see, why are we getting an error here?

74
00:04:24,220 --> 00:04:26,470
So if it's loading, I actually want to show.

75
00:04:27,510 --> 00:04:28,500
The loader.

76
00:04:30,580 --> 00:04:31,380
There we go.

77
00:04:31,390 --> 00:04:32,620
So let's save that.

78
00:04:32,620 --> 00:04:36,850
And we should just we don't see anything because it's showing this just the table.

79
00:04:36,850 --> 00:04:37,390
Right.

80
00:04:38,320 --> 00:04:42,910
If I reload, you can see the loader pops in there real quick because that's when it's loading.

81
00:04:43,180 --> 00:04:51,070
So inside the table, let's add a table heading so t head and we'll end that.

82
00:04:51,860 --> 00:04:53,720
And then inside the head.

83
00:04:53,720 --> 00:04:57,140
Let's do tr and and that.

84
00:04:59,290 --> 00:05:07,540
And we're going to have some table headings such as the ID, the date, the total paid delivered, and

85
00:05:07,540 --> 00:05:12,100
then I'm just going to have an empty for the for the buttons.

86
00:05:12,920 --> 00:05:13,250
All right.

87
00:05:13,250 --> 00:05:14,150
So that's the heading.

88
00:05:14,150 --> 00:05:15,860
And if we save, we should see that.

89
00:05:15,860 --> 00:05:16,460
Good.

90
00:05:17,150 --> 00:05:20,990
Now, under the let's see, under the t head.

91
00:05:20,990 --> 00:05:23,000
Let's add the table body.

92
00:05:25,570 --> 00:05:27,460
And inside the table body.

93
00:05:27,460 --> 00:05:31,240
We're going to we're going to loop through or map through the orders.

94
00:05:31,240 --> 00:05:40,000
So orders, dot, map and pass in a function here and let's say for each order.

95
00:05:40,670 --> 00:05:45,470
And let's return our JSX in parentheses.

96
00:05:45,740 --> 00:05:48,710
So we'll have the TR with the key.

97
00:05:49,480 --> 00:05:50,710
And then we'll end that.

98
00:05:52,440 --> 00:05:56,430
And inside that we're going to have a TD with the order ID.

99
00:05:57,030 --> 00:05:59,670
Then we want the date.

100
00:05:59,700 --> 00:06:04,500
So we're going to use the created app, but we're going to format it with substring.

101
00:06:04,710 --> 00:06:07,650
And then let's do the total price.

102
00:06:08,100 --> 00:06:08,760
Is that right?

103
00:06:08,760 --> 00:06:08,940
Yeah.

104
00:06:08,940 --> 00:06:11,880
So we have ID date total.

105
00:06:12,030 --> 00:06:14,590
Then we want if it's paid or not.

106
00:06:14,610 --> 00:06:16,290
So for this.

107
00:06:18,160 --> 00:06:21,010
If it's paid, then we want to show that.

108
00:06:21,160 --> 00:06:22,510
Basically we'll show.

109
00:06:24,340 --> 00:06:25,870
Yeah, we'll show the date it's paid.

110
00:06:25,870 --> 00:06:30,790
But if not, then we're going to show an icon, an X icon.

111
00:06:30,790 --> 00:06:33,040
So I'm actually going to bring in up top.

112
00:06:33,790 --> 00:06:36,750
I feel like we haven't brought in any icons in a while.

113
00:06:36,750 --> 00:06:41,700
So we're going to bring in a Times which is an x mark.

114
00:06:41,700 --> 00:06:45,390
So we're going to bring that in from React icon slash for.

115
00:06:47,670 --> 00:06:51,600
So now what we can do is put in our TD.

116
00:06:54,170 --> 00:06:54,620
Okay.

117
00:06:54,620 --> 00:07:03,290
And then we're going to put in some curly braces and we're going to say if the order Dot is paid.

118
00:07:04,100 --> 00:07:05,180
Then.

119
00:07:05,970 --> 00:07:07,950
We'll do something else.

120
00:07:07,980 --> 00:07:09,350
Do something else.

121
00:07:09,360 --> 00:07:16,050
So if it's paid, then we're just going to say order dot paid at.

122
00:07:16,110 --> 00:07:16,210
Okay.

123
00:07:16,230 --> 00:07:23,370
We're going to show the paid at and we'll format it with substring and then else if it's not paid,

124
00:07:23,370 --> 00:07:27,780
then we're going to show the far times icon and we're going to color it red.

125
00:07:28,570 --> 00:07:28,960
All right.

126
00:07:28,960 --> 00:07:32,650
So as you can see, both of these have been paid.

127
00:07:32,650 --> 00:07:34,270
So it just shows the date.

128
00:07:35,260 --> 00:07:37,870
And then we're going to do the same for delivered.

129
00:07:37,870 --> 00:07:39,790
So I'll copy this last TD.

130
00:07:40,950 --> 00:07:45,900
And let's say order is delivered.

131
00:07:46,230 --> 00:07:51,330
And if it is, then we want to show delivered at.

132
00:07:51,360 --> 00:07:57,030
If not, then we'll show an X And neither one of these have been set to delivered because an admin has

133
00:07:57,030 --> 00:08:00,090
to do that and we haven't added that functionality yet.

134
00:08:01,020 --> 00:08:01,410
All right.

135
00:08:01,410 --> 00:08:03,060
And then in the last TD.

136
00:08:04,780 --> 00:08:07,030
Is going to be our buttons.

137
00:08:07,030 --> 00:08:13,200
So basically we want to be able to to see the details of the order.

138
00:08:13,210 --> 00:08:15,100
So I guess it's just one button.

139
00:08:15,100 --> 00:08:16,300
It's just one link.

140
00:08:17,140 --> 00:08:19,360
So we're going to have a link container.

141
00:08:20,140 --> 00:08:22,900
And in there we'll add our button.

142
00:08:25,250 --> 00:08:29,870
Close that and say details.

143
00:08:31,360 --> 00:08:32,020
Okay.

144
00:08:32,020 --> 00:08:34,030
I think that that's correct.

145
00:08:34,820 --> 00:08:35,299
Yeah.

146
00:08:35,299 --> 00:08:38,659
So if we click details, it takes us to the order page.

147
00:08:42,539 --> 00:08:42,929
All right.

148
00:08:42,929 --> 00:08:48,990
So users can log in, they can go to their profile, they can update their details, see their orders,

149
00:08:49,020 --> 00:08:53,670
see the details of the orders, such as the items, the price they paid.

150
00:08:53,670 --> 00:08:57,060
So, yeah, I think that this is this is pretty good.

151
00:08:59,130 --> 00:08:59,610
All right.

152
00:08:59,610 --> 00:09:04,760
So, yeah, I think that we're ready now to start on the admin functionality.

153
00:09:04,770 --> 00:09:14,370
So basically I want to have a new menu item for admins or a new dropdown for admins to basically manage

154
00:09:14,370 --> 00:09:18,330
users products and orders.

155
00:09:18,330 --> 00:09:20,550
So we'll get to that in the next section.