1
00:00:01,140 --> 00:00:05,280
‫So, now let's implement the filtering ability

2
00:00:05,280 --> 00:00:07,083
‫of our booking data.

3
00:00:08,850 --> 00:00:10,590
‫So, in the cabins,

4
00:00:10,590 --> 00:00:15,590
‫we had this cabin table operations.

5
00:00:16,980 --> 00:00:20,070
‫And so then here, we imported the filter,

6
00:00:20,070 --> 00:00:22,260
‫anti-sort by components.

7
00:00:22,260 --> 00:00:24,570
‫And we made them really reusable.

8
00:00:24,570 --> 00:00:27,030
‫And so, since we did that,

9
00:00:27,030 --> 00:00:31,020
‫we now have a booking table operations as well.

10
00:00:31,020 --> 00:00:35,250
‫And so then, there we also use filter and sort.

11
00:00:35,250 --> 00:00:39,420
‫But then of course, we pass in different options.

12
00:00:39,420 --> 00:00:44,420
‫So here, we can again filter by all of the bookings.

13
00:00:45,000 --> 00:00:46,500
‫But then, what's different

14
00:00:46,500 --> 00:00:50,880
‫is that here, we can filter by the booking status.

15
00:00:50,880 --> 00:00:55,350
‫So "unconfirmed," "checked out," or "checked-in."

16
00:00:55,350 --> 00:00:58,860
‫So that's exactly the values that we have here.

17
00:00:58,860 --> 00:01:01,500
‫And then we will also have the "sort by,"

18
00:01:01,500 --> 00:01:04,200
‫where we can sort by the start date

19
00:01:04,200 --> 00:01:06,450
‫in ascending and descending order,

20
00:01:06,450 --> 00:01:08,193
‫and by the total price.

21
00:01:09,570 --> 00:01:12,963
‫And so let's come to our bookings page,

22
00:01:14,340 --> 00:01:16,233
‫and include our data right here.

23
00:01:18,840 --> 00:01:22,617
‫So, "booking table operations,"

24
00:01:25,050 --> 00:01:27,033
‫and there we go.

25
00:01:28,830 --> 00:01:30,843
‫Let's make this even a bit smaller.

26
00:01:31,830 --> 00:01:33,480
‫And now as we click here,

27
00:01:33,480 --> 00:01:36,123
‫it will already work right here in the URL.

28
00:01:37,440 --> 00:01:39,840
‫So whenever we click on one of these,

29
00:01:39,840 --> 00:01:42,630
‫that will immediately update the URL

30
00:01:42,630 --> 00:01:46,980
‫and filter for the status that we are looking for.

31
00:01:46,980 --> 00:01:48,810
‫So that part of the URL

32
00:01:48,810 --> 00:01:52,710
‫with these reusable components here, is already working.

33
00:01:52,710 --> 00:01:53,700
‫But now of course,

34
00:01:53,700 --> 00:01:57,723
‫we then need to do the actual filtering of the data.

35
00:01:58,560 --> 00:01:59,460
‫Now this time,

36
00:01:59,460 --> 00:02:00,860
‫we will actually do it

37
00:02:00,860 --> 00:02:02,970
‫in a fundamentally way

38
00:02:02,970 --> 00:02:06,060
‫than what we did with the cabins.

39
00:02:06,060 --> 00:02:07,410
‫So with the cabins,

40
00:02:07,410 --> 00:02:09,180
‫we received all the data

41
00:02:09,180 --> 00:02:12,630
‫from our supabase API in the table.

42
00:02:12,630 --> 00:02:14,610
‫And then there is where we did

43
00:02:14,610 --> 00:02:17,190
‫the filtering and the sorting.

44
00:02:17,190 --> 00:02:20,700
‫And so basically, those operations happened already

45
00:02:20,700 --> 00:02:22,560
‫on the client side,

46
00:02:22,560 --> 00:02:24,060
‫but now with the bookings,

47
00:02:24,060 --> 00:02:27,060
‫we actually want to do it on the server side.

48
00:02:27,060 --> 00:02:31,410
‫So basically, on the API side of the data,

49
00:02:31,410 --> 00:02:34,560
‫or in other words, if I want to filter,

50
00:02:34,560 --> 00:02:36,570
‫for example, for "checked out,"

51
00:02:36,570 --> 00:02:38,970
‫then I want the API to really

52
00:02:38,970 --> 00:02:41,040
‫only send me all the bookings

53
00:02:41,040 --> 00:02:43,470
‫that have the "checked out" status.

54
00:02:43,470 --> 00:02:45,630
‫So I don't want to receive all of them,

55
00:02:45,630 --> 00:02:48,990
‫and then just filter them here on the client side.

56
00:02:48,990 --> 00:02:52,320
‫But instead, really only that filtered data

57
00:02:52,320 --> 00:02:55,560
‫should get downloaded from supabase.

58
00:02:55,560 --> 00:02:57,000
‫And so that means,

59
00:02:57,000 --> 00:03:00,420
‫that we need to implement things very differently.

60
00:03:00,420 --> 00:03:01,710
‫And in particular,

61
00:03:01,710 --> 00:03:03,030
‫what we need to do,

62
00:03:03,030 --> 00:03:07,440
‫is now here to change our supabase query.

63
00:03:07,440 --> 00:03:09,420
‫And to show you how this works,

64
00:03:09,420 --> 00:03:12,603
‫let me first hard code it here basically.

65
00:03:13,620 --> 00:03:16,470
‫So let's say that we want to filter immediately here,

66
00:03:16,470 --> 00:03:19,620
‫only for the status of unconfirmed.

67
00:03:19,620 --> 00:03:22,590
‫So for that, I can use now on this query,

68
00:03:22,590 --> 00:03:26,430
‫the EQ method, which stands for equal.

69
00:03:26,430 --> 00:03:29,463
‫And then here I specify the field name.

70
00:03:30,510 --> 00:03:32,220
‫So let's say "status,"

71
00:03:32,220 --> 00:03:36,420
‫and then the value that we want status to be equal to.

72
00:03:36,420 --> 00:03:40,857
‫And so let's say "unconfirmed."

73
00:03:41,880 --> 00:03:45,420
‫And so now, if we reload here,

74
00:03:45,420 --> 00:03:49,053
‫then indeed we only have bookings with unconfirmed.

75
00:03:51,030 --> 00:03:53,670
‫Alright. But that's not even all.

76
00:03:53,670 --> 00:03:57,840
‫So we can add even more methods here to the end.

77
00:03:57,840 --> 00:04:02,370
‫So we can also say, "greater than or equal."

78
00:04:02,370 --> 00:04:04,110
‫And then for example here,

79
00:04:04,110 --> 00:04:09,110
‫the total price should be greater or equal to 2000.

80
00:04:09,840 --> 00:04:11,343
‫And so if I come back here,

81
00:04:14,460 --> 00:04:17,370
‫and let's maybe even make it 5,000

82
00:04:17,370 --> 00:04:19,020
‫to see this a bit better,

83
00:04:19,020 --> 00:04:21,300
‫then you see that we are only left

84
00:04:21,300 --> 00:04:24,960
‫with these four bookings right here.

85
00:04:24,960 --> 00:04:29,960
‫And of course it could also be left then or equal,

86
00:04:30,240 --> 00:04:32,643
‫and then we get all the other ones.

87
00:04:33,570 --> 00:04:36,867
‫Alright? So this is how we basically change

88
00:04:36,867 --> 00:04:39,000
‫the supabase query.

89
00:04:39,000 --> 00:04:42,780
‫But now of course, we want to get the data from here.

90
00:04:42,780 --> 00:04:45,510
‫So right here from this URL,

91
00:04:45,510 --> 00:04:49,140
‫and then filter for these values right here.

92
00:04:49,140 --> 00:04:51,393
‫So not having it hard coded.

93
00:04:52,650 --> 00:04:54,510
‫So, how do we do that?

94
00:04:54,510 --> 00:04:56,970
‫How do we get that data from here,

95
00:04:56,970 --> 00:05:01,560
‫and then use it basically right here in "getBookings?"

96
00:05:01,560 --> 00:05:05,220
‫Well, this one right here is just a regular function,

97
00:05:05,220 --> 00:05:07,147
‫and therefore, we cannot use the

98
00:05:07,147 --> 00:05:10,860
‫"use searchparams" hook in this function.

99
00:05:10,860 --> 00:05:15,860
‫Instead, we can use it right here in "use bookings."

100
00:05:16,410 --> 00:05:18,960
‫And so this really is the perfect place

101
00:05:18,960 --> 00:05:21,690
‫where we can now read the filtered value,

102
00:05:21,690 --> 00:05:25,680
‫and then pass it into the "getBookings" function.

103
00:05:25,680 --> 00:05:27,630
‫Now the alternative would be

104
00:05:27,630 --> 00:05:31,800
‫to read that data right here inside booking table,

105
00:05:31,800 --> 00:05:35,190
‫and then pass it into "use bookings."

106
00:05:35,190 --> 00:05:37,650
‫But that would add an additional step,

107
00:05:37,650 --> 00:05:40,500
‫because we would have to pass that filter here,

108
00:05:40,500 --> 00:05:44,640
‫only to then pass it into "getBookings" here.

109
00:05:44,640 --> 00:05:46,657
‫Also, the idea of having this

110
00:05:46,657 --> 00:05:49,350
‫"use bookings" hook in the first place,

111
00:05:49,350 --> 00:05:53,040
‫is that it just gives us the bookings as they are.

112
00:05:53,040 --> 00:05:56,370
‫So without us having to pass anything into it.

113
00:05:56,370 --> 00:05:59,700
‫And so this then makes everything more flexible,

114
00:05:59,700 --> 00:06:02,910
‫because we could use this "use bookings" hook here

115
00:06:02,910 --> 00:06:05,700
‫everywhere that we wanted in the application,

116
00:06:05,700 --> 00:06:08,190
‫and it would always automatically read

117
00:06:08,190 --> 00:06:10,653
‫the filter value from the URL.

118
00:06:12,038 --> 00:06:13,713
‫And so let's do that.

119
00:06:14,640 --> 00:06:15,627
‫So "searchparams."

120
00:06:19,470 --> 00:06:21,420
‫And then since this is a custom hook,

121
00:06:21,420 --> 00:06:22,860
‫we can use,

122
00:06:22,860 --> 00:06:27,333
‫or we can call use "searchparams" right here.

123
00:06:30,660 --> 00:06:34,350
‫Okay. So, here we want to filter.

124
00:06:34,350 --> 00:06:38,463
‫And so let's first get again the filtered value.

125
00:06:40,560 --> 00:06:45,560
‫So filter value is searchparams.get.

126
00:06:48,420 --> 00:06:51,183
‫And then here, what we want is really the status.

127
00:06:54,090 --> 00:06:58,980
‫Now the idea here is to pass in an object

128
00:06:58,980 --> 00:07:02,610
‫of options into "getBookings."

129
00:07:02,610 --> 00:07:05,283
‫And so that will contain the filter.

130
00:07:06,390 --> 00:07:09,753
‫And let's also already add the "SortBy."

131
00:07:11,190 --> 00:07:13,500
‫And then this filter here itself,

132
00:07:13,500 --> 00:07:15,960
‫will also be an object which contains

133
00:07:15,960 --> 00:07:18,660
‫both the field and the value.

134
00:07:18,660 --> 00:07:19,920
‫Because by doing this,

135
00:07:19,920 --> 00:07:22,500
‫we then make this method right here,

136
00:07:22,500 --> 00:07:27,060
‫or this "getBookings" function actually, really flexible.

137
00:07:27,060 --> 00:07:30,900
‫So here we do not want to hard code the status field,

138
00:07:30,900 --> 00:07:33,300
‫but really allow to pass in any field

139
00:07:33,300 --> 00:07:36,033
‫with any value to be filtered for.

140
00:07:37,980 --> 00:07:41,400
‫All right. And so now we then need to build

141
00:07:41,400 --> 00:07:44,643
‫that object here so we can pass it in.

142
00:07:46,830 --> 00:07:47,760
‫So, first of all,

143
00:07:47,760 --> 00:07:50,613
‫let's say if there is no filter value,

144
00:07:51,450 --> 00:07:54,450
‫or if the filter value is "all,"

145
00:07:54,450 --> 00:07:56,583
‫then we don't want to do anything.

146
00:07:59,160 --> 00:08:02,220
‫So then there is no need for any filter.

147
00:08:02,220 --> 00:08:03,780
‫And so in this case,

148
00:08:03,780 --> 00:08:06,630
‫then we will make this filter a null.

149
00:08:06,630 --> 00:08:09,180
‫But otherwise it will be that object

150
00:08:09,180 --> 00:08:10,800
‫that we just talked about.

151
00:08:10,800 --> 00:08:14,070
‫So which contains a field.

152
00:08:14,070 --> 00:08:19,070
‫And here that's again gonna be, "status," and a "value."

153
00:08:21,450 --> 00:08:26,450
‫And so that will be the "filter value."

154
00:08:28,590 --> 00:08:31,770
‫Alright. And now let's pass that in here

155
00:08:31,770 --> 00:08:34,050
‫into the "getBookings."

156
00:08:34,050 --> 00:08:37,080
‫So then here we need to create a new function,

157
00:08:37,080 --> 00:08:41,430
‫so that here we can pass in that object of options.

158
00:08:41,430 --> 00:08:46,430
‫And so, let's add the filter object in here,

159
00:08:47,610 --> 00:08:51,870
‫and then, here we receive that and use it.

160
00:08:51,870 --> 00:08:52,703
‫And now here,

161
00:08:52,703 --> 00:08:55,590
‫what we're gonna do is something very similar

162
00:08:55,590 --> 00:08:57,840
‫to what we did already earlier,

163
00:08:57,840 --> 00:09:02,583
‫which is to build a query from scratch in multiple parts.

164
00:09:03,480 --> 00:09:07,590
‫So basically, we will get rid of this,

165
00:09:07,590 --> 00:09:09,423
‫and only do this in the end.

166
00:09:11,460 --> 00:09:13,480
‫Because here, we will now start

167
00:09:15,180 --> 00:09:19,660
‫by saying, "let query = supabase."

168
00:09:23,820 --> 00:09:26,020
‫And well, we actually already had that here.

169
00:09:27,690 --> 00:09:29,220
‫And then all of this.

170
00:09:29,220 --> 00:09:30,630
‫And then in the end,

171
00:09:30,630 --> 00:09:34,287
‫we just do, "await the query."

172
00:09:35,190 --> 00:09:38,730
‫Alright, let's just check.

173
00:09:38,730 --> 00:09:41,280
‫And for now, everything works the same.

174
00:09:41,280 --> 00:09:42,720
‫So what we had before,

175
00:09:42,720 --> 00:09:44,880
‫is exactly the same thing as here.

176
00:09:44,880 --> 00:09:46,470
‫But now what we can do,

177
00:09:46,470 --> 00:09:49,860
‫is add some stuff to the query if we want.

178
00:09:49,860 --> 00:09:51,363
‫So basically conditionally.

179
00:09:53,670 --> 00:09:58,050
‫So we can say, if there is a filter.

180
00:09:58,050 --> 00:10:02,250
‫So if that filter is different, then now,

181
00:10:02,250 --> 00:10:06,253
‫then the query should become query.eq,

182
00:10:08,010 --> 00:10:13,010
‫where the field is stored in filter.field,

183
00:10:13,110 --> 00:10:18,060
‫and then the value itself is in filter.value.

184
00:10:18,060 --> 00:10:21,990
‫So that object that we just created earlier,

185
00:10:21,990 --> 00:10:26,133
‫And with this, this should actually already be working.

186
00:10:27,330 --> 00:10:29,850
‫And indeed, notice how right now,

187
00:10:29,850 --> 00:10:32,400
‫we are in fact only getting bookings

188
00:10:32,400 --> 00:10:36,030
‫with the status set to "unconfirmed."

189
00:10:36,030 --> 00:10:37,890
‫But now, watch what happens

190
00:10:37,890 --> 00:10:40,197
‫when I click here on "checked-in."

191
00:10:41,520 --> 00:10:44,610
‫So, nothing happened, right?

192
00:10:44,610 --> 00:10:48,480
‫So the data didn't get re-fetched.

193
00:10:48,480 --> 00:10:52,260
‫Now if I do reload here now with this URL,

194
00:10:52,260 --> 00:10:56,670
‫then we will only get data with the status of "checked-in."

195
00:10:56,670 --> 00:10:57,990
‫So that works.

196
00:10:57,990 --> 00:11:00,000
‫But this part here where I click here

197
00:11:00,000 --> 00:11:03,180
‫on these different buttons, they do not work yet.

198
00:11:03,180 --> 00:11:05,883
‫So they do not fetch the right data yet.

199
00:11:06,720 --> 00:11:09,240
‫So, why is that?

200
00:11:09,240 --> 00:11:11,867
‫Well, it's because we told React Query

201
00:11:11,867 --> 00:11:14,490
‫to always display the data here

202
00:11:14,490 --> 00:11:17,820
‫that is called "bookings" right now.

203
00:11:17,820 --> 00:11:20,340
‫So here we have all that bookings data,

204
00:11:20,340 --> 00:11:22,650
‫and of course that doesn't get re-fetched

205
00:11:22,650 --> 00:11:25,950
‫just because we click here or here.

206
00:11:25,950 --> 00:11:28,500
‫So React Query doesn't know that this means

207
00:11:28,500 --> 00:11:31,440
‫that the data should be re-fetched.

208
00:11:31,440 --> 00:11:33,360
‫However, luckily for us,

209
00:11:33,360 --> 00:11:35,520
‫we can tell it to do so.

210
00:11:35,520 --> 00:11:39,633
‫And we do it in a very easy and very elegant way.

211
00:11:40,590 --> 00:11:42,780
‫So, the way that this works,

212
00:11:42,780 --> 00:11:45,483
‫is that we basically add any value

213
00:11:45,483 --> 00:11:47,910
‫that we want the query to depend on,

214
00:11:47,910 --> 00:11:50,790
‫here, onto this array.

215
00:11:50,790 --> 00:11:55,290
‫So this Query que is not just this string right here,

216
00:11:55,290 --> 00:11:57,660
‫but it can be any other things.

217
00:11:57,660 --> 00:12:02,370
‫And so here, we now can add that filter object

218
00:12:02,370 --> 00:12:04,140
‫that we created earlier.

219
00:12:04,140 --> 00:12:07,500
‫And so now, basically whenever this filter changes,

220
00:12:07,500 --> 00:12:10,980
‫then React Query will re-fetch the data.

221
00:12:10,980 --> 00:12:13,890
‫And so we can think of this array here,

222
00:12:13,890 --> 00:12:18,720
‫basically as the dependency array of use Query.

223
00:12:18,720 --> 00:12:21,330
‫So this works exactly in the same way

224
00:12:21,330 --> 00:12:26,040
‫as the dependency array of the use effect hook, right?

225
00:12:26,040 --> 00:12:30,600
‫And so, if we reload this whole thing now,

226
00:12:30,600 --> 00:12:33,420
‫so let's reload our page, come here,

227
00:12:33,420 --> 00:12:36,450
‫then we "getBookings," and then "null,"

228
00:12:36,450 --> 00:12:39,420
‫which is the current value of the filter.

229
00:12:39,420 --> 00:12:43,680
‫But now if we go to "check-in," let's say,

230
00:12:43,680 --> 00:12:46,350
‫then notice how actually a new entry

231
00:12:46,350 --> 00:12:49,050
‫in the Query cache was created.

232
00:12:49,050 --> 00:12:52,920
‫So one, which now contains this whole thing.

233
00:12:52,920 --> 00:12:55,830
‫And so this data that is currently being displayed,

234
00:12:55,830 --> 00:12:57,900
‫is actually stored in the cache,

235
00:12:57,900 --> 00:13:00,903
‫with exactly this Query key right here.

236
00:13:02,070 --> 00:13:05,160
‫So what this means is that when we click here,

237
00:13:05,160 --> 00:13:09,150
‫then this new data also gets added to our cache.

238
00:13:09,150 --> 00:13:10,890
‫And then when I move back,

239
00:13:10,890 --> 00:13:15,210
‫we have the whole power of React Query in display.

240
00:13:15,210 --> 00:13:19,500
‫Because then, we immediately get this data right here.

241
00:13:19,500 --> 00:13:22,800
‫And then we also see here by this orange color,

242
00:13:22,800 --> 00:13:26,310
‫that this right now is the current active data,

243
00:13:26,310 --> 00:13:29,643
‫but all the other data still stays in the cache.

244
00:13:30,930 --> 00:13:32,940
‫So here, we go back to bookings.

245
00:13:32,940 --> 00:13:37,940
‫Now, and this one we hadn't loaded yet, but now we have.

246
00:13:38,160 --> 00:13:39,750
‫And so at this point,

247
00:13:39,750 --> 00:13:42,510
‫we have all these four different statuses

248
00:13:42,510 --> 00:13:44,400
‫right here in our cache.

249
00:13:44,400 --> 00:13:46,620
‫So we can then move between them

250
00:13:46,620 --> 00:13:50,010
‫in this really nice and fluid way.

251
00:13:50,010 --> 00:13:52,620
‫So this is one of the big, big strengths

252
00:13:52,620 --> 00:13:56,490
‫of React Query that we didn't learn up until this point.

253
00:13:56,490 --> 00:13:59,250
‫But now finally was the time

254
00:13:59,250 --> 00:14:01,080
‫where we could make use

255
00:14:01,080 --> 00:14:04,920
‫of this kind of dependency array right here.

256
00:14:04,920 --> 00:14:08,700
‫And of course, we can add any other thing here that we want.

257
00:14:08,700 --> 00:14:11,880
‫And we will do that actually in the next lecture

258
00:14:11,880 --> 00:14:14,310
‫when we talk about sorting.

259
00:14:14,310 --> 00:14:15,870
‫But before we go there,

260
00:14:15,870 --> 00:14:18,660
‫I actually want to make dysfunction here

261
00:14:18,660 --> 00:14:21,000
‫even more flexible,

262
00:14:21,000 --> 00:14:26,000
‫because right now we are hard coding the equal method here.

263
00:14:26,400 --> 00:14:28,140
‫But what if, for example,

264
00:14:28,140 --> 00:14:30,990
‫we wanted this filter object

265
00:14:30,990 --> 00:14:35,070
‫that we passed in here, to do a greater than.

266
00:14:35,070 --> 00:14:36,900
‫So for example, let's say that here,

267
00:14:36,900 --> 00:14:41,310
‫instead of the status equal to this filter value,

268
00:14:41,310 --> 00:14:45,510
‫we wanted the total price

269
00:14:46,830 --> 00:14:50,490
‫to be greater than 5,000.

270
00:14:50,490 --> 00:14:52,590
‫So not equal 5,000,

271
00:14:52,590 --> 00:14:55,740
‫but really greater than 5,000.

272
00:14:55,740 --> 00:14:58,920
‫And so right now, that doesn't really work.

273
00:14:58,920 --> 00:15:00,180
‫So we have no bookings

274
00:15:00,180 --> 00:15:04,233
‫which have the price exactly equal to 5,000.

275
00:15:05,850 --> 00:15:06,960
‫So, what we need to do,

276
00:15:06,960 --> 00:15:11,340
‫is to also dynamically receive this right here.

277
00:15:11,340 --> 00:15:13,680
‫And so we could do that

278
00:15:13,680 --> 00:15:17,793
‫by also passing in the name of the method here.

279
00:15:18,990 --> 00:15:20,880
‫So we could say here,

280
00:15:20,880 --> 00:15:24,513
‫that the method should be greater or equal than.

281
00:15:25,740 --> 00:15:29,760
‫And so here, instead of using this dot equal,

282
00:15:29,760 --> 00:15:31,563
‫we could just do this.

283
00:15:32,550 --> 00:15:35,790
‫So filter.method.

284
00:15:35,790 --> 00:15:38,310
‫But if that is not passed in,

285
00:15:38,310 --> 00:15:42,093
‫then we just specify the default of equal again.

286
00:15:43,080 --> 00:15:45,810
‫And, so let's see.

287
00:15:45,810 --> 00:15:48,900
‫Now indeed we only get bookings

288
00:15:48,900 --> 00:15:52,413
‫where the price is greater than 5,000.

289
00:15:53,610 --> 00:15:55,650
‫Alright, so with this,

290
00:15:55,650 --> 00:15:57,480
‫we made this a bit better even,

291
00:15:57,480 --> 00:15:59,520
‫a bit more flexible,

292
00:15:59,520 --> 00:16:01,230
‫and we could go even further.

293
00:16:01,230 --> 00:16:04,350
‫For example, allowing multiple filters.

294
00:16:04,350 --> 00:16:07,290
‫So let's say we wanted to filter

295
00:16:07,290 --> 00:16:09,870
‫for all the "checked-in" bookings,

296
00:16:09,870 --> 00:16:12,900
‫where the price is greater than 5,000.

297
00:16:12,900 --> 00:16:16,350
‫So having these two conditions at the same time.

298
00:16:16,350 --> 00:16:17,940
‫Now that's a bit outside

299
00:16:17,940 --> 00:16:20,340
‫of the scope of this video here.

300
00:16:20,340 --> 00:16:22,110
‫But what you could do is to,

301
00:16:22,110 --> 00:16:24,900
‫instead of passing in just one object,

302
00:16:24,900 --> 00:16:27,870
‫is to pass an array of objects.

303
00:16:27,870 --> 00:16:30,750
‫And then here you would loop over that object,

304
00:16:30,750 --> 00:16:34,320
‫and for each of them you would add a new query

305
00:16:34,320 --> 00:16:37,983
‫to the query variable, basically just like this.

306
00:16:39,090 --> 00:16:41,370
‫Alright? So if in your own application,

307
00:16:41,370 --> 00:16:42,600
‫you need to do that,

308
00:16:42,600 --> 00:16:44,823
‫then that would be the way to go.

309
00:16:46,110 --> 00:16:48,870
‫But anyway, let's now comment out.

310
00:16:48,870 --> 00:16:53,823
‫This, and here, actually get this back.

311
00:16:55,650 --> 00:16:58,083
‫And so then this is back to working.

312
00:16:59,040 --> 00:17:01,500
‫Great. And so now, next up,

313
00:17:01,500 --> 00:17:04,560
‫let's use these principles that we just learned about

314
00:17:04,560 --> 00:17:07,413
‫to also implement the sorting feature.