‫All right, so with the booking table
‫now finished let's move on to building
‫the booking detail page.
‫And the way that we are going to access that page
‫is again with this context menu that we built earlier.
‫So here in each of these booking rows
‫we want to have that menu where we can click
‫and then one of the options
‫will lead us to the booking detail page
‫of the corresponding booking row.
‫So let's start with that.
‫And so let's come to booking row
‫and then here we need that menu that we built earlier.
‫Now remember how we already placed the entire booking table
‫inside the menus component
‫which is exactly that compound component
‫that we built in the previous section.
‫And so now inside that
‫we need to use the Menus.Menu component.
‫So that's going to be here inside each booking row
‫and in case you don't remember exactly how this worked
‫then always feel free to go back to the videos
‫where we implemented the cabin row.
‫So there we did this all in great detail.
‫But anyway, here we now need Menus.Menu,
‫and then each of these menus will contain
‫a toggle and a list of buttons,
‫so Menu.Toggle
‫and here it is, needs an ID.
‫And so the ID, let's just use the bookings ID
‫but it could really be any value that we wanted.
‫And then here after that, we need the Menus.List
‫and here it's also Menus.
‫So this needs to have the exact same ID as the toggle.
‫So that basically clicking on this button right here
‫will open up this list with the same ID.
‫And now in here we will have multiple Menus.Button.
‫So let's pass in an icon
‫and here we will use the Eye icon.
‫So showing that this is to see the details.
‫And so let's write exactly that.
‫So see details
‫and if we save this, then we immediately get something here.
‫So we get that button, and when we click
‫we have this only option that we have right now,
‫so see details.
‫Then when we click that it will actually close it,
‫but not do anything.
‫And so let's also then add the on click prop
‫which this button here accepts.
‫So what do we want to happen when we click on this button?
‫And actually needs to be outside here, of course.
‫But anyway, here when we click
‫we want to navigate to a new page
‫and that new page we actually didn't implement yet,
‫but we talked about it when we first talked
‫about all the pages that we need in this application.
‫And so here is where we have bookings/${bookingId} itself.
‫All right and while here, of course, we don't only need this
‫but this was just to tell you
‫that this is the page that we want to navigate to.
‫So let's now wrap this actually into the navigate function.
‫So navigate, which is going to come from React Router.
‫So this then needs to be a call back function
‫and then all we need to do is to grab that navigate,
‫let's say right here.
‫From use, navigate like this, and there we go.
‫So now as we click this the page will not exist,
‫but we can see here that we did exactly get what we wanted.
‫So bookings/23.
‫So this page you're looking for cannot be found.
‫And let's now come back to app.js and implement a new route.
‫So this one we don't have yet
‫and we don't even have the booking page here.
‫So let's also add that.
‫So booking.jsx.
‫All right, let's just write something here.
‫And then where were we?
‫Ah, okay, let's just duplicate this one
‫because it's similar.
‫But then of course
‫here we need to add the booking ID peram.
‫So this is old news at this point,
‫so we have done this many, many times before.
‫So now let's try to import this booking page
‫and there we go.
‫And so now we should see exactly this page
‫with booking detail that I mentioned earlier
‫or that we wrote here earlier.
‫Great and so now it's time to actually display the details
‫of the booking here on this page.
‫Now for that we actually already have the booking detail
‫component right in the bookings feature folder.
‫So let's open that one up.
‫And so basically all we want to do
‫is to now render exactly this component here on the page.
‫So here on the booking, we will not even have a heading
‫because that heading will actually need the booking ID
‫that it receives from the URL.
‫Now, remember the rule that we set for ourselves
‫in the beginning, which is that a page should not fetch data
‫and also not have any other side effects.
‫Now, this is not a hard rule
‫in React or in front end development,
‫but it's a rule that I've seen many people use,
‫and I also use it myself because
‫this makes the pages folder a lot cleaner
‫and then leaves much of the development work
‫in the features folder.
‫So again, then we can just implement a page here,
‫close the folder, and completely forget about it
‫because all the things that are related
‫to bookings will live here in this bookings folder.
‫And so all that we will do here is to just
‫basically grab the booking detail here.
‫So this looks a bit ridiculous indeed
‫but this is what we need in order to stay consistent.
‫So let's close this, close this folder, and now
‫we can turn our attention to this component right here
‫which gives us immediately some kind of error,
‫but that was to be expected.
‫So let's see what we have here,
‫cannot read properties of undefined.
‫Okay, so that's inside the booking data box,
‫but nevermind about that.
‫So let's just comment out this for now.
‫And there is our page.
‫Nice, now it already has these two buttons here
‫which simply go back and they should already work.
‫So indeed, then we are back.
‫But if we click here
‫then we are again back on bookings/23.
‫Now okay and so now let's actually get the data
‫for booking#23 from our API.
‫And so for this we will again
‫do all the things that we did earlier.
‫So we need, again, a function in our services,
‫then we need a custom hook from React Query
‫or that will include React Query,
‫and then we will use that custom hook
‫to get the data into the component right here.
‫Now, as for the services
‫I did already create the get booking function here
‫and it is similar to what we had with get bookings earlier.
‫So we select from the bookings,
‫everything about the booking, and then also everything
‫about the cabins and the guests for tables.
‫And we want this information exactly
‫for this one row where the ID is equal
‫to the ID that we pass into this function.
‫And this will then return an array
‫and with single, we grab the single object out of the array.
‫So then we just return that here.
‫And so then to get that into React Query,
‫let's again create ourselves our own custom hook.
‫So I will just again, copy and paste this one.
‫So use cabins and then paste that here.
‫It's gonna be called use booking.
‫So just one single one.
‫And then here, use booking, rename this
‫and this and this and this to booking.
‫And then here
‫we actually need to call get booking with some ID,
‫exactly like this, but now what is this ID going to be?
‫So where are we going to get it from?
‫Well, we can read it actually right from the URLs params.
‫So this 23 right here is a param and so let's read that.
‫Now again, we have two options of where we read it
‫so we can either read it here and then pass it
‫into use booking, or we can just do that right here.
‫And I believe that the best option is to do it here
‫because then use booking is a bit more self-contained
‫so it doesn't depend on anything outside.
‫So the param, we gave it the name booking ID
‫when we defined the route
‫and so that's exactly the name that we need here
‫and then use params from React Router.
‫Let's delete that one
‫and then let's use the booking ID right here.
‫So then we pass it into the function,
‫and then the function will grab
‫all the booking data about the one with this ID.
‫We'll store it into the use query cache
‫and then it can be rendered on the page.
‫Now here, let's just for the fun of it,
‫define something else, which is retry to false.
‫So remember that by default,
‫React Query will try to fetch data three times
‫in case that it fails in the beginning,
‫but sometimes that might not make so much sense.
‫And so here in this case,
‫basically not finding the data probably means
‫that it doesn't exist in the first place.
‫And so then there's no point in retrying.
‫So I think this looks good.
‫And so let's come back to our booking detail
‫and then let's grab booking and is loading from use booking.
‫And here in case if we are still loading,
‫then it's always let's just return our spinner.
‫Now okay, now here we are missing this status
‫and so let's grab that from the booking right here.
‫So status we need from the booking.
‫And there we go.
‫Nice, here we just want to replace the booking ID,
‫so let's also take that one out.
‫So booking ID.
‫And well, that doesn't look correct.
‫And I guess the reason is
‫that there actually is no booking ID, but just an ID.
‫So we can rename that and nice, there we go.
‫Let's go back this time with this button
‫and now if we open this one, we are at booking number nine.
‫Now this page isn't that useful on its own
‫and so now we need to render all the details
‫about this actual booking.
‫So that's where this component right here comes into play.
‫So yet another of these pre-built components
‫and this really is a purely presentational component.
‫So it receives this booking prop,
‫and then it simply de-structures it
‫into all these different variables
‫and then it displays all this stuff right here.
‫And we need this to be its own component
‫because as you will see soon
‫we actually need this again in some other place.
‫All right, so let's now reactivate this
‫and then here you see this beautiful design
‫of this booking detail page.
‫So here we have basically the most important details
‫like how many nights they stay and in which cabin,
‫then we have all the information about the guest,
‫whether they have breakfast and even the entire price
‫and when the booking was created.
‫Nice, so at this details page now in place
‫we are ready to add then some options to this booking.
‫Like for example, deleting it,
‫or checking it out or checking it in
‫and so that will be the task of the next few lectures.