1 00:00:00,980 --> 00:00:02,760 ‫All right, in this lecture, 2 00:00:02,760 --> 00:00:04,720 ‫we're going to talk about something called 3 00:00:04,720 --> 00:00:06,910 ‫nested routes, what they are, 4 00:00:06,910 --> 00:00:08,690 ‫why we need them, and how we can 5 00:00:08,690 --> 00:00:11,163 ‫actually implement them in Express. 6 00:00:12,944 --> 00:00:15,470 ‫Let's think for a second how in practice, 7 00:00:15,470 --> 00:00:18,566 ‫we actually want to create a new review. 8 00:00:18,566 --> 00:00:21,520 ‫Up until this point, when creating new reviews, 9 00:00:21,520 --> 00:00:24,020 ‫we always manually passed the tour ID 10 00:00:24,020 --> 00:00:26,920 ‫and the user ID into the request body, 11 00:00:26,920 --> 00:00:30,300 ‫and then created the review from there, right. 12 00:00:30,300 --> 00:00:33,180 ‫That's okay during development, but of course, 13 00:00:33,180 --> 00:00:34,980 ‫that's not how a review will 14 00:00:34,980 --> 00:00:36,433 ‫be created in the real world. 15 00:00:37,680 --> 00:00:40,610 ‫So, in the real world, the user ID 16 00:00:40,610 --> 00:00:44,010 ‫should ideally come from the currently logged in user 17 00:00:44,010 --> 00:00:47,740 ‫and a tour ID should come from the current tour. 18 00:00:47,740 --> 00:00:49,700 ‫That should ideally be encoded 19 00:00:49,700 --> 00:00:51,877 ‫right in the route, so in the URL. 20 00:00:53,020 --> 00:00:56,300 ‫When submitting a post request for a new review, 21 00:00:56,300 --> 00:01:00,140 ‫we will want to submit that to a URL like this. 22 00:01:00,140 --> 00:01:03,143 ‫Let's write that down here just as a comment. 23 00:01:05,826 --> 00:01:08,869 ‫Ideally, we will want to do a request 24 00:01:08,869 --> 00:01:13,869 ‫for post, for tour, and the ID of the tour, 25 00:01:15,490 --> 00:01:19,343 ‫it doesn't really matter here, and then reviews. 26 00:01:20,650 --> 00:01:23,100 ‫Okay, so now, just like this, 27 00:01:23,100 --> 00:01:25,580 ‫we have the tour ID right in the URL 28 00:01:25,580 --> 00:01:28,030 ‫and the user ID will then also come 29 00:01:28,030 --> 00:01:29,913 ‫from the currently logged in user. 30 00:01:31,130 --> 00:01:35,330 ‫What we see here is now a so-called nested route. 31 00:01:35,330 --> 00:01:37,330 ‫They make a lot of sense when there is 32 00:01:37,330 --> 00:01:40,570 ‫a clear parent-child relationship between resources. 33 00:01:40,570 --> 00:01:43,840 ‫That is clearly the case here, right. 34 00:01:43,840 --> 00:01:47,530 ‫Reviews is clearly a child of tour. 35 00:01:47,530 --> 00:01:49,320 ‫This nested route basically means 36 00:01:49,320 --> 00:01:51,580 ‫to access the reviews resource 37 00:01:51,580 --> 00:01:54,810 ‫on the tour's resource, all right. 38 00:01:54,810 --> 00:01:57,420 ‫In the same way, we will actually also want to 39 00:01:57,420 --> 00:02:01,193 ‫access reviews from a certain tour in the same way. 40 00:02:02,310 --> 00:02:05,560 ‫Let's say then a get request, 41 00:02:05,560 --> 00:02:09,650 ‫and again for tour slash tour ID and slash reviews. 42 00:02:09,650 --> 00:02:11,390 ‫This would then ideally get us 43 00:02:11,390 --> 00:02:13,583 ‫all the reviews for this tour. 44 00:02:14,970 --> 00:02:17,110 ‫We could go even further 45 00:02:17,110 --> 00:02:19,653 ‫and also specify the ID of the review. 46 00:02:21,840 --> 00:02:24,490 ‫So again, just a random string here, 47 00:02:24,490 --> 00:02:25,703 ‫but you get the point. 48 00:02:26,643 --> 00:02:28,550 ‫In this case, we would get review 49 00:02:28,550 --> 00:02:30,420 ‫with the ID of this here 50 00:02:30,420 --> 00:02:32,603 ‫on the tour with this ID. 51 00:02:34,140 --> 00:02:36,520 ‫This is what nested routes are all about. 52 00:02:36,520 --> 00:02:40,220 ‫This is a way more easier way of reading 53 00:02:40,220 --> 00:02:44,795 ‫and understanding how the API works for our API users. 54 00:02:44,795 --> 00:02:47,130 ‫It's way easier then messing around with 55 00:02:47,130 --> 00:02:50,100 ‫query strings and all that stuff like that. 56 00:02:50,100 --> 00:02:52,580 ‫Also, it really shows how there is 57 00:02:52,580 --> 00:02:55,850 ‫this clear relationship between these resources, 58 00:02:55,850 --> 00:02:58,610 ‫again, reviews and tours. 59 00:02:58,610 --> 00:03:00,410 ‫All right, but enough talk. 60 00:03:00,410 --> 00:03:02,510 ‫Let's now actually implement this 61 00:03:02,510 --> 00:03:04,600 ‫starting with the post route. 62 00:03:04,600 --> 00:03:08,100 ‫Now, since the route actually starts with tours, 63 00:03:08,100 --> 00:03:11,150 ‫it will be of course redirected to our tour router. 64 00:03:11,150 --> 00:03:14,600 ‫We're going to have to implement this functionality 65 00:03:14,600 --> 00:03:16,890 ‫at least for now, in the tour router, 66 00:03:16,890 --> 00:03:19,530 ‫even though that seems a bit counter-intuitive 67 00:03:19,530 --> 00:03:21,793 ‫since we're in fact, dealing with reviews. 68 00:03:23,190 --> 00:03:26,650 ‫But again, for now, let's implement it like this. 69 00:03:26,650 --> 00:03:29,690 ‫We come to our user router 70 00:03:32,040 --> 00:03:33,550 ‫and first, since we're actually 71 00:03:33,550 --> 00:03:34,870 ‫going to use reviews here, 72 00:03:34,870 --> 00:03:37,483 ‫we need to import the review controller. 73 00:03:42,370 --> 00:03:46,140 ‫Controller require. 74 00:03:46,140 --> 00:03:49,763 ‫Maybe I should have just copied the line from before. 75 00:03:52,080 --> 00:03:55,693 ‫Controllers, and review controller. 76 00:03:57,380 --> 00:04:01,010 ‫All right, now here at the very bottom, 77 00:04:01,010 --> 00:04:02,730 ‫and let's actually get our code 78 00:04:02,730 --> 00:04:04,970 ‫for this example from here 79 00:04:08,100 --> 00:04:09,223 ‫just as a reference. 80 00:04:13,518 --> 00:04:15,750 ‫So that we can now actually implement it. 81 00:04:15,750 --> 00:04:18,910 ‫The route that we're going to implement here is 82 00:04:20,960 --> 00:04:24,673 ‫slash ID and then reviews. 83 00:04:26,240 --> 00:04:28,600 ‫This tour part here, as you already know, 84 00:04:28,600 --> 00:04:30,457 ‫is where we mounted this router 85 00:04:30,457 --> 00:04:33,300 ‫and so therefore, we do not have to repeat it here. 86 00:04:33,300 --> 00:04:37,090 ‫But then, we have the tour ID and then slash reviews. 87 00:04:37,090 --> 00:04:38,590 ‫In order to make this really clear, 88 00:04:38,590 --> 00:04:40,440 ‫let's actually call it tour ID 89 00:04:42,850 --> 00:04:44,040 ‫since we're now dealing with 90 00:04:44,040 --> 00:04:45,440 ‫different resources here. 91 00:04:45,440 --> 00:04:48,363 ‫So it's a bit clearer to really call it what it is. 92 00:04:52,885 --> 00:04:55,844 ‫We now want to implement the create review. 93 00:04:55,844 --> 00:04:58,094 ‫Authcontroller dot protect. 94 00:05:00,960 --> 00:05:04,403 ‫We also want to restrict access only to users, 95 00:05:11,472 --> 00:05:15,805 ‫and then of course, our review controller dot create 96 00:05:19,740 --> 00:05:22,033 ‫review, all right. 97 00:05:22,980 --> 00:05:26,000 ‫Again, it is a bit weird and counter-intuitive 98 00:05:26,000 --> 00:05:28,880 ‫to actually call the review controller 99 00:05:28,880 --> 00:05:30,593 ‫here in the user route. 100 00:05:31,620 --> 00:05:34,273 ‫Well actually, it should not be in the user route. 101 00:05:35,200 --> 00:05:36,990 ‫For some reason, I opened the user routes 102 00:05:36,990 --> 00:05:41,140 ‫and not the tour routes, so sorry for that one. 103 00:05:41,140 --> 00:05:44,403 ‫Let's cut it from here, come to our tour routes, 104 00:05:45,420 --> 00:05:47,320 ‫and actually do it here at the bottom. 105 00:05:49,697 --> 00:05:52,523 ‫Of course we also need to get the review controller. 106 00:05:56,490 --> 00:05:59,580 ‫So now we should be good to go. 107 00:05:59,580 --> 00:06:01,640 ‫That was a stupid bug. 108 00:06:01,640 --> 00:06:03,920 ‫But anyway, what I was saying is that 109 00:06:03,920 --> 00:06:06,610 ‫it doesn't make much sense to actually call 110 00:06:06,610 --> 00:06:09,720 ‫the review controller in the tour route, 111 00:06:09,720 --> 00:06:12,300 ‫but again, for now, we need to do it like this 112 00:06:12,300 --> 00:06:15,000 ‫because the route starts with tour. 113 00:06:15,000 --> 00:06:17,680 ‫It's this router that will get activated. 114 00:06:17,680 --> 00:06:19,460 ‫In the next video, we're going to fix that, 115 00:06:19,460 --> 00:06:21,350 ‫but for now, we just want to make it work 116 00:06:21,350 --> 00:06:22,870 ‫and to become familiar with 117 00:06:22,870 --> 00:06:25,840 ‫this whole concept of nested routes. 118 00:06:25,840 --> 00:06:29,540 ‫Anyway, we now got our tour ID right in the route, 119 00:06:29,540 --> 00:06:30,880 ‫but of course, we need to let 120 00:06:30,880 --> 00:06:34,250 ‫the controller know that it should now use this tour ID 121 00:06:34,250 --> 00:06:37,113 ‫and also the currently logged in user's ID. 122 00:06:38,100 --> 00:06:39,240 ‫We now need to go ahead 123 00:06:39,240 --> 00:06:41,400 ‫and update our review controller 124 00:06:43,630 --> 00:06:45,433 ‫right here at create review. 125 00:06:53,817 --> 00:06:56,370 ‫What we're going to do is this. 126 00:06:56,370 --> 00:07:01,360 ‫We will say, if there is no request dot body 127 00:07:02,990 --> 00:07:06,210 ‫dot tour, so basically if we didn't specify 128 00:07:06,210 --> 00:07:08,180 ‫the tour ID and the body, 129 00:07:08,180 --> 00:07:10,870 ‫then we want to define that 130 00:07:10,870 --> 00:07:12,603 ‫as the one coming from the URL. 131 00:07:14,080 --> 00:07:17,373 ‫Req dot body dot tour equals request, 132 00:07:19,210 --> 00:07:21,910 ‫and now remember how that URL parameter 133 00:07:21,910 --> 00:07:25,850 ‫is on request dot params and then of course, 134 00:07:25,850 --> 00:07:29,603 ‫the name of the parameter itself, so tour ID. 135 00:07:32,930 --> 00:07:34,640 ‫This is the first part and second, 136 00:07:34,640 --> 00:07:37,060 ‫we also need to do the same with the user. 137 00:07:38,450 --> 00:07:41,740 ‫If there is no request dot user, 138 00:07:41,740 --> 00:07:46,710 ‫or actually, request dot body dot user, 139 00:07:46,710 --> 00:07:50,180 ‫well then the request dot body dot user 140 00:07:51,910 --> 00:07:56,910 ‫should be request dot user dot ID. 141 00:07:58,750 --> 00:08:01,520 ‫And again, we get request dot user from 142 00:08:01,520 --> 00:08:05,193 ‫the protect middleware, and that's actually it. 143 00:08:06,130 --> 00:08:11,130 ‫Let's just put a comment here, nested routes. 144 00:08:13,390 --> 00:08:15,120 ‫With this, we actually make it so 145 00:08:15,120 --> 00:08:17,700 ‫that the user can still specify manually 146 00:08:17,700 --> 00:08:19,603 ‫the tour and the user ID. 147 00:08:20,677 --> 00:08:21,860 ‫What we're doing here is simply 148 00:08:21,860 --> 00:08:24,250 ‫to define them when they are not there 149 00:08:24,250 --> 00:08:27,343 ‫or when they are not specified in the request body. 150 00:08:28,827 --> 00:08:32,263 ‫This should be enough for us to test this now. 151 00:08:33,410 --> 00:08:35,320 ‫All right, so let's take a look 152 00:08:35,320 --> 00:08:37,853 ‫at the users that we got at this point. 153 00:08:41,820 --> 00:08:43,610 ‫We have these two regular users, 154 00:08:43,610 --> 00:08:46,610 ‫we have the test user and we have Jonas here, 155 00:08:46,610 --> 00:08:49,390 ‫but we forgot his password. 156 00:08:49,390 --> 00:08:51,550 ‫Let's go ahead and delete this user 157 00:08:51,550 --> 00:08:53,730 ‫and create a new one. 158 00:08:53,730 --> 00:08:58,730 ‫All right, so in Compass, the users, 159 00:09:00,400 --> 00:09:01,773 ‫and it's this one. 160 00:09:07,220 --> 00:09:09,723 ‫Let's recreate this user basically. 161 00:09:11,220 --> 00:09:14,793 ‫All we really need is these two pieces of data. 162 00:09:17,110 --> 00:09:18,543 ‫Actually that's sign up. 163 00:09:26,820 --> 00:09:28,310 ‫The same name, the same email 164 00:09:29,600 --> 00:09:31,743 ‫and the same password as well. 165 00:09:35,657 --> 00:09:38,690 ‫At this point, we are already logged in as this user, 166 00:09:38,690 --> 00:09:42,170 ‫so-called Jonas, let's keep that in mind. 167 00:09:42,170 --> 00:09:44,950 ‫Next up, we need to choose which tour 168 00:09:44,950 --> 00:09:47,600 ‫we actually want to create the review on. 169 00:09:47,600 --> 00:09:49,790 ‫Let's again do it here at The Forest Hiker 170 00:09:49,790 --> 00:09:52,773 ‫so that then we get multiple reviews on the same tour. 171 00:09:54,240 --> 00:09:55,090 ‫What we're going to now 172 00:09:55,090 --> 00:09:57,380 ‫is to basically access that nested route 173 00:09:57,380 --> 00:09:58,430 ‫that we just created. 174 00:10:02,135 --> 00:10:03,350 ‫We have the tours. 175 00:10:03,350 --> 00:10:05,980 ‫Now we need to get the tour ID, 176 00:10:05,980 --> 00:10:08,050 ‫and again, we're going to use this one 177 00:10:08,050 --> 00:10:09,323 ‫for The Forest Hiker, 178 00:10:12,490 --> 00:10:16,430 ‫and then slash reviews, 179 00:10:16,430 --> 00:10:18,283 ‫and then remember a post. 180 00:10:19,230 --> 00:10:21,963 ‫Then we also need to specify the authorization, 181 00:10:23,100 --> 00:10:27,010 ‫so bearer token, and then now in the body, 182 00:10:27,010 --> 00:10:28,610 ‫all we really need is to 183 00:10:28,610 --> 00:10:30,673 ‫specify the rating and the review. 184 00:10:36,830 --> 00:10:37,860 ‫The rating is five 185 00:10:45,220 --> 00:10:47,160 ‫and then some text here. 186 00:10:47,160 --> 00:10:50,913 ‫So this should actually already be enough to try this out. 187 00:10:51,920 --> 00:10:52,753 ‫Let's send it. 188 00:10:53,769 --> 00:10:56,520 ‫Now we don't have permission to perform this action, 189 00:10:56,520 --> 00:11:00,100 ‫for some reason, so that's weird. 190 00:11:00,100 --> 00:11:03,460 ‫We signed up as this Jonas, 191 00:11:03,460 --> 00:11:05,610 ‫and it's actually just a normal user 192 00:11:06,490 --> 00:11:08,203 ‫like it's supposed to be. 193 00:11:09,090 --> 00:11:11,533 ‫Let's take a look at our router. 194 00:11:13,154 --> 00:11:17,170 ‫Here, oh okay, it's user, not users. 195 00:11:19,120 --> 00:11:22,930 ‫A small bug like that can, as you see, 196 00:11:22,930 --> 00:11:27,333 ‫crash this entire route, so let's try it again now. 197 00:11:28,530 --> 00:11:31,750 ‫And now we actually get the final review 198 00:11:31,750 --> 00:11:35,300 ‫with both the tour and the user correctly defined. 199 00:11:35,300 --> 00:11:38,140 ‫At least I hope so. 200 00:11:38,140 --> 00:11:41,250 ‫The tour ID, you see, ends here in 951, 201 00:11:41,250 --> 00:11:43,260 ‫and so it's exactly the same here. 202 00:11:43,260 --> 00:11:47,640 ‫The user is this 1f3, and so indeed, 203 00:11:47,640 --> 00:11:49,343 ‫it is this exact same one. 204 00:11:50,660 --> 00:11:53,280 ‫All right, and so now we should actually be able 205 00:11:53,280 --> 00:11:56,170 ‫to confirm that, and so this get tour here 206 00:11:56,170 --> 00:11:59,230 ‫is actually already the one that we were 207 00:11:59,230 --> 00:12:01,165 ‫creating the new review on. 208 00:12:01,165 --> 00:12:04,460 ‫Let's take a look, and indeed, 209 00:12:04,460 --> 00:12:06,660 ‫we now get two reviews. 210 00:12:06,660 --> 00:12:09,140 ‫This one is the one that we just created. 211 00:12:09,140 --> 00:12:11,790 ‫It is on the correct tour and of course, 212 00:12:11,790 --> 00:12:15,450 ‫also the correct user with the name of Jonas. 213 00:12:15,450 --> 00:12:17,973 ‫Awesome, that's really cool. 214 00:12:19,620 --> 00:12:22,520 ‫Let's go ahead and save this. 215 00:12:22,520 --> 00:12:24,720 ‫I'm going to create a new folder here again. 216 00:12:25,610 --> 00:12:29,473 ‫I'm going to call it tours slash reviews. 217 00:12:31,086 --> 00:12:33,663 ‫Now in here, let's create, 218 00:12:34,705 --> 00:12:39,705 ‫create new review on tour. 219 00:12:46,220 --> 00:12:49,537 ‫That should actually be outside and just like this. 220 00:12:54,397 --> 00:12:56,103 ‫Let's actually put that one here. 221 00:12:57,450 --> 00:13:01,293 ‫It doesn't really work as it should for some reason. 222 00:13:02,130 --> 00:13:03,403 ‫And here we go. 223 00:13:05,800 --> 00:13:08,260 ‫All right, that worked just fine, 224 00:13:08,260 --> 00:13:10,870 ‫but as I mentioned before, the implementation 225 00:13:10,870 --> 00:13:13,450 ‫is a bit confusing at this point. 226 00:13:13,450 --> 00:13:16,890 ‫And again, that is because we technically defined 227 00:13:16,890 --> 00:13:19,333 ‫a review route in the tour router. 228 00:13:20,220 --> 00:13:22,650 ‫That's a bit confusing, and so in the next video, 229 00:13:22,650 --> 00:13:24,193 ‫we are going to fix that.