‫So, now let's implement the filtering ability
‫of our booking data.
‫So, in the cabins,
‫we had this cabin table operations.
‫And so then here, we imported the filter,
‫anti-sort by components.
‫And we made them really reusable.
‫And so, since we did that,
‫we now have a booking table operations as well.
‫And so then, there we also use filter and sort.
‫But then of course, we pass in different options.
‫So here, we can again filter by all of the bookings.
‫But then, what's different
‫is that here, we can filter by the booking status.
‫So "unconfirmed," "checked out," or "checked-in."
‫So that's exactly the values that we have here.
‫And then we will also have the "sort by,"
‫where we can sort by the start date
‫in ascending and descending order,
‫and by the total price.
‫And so let's come to our bookings page,
‫and include our data right here.
‫So, "booking table operations,"
‫and there we go.
‫Let's make this even a bit smaller.
‫And now as we click here,
‫it will already work right here in the URL.
‫So whenever we click on one of these,
‫that will immediately update the URL
‫and filter for the status that we are looking for.
‫So that part of the URL
‫with these reusable components here, is already working.
‫But now of course,
‫we then need to do the actual filtering of the data.
‫Now this time,
‫we will actually do it
‫in a fundamentally way
‫than what we did with the cabins.
‫So with the cabins,
‫we received all the data
‫from our supabase API in the table.
‫And then there is where we did
‫the filtering and the sorting.
‫And so basically, those operations happened already
‫on the client side,
‫but now with the bookings,
‫we actually want to do it on the server side.
‫So basically, on the API side of the data,
‫or in other words, if I want to filter,
‫for example, for "checked out,"
‫then I want the API to really
‫only send me all the bookings
‫that have the "checked out" status.
‫So I don't want to receive all of them,
‫and then just filter them here on the client side.
‫But instead, really only that filtered data
‫should get downloaded from supabase.
‫And so that means,
‫that we need to implement things very differently.
‫And in particular,
‫what we need to do,
‫is now here to change our supabase query.
‫And to show you how this works,
‫let me first hard code it here basically.
‫So let's say that we want to filter immediately here,
‫only for the status of unconfirmed.
‫So for that, I can use now on this query,
‫the EQ method, which stands for equal.
‫And then here I specify the field name.
‫So let's say "status,"
‫and then the value that we want status to be equal to.
‫And so let's say "unconfirmed."
‫And so now, if we reload here,
‫then indeed we only have bookings with unconfirmed.
‫Alright. But that's not even all.
‫So we can add even more methods here to the end.
‫So we can also say, "greater than or equal."
‫And then for example here,
‫the total price should be greater or equal to 2000.
‫And so if I come back here,
‫and let's maybe even make it 5,000
‫to see this a bit better,
‫then you see that we are only left
‫with these four bookings right here.
‫And of course it could also be left then or equal,
‫and then we get all the other ones.
‫Alright? So this is how we basically change
‫the supabase query.
‫But now of course, we want to get the data from here.
‫So right here from this URL,
‫and then filter for these values right here.
‫So not having it hard coded.
‫So, how do we do that?
‫How do we get that data from here,
‫and then use it basically right here in "getBookings?"
‫Well, this one right here is just a regular function,
‫and therefore, we cannot use the
‫"use searchparams" hook in this function.
‫Instead, we can use it right here in "use bookings."
‫And so this really is the perfect place
‫where we can now read the filtered value,
‫and then pass it into the "getBookings" function.
‫Now the alternative would be
‫to read that data right here inside booking table,
‫and then pass it into "use bookings."
‫But that would add an additional step,
‫because we would have to pass that filter here,
‫only to then pass it into "getBookings" here.
‫Also, the idea of having this
‫"use bookings" hook in the first place,
‫is that it just gives us the bookings as they are.
‫So without us having to pass anything into it.
‫And so this then makes everything more flexible,
‫because we could use this "use bookings" hook here
‫everywhere that we wanted in the application,
‫and it would always automatically read
‫the filter value from the URL.
‫And so let's do that.
‫So "searchparams."
‫And then since this is a custom hook,
‫we can use,
‫or we can call use "searchparams" right here.
‫Okay. So, here we want to filter.
‫And so let's first get again the filtered value.
‫So filter value is searchparams.get.
‫And then here, what we want is really the status.
‫Now the idea here is to pass in an object
‫of options into "getBookings."
‫And so that will contain the filter.
‫And let's also already add the "SortBy."
‫And then this filter here itself,
‫will also be an object which contains
‫both the field and the value.
‫Because by doing this,
‫we then make this method right here,
‫or this "getBookings" function actually, really flexible.
‫So here we do not want to hard code the status field,
‫but really allow to pass in any field
‫with any value to be filtered for.
‫All right. And so now we then need to build
‫that object here so we can pass it in.
‫So, first of all,
‫let's say if there is no filter value,
‫or if the filter value is "all,"
‫then we don't want to do anything.
‫So then there is no need for any filter.
‫And so in this case,
‫then we will make this filter a null.
‫But otherwise it will be that object
‫that we just talked about.
‫So which contains a field.
‫And here that's again gonna be, "status," and a "value."
‫And so that will be the "filter value."
‫Alright. And now let's pass that in here
‫into the "getBookings."
‫So then here we need to create a new function,
‫so that here we can pass in that object of options.
‫And so, let's add the filter object in here,
‫and then, here we receive that and use it.
‫And now here,
‫what we're gonna do is something very similar
‫to what we did already earlier,
‫which is to build a query from scratch in multiple parts.
‫So basically, we will get rid of this,
‫and only do this in the end.
‫Because here, we will now start
‫by saying, "let query = supabase."
‫And well, we actually already had that here.
‫And then all of this.
‫And then in the end,
‫we just do, "await the query."
‫Alright, let's just check.
‫And for now, everything works the same.
‫So what we had before,
‫is exactly the same thing as here.
‫But now what we can do,
‫is add some stuff to the query if we want.
‫So basically conditionally.
‫So we can say, if there is a filter.
‫So if that filter is different, then now,
‫then the query should become query.eq,
‫where the field is stored in filter.field,
‫and then the value itself is in filter.value.
‫So that object that we just created earlier,
‫And with this, this should actually already be working.
‫And indeed, notice how right now,
‫we are in fact only getting bookings
‫with the status set to "unconfirmed."
‫But now, watch what happens
‫when I click here on "checked-in."
‫So, nothing happened, right?
‫So the data didn't get re-fetched.
‫Now if I do reload here now with this URL,
‫then we will only get data with the status of "checked-in."
‫So that works.
‫But this part here where I click here
‫on these different buttons, they do not work yet.
‫So they do not fetch the right data yet.
‫So, why is that?
‫Well, it's because we told React Query
‫to always display the data here
‫that is called "bookings" right now.
‫So here we have all that bookings data,
‫and of course that doesn't get re-fetched
‫just because we click here or here.
‫So React Query doesn't know that this means
‫that the data should be re-fetched.
‫However, luckily for us,
‫we can tell it to do so.
‫And we do it in a very easy and very elegant way.
‫So, the way that this works,
‫is that we basically add any value
‫that we want the query to depend on,
‫here, onto this array.
‫So this Query que is not just this string right here,
‫but it can be any other things.
‫And so here, we now can add that filter object
‫that we created earlier.
‫And so now, basically whenever this filter changes,
‫then React Query will re-fetch the data.
‫And so we can think of this array here,
‫basically as the dependency array of use Query.
‫So this works exactly in the same way
‫as the dependency array of the use effect hook, right?
‫And so, if we reload this whole thing now,
‫so let's reload our page, come here,
‫then we "getBookings," and then "null,"
‫which is the current value of the filter.
‫But now if we go to "check-in," let's say,
‫then notice how actually a new entry
‫in the Query cache was created.
‫So one, which now contains this whole thing.
‫And so this data that is currently being displayed,
‫is actually stored in the cache,
‫with exactly this Query key right here.
‫So what this means is that when we click here,
‫then this new data also gets added to our cache.
‫And then when I move back,
‫we have the whole power of React Query in display.
‫Because then, we immediately get this data right here.
‫And then we also see here by this orange color,
‫that this right now is the current active data,
‫but all the other data still stays in the cache.
‫So here, we go back to bookings.
‫Now, and this one we hadn't loaded yet, but now we have.
‫And so at this point,
‫we have all these four different statuses
‫right here in our cache.
‫So we can then move between them
‫in this really nice and fluid way.
‫So this is one of the big, big strengths
‫of React Query that we didn't learn up until this point.
‫But now finally was the time
‫where we could make use
‫of this kind of dependency array right here.
‫And of course, we can add any other thing here that we want.
‫And we will do that actually in the next lecture
‫when we talk about sorting.
‫But before we go there,
‫I actually want to make dysfunction here
‫even more flexible,
‫because right now we are hard coding the equal method here.
‫But what if, for example,
‫we wanted this filter object
‫that we passed in here, to do a greater than.
‫So for example, let's say that here,
‫instead of the status equal to this filter value,
‫we wanted the total price
‫to be greater than 5,000.
‫So not equal 5,000,
‫but really greater than 5,000.
‫And so right now, that doesn't really work.
‫So we have no bookings
‫which have the price exactly equal to 5,000.
‫So, what we need to do,
‫is to also dynamically receive this right here.
‫And so we could do that
‫by also passing in the name of the method here.
‫So we could say here,
‫that the method should be greater or equal than.
‫And so here, instead of using this dot equal,
‫we could just do this.
‫So filter.method.
‫But if that is not passed in,
‫then we just specify the default of equal again.
‫And, so let's see.
‫Now indeed we only get bookings
‫where the price is greater than 5,000.
‫Alright, so with this,
‫we made this a bit better even,
‫a bit more flexible,
‫and we could go even further.
‫For example, allowing multiple filters.
‫So let's say we wanted to filter
‫for all the "checked-in" bookings,
‫where the price is greater than 5,000.
‫So having these two conditions at the same time.
‫Now that's a bit outside
‫of the scope of this video here.
‫But what you could do is to,
‫instead of passing in just one object,
‫is to pass an array of objects.
‫And then here you would loop over that object,
‫and for each of them you would add a new query
‫to the query variable, basically just like this.
‫Alright? So if in your own application,
‫you need to do that,
‫then that would be the way to go.
‫But anyway, let's now comment out.
‫This, and here, actually get this back.
‫And so then this is back to working.
‫Great. And so now, next up,
‫let's use these principles that we just learned about
‫to also implement the sorting feature.