‫Next up, let's also perform
‫the sorting operation on the server side.
‫So basically, sorting the data
‫right in the Supabase API.
‫So, just like with the cabins,
‫we already have here this sort component,
‫and here we then have these different options.
‫And so they get placed right here in the URL.
‫And then all we have to do in our use bookings hook
‫is to get that data,
‫and pass it into the get bookings function,
‫just like the filter data.
‫So let's grab sortBy.
‫Also from the URL, .get sortBy.
‫And in this case, the default value will be,
‫this one right here.
‫So basically the first one in the list.
‫And then let's actually also immediately split it,
‫so that we can get the field,
‫and the direction.
‫So let's call this here, maybe even sortByRaw.
‫And so here we want sortByRaw,
‫split by the dash.
‫And then the actual sortBy will be this object
‫built out of field and direction.
‫So this is what we then pass into getBookings.
‫So sortBy, and we will also place it here
‫in the queryKey.
‫So basically again,
‫in this kind of dependency array of useQuery.
‫And so with this, whenever we change sortBy,
‫then useQuery will do it's job
‫and fetch the data again,
‫and store it here in our cache,
‫right with that value.
‫So if I reload this now,
‫then the sorting will not work yet,
‫but we should already see it right here.
‫And indeed, in our queryKey,
‫we already have the field start date
‫with the direction of descending.
‫And now let's use
‫that information here as well
‫to actually do the sorting.
‫So you can say if sortBy.
‫So we already received that here.
‫And now let's say .field.
‫And while we can check for both of them,
‫but that's not really necessary.
‫And here actually,
‫it shouldn't be different from null,
‫because if we don't pass in any filter at all,
‫it will just be undefined.
‫So let's actually change this here to if filter.
‫So just like this.
‫And here let's also say just if sort.
‫So if so, then we add on to the query.
‫And in this case, the order method.
‫So it's not sort, but really order.
‫And so then here,
‫we need to pass in the field name.
‫And of course, it's in sortBy .field.
‫And so let's check this actually.
‫And it looks like some sorting is already happening.
‫So you see here
‫that here these days are actually sorted.
‫So we start from in one month,
‫which is basically in the future.
‫And then here we have today
‫and then three days ago, five, seven,
‫26 and then two month ago.
‫And so indeed that is working already.
‫It is however apparently not sorting
‫in the ascending way.
‫So here if we change this to earlier first,
‫then we still get exactly the same thing as before.
‫And so let's change that here,
‫because as the second parameter,
‫we can pass in an object with options
‫where we can specify the ascending option.
‫And so this basically takes in a boolean saying
‫basically whether the direction is ascending or not.
‫And so here, we can check for sortBy .direction,
‫and check if it is equal to ascending.
‫And so now let's reload.
‫And if we then come to recent first,
‫then we first should see the future dates.
‫And indeed.
‫Beautiful.
‫Now it works.
‫So it's basically sorted in the opposite way.
‫And now when I come here again,
‫that will then immediately get this data here
‫out of the cache.
‫And this will work
‫even for these other ones here.
‫I mean it will not get these from cache now,
‫but it will for this combination.
‫So now here in the cache,
‫we have the bookings
‫with exactly this filter here
‫and exactly this direction.
‫And so, if at some point I come back to that.
‫So if I now go back here,
‫then the data is again received from cache.
‫And so now with these three keys right here,
‫and so in the cache,
‫we could now have up to,
‫well, 16 combinations.
‫So we have four options here, four here,
‫which is a total of 16 options.
‫And so we could save these different options in the cache
‫to basically get all the possible states of this table.
‫Now okay.
‫And I believe that's actually already it
‫when it comes to sorting.
‫And so now next up,
‫we need to talk about the third important data operation,
‫which is pagination.
‫So many times, when we have data like this,
‫we have exactly these three operations.
‫So sort, filter, and pagination.
‫And so therefore,
‫next up will be pagination.