1 00:00:01,200 --> 00:00:03,060 ‫Welcome back. 2 00:00:03,060 --> 00:00:05,880 ‫So the first feature that we're gonna implement 3 00:00:05,880 --> 00:00:10,500 ‫in this section is the ability to filter the cabin data 4 00:00:10,500 --> 00:00:12,390 ‫on the client side. 5 00:00:12,390 --> 00:00:15,030 ‫And we're gonna make this reusable too, 6 00:00:15,030 --> 00:00:17,730 ‫so that you can use this filter component 7 00:00:17,730 --> 00:00:20,853 ‫in all your own projects in the future. 8 00:00:22,290 --> 00:00:26,580 ‫But first, let's quickly revisit the app requirement list, 9 00:00:26,580 --> 00:00:29,790 ‫where we can see that we have already implemented 10 00:00:29,790 --> 00:00:31,443 ‫these three features. 11 00:00:32,280 --> 00:00:34,073 ‫Now, next up it says here 12 00:00:34,073 --> 00:00:37,440 ‫that the bookings table should be filterable 13 00:00:37,440 --> 00:00:39,810 ‫by the bookings status. 14 00:00:39,810 --> 00:00:43,140 ‫So we're gonna do that in the future, but first 15 00:00:43,140 --> 00:00:46,833 ‫let's not make the cabin table filterable as well. 16 00:00:48,180 --> 00:00:52,710 ‫So basically we want the ability to filter this table here 17 00:00:52,710 --> 00:00:56,340 ‫by whether there is a discount or not. 18 00:00:56,340 --> 00:00:58,230 ‫So we're gonna add some buttons here, 19 00:00:58,230 --> 00:00:59,610 ‫where the user can click 20 00:00:59,610 --> 00:01:03,480 ‫that they want all the cabins or only the cabins 21 00:01:03,480 --> 00:01:08,220 ‫with a discount or only the cabins without a discount. 22 00:01:08,220 --> 00:01:10,080 ‫So something like you have seen 23 00:01:10,080 --> 00:01:13,503 ‫in many web apps that you use every single day. 24 00:01:15,150 --> 00:01:16,350 ‫Now, okay. 25 00:01:16,350 --> 00:01:20,100 ‫Now we will do this in practice by storing the value 26 00:01:20,100 --> 00:01:24,231 ‫by which the table should be filtered in the URL again. 27 00:01:24,231 --> 00:01:28,710 ‫Because this way the URL is gonna be easily shareable 28 00:01:28,710 --> 00:01:30,390 ‫and bookmarkable. 29 00:01:30,390 --> 00:01:33,510 ‫So just like we have talked about earlier. 30 00:01:33,510 --> 00:01:35,610 ‫Now, this means that the component 31 00:01:35,610 --> 00:01:38,310 ‫where we select these values is 32 00:01:38,310 --> 00:01:41,250 ‫where we will update the URL state. 33 00:01:41,250 --> 00:01:45,360 ‫And since we can read that state from everywhere in the app, 34 00:01:45,360 --> 00:01:48,090 ‫the filter component doesn't have to be close 35 00:01:48,090 --> 00:01:49,710 ‫to the cabin table. 36 00:01:49,710 --> 00:01:54,240 ‫So it can really be anywhere we want in the component tree. 37 00:01:54,240 --> 00:01:57,930 ‫And so let's now come back here to the application 38 00:01:57,930 --> 00:02:00,243 ‫and place that component right here. 39 00:02:01,603 --> 00:02:02,820 ‫Now, right? 40 00:02:02,820 --> 00:02:06,510 ‫So again, if we were using the use they took 41 00:02:06,510 --> 00:02:10,260 ‫to store the value by which the table should be filtered, 42 00:02:10,260 --> 00:02:14,040 ‫then this table here would have to be a child component 43 00:02:14,040 --> 00:02:17,340 ‫of the component that owns that state. 44 00:02:17,340 --> 00:02:21,240 ‫But like this, since we are storing that state in the URL, 45 00:02:21,240 --> 00:02:23,820 ‫then that filter component can be 46 00:02:23,820 --> 00:02:25,743 ‫really anywhere that we want. 47 00:02:26,730 --> 00:02:30,513 ‫So let's come back here to our cabins page. 48 00:02:32,670 --> 00:02:35,790 ‫And so here we already have this paragraph 49 00:02:35,790 --> 00:02:38,430 ‫where it says filter and sort. 50 00:02:38,430 --> 00:02:40,710 ‫And so this is where we will now place 51 00:02:40,710 --> 00:02:44,610 ‫a new component called cabin table operations. 52 00:02:44,610 --> 00:02:49,233 ‫So operations because we're gonna have filter and sort here. 53 00:02:50,160 --> 00:02:54,720 ‫So let's come to our cabins and do just that. 54 00:02:54,720 --> 00:02:56,170 ‫So cabin table 55 00:02:59,580 --> 00:03:00,903 ‫operations. 56 00:03:03,180 --> 00:03:05,790 ‫And then here we are actually going to use 57 00:03:05,790 --> 00:03:09,240 ‫a styled component that I already created 58 00:03:09,240 --> 00:03:11,823 ‫called table operations. 59 00:03:14,490 --> 00:03:16,113 ‫So let's bring that in. 60 00:03:29,460 --> 00:03:33,840 ‫And then in here we will have the filter component. 61 00:03:33,840 --> 00:03:37,503 ‫And later on we will also have a sort by component. 62 00:03:39,210 --> 00:03:43,653 ‫So this filter component I actually also already created. 63 00:03:45,300 --> 00:03:46,953 ‫And so let's bring that in here. 64 00:03:50,880 --> 00:03:53,870 ‫And so with this one here, we are done for now, 65 00:03:53,870 --> 00:03:55,880 ‫but let's actually leave it open. 66 00:03:55,880 --> 00:04:00,000 ‫This we don't need the cabins. 67 00:04:00,000 --> 00:04:02,070 ‫Yeah, here now let's bring in 68 00:04:02,070 --> 00:04:04,503 ‫that new component we just created. 69 00:04:05,550 --> 00:04:08,643 ‫So cabin table operations. 70 00:04:11,160 --> 00:04:13,320 ‫And there we have then an error, 71 00:04:13,320 --> 00:04:16,260 ‫but that's just because this filter component here 72 00:04:16,260 --> 00:04:18,900 ‫doesn't return any component yet. 73 00:04:18,900 --> 00:04:21,600 ‫So this is just two styled components 74 00:04:21,600 --> 00:04:25,290 ‫that we will now use to implement the filter component. 75 00:04:25,290 --> 00:04:28,173 ‫And so let's actually do that now. 76 00:04:31,718 --> 00:04:34,473 ‫So here I'm gonna use this styled filter component 77 00:04:34,473 --> 00:04:38,460 ‫that we already have, which is probably just a div. 78 00:04:38,460 --> 00:04:42,543 ‫And in here, let's add our filter buttons. 79 00:04:45,270 --> 00:04:48,000 ‫So filter button is just a regular button, 80 00:04:48,000 --> 00:04:51,513 ‫entity styled filter is just a div. 81 00:04:53,730 --> 00:04:58,395 ‫So here we will want to have one button for all the cabins. 82 00:04:58,395 --> 00:05:02,190 ‫Then we want one to only display the ones 83 00:05:02,190 --> 00:05:04,680 ‫that have no discount, 84 00:05:04,680 --> 00:05:09,000 ‫and then all the ones that have a discount. 85 00:05:09,000 --> 00:05:11,880 ‫So let's say with discount. 86 00:05:11,880 --> 00:05:13,470 ‫Let's reload here. 87 00:05:13,470 --> 00:05:14,703 ‫And there we go. 88 00:05:16,260 --> 00:05:17,310 ‫Nice. 89 00:05:17,310 --> 00:05:20,030 ‫And so now as we click on each of these buttons here, 90 00:05:20,030 --> 00:05:22,863 ‫we need to update the URL state. 91 00:05:24,210 --> 00:05:28,263 ‫So let's add a callback function here. 92 00:05:30,330 --> 00:05:32,733 ‫Let's just call it handle click. 93 00:05:34,230 --> 00:05:37,290 ‫And then here we will receive the value 94 00:05:37,290 --> 00:05:40,980 ‫that we actually want to set into the URL. 95 00:05:40,980 --> 00:05:42,793 ‫So let's use that here. 96 00:05:42,793 --> 00:05:45,610 ‫So on click, we want to call 97 00:05:47,790 --> 00:05:49,770 ‫handle click. 98 00:05:49,770 --> 00:05:52,773 ‫And here with the value of all. 99 00:05:54,021 --> 00:05:55,125 ‫All right. 100 00:05:55,125 --> 00:05:57,813 ‫Then let's actually just grab this, 101 00:05:58,740 --> 00:06:01,503 ‫paste that here and here. 102 00:06:04,050 --> 00:06:08,580 ‫And then just fixing that. 103 00:06:08,580 --> 00:06:13,480 ‫And then here, let's say no discount 104 00:06:14,790 --> 00:06:19,540 ‫and with discount. 105 00:06:19,540 --> 00:06:21,900 ‫And so here I'm adding these dashes, 106 00:06:21,900 --> 00:06:23,670 ‫because these are the values 107 00:06:23,670 --> 00:06:26,130 ‫that will actually end up in the URL. 108 00:06:26,130 --> 00:06:28,833 ‫And so we shouldn't have any spaces there. 109 00:06:30,510 --> 00:06:31,343 ‫All right. 110 00:06:31,343 --> 00:06:33,960 ‫And so now to actually store that value 111 00:06:33,960 --> 00:06:38,960 ‫in the URL we use, again, the use search params hook. 112 00:06:41,020 --> 00:06:44,730 ‫So this hook that is coming from React Router, 113 00:06:44,730 --> 00:06:47,943 ‫and that we have already used a few times before. 114 00:06:49,740 --> 00:06:52,050 ‫So this hook is a little bit similar 115 00:06:52,050 --> 00:06:56,820 ‫to use state because it also gives us basically the state. 116 00:06:56,820 --> 00:07:01,820 ‫So the search params themselves, and then as a second value, 117 00:07:02,340 --> 00:07:04,503 ‫it gives us a way to update them. 118 00:07:10,290 --> 00:07:14,040 ‫So the way this works is that we first actually 119 00:07:14,040 --> 00:07:18,680 ‫need to set the state on search params itself, like this. 120 00:07:20,425 --> 00:07:24,900 ‫Then here the first value is the name of the state. 121 00:07:24,900 --> 00:07:27,090 ‫So of the field in the URL. 122 00:07:27,090 --> 00:07:30,690 ‫And so that's gonna be called discount. 123 00:07:30,690 --> 00:07:33,400 ‫And then second is the value itself. 124 00:07:33,400 --> 00:07:36,930 ‫And so that's the one that we are receiving in the function. 125 00:07:36,930 --> 00:07:40,590 ‫And so that can be either the discount set to all, 126 00:07:40,590 --> 00:07:44,490 ‫to no discount, or to with discount. 127 00:07:44,490 --> 00:07:47,700 ‫And so then we can take this new search params, 128 00:07:47,700 --> 00:07:51,903 ‫and pass it into search or into set search params. 129 00:07:55,530 --> 00:07:57,513 ‫Okay, so let's see. 130 00:07:59,130 --> 00:08:01,200 ‫And beautiful. 131 00:08:01,200 --> 00:08:03,352 ‫So our URL has been updated here 132 00:08:03,352 --> 00:08:07,170 ‫with this search string, which now says discount, 133 00:08:07,170 --> 00:08:11,163 ‫no discount, or all, or with discount. 134 00:08:12,150 --> 00:08:16,290 ‫Great. And so the next step is to get this data here 135 00:08:16,290 --> 00:08:20,163 ‫into our table and then sort the data accordingly. 136 00:08:21,180 --> 00:08:25,893 ‫So let's come to our cabin's table. 137 00:08:27,330 --> 00:08:29,600 ‫And there, in order to read the data, 138 00:08:29,600 --> 00:08:33,303 ‫we need to again use that hook. 139 00:08:34,440 --> 00:08:37,190 ‫So search params. 140 00:08:37,190 --> 00:08:40,140 ‫And here we don't need the second part, 141 00:08:40,140 --> 00:08:43,923 ‫so just use search params like this, 142 00:08:44,850 --> 00:08:46,713 ‫and then let's grab that here. 143 00:08:48,330 --> 00:08:53,330 ‫So let's say the filter value is equal 144 00:08:53,970 --> 00:08:58,917 ‫to search params dot get, and then discount. 145 00:09:00,960 --> 00:09:04,473 ‫And then let's start by just logging that to the console. 146 00:09:07,170 --> 00:09:10,970 ‫And so down here we already see with discount. 147 00:09:10,970 --> 00:09:13,540 ‫So that's what we have there right now. 148 00:09:13,540 --> 00:09:17,820 ‫So with discount, no discount, and all. 149 00:09:17,820 --> 00:09:19,800 ‫But now watch what happens 150 00:09:19,800 --> 00:09:23,193 ‫as we actually come to this page for the first time. 151 00:09:25,770 --> 00:09:28,380 ‫So now we get null. 152 00:09:28,380 --> 00:09:30,840 ‫Even though probably what we will want 153 00:09:30,840 --> 00:09:34,350 ‫in this situation is to show all the cabins. 154 00:09:34,350 --> 00:09:36,644 ‫So with no filter applied. 155 00:09:36,644 --> 00:09:39,390 ‫So basically this part right here. 156 00:09:39,390 --> 00:09:43,470 ‫And so what we can easily do is to set this here 157 00:09:43,470 --> 00:09:45,603 ‫to all by default. 158 00:09:47,370 --> 00:09:50,193 ‫So using here this short circuiting. 159 00:09:52,230 --> 00:09:55,110 ‫And so now it's very easy to just use this 160 00:09:55,110 --> 00:09:56,479 ‫and filter the data. 161 00:09:56,479 --> 00:10:01,479 ‫So let's create a filtered cabins variable here. 162 00:10:03,670 --> 00:10:06,843 ‫And then let's just have a couple of if statements here. 163 00:10:07,980 --> 00:10:11,343 ‫So if the filter value is all, 164 00:10:12,420 --> 00:10:16,597 ‫then the filtered cabins should simply be equal 165 00:10:19,440 --> 00:10:21,723 ‫to all the cabins. 166 00:10:22,680 --> 00:10:25,530 ‫So this one is easy. 167 00:10:25,530 --> 00:10:29,073 ‫And well, here just we forgot this string. 168 00:10:31,740 --> 00:10:35,943 ‫And then let's check for the other two. 169 00:10:41,229 --> 00:10:45,330 ‫And I'm sure there would be some more efficient way 170 00:10:45,330 --> 00:10:48,800 ‫of doing this, but this works just fine. 171 00:10:48,800 --> 00:10:52,503 ‫So cabins dot filter. 172 00:10:55,680 --> 00:11:00,390 ‫And so here we then only want to get the ones 173 00:11:00,390 --> 00:11:05,390 ‫where cabin dot discount is equal zero, right? 174 00:11:07,617 --> 00:11:10,983 ‫And then, well, not like this. 175 00:11:12,040 --> 00:11:16,173 ‫So just trying to duplicate these lines here. 176 00:11:19,710 --> 00:11:22,530 ‫So with discount is basically 177 00:11:22,530 --> 00:11:26,283 ‫whenever the discount is greater than zero. 178 00:11:28,170 --> 00:11:29,190 ‫All right. 179 00:11:29,190 --> 00:11:31,950 ‫And so finally to make this work, 180 00:11:31,950 --> 00:11:35,373 ‫all we have to do is to change the data right here. 181 00:11:36,840 --> 00:11:39,060 ‫So first we had all the cabins 182 00:11:39,060 --> 00:11:43,263 ‫but now we will simply display the filtered cabins. 183 00:11:45,600 --> 00:11:46,563 ‫So let's see. 184 00:11:48,660 --> 00:11:50,433 ‫So now we get all of them. 185 00:11:51,630 --> 00:11:54,900 ‫And then we have some problem. 186 00:11:54,900 --> 00:11:56,280 ‫So let's check. 187 00:11:56,280 --> 00:11:58,893 ‫So assignment to a constant variable. 188 00:12:00,750 --> 00:12:05,750 ‫And of course, here it needs to be filtered cabins 189 00:12:06,660 --> 00:12:07,773 ‫and here as well. 190 00:12:12,130 --> 00:12:15,261 ‫And so then that actually immediately works. 191 00:12:15,261 --> 00:12:18,960 ‫So now we only have the ones where there's no discount, 192 00:12:18,960 --> 00:12:21,660 ‫and then the ones that have a discount. 193 00:12:21,660 --> 00:12:24,420 ‫And here back to all of them. 194 00:12:24,420 --> 00:12:27,840 ‫Great. And notice that if we reload the page, 195 00:12:27,840 --> 00:12:30,721 ‫then we immediately only get these ones. 196 00:12:30,721 --> 00:12:34,800 ‫Because the URL thanks to this part here, 197 00:12:34,800 --> 00:12:38,043 ‫is now easily shareable and bookmarkable. 198 00:12:39,690 --> 00:12:43,140 ‫Great, so this is working just fine. 199 00:12:43,140 --> 00:12:47,970 ‫But what if we wanted to reuse this filter component here 200 00:12:47,970 --> 00:12:49,620 ‫on our next table? 201 00:12:49,620 --> 00:12:52,830 ‫So for example, for the booking table. 202 00:12:52,830 --> 00:12:55,050 ‫So right now we have these buttons here, 203 00:12:55,050 --> 00:12:57,780 ‫but they have all these hard-coded values 204 00:12:57,780 --> 00:13:01,710 ‫which really only work for the cabins table. 205 00:13:01,710 --> 00:13:06,540 ‫So what we want to do now instead is to make this reusable. 206 00:13:06,540 --> 00:13:09,630 ‫And so for that, we basically need to pass in 207 00:13:09,630 --> 00:13:13,815 ‫all the data here that might change as props. 208 00:13:13,815 --> 00:13:18,815 ‫So first of all, we have the name of the field. 209 00:13:21,120 --> 00:13:24,930 ‫So let's pass that in as a prop. 210 00:13:24,930 --> 00:13:28,320 ‫So let's call it filter field. 211 00:13:28,320 --> 00:13:32,040 ‫And then let's also accept the options, 212 00:13:32,040 --> 00:13:36,280 ‫which will basically be an array of these things. 213 00:13:36,280 --> 00:13:39,510 ‫So here of the value and then of the thing 214 00:13:39,510 --> 00:13:41,403 ‫that we want to write in the UI. 215 00:13:43,083 --> 00:13:44,340 ‫Now, right? 216 00:13:44,340 --> 00:13:47,430 ‫And so let's pass those values in, 217 00:13:47,430 --> 00:13:49,979 ‫right here in the cabin table operations, 218 00:13:49,979 --> 00:13:54,979 ‫which is where we include this filter component. 219 00:13:56,955 --> 00:13:59,800 ‫So the filter field should be 220 00:14:03,930 --> 00:14:04,773 ‫discount. 221 00:14:07,520 --> 00:14:09,690 ‫So this we no longer need. 222 00:14:09,690 --> 00:14:13,302 ‫And the table is actually also already done. 223 00:14:13,302 --> 00:14:16,110 ‫There's just apparently some problem, 224 00:14:16,110 --> 00:14:20,990 ‫which is that we do not need this table header here anymore. 225 00:14:20,990 --> 00:14:23,130 ‫So let's get rid of that. 226 00:14:23,130 --> 00:14:26,100 ‫And then also of this styled component. 227 00:14:26,100 --> 00:14:29,073 ‫And then with this, we finish this cabin table. 228 00:14:31,134 --> 00:14:32,190 ‫Now, okay? 229 00:14:32,190 --> 00:14:34,410 ‫And so here we can already replace this 230 00:14:34,410 --> 00:14:37,710 ‫with the filter field. 231 00:14:37,710 --> 00:14:41,750 ‫And then next up, let's pass in the array of options. 232 00:14:41,750 --> 00:14:46,263 ‫So again, both the value and the label then here. 233 00:14:50,340 --> 00:14:51,173 ‫So, 234 00:14:53,730 --> 00:14:58,730 ‫the first value is all, and the label is also all. 235 00:15:03,720 --> 00:15:07,270 ‫And of course, all of this needs to be an object. 236 00:15:07,270 --> 00:15:11,160 ‫So we have an array of objects where each of these objects 237 00:15:11,160 --> 00:15:13,653 ‫will be for one of the buttons. 238 00:15:15,120 --> 00:15:19,323 ‫So then here we have discount. 239 00:15:22,560 --> 00:15:27,560 ‫And finally one for with discount. 240 00:15:31,410 --> 00:15:36,410 ‫All right, now let's get rid of all of these. 241 00:15:37,210 --> 00:15:40,320 ‫And now we will place this button here, 242 00:15:40,320 --> 00:15:42,180 ‫of course inside a loop. 243 00:15:42,180 --> 00:15:47,133 ‫So we will loop over the options dot map, 244 00:15:49,740 --> 00:15:54,720 ‫and then in there we will have one filter button for each. 245 00:15:54,720 --> 00:15:59,720 ‫So here we will then use the option dot value, 246 00:16:00,569 --> 00:16:01,750 ‫and here 247 00:16:04,620 --> 00:16:07,743 ‫the option dot label. 248 00:16:09,180 --> 00:16:12,453 ‫So more like this and great. 249 00:16:13,350 --> 00:16:18,350 ‫So that looks and works exactly the same way as before. 250 00:16:18,739 --> 00:16:21,120 ‫Let's just also pass in the key prop here, 251 00:16:21,120 --> 00:16:25,050 ‫which is always necessary when we have a list. 252 00:16:25,050 --> 00:16:29,400 ‫So option dot value. 253 00:16:29,400 --> 00:16:32,670 ‫And now to finish, we also want to display 254 00:16:32,670 --> 00:16:36,750 ‫which of the option is currently being selected. 255 00:16:36,750 --> 00:16:39,060 ‫So right now it's the with discount. 256 00:16:39,060 --> 00:16:41,781 ‫And so then this here should appear already 257 00:16:41,781 --> 00:16:44,223 ‫with this blue background. 258 00:16:47,280 --> 00:16:51,360 ‫So for that we can pass in an active prop, 259 00:16:51,360 --> 00:16:55,860 ‫which I think I created that right here. 260 00:16:55,860 --> 00:16:59,520 ‫So on the filter button, we can pass in a prop. 261 00:16:59,520 --> 00:17:03,400 ‫And so if that props dot active is true, 262 00:17:03,400 --> 00:17:06,783 ‫then it will get this different background color. 263 00:17:08,460 --> 00:17:12,120 ‫So how do we know that this is true? 264 00:17:12,120 --> 00:17:14,430 ‫Well, first for that 265 00:17:14,430 --> 00:17:18,543 ‫we need to actually get the current value also from the URL. 266 00:17:23,100 --> 00:17:26,350 ‫So let's say current filter is equal 267 00:17:27,360 --> 00:17:30,483 ‫search params dot get. 268 00:17:32,400 --> 00:17:37,263 ‫And then the filter field that we get as a prop. 269 00:17:38,730 --> 00:17:40,860 ‫Or if that doesn't exist, 270 00:17:40,860 --> 00:17:44,310 ‫then we need to again use a default value. 271 00:17:44,310 --> 00:17:48,510 ‫Now here we will not simply write out all like this, 272 00:17:48,510 --> 00:17:51,390 ‫but instead use the first option. 273 00:17:51,390 --> 00:17:56,390 ‫So option at zero and then dot value. 274 00:17:57,810 --> 00:18:01,159 ‫And so here, all we need to do is to check 275 00:18:01,159 --> 00:18:06,159 ‫whether the current value is equal 276 00:18:07,084 --> 00:18:10,533 ‫that current filter value like this. 277 00:18:13,290 --> 00:18:15,540 ‫And here it's options. 278 00:18:15,540 --> 00:18:16,803 ‫And there we go. 279 00:18:20,220 --> 00:18:21,053 ‫Great. 280 00:18:22,350 --> 00:18:26,130 ‫So this is really nice and reusable now 281 00:18:26,130 --> 00:18:29,460 ‫because for the next table, all we will have to do 282 00:18:29,460 --> 00:18:32,190 ‫is to pass in a different field name here, 283 00:18:32,190 --> 00:18:36,510 ‫like the status field, and then all the different options. 284 00:18:36,510 --> 00:18:39,600 ‫And then that will automatically adapt here. 285 00:18:39,600 --> 00:18:42,240 ‫And with that being said, let's now move on 286 00:18:42,240 --> 00:18:46,953 ‫to the second operation, which will be to sort this table.