‫Welcome back.
‫So the first feature that we're gonna implement
‫in this section is the ability to filter the cabin data
‫on the client side.
‫And we're gonna make this reusable too,
‫so that you can use this filter component
‫in all your own projects in the future.
‫But first, let's quickly revisit the app requirement list,
‫where we can see that we have already implemented
‫these three features.
‫Now, next up it says here
‫that the bookings table should be filterable
‫by the bookings status.
‫So we're gonna do that in the future, but first
‫let's not make the cabin table filterable as well.
‫So basically we want the ability to filter this table here
‫by whether there is a discount or not.
‫So we're gonna add some buttons here,
‫where the user can click
‫that they want all the cabins or only the cabins
‫with a discount or only the cabins without a discount.
‫So something like you have seen
‫in many web apps that you use every single day.
‫Now, okay.
‫Now we will do this in practice by storing the value
‫by which the table should be filtered in the URL again.
‫Because this way the URL is gonna be easily shareable
‫and bookmarkable.
‫So just like we have talked about earlier.
‫Now, this means that the component
‫where we select these values is
‫where we will update the URL state.
‫And since we can read that state from everywhere in the app,
‫the filter component doesn't have to be close
‫to the cabin table.
‫So it can really be anywhere we want in the component tree.
‫And so let's now come back here to the application
‫and place that component right here.
‫Now, right?
‫So again, if we were using the use they took
‫to store the value by which the table should be filtered,
‫then this table here would have to be a child component
‫of the component that owns that state.
‫But like this, since we are storing that state in the URL,
‫then that filter component can be
‫really anywhere that we want.
‫So let's come back here to our cabins page.
‫And so here we already have this paragraph
‫where it says filter and sort.
‫And so this is where we will now place
‫a new component called cabin table operations.
‫So operations because we're gonna have filter and sort here.
‫So let's come to our cabins and do just that.
‫So cabin table
‫operations.
‫And then here we are actually going to use
‫a styled component that I already created
‫called table operations.
‫So let's bring that in.
‫And then in here we will have the filter component.
‫And later on we will also have a sort by component.
‫So this filter component I actually also already created.
‫And so let's bring that in here.
‫And so with this one here, we are done for now,
‫but let's actually leave it open.
‫This we don't need the cabins.
‫Yeah, here now let's bring in
‫that new component we just created.
‫So cabin table operations.
‫And there we have then an error,
‫but that's just because this filter component here
‫doesn't return any component yet.
‫So this is just two styled components
‫that we will now use to implement the filter component.
‫And so let's actually do that now.
‫So here I'm gonna use this styled filter component
‫that we already have, which is probably just a div.
‫And in here, let's add our filter buttons.
‫So filter button is just a regular button,
‫entity styled filter is just a div.
‫So here we will want to have one button for all the cabins.
‫Then we want one to only display the ones
‫that have no discount,
‫and then all the ones that have a discount.
‫So let's say with discount.
‫Let's reload here.
‫And there we go.
‫Nice.
‫And so now as we click on each of these buttons here,
‫we need to update the URL state.
‫So let's add a callback function here.
‫Let's just call it handle click.
‫And then here we will receive the value
‫that we actually want to set into the URL.
‫So let's use that here.
‫So on click, we want to call
‫handle click.
‫And here with the value of all.
‫All right.
‫Then let's actually just grab this,
‫paste that here and here.
‫And then just fixing that.
‫And then here, let's say no discount
‫and with discount.
‫And so here I'm adding these dashes,
‫because these are the values
‫that will actually end up in the URL.
‫And so we shouldn't have any spaces there.
‫All right.
‫And so now to actually store that value
‫in the URL we use, again, the use search params hook.
‫So this hook that is coming from React Router,
‫and that we have already used a few times before.
‫So this hook is a little bit similar
‫to use state because it also gives us basically the state.
‫So the search params themselves, and then as a second value,
‫it gives us a way to update them.
‫So the way this works is that we first actually
‫need to set the state on search params itself, like this.
‫Then here the first value is the name of the state.
‫So of the field in the URL.
‫And so that's gonna be called discount.
‫And then second is the value itself.
‫And so that's the one that we are receiving in the function.
‫And so that can be either the discount set to all,
‫to no discount, or to with discount.
‫And so then we can take this new search params,
‫and pass it into search or into set search params.
‫Okay, so let's see.
‫And beautiful.
‫So our URL has been updated here
‫with this search string, which now says discount,
‫no discount, or all, or with discount.
‫Great. And so the next step is to get this data here
‫into our table and then sort the data accordingly.
‫So let's come to our cabin's table.
‫And there, in order to read the data,
‫we need to again use that hook.
‫So search params.
‫And here we don't need the second part,
‫so just use search params like this,
‫and then let's grab that here.
‫So let's say the filter value is equal
‫to search params dot get, and then discount.
‫And then let's start by just logging that to the console.
‫And so down here we already see with discount.
‫So that's what we have there right now.
‫So with discount, no discount, and all.
‫But now watch what happens
‫as we actually come to this page for the first time.
‫So now we get null.
‫Even though probably what we will want
‫in this situation is to show all the cabins.
‫So with no filter applied.
‫So basically this part right here.
‫And so what we can easily do is to set this here
‫to all by default.
‫So using here this short circuiting.
‫And so now it's very easy to just use this
‫and filter the data.
‫So let's create a filtered cabins variable here.
‫And then let's just have a couple of if statements here.
‫So if the filter value is all,
‫then the filtered cabins should simply be equal
‫to all the cabins.
‫So this one is easy.
‫And well, here just we forgot this string.
‫And then let's check for the other two.
‫And I'm sure there would be some more efficient way
‫of doing this, but this works just fine.
‫So cabins dot filter.
‫And so here we then only want to get the ones
‫where cabin dot discount is equal zero, right?
‫And then, well, not like this.
‫So just trying to duplicate these lines here.
‫So with discount is basically
‫whenever the discount is greater than zero.
‫All right.
‫And so finally to make this work,
‫all we have to do is to change the data right here.
‫So first we had all the cabins
‫but now we will simply display the filtered cabins.
‫So let's see.
‫So now we get all of them.
‫And then we have some problem.
‫So let's check.
‫So assignment to a constant variable.
‫And of course, here it needs to be filtered cabins
‫and here as well.
‫And so then that actually immediately works.
‫So now we only have the ones where there's no discount,
‫and then the ones that have a discount.
‫And here back to all of them.
‫Great. And notice that if we reload the page,
‫then we immediately only get these ones.
‫Because the URL thanks to this part here,
‫is now easily shareable and bookmarkable.
‫Great, so this is working just fine.
‫But what if we wanted to reuse this filter component here
‫on our next table?
‫So for example, for the booking table.
‫So right now we have these buttons here,
‫but they have all these hard-coded values
‫which really only work for the cabins table.
‫So what we want to do now instead is to make this reusable.
‫And so for that, we basically need to pass in
‫all the data here that might change as props.
‫So first of all, we have the name of the field.
‫So let's pass that in as a prop.
‫So let's call it filter field.
‫And then let's also accept the options,
‫which will basically be an array of these things.
‫So here of the value and then of the thing
‫that we want to write in the UI.
‫Now, right?
‫And so let's pass those values in,
‫right here in the cabin table operations,
‫which is where we include this filter component.
‫So the filter field should be
‫discount.
‫So this we no longer need.
‫And the table is actually also already done.
‫There's just apparently some problem,
‫which is that we do not need this table header here anymore.
‫So let's get rid of that.
‫And then also of this styled component.
‫And then with this, we finish this cabin table.
‫Now, okay?
‫And so here we can already replace this
‫with the filter field.
‫And then next up, let's pass in the array of options.
‫So again, both the value and the label then here.
‫So,
‫the first value is all, and the label is also all.
‫And of course, all of this needs to be an object.
‫So we have an array of objects where each of these objects
‫will be for one of the buttons.
‫So then here we have discount.
‫And finally one for with discount.
‫All right, now let's get rid of all of these.
‫And now we will place this button here,
‫of course inside a loop.
‫So we will loop over the options dot map,
‫and then in there we will have one filter button for each.
‫So here we will then use the option dot value,
‫and here
‫the option dot label.
‫So more like this and great.
‫So that looks and works exactly the same way as before.
‫Let's just also pass in the key prop here,
‫which is always necessary when we have a list.
‫So option dot value.
‫And now to finish, we also want to display
‫which of the option is currently being selected.
‫So right now it's the with discount.
‫And so then this here should appear already
‫with this blue background.
‫So for that we can pass in an active prop,
‫which I think I created that right here.
‫So on the filter button, we can pass in a prop.
‫And so if that props dot active is true,
‫then it will get this different background color.
‫So how do we know that this is true?
‫Well, first for that
‫we need to actually get the current value also from the URL.
‫So let's say current filter is equal
‫search params dot get.
‫And then the filter field that we get as a prop.
‫Or if that doesn't exist,
‫then we need to again use a default value.
‫Now here we will not simply write out all like this,
‫but instead use the first option.
‫So option at zero and then dot value.
‫And so here, all we need to do is to check
‫whether the current value is equal
‫that current filter value like this.
‫And here it's options.
‫And there we go.
‫Great.
‫So this is really nice and reusable now
‫because for the next table, all we will have to do
‫is to pass in a different field name here,
‫like the status field, and then all the different options.
‫And then that will automatically adapt here.
‫And with that being said, let's now move on
‫to the second operation, which will be to sort this table.