‫Next up, let's finally also bring
‫the bookings data into our application.
‫So, let's come back here to Supabase
‫and to the Table Editor.
‫So here, we now want to get our bookings
‫into the application,
‫but first of all, let's actually create a new booking
‫so that we have not just this one row here.
‫Now, for that, we actually also need another guest
‫because remember how a booking contains
‫both the ID of a cabin and of a guest.
‫So let's create one here quickly.
‫Let's say Steven Williams.
‫And here, all of this doesn't really matter.
‫Let's say Portugal.
‫And here again, this is not that important.
‫Let's just save so that then we can create another booking.
‫So the start date, let's say, is this one right here.
‫So 29, and then here finish,
‫which means two nights, four guests,
‫let's say 500 here,
‫and then unconfirmed.
‫True, and true.
‫And now again, we need to select the cabin and the guest.
‫So the cabin, let's say, is this one with the ID of 18.
‫So this is now the foreign key,
‫and then the guest ID is another foreign key.
‫And so that will be the ID number two
‫for the guest that we just created.
‫All right.
‫And so now, let's get back here into our application.
‫So first off, let's add a new service here
‫into this API bookings file that we already have.
‫So here we have Get Booking,
‫but that's only for one individual booking.
‫So let's now create Get Bookings for all of them.
‫So getBookings.
‫And this doesn't need any arguments, at least not for now.
‫And this time, let's actually write the query by hand
‫because we don't always have to copy paste.
‫So here we're going to await the Supabase,
‫and we want to select the bookings table.
‫And from there we want to select, for now, just everything.
‫Alright, and then here,
‫well maybe we can actually copy from the API cabins here.
‫So the rest here is exactly the same.
‫Let's just grab that here and here.
‫Bookings could not be loaded.
‫So we want to get this data right here
‫into a bookings table.
‫And that bookings table should be here on the bookings page.
‫So let's start with that one.
‫So here in pages we get to bookings,
‫and then in the bookings folder here,
‫we actually already have the table.
‫And so let's just include that here.
‫So BookingTable.
‫And here we don't need to wrap this into a row
‫because we don't need there to be anything else.
‫So BookingTable,
‫and here as well.
‫And then features,
‫just like this.
‫Now, right?
‫Then here of course, we need to now return a fragment.
‫And, there we go.
‫So this is our table, and so let's go check it out.
‫So here we have, for now, this empty bookings array
‫which is the reason why here it says, "No data to show."
‫Then here, we again are using the table component
‫that we created in the earlier section.
‫And then here, this time, we have the name of the cabin.
‫So the cabin that the booking belongs to.
‫We will have the guest, the dates,
‫the status of the booking,
‫and the amount that the user paid.
‫And then again here, one column for the operations.
‫And then we also have here the Table Body,
‫which will simply render the array of bookings.
‫And of course, the columns here are different
‫than what we had before,
‫but I just fine tuned them here
‫so that they fit the data
‫that we will want to display there.
‫Now, one thing I actually want to do here
‫which is that when there is no data,
‫then we want to not even show the table,
‫but this empty component that I have here.
‫So this one here, which takes in a resource name,
‫and then prints simply this string here.
‫Let's actually call this resourceName.
‫And then, well, now I closed the table apparently.
‫So here, let's just say if there is no bookings
‫because this can of course happen,
‫then return Empty
‫with the resource name
‫of bookings.
‫All right?
‫Now here, that needs to be bookings.length, of course.
‫And so, there we go.
‫We could have styled that a little bit better,
‫but that also works.
‫Now I just want to quickly add the same thing here
‫to the CabinTable.
‫So maybe here we can automatically import that. Yes.
‫And then, there we go.
‫Next up, we now need to basically connect this table here
‫with this getBookings function that we have, right?
‫And the way that we are going to do this,
‫so the way in which we are going to fetch these bookings
‫is, again, using React Query.
‫So let's grab this useCabin here, and just copy paste that.
‫So if you want it,
‫you can of course now, to practice React Query,
‫write this here on your own, but I will just keep this here,
‫and only change what I really need.
‫So here the data is gonna be called bookings,
‫the queryKey also.
‫So the name inside the React-Query cache.
‫And then here, getBookings.
‫Delete this. And here it's also bookings.
‫And, there we go.
‫And so now in here, we no longer need that,
‫but instead we will get bookings and isLoading state
‫from useBookings.
‫Okay? Then we also need to import that, apparently.
‫UseBookings, and here, this is a named export
‫since this is a React hook.
‫And then apparently, yeah, here we need to change this name
‫of course, as well.
‫UseBookings.
‫That's why the automatic import also didn't work earlier
‫on the table.
‫And now here, if this is loading,
‫we also need to return something else.
‫So if it is loading, then return the Spinner.
‫Now, that seems to be almost working already,
‫but here we will have some problems,
‫and the reason for that will be clear in a minute.
‫So for now, let's comment out this part here
‫of the table body
‫so we can actually take a look at our data
‫here in the React Query devtools.
‫And probably we won't have any data here yet, even,
‫or maybe we do.
‫Yeah, actually we have.
‫So I thought we didn't have
‫the role-level security policy enabled yet,
‫but apparently we do.
‫And so we do get here the two arrays
‫with the two bookings that we already have.
‫Now, the thing is that here we have
‫the cabin ID and the guest ID
‫exactly as we have them right here on Supabase, right?
‫However, here in our table,
‫we actually want to display some more information
‫about that guest.
‫So, of course, not the guest ID or the cabin ID,
‫but instead really the cabin name,
‫and here also the name of the guest,
‫and maybe even the email address.
‫So in other words, we don't just need these IDs here,
‫but really the data that belongs to this cabin ID
‫with this number and to the guest ID number two now, right?
‫So, we need to not only load the data about this booking,
‫but also about this cabin, and this guest.
‫So that sounds quite complicated,
‫but fortunately for us,
‫the Supabase API is really flexible
‫and can easily do all of that.
‫So right here where we select,
‫right now we are selecting everything, right?
‫But here we now need to actually add some more things.
‫So we need to add this comma here,
‫and all inside the string.
‫And then we need to use the name of the tables
‫that we are referencing.
‫So that's cabin and guests.
‫So here we have this cabin foreign table.
‫And so then here,
‫we want to select everything from that table.
‫And then, let's use another comma,
‫and then, let's select everything also from the guests.
‫Give it a save.
‫And as we try this again, we get some error again.
‫So here, search for a foreign key.
‫You mean cabins? Ah. Right.
‫So here, it's called cabins.
‫So let's force a reload here.
‫Then, let's see again. And, beautiful.
‫So now we no longer have just the IDs,
‫but really, also this data itself.
‫So now we get cabins,
‫and then exactly the data about that cabin,
‫and the same with the guest.
‫Great. However, to display the data
‫that we want here in the table,
‫we actually don't need all of this here.
‫So instead of grabbing everything,
‫we can really only take the fields that we actually need.
‫And so here, we can, instead of writing the star,
‫just write the fields, or the column name.
‫So for the cabins, we really only need the name.
‫And for the guests,
‫we only need the full name and the email address.
‫And so by doing this, we reduce the amount
‫of unnecessary data that needs to be downloaded.
‫So that might not be a huge problem in this case,
‫but if we were loading hundreds of rows
‫in some other application,
‫then it might be good to know
‫that here we can basically just limit the downloaded data
‫to what we actually need.
‫And here we can do the same thing.
‫So we can say we only need the ID, the created-at date.
‫We need the startDate, the endDate,
‫the number of nights, the number of guests,
‫the status, and the totalPrice.
‫And so you see that all of these here
‫are separated by these commas.
‫So that's why then later, we also have these commas here.
‫So here to then separate
‫between these fields and the cabins, and the guests.
‫So again, these two foreign tables right here.
‫So, let's see.
‫And indeed, this looks a lot shorter.
‫And here, indeed, we only get the name,
‫and then the user's, or the guest's, relevant data as well.
‫Beautiful. So, very important part right here
‫in working with Supabase.
‫Now, okay, now here in the booking row,
‫all we are doing is to then display the data.
‫So first off, here we get this booking prop,
‫which we are passing in right here.
‫So this booking row only takes this booking prop.
‫And so then here,
‫I'm actually immediately destructuring even that object.
‫So instead of creating this right here,
‫like const, startDate, and so on, and so forth,
‫I'm doing that, again, right here.
‫And then, I'm even destructuring already the guests.
‫And so then, basically, all these orange ones here
‫are the actual variable names that have been created.
‫Then this thing that I have here
‫is just to basically convert the status to a color.
‫So the unconfirmed status is blue,
‫the checked-in status is green,
‫and the checked-out status is silver
‫which will then become important
‫because for each of the bookings,
‫we have this tech component right here.
‫So I can just open that for you.
‫And so basically, these are dynamic
‫based on the received props.
‫So here we then use a CSS variable with the color
‫that has been passed in coming from the status to name.
‫So again, these blue, green, or silver colors
‫instead of hard-coding them.
‫Okay, so let's actually activate this.
‫And of course, all this pre-built code is necessary
‫so that we don't take a hundred hours
‫developing this project.
‫But anyway, now here is our beautiful table.
‫We cannot really see, yeah, but like this,
‫this is what the table is going to look like.
‫Let's maybe make one of these bookings here checked-in
‫so we see the different colors
‫that I was just talking about earlier.
‫So this is one of the three possible statuses.
‫And so, as we come back here,
‫React Query automatically refetches the data,
‫as we already know.
‫And then here, this tag becomes green.
‫And of course,
‫we still get all the other benefits of React Query
‫which is that if we move to another page,
‫and then come back,
‫all our data will still be here.
‫So with this, we quickly created
‫this really beautiful table right here.
‫And if all of that was a bit too quick for you,
‫then please feel free to check out all this code
‫that I had to pre-build here
‫including all of these functions here.
‫And yeah, again, maybe this tag.
‫And so, by then, it'll make sense
‫why the table looks this way.
‫Now, once you're done with that,
‫we then also want to implement, up here,
‫the filtering and sorting again.
‫But before we go do that,
‫let's actually first load some simple data
‫into our application
‫so that we have a bit more to work with
‫than just these two bookings.