1 00:00:01,200 --> 00:00:04,200 ‫All right, so with the booking table 2 00:00:04,200 --> 00:00:07,170 ‫now finished let's move on to building 3 00:00:07,170 --> 00:00:09,333 ‫the booking detail page. 4 00:00:10,800 --> 00:00:14,550 ‫And the way that we are going to access that page 5 00:00:14,550 --> 00:00:19,320 ‫is again with this context menu that we built earlier. 6 00:00:19,320 --> 00:00:22,140 ‫So here in each of these booking rows 7 00:00:22,140 --> 00:00:25,590 ‫we want to have that menu where we can click 8 00:00:25,590 --> 00:00:27,060 ‫and then one of the options 9 00:00:27,060 --> 00:00:30,300 ‫will lead us to the booking detail page 10 00:00:30,300 --> 00:00:33,480 ‫of the corresponding booking row. 11 00:00:33,480 --> 00:00:36,060 ‫So let's start with that. 12 00:00:36,060 --> 00:00:39,100 ‫And so let's come to booking row 13 00:00:40,380 --> 00:00:45,303 ‫and then here we need that menu that we built earlier. 14 00:00:46,140 --> 00:00:50,820 ‫Now remember how we already placed the entire booking table 15 00:00:50,820 --> 00:00:53,670 ‫inside the menus component 16 00:00:53,670 --> 00:00:56,700 ‫which is exactly that compound component 17 00:00:56,700 --> 00:01:00,030 ‫that we built in the previous section. 18 00:01:00,030 --> 00:01:02,790 ‫And so now inside that 19 00:01:02,790 --> 00:01:06,843 ‫we need to use the Menus.Menu component. 20 00:01:08,700 --> 00:01:12,510 ‫So that's going to be here inside each booking row 21 00:01:12,510 --> 00:01:15,690 ‫and in case you don't remember exactly how this worked 22 00:01:15,690 --> 00:01:19,350 ‫then always feel free to go back to the videos 23 00:01:19,350 --> 00:01:22,380 ‫where we implemented the cabin row. 24 00:01:22,380 --> 00:01:25,323 ‫So there we did this all in great detail. 25 00:01:26,640 --> 00:01:31,503 ‫But anyway, here we now need Menus.Menu, 26 00:01:33,420 --> 00:01:36,180 ‫and then each of these menus will contain 27 00:01:36,180 --> 00:01:39,423 ‫a toggle and a list of buttons, 28 00:01:40,860 --> 00:01:44,890 ‫so Menu.Toggle 29 00:01:46,680 --> 00:01:48,957 ‫and here it is, needs an ID. 30 00:01:48,957 --> 00:01:52,500 ‫And so the ID, let's just use the bookings ID 31 00:01:52,500 --> 00:01:56,460 ‫but it could really be any value that we wanted. 32 00:01:56,460 --> 00:01:59,947 ‫And then here after that, we need the Menus.List 33 00:02:02,220 --> 00:02:03,783 ‫and here it's also Menus. 34 00:02:05,130 --> 00:02:09,633 ‫So this needs to have the exact same ID as the toggle. 35 00:02:12,990 --> 00:02:16,170 ‫So that basically clicking on this button right here 36 00:02:16,170 --> 00:02:19,650 ‫will open up this list with the same ID. 37 00:02:19,650 --> 00:02:23,147 ‫And now in here we will have multiple Menus.Button. 38 00:02:26,430 --> 00:02:28,590 ‫So let's pass in an icon 39 00:02:28,590 --> 00:02:31,653 ‫and here we will use the Eye icon. 40 00:02:32,700 --> 00:02:36,870 ‫So showing that this is to see the details. 41 00:02:36,870 --> 00:02:40,260 ‫And so let's write exactly that. 42 00:02:40,260 --> 00:02:42,210 ‫So see details 43 00:02:42,210 --> 00:02:47,210 ‫and if we save this, then we immediately get something here. 44 00:02:47,940 --> 00:02:50,430 ‫So we get that button, and when we click 45 00:02:50,430 --> 00:02:53,970 ‫we have this only option that we have right now, 46 00:02:53,970 --> 00:02:55,470 ‫so see details. 47 00:02:55,470 --> 00:02:58,320 ‫Then when we click that it will actually close it, 48 00:02:58,320 --> 00:03:00,360 ‫but not do anything. 49 00:03:00,360 --> 00:03:04,950 ‫And so let's also then add the on click prop 50 00:03:04,950 --> 00:03:07,563 ‫which this button here accepts. 51 00:03:08,520 --> 00:03:13,520 ‫So what do we want to happen when we click on this button? 52 00:03:13,800 --> 00:03:17,643 ‫And actually needs to be outside here, of course. 53 00:03:19,560 --> 00:03:22,080 ‫But anyway, here when we click 54 00:03:22,080 --> 00:03:25,110 ‫we want to navigate to a new page 55 00:03:25,110 --> 00:03:29,610 ‫and that new page we actually didn't implement yet, 56 00:03:29,610 --> 00:03:32,370 ‫but we talked about it when we first talked 57 00:03:32,370 --> 00:03:36,510 ‫about all the pages that we need in this application. 58 00:03:36,510 --> 00:03:41,260 ‫And so here is where we have bookings/${bookingId} itself. 59 00:03:46,110 --> 00:03:51,110 ‫All right and while here, of course, we don't only need this 60 00:03:51,930 --> 00:03:53,490 ‫but this was just to tell you 61 00:03:53,490 --> 00:03:56,490 ‫that this is the page that we want to navigate to. 62 00:03:56,490 --> 00:04:00,633 ‫So let's now wrap this actually into the navigate function. 63 00:04:03,000 --> 00:04:07,563 ‫So navigate, which is going to come from React Router. 64 00:04:09,090 --> 00:04:12,000 ‫So this then needs to be a call back function 65 00:04:12,000 --> 00:04:16,653 ‫and then all we need to do is to grab that navigate, 66 00:04:18,540 --> 00:04:20,373 ‫let's say right here. 67 00:04:24,240 --> 00:04:29,223 ‫From use, navigate like this, and there we go. 68 00:04:30,480 --> 00:04:33,360 ‫So now as we click this the page will not exist, 69 00:04:33,360 --> 00:04:38,360 ‫but we can see here that we did exactly get what we wanted. 70 00:04:38,640 --> 00:04:41,013 ‫So bookings/23. 71 00:04:42,240 --> 00:04:45,090 ‫So this page you're looking for cannot be found. 72 00:04:45,090 --> 00:04:50,090 ‫And let's now come back to app.js and implement a new route. 73 00:04:50,910 --> 00:04:52,860 ‫So this one we don't have yet 74 00:04:52,860 --> 00:04:57,750 ‫and we don't even have the booking page here. 75 00:04:57,750 --> 00:04:59,973 ‫So let's also add that. 76 00:05:01,410 --> 00:05:04,173 ‫So booking.jsx. 77 00:05:06,870 --> 00:05:11,763 ‫All right, let's just write something here. 78 00:05:12,750 --> 00:05:15,360 ‫And then where were we? 79 00:05:15,360 --> 00:05:19,860 ‫Ah, okay, let's just duplicate this one 80 00:05:19,860 --> 00:05:22,410 ‫because it's similar. 81 00:05:22,410 --> 00:05:23,460 ‫But then of course 82 00:05:23,460 --> 00:05:26,733 ‫here we need to add the booking ID peram. 83 00:05:27,900 --> 00:05:30,870 ‫So this is old news at this point, 84 00:05:30,870 --> 00:05:34,020 ‫so we have done this many, many times before. 85 00:05:34,020 --> 00:05:38,910 ‫So now let's try to import this booking page 86 00:05:38,910 --> 00:05:40,710 ‫and there we go. 87 00:05:40,710 --> 00:05:44,100 ‫And so now we should see exactly this page 88 00:05:44,100 --> 00:05:48,000 ‫with booking detail that I mentioned earlier 89 00:05:48,000 --> 00:05:50,733 ‫or that we wrote here earlier. 90 00:05:51,720 --> 00:05:55,920 ‫Great and so now it's time to actually display the details 91 00:05:55,920 --> 00:05:58,980 ‫of the booking here on this page. 92 00:05:58,980 --> 00:06:03,690 ‫Now for that we actually already have the booking detail 93 00:06:03,690 --> 00:06:07,800 ‫component right in the bookings feature folder. 94 00:06:07,800 --> 00:06:09,990 ‫So let's open that one up. 95 00:06:09,990 --> 00:06:12,450 ‫And so basically all we want to do 96 00:06:12,450 --> 00:06:17,250 ‫is to now render exactly this component here on the page. 97 00:06:17,250 --> 00:06:20,940 ‫So here on the booking, we will not even have a heading 98 00:06:20,940 --> 00:06:25,500 ‫because that heading will actually need the booking ID 99 00:06:25,500 --> 00:06:27,153 ‫that it receives from the URL. 100 00:06:28,530 --> 00:06:32,130 ‫Now, remember the rule that we set for ourselves 101 00:06:32,130 --> 00:06:36,330 ‫in the beginning, which is that a page should not fetch data 102 00:06:36,330 --> 00:06:40,050 ‫and also not have any other side effects. 103 00:06:40,050 --> 00:06:42,060 ‫Now, this is not a hard rule 104 00:06:42,060 --> 00:06:44,850 ‫in React or in front end development, 105 00:06:44,850 --> 00:06:47,970 ‫but it's a rule that I've seen many people use, 106 00:06:47,970 --> 00:06:50,610 ‫and I also use it myself because 107 00:06:50,610 --> 00:06:53,640 ‫this makes the pages folder a lot cleaner 108 00:06:53,640 --> 00:06:56,730 ‫and then leaves much of the development work 109 00:06:56,730 --> 00:06:58,590 ‫in the features folder. 110 00:06:58,590 --> 00:07:02,190 ‫So again, then we can just implement a page here, 111 00:07:02,190 --> 00:07:05,580 ‫close the folder, and completely forget about it 112 00:07:05,580 --> 00:07:08,250 ‫because all the things that are related 113 00:07:08,250 --> 00:07:11,910 ‫to bookings will live here in this bookings folder. 114 00:07:11,910 --> 00:07:15,340 ‫And so all that we will do here is to just 115 00:07:16,860 --> 00:07:21,423 ‫basically grab the booking detail here. 116 00:07:23,610 --> 00:07:26,490 ‫So this looks a bit ridiculous indeed 117 00:07:26,490 --> 00:07:29,463 ‫but this is what we need in order to stay consistent. 118 00:07:30,540 --> 00:07:33,930 ‫So let's close this, close this folder, and now 119 00:07:33,930 --> 00:07:37,890 ‫we can turn our attention to this component right here 120 00:07:37,890 --> 00:07:41,220 ‫which gives us immediately some kind of error, 121 00:07:41,220 --> 00:07:43,083 ‫but that was to be expected. 122 00:07:44,100 --> 00:07:46,710 ‫So let's see what we have here, 123 00:07:46,710 --> 00:07:50,220 ‫cannot read properties of undefined. 124 00:07:50,220 --> 00:07:54,480 ‫Okay, so that's inside the booking data box, 125 00:07:54,480 --> 00:07:57,030 ‫but nevermind about that. 126 00:07:57,030 --> 00:07:59,673 ‫So let's just comment out this for now. 127 00:08:01,050 --> 00:08:04,080 ‫And there is our page. 128 00:08:04,080 --> 00:08:08,130 ‫Nice, now it already has these two buttons here 129 00:08:08,130 --> 00:08:11,313 ‫which simply go back and they should already work. 130 00:08:12,210 --> 00:08:14,160 ‫So indeed, then we are back. 131 00:08:14,160 --> 00:08:15,630 ‫But if we click here 132 00:08:15,630 --> 00:08:19,533 ‫then we are again back on bookings/23. 133 00:08:20,684 --> 00:08:24,210 ‫Now okay and so now let's actually get the data 134 00:08:24,210 --> 00:08:28,440 ‫for booking#23 from our API. 135 00:08:28,440 --> 00:08:30,150 ‫And so for this we will again 136 00:08:30,150 --> 00:08:32,850 ‫do all the things that we did earlier. 137 00:08:32,850 --> 00:08:35,670 ‫So we need, again, a function in our services, 138 00:08:35,670 --> 00:08:39,870 ‫then we need a custom hook from React Query 139 00:08:39,870 --> 00:08:42,630 ‫or that will include React Query, 140 00:08:42,630 --> 00:08:44,760 ‫and then we will use that custom hook 141 00:08:44,760 --> 00:08:47,883 ‫to get the data into the component right here. 142 00:08:48,930 --> 00:08:50,730 ‫Now, as for the services 143 00:08:50,730 --> 00:08:55,440 ‫I did already create the get booking function here 144 00:08:55,440 --> 00:09:00,000 ‫and it is similar to what we had with get bookings earlier. 145 00:09:00,000 --> 00:09:02,430 ‫So we select from the bookings, 146 00:09:02,430 --> 00:09:05,970 ‫everything about the booking, and then also everything 147 00:09:05,970 --> 00:09:09,453 ‫about the cabins and the guests for tables. 148 00:09:10,980 --> 00:09:14,460 ‫And we want this information exactly 149 00:09:14,460 --> 00:09:17,790 ‫for this one row where the ID is equal 150 00:09:17,790 --> 00:09:20,850 ‫to the ID that we pass into this function. 151 00:09:20,850 --> 00:09:22,680 ‫And this will then return an array 152 00:09:22,680 --> 00:09:27,570 ‫and with single, we grab the single object out of the array. 153 00:09:27,570 --> 00:09:29,313 ‫So then we just return that here. 154 00:09:30,240 --> 00:09:34,500 ‫And so then to get that into React Query, 155 00:09:34,500 --> 00:09:39,420 ‫let's again create ourselves our own custom hook. 156 00:09:39,420 --> 00:09:44,420 ‫So I will just again, copy and paste this one. 157 00:09:44,580 --> 00:09:49,383 ‫So use cabins and then paste that here. 158 00:09:51,870 --> 00:09:55,890 ‫It's gonna be called use booking. 159 00:09:55,890 --> 00:09:58,350 ‫So just one single one. 160 00:09:58,350 --> 00:10:03,075 ‫And then here, use booking, rename this 161 00:10:03,075 --> 00:10:08,075 ‫and this and this and this to booking. 162 00:10:09,030 --> 00:10:10,140 ‫And then here 163 00:10:10,140 --> 00:10:14,733 ‫we actually need to call get booking with some ID, 164 00:10:16,770 --> 00:10:21,770 ‫exactly like this, but now what is this ID going to be? 165 00:10:21,900 --> 00:10:25,110 ‫So where are we going to get it from? 166 00:10:25,110 --> 00:10:30,110 ‫Well, we can read it actually right from the URLs params. 167 00:10:31,230 --> 00:10:36,230 ‫So this 23 right here is a param and so let's read that. 168 00:10:37,050 --> 00:10:41,130 ‫Now again, we have two options of where we read it 169 00:10:41,130 --> 00:10:44,730 ‫so we can either read it here and then pass it 170 00:10:44,730 --> 00:10:48,720 ‫into use booking, or we can just do that right here. 171 00:10:48,720 --> 00:10:51,960 ‫And I believe that the best option is to do it here 172 00:10:51,960 --> 00:10:55,980 ‫because then use booking is a bit more self-contained 173 00:10:55,980 --> 00:10:58,893 ‫so it doesn't depend on anything outside. 174 00:10:59,910 --> 00:11:04,470 ‫So the param, we gave it the name booking ID 175 00:11:04,470 --> 00:11:06,090 ‫when we defined the route 176 00:11:06,090 --> 00:11:09,150 ‫and so that's exactly the name that we need here 177 00:11:09,150 --> 00:11:13,923 ‫and then use params from React Router. 178 00:11:15,390 --> 00:11:16,900 ‫Let's delete that one 179 00:11:19,680 --> 00:11:24,680 ‫and then let's use the booking ID right here. 180 00:11:27,270 --> 00:11:30,049 ‫So then we pass it into the function, 181 00:11:30,049 --> 00:11:31,680 ‫and then the function will grab 182 00:11:31,680 --> 00:11:35,190 ‫all the booking data about the one with this ID. 183 00:11:35,190 --> 00:11:38,160 ‫We'll store it into the use query cache 184 00:11:38,160 --> 00:11:40,623 ‫and then it can be rendered on the page. 185 00:11:41,580 --> 00:11:44,760 ‫Now here, let's just for the fun of it, 186 00:11:44,760 --> 00:11:49,760 ‫define something else, which is retry to false. 187 00:11:52,860 --> 00:11:54,480 ‫So remember that by default, 188 00:11:54,480 --> 00:11:58,350 ‫React Query will try to fetch data three times 189 00:11:58,350 --> 00:12:00,630 ‫in case that it fails in the beginning, 190 00:12:00,630 --> 00:12:04,020 ‫but sometimes that might not make so much sense. 191 00:12:04,020 --> 00:12:06,240 ‫And so here in this case, 192 00:12:06,240 --> 00:12:09,510 ‫basically not finding the data probably means 193 00:12:09,510 --> 00:12:11,880 ‫that it doesn't exist in the first place. 194 00:12:11,880 --> 00:12:15,363 ‫And so then there's no point in retrying. 195 00:12:16,710 --> 00:12:19,530 ‫So I think this looks good. 196 00:12:19,530 --> 00:12:22,120 ‫And so let's come back to our booking detail 197 00:12:25,530 --> 00:12:30,530 ‫and then let's grab booking and is loading from use booking. 198 00:12:36,720 --> 00:12:40,680 ‫And here in case if we are still loading, 199 00:12:40,680 --> 00:12:45,680 ‫then it's always let's just return our spinner. 200 00:12:48,840 --> 00:12:53,040 ‫Now okay, now here we are missing this status 201 00:12:53,040 --> 00:12:57,843 ‫and so let's grab that from the booking right here. 202 00:13:00,540 --> 00:13:04,053 ‫So status we need from the booking. 203 00:13:05,730 --> 00:13:07,173 ‫And there we go. 204 00:13:08,010 --> 00:13:11,880 ‫Nice, here we just want to replace the booking ID, 205 00:13:11,880 --> 00:13:14,850 ‫so let's also take that one out. 206 00:13:14,850 --> 00:13:16,323 ‫So booking ID. 207 00:13:21,960 --> 00:13:26,130 ‫And well, that doesn't look correct. 208 00:13:26,130 --> 00:13:28,140 ‫And I guess the reason is 209 00:13:28,140 --> 00:13:32,400 ‫that there actually is no booking ID, but just an ID. 210 00:13:32,400 --> 00:13:37,400 ‫So we can rename that and nice, there we go. 211 00:13:37,620 --> 00:13:40,560 ‫Let's go back this time with this button 212 00:13:40,560 --> 00:13:44,523 ‫and now if we open this one, we are at booking number nine. 213 00:13:45,600 --> 00:13:48,990 ‫Now this page isn't that useful on its own 214 00:13:48,990 --> 00:13:51,720 ‫and so now we need to render all the details 215 00:13:51,720 --> 00:13:54,420 ‫about this actual booking. 216 00:13:54,420 --> 00:13:58,320 ‫So that's where this component right here comes into play. 217 00:13:58,320 --> 00:14:01,830 ‫So yet another of these pre-built components 218 00:14:01,830 --> 00:14:06,180 ‫and this really is a purely presentational component. 219 00:14:06,180 --> 00:14:08,550 ‫So it receives this booking prop, 220 00:14:08,550 --> 00:14:10,860 ‫and then it simply de-structures it 221 00:14:10,860 --> 00:14:13,500 ‫into all these different variables 222 00:14:13,500 --> 00:14:18,030 ‫and then it displays all this stuff right here. 223 00:14:18,030 --> 00:14:20,790 ‫And we need this to be its own component 224 00:14:20,790 --> 00:14:22,800 ‫because as you will see soon 225 00:14:22,800 --> 00:14:26,493 ‫we actually need this again in some other place. 226 00:14:28,620 --> 00:14:32,700 ‫All right, so let's now reactivate this 227 00:14:32,700 --> 00:14:35,970 ‫and then here you see this beautiful design 228 00:14:35,970 --> 00:14:38,730 ‫of this booking detail page. 229 00:14:38,730 --> 00:14:43,260 ‫So here we have basically the most important details 230 00:14:43,260 --> 00:14:46,740 ‫like how many nights they stay and in which cabin, 231 00:14:46,740 --> 00:14:49,860 ‫then we have all the information about the guest, 232 00:14:49,860 --> 00:14:53,820 ‫whether they have breakfast and even the entire price 233 00:14:53,820 --> 00:14:56,733 ‫and when the booking was created. 234 00:14:57,600 --> 00:15:01,560 ‫Nice, so at this details page now in place 235 00:15:01,560 --> 00:15:05,640 ‫we are ready to add then some options to this booking. 236 00:15:05,640 --> 00:15:07,470 ‫Like for example, deleting it, 237 00:15:07,470 --> 00:15:10,380 ‫or checking it out or checking it in 238 00:15:10,380 --> 00:15:14,943 ‫and so that will be the task of the next few lectures.