1 00:00:01,290 --> 00:00:02,610 ‫So next up, 2 00:00:02,610 --> 00:00:07,383 ‫let's add the ability to also sort the cabin table. 3 00:00:09,240 --> 00:00:12,600 ‫So basically, besides this filter here 4 00:00:12,600 --> 00:00:16,410 ‫we want to have a dropdown menu where we can select 5 00:00:16,410 --> 00:00:21,183 ‫which of these fields here we want to sort the data by. 6 00:00:22,380 --> 00:00:25,480 ‫So let's create a sort by component 7 00:00:26,340 --> 00:00:27,990 ‫and I will do it again here 8 00:00:27,990 --> 00:00:31,923 ‫in the UI folder because we will want to reuse it later. 9 00:00:33,660 --> 00:00:35,253 ‫So for other tables. 10 00:00:39,163 --> 00:00:44,163 ‫Okay, so for now, let's just return sort here. 11 00:00:44,760 --> 00:00:48,210 ‫And this component, just like the filter component 12 00:00:48,210 --> 00:00:50,913 ‫will receive a list of options. 13 00:00:54,930 --> 00:00:57,000 ‫So here we have the filter 14 00:00:57,000 --> 00:00:59,620 ‫and actually we forgot to do something here 15 00:01:00,480 --> 00:01:02,640 ‫so let's just duplicate this line here 16 00:01:02,640 --> 00:01:05,400 ‫and also add the disabled prop. 17 00:01:05,400 --> 00:01:09,150 ‫So basically when we have this background here 18 00:01:09,150 --> 00:01:12,390 ‫which means that this is the currently applied filter 19 00:01:12,390 --> 00:01:16,233 ‫then we also want this button here to not be clickable. 20 00:01:18,210 --> 00:01:20,490 ‫All right, but anyway, 21 00:01:20,490 --> 00:01:25,083 ‫now let's actually also include the sort by component here. 22 00:01:29,640 --> 00:01:32,220 ‫And so as I was saying, 23 00:01:32,220 --> 00:01:37,220 ‫let's then specify immediately here the list of options. 24 00:01:38,400 --> 00:01:43,150 ‫And again, there will be a value and a label. 25 00:01:46,890 --> 00:01:50,650 ‫So let's start with sort by name 26 00:01:51,840 --> 00:01:53,530 ‫from A to Z 27 00:01:55,830 --> 00:01:59,580 ‫and then we will also have one to sort in the other way. 28 00:01:59,580 --> 00:02:02,460 ‫So basically we will have both the ascending 29 00:02:02,460 --> 00:02:04,470 ‫and the descending way. 30 00:02:04,470 --> 00:02:08,370 ‫And so let's then specify that right here in the value. 31 00:02:08,370 --> 00:02:13,350 ‫So name.asc for ascending 32 00:02:13,350 --> 00:02:16,833 ‫and then name-descending. 33 00:02:17,880 --> 00:02:20,100 ‫So basically right here in this value 34 00:02:20,100 --> 00:02:23,370 ‫we are encoding two types of information. 35 00:02:23,370 --> 00:02:26,940 ‫First, we have the field by which we want to sort 36 00:02:26,940 --> 00:02:29,610 ‫and then we also have the direction. 37 00:02:29,610 --> 00:02:32,310 ‫Now there would be other ways of doing this 38 00:02:32,310 --> 00:02:36,300 ‫so we could specify the direction here in a separate field 39 00:02:36,300 --> 00:02:40,473 ‫but I believe that it's best to keep it simple like this. 40 00:02:43,350 --> 00:02:47,433 ‫So next, let's sort by the price. 41 00:02:48,360 --> 00:02:51,660 ‫And here I will actually now use the name of the fields 42 00:02:51,660 --> 00:02:55,530 ‫as they are in the database, and so as we also receive them 43 00:02:55,530 --> 00:02:58,023 ‫here in our application from the API. 44 00:02:59,370 --> 00:03:02,580 ‫So I want to sort also by the price. 45 00:03:02,580 --> 00:03:04,230 ‫So when that's called, 46 00:03:04,230 --> 00:03:06,930 ‫on our API regular price 47 00:03:06,930 --> 00:03:09,000 ‫and then ascending, 48 00:03:09,000 --> 00:03:12,840 ‫and then here sort by price. 49 00:03:12,840 --> 00:03:16,900 ‫And then let's here say, low first 50 00:03:20,670 --> 00:03:21,843 ‫and then here, 51 00:03:24,540 --> 00:03:25,623 ‫high first. 52 00:03:28,770 --> 00:03:31,980 ‫Alright, duplicating this one here again. 53 00:03:31,980 --> 00:03:36,980 ‫So let's finally also add the ability to sort 54 00:03:37,170 --> 00:03:40,020 ‫by the max capacity 55 00:03:40,020 --> 00:03:43,320 ‫which is basically this column right here 56 00:03:43,320 --> 00:03:47,583 ‫which again in our database is called max capacity. 57 00:03:49,110 --> 00:03:53,110 ‫So sort by capacity low first 58 00:03:54,270 --> 00:03:55,103 ‫and then 59 00:03:56,940 --> 00:04:01,113 ‫the descending one and high first. 60 00:04:03,270 --> 00:04:06,990 ‫Now okay, and so now in our sort by component 61 00:04:06,990 --> 00:04:10,020 ‫we will want to have one select element 62 00:04:10,020 --> 00:04:14,643 ‫with one option for each of these elements of the array. 63 00:04:16,230 --> 00:04:17,880 ‫All right. 64 00:04:17,880 --> 00:04:21,300 ‫Now, since we will want a select element 65 00:04:21,300 --> 00:04:23,820 ‫many times in this application, 66 00:04:23,820 --> 00:04:27,063 ‫let's actually build ourselves a reusable one. 67 00:04:28,620 --> 00:04:31,503 ‫And I already have the styles for that here. 68 00:04:32,760 --> 00:04:35,700 ‫And so all we have to do is to write 69 00:04:35,700 --> 00:04:37,053 ‫a little bit of code here. 70 00:04:38,610 --> 00:04:41,310 ‫So this needs to receive, 71 00:04:41,310 --> 00:04:43,840 ‫of course, first the list of options 72 00:04:45,330 --> 00:04:48,360 ‫and the currently active value. 73 00:04:48,360 --> 00:04:50,490 ‫And the other things that we're gonna need 74 00:04:50,490 --> 00:04:52,770 ‫we will add them later. 75 00:04:52,770 --> 00:04:56,010 ‫So as the need arises. 76 00:04:56,010 --> 00:04:59,940 ‫So here we then use the styled select element 77 00:04:59,940 --> 00:05:04,050 ‫which is indeed just a select HTML element. 78 00:05:04,050 --> 00:05:07,980 ‫And so then we give it the currently active value 79 00:05:07,980 --> 00:05:11,910 ‫just like we do on all controlled components. 80 00:05:11,910 --> 00:05:15,600 ‫So this is in the end, just gonna be a controlled component 81 00:05:15,600 --> 00:05:18,003 ‫like we have always been using. 82 00:05:18,840 --> 00:05:20,640 ‫And then in here, 83 00:05:20,640 --> 00:05:24,840 ‫we just loop over the options that we receive. 84 00:05:24,840 --> 00:05:26,310 ‫And then for each of them, 85 00:05:26,310 --> 00:05:31,310 ‫indeed we create one option HTML element. 86 00:05:32,040 --> 00:05:34,770 ‫So here that will then contain, 87 00:05:34,770 --> 00:05:35,943 ‫well, first of all, 88 00:05:37,950 --> 00:05:40,470 ‫we need to actually have a callback 89 00:05:40,470 --> 00:05:45,470 ‫and then here we will have the option.label and 90 00:05:47,220 --> 00:05:52,220 ‫the value will be the current option.value. 91 00:05:52,830 --> 00:05:56,343 ‫And of course we then also need a key, 92 00:05:58,110 --> 00:06:01,443 ‫so option.value once again. 93 00:06:02,370 --> 00:06:06,033 ‫And now let's actually use that here. 94 00:06:08,220 --> 00:06:10,620 ‫So here all we want to return 95 00:06:10,620 --> 00:06:15,513 ‫is actually a select element with these options. 96 00:06:20,790 --> 00:06:22,890 ‫And the currently selected one, 97 00:06:22,890 --> 00:06:24,570 ‫we will pass it in later 98 00:06:24,570 --> 00:06:26,583 ‫because for now, we don't have it yet. 99 00:06:28,680 --> 00:06:33,153 ‫Okay, now here we need a bit more space to actually see. 100 00:06:34,080 --> 00:06:37,773 ‫And so here are all our options. 101 00:06:38,850 --> 00:06:42,030 ‫Now in terms of styling, there are actually different types 102 00:06:42,030 --> 00:06:44,823 ‫of select elements that I created. 103 00:06:46,740 --> 00:06:51,390 ‫So basically if we pass in the type prop set to white 104 00:06:51,390 --> 00:06:54,480 ‫then the styling here will be slightly different. 105 00:06:54,480 --> 00:06:56,883 ‫And so let's do that now. 106 00:06:57,720 --> 00:07:02,320 ‫So here we pass in type white 107 00:07:03,810 --> 00:07:05,673 ‫and then let's receive that here. 108 00:07:06,570 --> 00:07:10,800 ‫But this time I actually want to show you a nice trick. 109 00:07:10,800 --> 00:07:14,130 ‫So we can just like in any other destructuring, 110 00:07:14,130 --> 00:07:16,560 ‫also receive all the remaining props 111 00:07:16,560 --> 00:07:19,893 ‫using the rest operator like this. 112 00:07:22,020 --> 00:07:24,843 ‫So if you check this out, then in this case, 113 00:07:25,680 --> 00:07:27,910 ‫this will simply be 114 00:07:29,400 --> 00:07:32,130 ‫the type set to white 115 00:07:32,130 --> 00:07:33,930 ‫but if we passed in some other props 116 00:07:33,930 --> 00:07:36,960 ‫then all of them would now be contained here. 117 00:07:36,960 --> 00:07:40,740 ‫So that would then be probably an array. 118 00:07:40,740 --> 00:07:42,003 ‫Let's test this. 119 00:07:44,430 --> 00:07:48,553 ‫And so let's set test to Jonas and ah, yeah 120 00:07:50,130 --> 00:07:54,720 ‫then we get this object here with these multiple properties. 121 00:07:54,720 --> 00:07:57,270 ‫And so then what we can do here 122 00:07:57,270 --> 00:07:59,880 ‫is if we had this situation 123 00:07:59,880 --> 00:08:02,430 ‫where we received multiple properties 124 00:08:02,430 --> 00:08:07,170 ‫that all we want to do with them is to pass them right here 125 00:08:07,170 --> 00:08:10,140 ‫then we can use basically the same trick 126 00:08:10,140 --> 00:08:13,260 ‫that is also used in React Hook Form, 127 00:08:13,260 --> 00:08:15,570 ‫which is to enter JavaScript mode 128 00:08:15,570 --> 00:08:18,513 ‫and then spread those props here. 129 00:08:21,090 --> 00:08:24,360 ‫And so then the select component here 130 00:08:24,360 --> 00:08:26,643 ‫will get all of those props. 131 00:08:27,570 --> 00:08:31,320 ‫So we haven't ever used this trick before 132 00:08:31,320 --> 00:08:34,290 ‫and so I really want to show you what's happening, 133 00:08:34,290 --> 00:08:36,480 ‫now but here we have the sort by, 134 00:08:36,480 --> 00:08:41,480 ‫the selected and then also the style.select. 135 00:08:41,820 --> 00:08:45,090 ‫And so then indeed it is getting all the props 136 00:08:45,090 --> 00:08:48,240 ‫that I have spread now into that element. 137 00:08:48,240 --> 00:08:50,880 ‫So both test and type. 138 00:08:50,880 --> 00:08:53,310 ‫And so if you have multiple props 139 00:08:53,310 --> 00:08:55,170 ‫that you just want to receive here 140 00:08:55,170 --> 00:08:58,680 ‫and then pass them down into another element 141 00:08:58,680 --> 00:09:02,340 ‫or another component, then you can use this trick. 142 00:09:02,340 --> 00:09:04,530 ‫So you receive all the props here 143 00:09:04,530 --> 00:09:06,570 ‫and then you simply spread them 144 00:09:06,570 --> 00:09:11,130 ‫into that other component that should receive all of them. 145 00:09:11,130 --> 00:09:14,613 ‫so then you don't have to manually specify them here. 146 00:09:16,020 --> 00:09:17,700 ‫Or actually, I want this. 147 00:09:17,700 --> 00:09:21,573 ‫What I do not want is this test prop. 148 00:09:24,450 --> 00:09:28,740 ‫But anyway, now what we also need here of course 149 00:09:28,740 --> 00:09:32,880 ‫is a way of handling that an element has been clicked. 150 00:09:32,880 --> 00:09:37,880 ‫So here we will now create our function for that. 151 00:09:38,250 --> 00:09:42,453 ‫So let's call it handle change. 152 00:09:44,460 --> 00:09:46,920 ‫And then here, 153 00:09:46,920 --> 00:09:50,520 ‫the select component should of course 154 00:09:50,520 --> 00:09:51,753 ‫be able to receive that. 155 00:09:58,416 --> 00:09:59,999 ‫So let's come here. 156 00:10:04,113 --> 00:10:05,223 ‫And then on change 157 00:10:07,530 --> 00:10:10,263 ‫is on change. 158 00:10:12,030 --> 00:10:14,310 ‫Okay, and I think with this 159 00:10:14,310 --> 00:10:18,840 ‫we really made this component here 100% reusable 160 00:10:18,840 --> 00:10:21,720 ‫and can now use it in many different places 161 00:10:21,720 --> 00:10:26,190 ‫in the app and in many other apps as well. 162 00:10:26,190 --> 00:10:28,500 ‫So let's close this and then here, 163 00:10:28,500 --> 00:10:31,203 ‫we need to of course write this function. 164 00:10:32,970 --> 00:10:36,030 ‫So here we receive the event and then we need 165 00:10:36,030 --> 00:10:39,780 ‫to set that value that we received there 166 00:10:39,780 --> 00:10:42,603 ‫to the state again, so to the state in the URL. 167 00:10:44,730 --> 00:10:48,960 ‫So again, searchParams 168 00:10:48,960 --> 00:10:53,013 ‫and setSearchParams. 169 00:10:57,090 --> 00:10:59,520 ‫And then just like before 170 00:10:59,520 --> 00:11:04,410 ‫we then do searchParams.set, 171 00:11:04,410 --> 00:11:06,513 ‫and here let's call the field sortBy. 172 00:11:09,600 --> 00:11:12,420 ‫And so notice how here this field will always 173 00:11:12,420 --> 00:11:14,070 ‫be called sort by. 174 00:11:14,070 --> 00:11:16,650 ‫So we don't have the dynamic field name 175 00:11:16,650 --> 00:11:18,507 ‫like we had with the filter. 176 00:11:18,507 --> 00:11:23,347 ‫And then here the value is just gonna be e.target.value. 177 00:11:26,700 --> 00:11:28,980 ‫So just like always. 178 00:11:28,980 --> 00:11:32,213 ‫And then here it's time to call setSearchParams 179 00:11:33,360 --> 00:11:34,953 ‫and pass that in. 180 00:11:35,970 --> 00:11:38,910 ‫Now here we could also abstract all this logic 181 00:11:38,910 --> 00:11:42,270 ‫into a nice custom hook that might be called 182 00:11:42,270 --> 00:11:44,580 ‫something like use URL. 183 00:11:44,580 --> 00:11:46,230 ‫But here I will not do that 184 00:11:46,230 --> 00:11:50,460 ‫because that would be making it a bit too opinionated. 185 00:11:50,460 --> 00:11:53,790 ‫But of course you could totally do that. 186 00:11:53,790 --> 00:11:56,880 ‫So you could create a use URL hook, 187 00:11:56,880 --> 00:12:01,380 ‫and for example, that hook could then return a read URL 188 00:12:01,380 --> 00:12:04,110 ‫and a update URL function. 189 00:12:04,110 --> 00:12:07,170 ‫So then you could simplify this whole thing here 190 00:12:07,170 --> 00:12:08,133 ‫a little bit more. 191 00:12:09,420 --> 00:12:13,353 ‫But in any case, let's now check if this actually works. 192 00:12:14,820 --> 00:12:17,550 ‫And yeah, for that, all we have to do 193 00:12:17,550 --> 00:12:21,850 ‫is to click here and see if that is added to the URL then 194 00:12:23,010 --> 00:12:25,980 ‫and indeed, there it is. 195 00:12:25,980 --> 00:12:28,457 ‫So we already had the discount part here. 196 00:12:28,457 --> 00:12:32,490 ‫And so then React Router is smart enough to simply add that 197 00:12:32,490 --> 00:12:36,690 ‫to the search or to the query string by adding the end. 198 00:12:36,690 --> 00:12:39,450 ‫And then here we get or sort by field 199 00:12:39,450 --> 00:12:43,323 ‫with the value of regular price, great. 200 00:12:44,190 --> 00:12:47,640 ‫And of course if we start it with an empty string 201 00:12:47,640 --> 00:12:51,630 ‫then whatever value we now select a tier 202 00:12:51,630 --> 00:12:53,823 ‫would then get added like this. 203 00:12:55,500 --> 00:12:59,130 ‫Nice, and now just to finish this part here 204 00:12:59,130 --> 00:13:01,990 ‫let's also get the currently selected value 205 00:13:02,940 --> 00:13:06,930 ‫so that we can then now basically make that here, 206 00:13:06,930 --> 00:13:08,460 ‫the selected one. 207 00:13:08,460 --> 00:13:11,460 ‫So if we reload the page, for example with this URL, 208 00:13:11,460 --> 00:13:12,990 ‫then of course this value 209 00:13:12,990 --> 00:13:16,353 ‫in the select field should be selected by default. 210 00:13:18,360 --> 00:13:22,650 ‫So that is basically exactly what we did 211 00:13:22,650 --> 00:13:25,230 ‫with the filter before. 212 00:13:25,230 --> 00:13:28,263 ‫So searchParams.get, 213 00:13:31,050 --> 00:13:32,790 ‫and as a default value, 214 00:13:32,790 --> 00:13:35,340 ‫here we can just use an empty string 215 00:13:35,340 --> 00:13:40,340 ‫because that will then just select the first element. 216 00:13:40,800 --> 00:13:43,470 ‫And so finally, here we then pass in 217 00:13:43,470 --> 00:13:46,030 ‫the value prop that we specified earlier 218 00:13:47,880 --> 00:13:49,773 ‫and set it to sort by. 219 00:13:52,290 --> 00:13:53,883 ‫So let's just test that. 220 00:13:55,560 --> 00:14:00,560 ‫So here, let's select sort by price high first. 221 00:14:00,750 --> 00:14:03,270 ‫And now as we select this 222 00:14:03,270 --> 00:14:06,663 ‫then here it immediately goes back to that value. 223 00:14:08,490 --> 00:14:13,490 ‫Great, so this part is done, this part is also done. 224 00:14:13,680 --> 00:14:17,010 ‫And so all we have to do is now read 225 00:14:17,010 --> 00:14:20,733 ‫that value here in the table and then do the sorting. 226 00:14:22,020 --> 00:14:23,673 ‫So let's maybe first here, 227 00:14:24,750 --> 00:14:28,371 ‫say that this is for filter, 228 00:14:28,371 --> 00:14:30,730 ‫and then second, let's do 229 00:14:32,520 --> 00:14:33,513 ‫the sort. 230 00:14:37,170 --> 00:14:41,820 ‫So sortBy should be, once again, 231 00:14:41,820 --> 00:14:44,613 ‫searchParams.get, 232 00:14:46,906 --> 00:14:50,490 ‫sortBy or then by default 233 00:14:50,490 --> 00:14:52,770 ‫and here we cannot use the empty string 234 00:14:52,770 --> 00:14:54,570 ‫but instead the actual value. 235 00:14:54,570 --> 00:14:59,103 ‫So startDate.ascending, 236 00:14:59,940 --> 00:15:03,780 ‫and then remember how we actually encoded these two values 237 00:15:03,780 --> 00:15:05,190 ‫into the string. 238 00:15:05,190 --> 00:15:08,100 ‫So both the fields and the direction. 239 00:15:08,100 --> 00:15:10,953 ‫And so now we need to get both of them from there. 240 00:15:11,790 --> 00:15:16,790 ‫So what we're gonna do is sortBy.split 241 00:15:17,010 --> 00:15:20,100 ‫this string by the dash. 242 00:15:20,100 --> 00:15:23,100 ‫So this will then return an array to us. 243 00:15:23,100 --> 00:15:25,710 ‫And so let's then destructure that. 244 00:15:25,710 --> 00:15:29,700 ‫So the first value is gonna be called the field 245 00:15:29,700 --> 00:15:32,823 ‫and then the direction. 246 00:15:40,086 --> 00:15:45,086 ‫Okay, and then let's create sorted cabins 247 00:15:46,080 --> 00:15:49,140 ‫which will be based on the previous step. 248 00:15:49,140 --> 00:15:52,110 ‫So the filtered cabins. 249 00:15:52,110 --> 00:15:55,020 ‫So this is basically like a sequence where first 250 00:15:55,020 --> 00:15:58,290 ‫we take all the cabins, then we filter them 251 00:15:58,290 --> 00:16:02,370 ‫and then we use those filtered ones and sort them. 252 00:16:02,370 --> 00:16:05,913 ‫And so for that we can use JavaScript's sort method. 253 00:16:06,990 --> 00:16:10,420 ‫And so this will always take in these two values 254 00:16:11,610 --> 00:16:15,150 ‫and then we just need to subtract them from one another. 255 00:16:15,150 --> 00:16:16,770 ‫And we already did this before, 256 00:16:16,770 --> 00:16:18,720 ‫and I already explained it in depth 257 00:16:18,720 --> 00:16:21,630 ‫in the JavaScript review section. 258 00:16:21,630 --> 00:16:24,780 ‫So here we now need then the value of course, 259 00:16:24,780 --> 00:16:28,300 ‫for example a.price 260 00:16:29,190 --> 00:16:32,580 ‫minus b.price. 261 00:16:32,580 --> 00:16:34,530 ‫But here in this situation, 262 00:16:34,530 --> 00:16:37,680 ‫of course we cannot hard code the value here. 263 00:16:37,680 --> 00:16:41,400 ‫And instead, we need to pass in this field name 264 00:16:41,400 --> 00:16:43,620 ‫that we actually want to sort by. 265 00:16:43,620 --> 00:16:47,913 ‫And so we use these brackets. 266 00:16:49,920 --> 00:16:53,013 ‫And then here again. 267 00:16:55,860 --> 00:16:59,040 ‫All right and so this is the first step 268 00:16:59,040 --> 00:17:02,613 ‫and next we also need to take care of the direction. 269 00:17:03,570 --> 00:17:06,930 ‫So the way we're gonna do that is that 270 00:17:06,930 --> 00:17:09,060 ‫right now, this way of sorting, 271 00:17:09,060 --> 00:17:11,820 ‫basically sorts it in an as sending way. 272 00:17:11,820 --> 00:17:14,940 ‫But if we want to sort it in a descending way 273 00:17:14,940 --> 00:17:17,610 ‫we need to convert the positive number 274 00:17:17,610 --> 00:17:20,970 ‫that this here is gonna create to a negative number. 275 00:17:20,970 --> 00:17:22,860 ‫Or if this is a negative number 276 00:17:22,860 --> 00:17:25,773 ‫then we need to convert it to a positive number. 277 00:17:26,910 --> 00:17:31,440 ‫Again, that's just how the sort method here works. 278 00:17:31,440 --> 00:17:32,940 ‫And so one nice trick 279 00:17:32,940 --> 00:17:35,703 ‫that we can use here is to create a modifier. 280 00:17:36,810 --> 00:17:40,623 ‫So basically a value that we will then multiply. 281 00:17:43,982 --> 00:17:47,383 ‫And so here, if the direction is ascending 282 00:17:49,500 --> 00:17:54,030 ‫which is the default of the sort method 283 00:17:54,030 --> 00:17:57,120 ‫then the modifier will just become one. 284 00:17:57,120 --> 00:17:59,040 ‫And so then nothing will change 285 00:17:59,040 --> 00:18:01,593 ‫but otherwise it will be minus one. 286 00:18:04,440 --> 00:18:08,853 ‫And so then here we just multiply this with our modifier. 287 00:18:11,310 --> 00:18:16,020 ‫Okay, and now here we no longer use the filtered cabins 288 00:18:16,020 --> 00:18:19,503 ‫but actually these sorted cabins. 289 00:18:22,380 --> 00:18:25,053 ‫And here apparently we have some problem. 290 00:18:29,160 --> 00:18:31,563 ‫Alright, so let's see what's going on. 291 00:18:32,610 --> 00:18:35,850 ‫Maybe we can start by logging here 292 00:18:35,850 --> 00:18:39,693 ‫the field and direction to the console. 293 00:18:42,630 --> 00:18:45,783 ‫Now but here, everything looks correct to me. 294 00:18:49,110 --> 00:18:54,110 ‫Let's also check the modifier and the sorted cabins. 295 00:18:57,450 --> 00:19:00,453 ‫And now here we actually do get not a number, 296 00:19:02,070 --> 00:19:07,070 ‫so ah, of course we cannot multiply the entire array here 297 00:19:09,930 --> 00:19:12,750 ‫by the modifier but just the result 298 00:19:12,750 --> 00:19:15,243 ‫of this operation right here. 299 00:19:16,440 --> 00:19:19,110 ‫So let's wrap that into parenthesis 300 00:19:19,110 --> 00:19:23,520 ‫to give it priority and then multiply that. 301 00:19:23,520 --> 00:19:24,843 ‫And beautiful. 302 00:19:25,710 --> 00:19:27,780 ‫So now that seems to work. 303 00:19:27,780 --> 00:19:30,393 ‫So let's now sort by the price. 304 00:19:31,830 --> 00:19:34,890 ‫And that seems to be working. 305 00:19:34,890 --> 00:19:37,890 ‫So we start with the low, and if we click on high 306 00:19:37,890 --> 00:19:40,720 ‫then indeed it gets sorted the other way around 307 00:19:41,760 --> 00:19:46,760 ‫and the capacity is exactly the same and also the name. 308 00:19:48,900 --> 00:19:53,900 ‫Beautiful, so now we created two very nice 309 00:19:54,210 --> 00:19:58,770 ‫and flexible and reusable components here with this filter 310 00:19:58,770 --> 00:20:01,890 ‫and this sort that you will be able to reuse 311 00:20:01,890 --> 00:20:05,940 ‫in your own projects in the future if you'd like. 312 00:20:05,940 --> 00:20:09,180 ‫But before that, we will actually also reuse it 313 00:20:09,180 --> 00:20:13,110 ‫here in this project in the bookings table. 314 00:20:13,110 --> 00:20:15,060 ‫And so let's move on now 315 00:20:15,060 --> 00:20:17,640 ‫and first implement this bookings table. 316 00:20:17,640 --> 00:20:22,503 ‫And then we will also sort and filter that data as well.