1
00:00:01,042 --> 00:00:02,080
‫In this video,

2
00:00:02,080 --> 00:00:04,790
‫we're gonna implement the my bookings page.

3
00:00:04,790 --> 00:00:07,200
‫So, basically we're gonna render a nice page

4
00:00:07,200 --> 00:00:10,183
‫containing all the tours that a user has booked.

5
00:00:11,950 --> 00:00:15,920
‫And let's start by adding a new route to our viewRoutes.

6
00:00:17,120 --> 00:00:21,320
‫Okay, so we have me and so let's after that

7
00:00:21,320 --> 00:00:23,253
‫then create the my-tours.

8
00:00:24,720 --> 00:00:29,720
‫So I'm duplicating this one, my-tours,

9
00:00:29,740 --> 00:00:32,230
‫then also this route needs to be protected

10
00:00:32,230 --> 00:00:34,090
‫so that only currently logged-in users

11
00:00:34,090 --> 00:00:37,150
‫can access this page, of course.

12
00:00:37,150 --> 00:00:39,020
‫And then, in our viewsController,

13
00:00:39,020 --> 00:00:41,723
‫we're gonna have a controller called getMyTours.

14
00:00:44,029 --> 00:00:47,480
‫MyTours like this, okay?

15
00:00:47,480 --> 00:00:49,943
‫And that's actually it for now,

16
00:00:50,930 --> 00:00:54,123
‫so let's go ahead and create this controller now.

17
00:00:56,090 --> 00:00:59,030
‫Okay, so we have all these gets here,

18
00:00:59,030 --> 00:01:02,790
‫get tour, get log-in form, get account.

19
00:01:02,790 --> 00:01:04,853
‫So let's put this one here as well.

20
00:01:12,559 --> 00:01:14,690
‫And so now, what we need to do here

21
00:01:14,690 --> 00:01:18,060
‫is to find all the tours that the user has booked.

22
00:01:18,060 --> 00:01:21,050
‫So, basically, first we need to find all the bookings

23
00:01:21,050 --> 00:01:23,170
‫for the currently logged-in users

24
00:01:23,170 --> 00:01:25,620
‫which will then give us a bunch of tour IDs,

25
00:01:25,620 --> 00:01:28,503
‫and then we have to find the tours with those IDs.

26
00:01:29,400 --> 00:01:34,400
‫So, basically, find all bookings and then

27
00:01:39,790 --> 00:01:44,340
‫find tours with the returned IDs.

28
00:01:44,340 --> 00:01:48,890
‫So basically the IDs of the bookings for the user, right?

29
00:01:48,890 --> 00:01:50,720
‫Now, instead, we could also

30
00:01:50,720 --> 00:01:53,440
‫do a virtual populate on the tours,

31
00:01:53,440 --> 00:01:55,413
‫and it would be great if you would implement

32
00:01:55,413 --> 00:01:59,130
‫this on your own exactly as we have done it before

33
00:01:59,130 --> 00:02:01,240
‫with the tours and the reviews,

34
00:02:01,240 --> 00:02:04,040
‫but here in this function I actually wanted to show you

35
00:02:04,040 --> 00:02:05,710
‫how we can do it manually

36
00:02:05,710 --> 00:02:08,290
‫because I think that's also kind of important

37
00:02:08,290 --> 00:02:10,067
‫and actually a virtual populate

38
00:02:10,067 --> 00:02:13,550
‫should work something similar to what we're gonna do here.

39
00:02:13,550 --> 00:02:16,100
‫And so you see that actually we need two queries

40
00:02:16,100 --> 00:02:18,070
‫in order to really find the tours

41
00:02:18,070 --> 00:02:20,487
‫corresponding to the user's bookings.

42
00:02:20,487 --> 00:02:22,850
‫Any way, let's now start,

43
00:02:22,850 --> 00:02:25,753
‫so let's create a variable for all the bookings, await

44
00:02:28,751 --> 00:02:33,513
‫and now I think we don't have the bookings here yet, nope.

45
00:02:37,840 --> 00:02:39,533
‫So Bookings here, and bookingModel.

46
00:02:43,010 --> 00:02:47,890
‫And here, of course, it's just booking, all right.

47
00:02:47,890 --> 00:02:52,890
‫So await Booking.find, and now remember

48
00:02:53,530 --> 00:02:58,380
‫that each booking document has a user ID, right?

49
00:02:58,380 --> 00:03:00,160
‫So here in the Schema remember

50
00:03:00,160 --> 00:03:02,331
‫we have the tour ID, the user ID,

51
00:03:02,331 --> 00:03:04,410
‫and then all this other data,

52
00:03:04,410 --> 00:03:05,870
‫and so what we're gonna do now

53
00:03:05,870 --> 00:03:09,400
‫is to basically query by the user ID, okay?

54
00:03:09,400 --> 00:03:10,940
‫And so that will then return us

55
00:03:10,940 --> 00:03:15,136
‫all the tours that belong to the current user, okay?

56
00:03:15,136 --> 00:03:16,653
‫So, not this one.

57
00:03:20,650 --> 00:03:23,900
‫So tour should be equal to req.user.id.

58
00:03:29,170 --> 00:03:33,790
‫Then here async, and as always, catchAsync as well.

59
00:03:37,000 --> 00:03:39,440
‫So these bookings now contain all

60
00:03:39,440 --> 00:03:41,810
‫the booking documents for the current user,

61
00:03:41,810 --> 00:03:44,690
‫but really that only gives us the tour IDs.

62
00:03:44,690 --> 00:03:48,350
‫And so now we want to find the tours with the returned IDs.

63
00:03:48,350 --> 00:03:50,500
‫And so the next step is to basically

64
00:03:50,500 --> 00:03:52,976
‫create an array of all the IDs,

65
00:03:52,976 --> 00:03:55,430
‫and then after that query for tours

66
00:03:55,430 --> 00:03:58,512
‫that have one of these IDs, all right?

67
00:03:58,512 --> 00:04:00,950
‫And this will make a bit more sense

68
00:04:00,950 --> 00:04:03,973
‫once we actually implement what I just explained.

69
00:04:04,830 --> 00:04:09,347
‫So tourIDs is equal to bookings

70
00:04:09,347 --> 00:04:11,240
‫and now we're gonna use a map

71
00:04:11,240 --> 00:04:14,630
‫to create a new array based on a callback function

72
00:04:15,700 --> 00:04:17,530
‫which is this one,

73
00:04:17,530 --> 00:04:22,300
‫so the current el.tour.id.

74
00:04:22,300 --> 00:04:25,200
‫So, what is this going to do?

75
00:04:25,200 --> 00:04:28,630
‫Well, basically this loops through the entire bookings array

76
00:04:28,630 --> 00:04:32,760
‫and on each element it will grab the el.tour.

77
00:04:32,760 --> 00:04:35,130
‫And actually, we don't even need the ID here

78
00:04:35,130 --> 00:04:39,210
‫because the tour itself is already the tour ID, right?

79
00:04:39,210 --> 00:04:41,460
‫Then in the end, we have a nice array

80
00:04:41,460 --> 00:04:44,330
‫with all the tour IDs in there here

81
00:04:44,330 --> 00:04:45,980
‫and that's because we used a map.

82
00:04:49,640 --> 00:04:52,500
‫Okay, then having all the tour IDs,

83
00:04:52,500 --> 00:04:56,233
‫we can actually get the tours corresponding to those IDs.

84
00:04:58,640 --> 00:05:03,640
‫So await Tour.find and we actually want to find by ID,

85
00:05:07,380 --> 00:05:09,953
‫but we cannot use the .findbyid

86
00:05:10,900 --> 00:05:14,120
‫because here we actually will need a new operator.

87
00:05:14,120 --> 00:05:15,470
‫And said operator,

88
00:05:15,470 --> 00:05:17,630
‫which I'm not sure if we have used before,

89
00:05:17,630 --> 00:05:18,713
‫is called in.

90
00:05:20,370 --> 00:05:21,810
‫So, in tourIDs.

91
00:05:24,320 --> 00:05:26,330
‫So basically what this is going to do

92
00:05:26,330 --> 00:05:28,370
‫instead it will select all the tours

93
00:05:28,370 --> 00:05:33,370
‫which have an ID which is in the tourIDs array, okay?

94
00:05:33,520 --> 00:05:35,277
‫So that's quite straightforward,

95
00:05:35,277 --> 00:05:37,618
‫but it's very great to know

96
00:05:37,618 --> 00:05:41,720
‫that we can use this very handy in operator here, okay?

97
00:05:41,720 --> 00:05:43,770
‫And so that's actually one of the reasons

98
00:05:43,770 --> 00:05:45,620
‫why I wanted to do this manually

99
00:05:45,620 --> 00:05:49,200
‫instead of just doing a virtual populate like we did before.

100
00:05:49,200 --> 00:05:51,760
‫But again, it would be nice if you would go ahead

101
00:05:51,760 --> 00:05:53,760
‫and actually implement that also

102
00:05:53,760 --> 00:05:55,823
‫just for the fun of it, you know.

103
00:05:57,060 --> 00:05:58,860
‫Okay, and with this we actually

104
00:05:58,860 --> 00:06:01,593
‫have our tours ready to be rendered.

105
00:06:03,330 --> 00:06:07,385
‫So, res.status as always,

106
00:06:07,385 --> 00:06:11,230
‫and then render them, all right?

107
00:06:11,230 --> 00:06:14,100
‫And actually, we don't even need a new template for this.

108
00:06:14,100 --> 00:06:17,383
‫We're simply gonna be reusing the overview, okay?

109
00:06:19,670 --> 00:06:21,300
‫So we're gonna end up with a page

110
00:06:21,300 --> 00:06:23,530
‫that looks very similar to the overview,

111
00:06:23,530 --> 00:06:26,923
‫but only with the tours that the user has booked.

112
00:06:27,820 --> 00:06:30,456
‫So, up here and to get overview,

113
00:06:30,456 --> 00:06:34,180
‫we then actually passed in all the tours, okay?

114
00:06:34,180 --> 00:06:36,510
‫So basically all of them.

115
00:06:36,510 --> 00:06:38,960
‫And so now, we're gonna have something very similar

116
00:06:38,960 --> 00:06:42,113
‫but of course only passing in the booked tours.

117
00:06:42,113 --> 00:06:43,653
‫So, where's that?

118
00:06:47,450 --> 00:06:51,813
‫All right, so the title's gonna be My Tours,

119
00:06:56,050 --> 00:06:59,640
‫and again passing in the tours variable.

120
00:06:59,640 --> 00:07:01,680
‫Okay and that should be it.

121
00:07:01,680 --> 00:07:03,810
‫Now of course we could also have created

122
00:07:03,810 --> 00:07:06,550
‫a whole new card for these bookstores

123
00:07:06,550 --> 00:07:08,250
‫with some more relevant information

124
00:07:08,250 --> 00:07:10,080
‫about each of the bookings,

125
00:07:10,080 --> 00:07:12,830
‫but in this case that's not really important.

126
00:07:12,830 --> 00:07:14,290
‫Now, right?

127
00:07:14,290 --> 00:07:16,480
‫So, we're actually ready to test this

128
00:07:16,480 --> 00:07:20,040
‫because we already implemented the route here before.

129
00:07:20,040 --> 00:07:22,620
‫And so that's my-tours.

130
00:07:22,620 --> 00:07:25,750
‫Oh, but actually let's set this link here

131
00:07:25,750 --> 00:07:28,240
‫right on the user account page.

132
00:07:28,240 --> 00:07:31,380
‫So this my-tours should of course have

133
00:07:31,380 --> 00:07:35,066
‫it's own link right here in the account.

134
00:07:35,066 --> 00:07:36,633
‫So in that left column,

135
00:07:37,860 --> 00:07:40,777
‫so that's right here in My bookings,

136
00:07:40,777 --> 00:07:42,560
‫so we have this first one here

137
00:07:42,560 --> 00:07:44,949
‫which is for the link, remember.

138
00:07:44,949 --> 00:07:48,800
‫And so right now, basically all of them point no where,

139
00:07:48,800 --> 00:07:51,453
‫but now for the bookings we actually have a link.

140
00:07:51,453 --> 00:07:56,453
‫And so that is my-tours.

141
00:07:57,000 --> 00:07:59,570
‫And we could have called it bookings as well,

142
00:07:59,570 --> 00:08:02,053
‫but that's not really important anyway.

143
00:08:03,210 --> 00:08:05,630
‫So, now we're ready to test this.

144
00:08:05,630 --> 00:08:07,990
‫Let's actually log out of this user,

145
00:08:07,990 --> 00:08:11,363
‫and then log in as our other user, Laura.

146
00:08:17,860 --> 00:08:22,380
‫All right, and so let's see what we get here

147
00:08:24,111 --> 00:08:26,476
‫and that's taking way too long,

148
00:08:26,476 --> 00:08:31,014
‫so let's take a look at our code, edit our terminal here.

149
00:08:31,014 --> 00:08:34,810
‫Okay, so there's no error here,

150
00:08:34,810 --> 00:08:38,390
‫but also it looks like nothing is really happening here.

151
00:08:38,390 --> 00:08:42,683
‫So the my-tours route here doesn't even show up, all right.

152
00:08:43,780 --> 00:08:45,550
‫Now in order to find this bug,

153
00:08:45,550 --> 00:08:48,600
‫I actually had to do some debugging outside of this video

154
00:08:48,600 --> 00:08:52,304
‫because it was really a hard one to find, okay.

155
00:08:52,304 --> 00:08:55,330
‫First, there's a small error here.

156
00:08:55,330 --> 00:08:58,690
‫So this here should actually be user and not be tour.

157
00:08:58,690 --> 00:09:00,800
‫So I explained it correctly back then,

158
00:09:00,800 --> 00:09:03,373
‫where I said that we need to filter by the user,

159
00:09:03,373 --> 00:09:05,811
‫so tours where the user is equal

160
00:09:05,811 --> 00:09:08,250
‫to the user coming from the request,

161
00:09:08,250 --> 00:09:11,690
‫but then for some reason I did it wrong here, okay?

162
00:09:11,690 --> 00:09:13,904
‫But that's not the main bug actually.

163
00:09:13,904 --> 00:09:17,267
‫So not the one preventing the page from actually loading.

164
00:09:17,267 --> 00:09:19,552
‫The error that causes that to happen

165
00:09:19,552 --> 00:09:22,634
‫is right here actually in the booking model.

166
00:09:22,634 --> 00:09:26,810
‫And it's down here in this pre find middleware.

167
00:09:26,810 --> 00:09:28,690
‫And the problem is that we do never

168
00:09:28,690 --> 00:09:32,944
‫call the next middleware here, now right?

169
00:09:32,944 --> 00:09:36,120
‫So again, this is a pre-middleware.

170
00:09:36,120 --> 00:09:38,490
‫And all of the pre-middlewares have access

171
00:09:38,490 --> 00:09:40,620
‫to the next function and so,

172
00:09:40,620 --> 00:09:42,710
‫at the end of these middlewares,

173
00:09:42,710 --> 00:09:44,370
‫we always have to call next.

174
00:09:44,370 --> 00:09:48,634
‫Otherwise, our process really gets stuck, all right?

175
00:09:48,634 --> 00:09:52,110
‫So give that a save, can actually close this one.

176
00:09:52,110 --> 00:09:54,800
‫And so now let's try that again

177
00:09:56,754 --> 00:09:59,532
‫and now indeed we have my tours,

178
00:09:59,532 --> 00:10:04,097
‫but it is empty since this user never really did a booking.

179
00:10:04,097 --> 00:10:06,803
‫So, let's try that out now,

180
00:10:08,000 --> 00:10:10,203
‫and let's book the forest hiker.

181
00:10:16,070 --> 00:10:18,480
‫So that should still be working,

182
00:10:18,480 --> 00:10:21,291
‫and indeed it does, very nice.

183
00:10:21,291 --> 00:10:24,400
‫We have the email address pre-formatted

184
00:10:24,400 --> 00:10:26,763
‫and now, as always 4242.

185
00:10:28,590 --> 00:10:31,841
‫So we did the booking before actually with this user,

186
00:10:31,841 --> 00:10:34,710
‫but before we implemented the booking model

187
00:10:35,870 --> 00:10:37,681
‫and so therefore we never really

188
00:10:37,681 --> 00:10:39,893
‫created a booking in our system.

189
00:10:42,150 --> 00:10:44,590
‫All right, so payment accepted

190
00:10:44,590 --> 00:10:49,590
‫and now let's see and here we go, great!

191
00:10:51,689 --> 00:10:55,200
‫So that logic that we just implemented actually worked

192
00:10:55,200 --> 00:10:57,400
‫and so really the only problem was

193
00:10:57,400 --> 00:11:00,020
‫that next missing in the middleware.

194
00:11:00,020 --> 00:11:03,240
‫And just like that, we completed yet another page

195
00:11:03,240 --> 00:11:05,470
‫of our dynamic website.

196
00:11:05,470 --> 00:11:09,230
‫And so next up, all there's really left to do at this point

197
00:11:09,230 --> 00:11:11,513
‫is to finish the bookings API.