1
00:00:01,230 --> 00:00:03,690
‫Next up, let's also perform

2
00:00:03,690 --> 00:00:07,680
‫the sorting operation on the server side.

3
00:00:07,680 --> 00:00:10,020
‫So basically, sorting the data

4
00:00:10,020 --> 00:00:12,783
‫right in the Supabase API.

5
00:00:14,670 --> 00:00:18,210
‫So, just like with the cabins,

6
00:00:18,210 --> 00:00:22,170
‫we already have here this sort component,

7
00:00:22,170 --> 00:00:24,843
‫and here we then have these different options.

8
00:00:26,670 --> 00:00:29,910
‫And so they get placed right here in the URL.

9
00:00:29,910 --> 00:00:33,660
‫And then all we have to do in our use bookings hook

10
00:00:33,660 --> 00:00:35,520
‫is to get that data,

11
00:00:35,520 --> 00:00:39,180
‫and pass it into the get bookings function,

12
00:00:39,180 --> 00:00:40,743
‫just like the filter data.

13
00:00:42,090 --> 00:00:45,003
‫So let's grab sortBy.

14
00:00:46,710 --> 00:00:50,537
‫Also from the URL, .get sortBy.

15
00:00:54,210 --> 00:00:57,603
‫And in this case, the default value will be,

16
00:00:59,820 --> 00:01:01,203
‫this one right here.

17
00:01:02,070 --> 00:01:06,813
‫So basically the first one in the list.

18
00:01:09,450 --> 00:01:14,450
‫And then let's actually also immediately split it,

19
00:01:15,180 --> 00:01:17,613
‫so that we can get the field,

20
00:01:19,260 --> 00:01:20,733
‫and the direction.

21
00:01:21,660 --> 00:01:24,753
‫So let's call this here, maybe even sortByRaw.

22
00:01:28,470 --> 00:01:30,507
‫And so here we want sortByRaw,

23
00:01:32,909 --> 00:01:34,409
‫split by the dash.

24
00:01:37,230 --> 00:01:42,230
‫And then the actual sortBy will be this object

25
00:01:42,540 --> 00:01:46,440
‫built out of field and direction.

26
00:01:46,440 --> 00:01:49,713
‫So this is what we then pass into getBookings.

27
00:01:51,540 --> 00:01:54,810
‫So sortBy, and we will also place it here

28
00:01:54,810 --> 00:01:56,670
‫in the queryKey.

29
00:01:56,670 --> 00:01:58,470
‫So basically again,

30
00:01:58,470 --> 00:02:02,280
‫in this kind of dependency array of useQuery.

31
00:02:02,280 --> 00:02:05,940
‫And so with this, whenever we change sortBy,

32
00:02:05,940 --> 00:02:08,220
‫then useQuery will do it's job

33
00:02:08,220 --> 00:02:10,230
‫and fetch the data again,

34
00:02:10,230 --> 00:02:12,390
‫and store it here in our cache,

35
00:02:12,390 --> 00:02:15,600
‫right with that value.

36
00:02:15,600 --> 00:02:17,880
‫So if I reload this now,

37
00:02:17,880 --> 00:02:21,060
‫then the sorting will not work yet,

38
00:02:21,060 --> 00:02:24,453
‫but we should already see it right here.

39
00:02:25,290 --> 00:02:27,060
‫And indeed, in our queryKey,

40
00:02:27,060 --> 00:02:30,780
‫we already have the field start date

41
00:02:30,780 --> 00:02:33,033
‫with the direction of descending.

42
00:02:34,620 --> 00:02:36,510
‫And now let's use

43
00:02:36,510 --> 00:02:38,610
‫that information here as well

44
00:02:38,610 --> 00:02:41,073
‫to actually do the sorting.

45
00:02:45,000 --> 00:02:47,297
‫So you can say if sortBy.

46
00:02:49,140 --> 00:02:51,243
‫So we already received that here.

47
00:02:52,200 --> 00:02:55,623
‫And now let's say .field.

48
00:02:56,700 --> 00:03:00,300
‫And while we can check for both of them,

49
00:03:00,300 --> 00:03:02,013
‫but that's not really necessary.

50
00:03:03,390 --> 00:03:04,223
‫And here actually,

51
00:03:04,223 --> 00:03:07,560
‫it shouldn't be different from null,

52
00:03:07,560 --> 00:03:10,110
‫because if we don't pass in any filter at all,

53
00:03:10,110 --> 00:03:12,240
‫it will just be undefined.

54
00:03:12,240 --> 00:03:16,290
‫So let's actually change this here to if filter.

55
00:03:16,290 --> 00:03:17,760
‫So just like this.

56
00:03:17,760 --> 00:03:20,913
‫And here let's also say just if sort.

57
00:03:23,730 --> 00:03:27,450
‫So if so, then we add on to the query.

58
00:03:27,450 --> 00:03:31,290
‫And in this case, the order method.

59
00:03:31,290 --> 00:03:34,140
‫So it's not sort, but really order.

60
00:03:34,140 --> 00:03:35,100
‫And so then here,

61
00:03:35,100 --> 00:03:37,773
‫we need to pass in the field name.

62
00:03:39,750 --> 00:03:44,373
‫And of course, it's in sortBy .field.

63
00:03:46,080 --> 00:03:49,443
‫And so let's check this actually.

64
00:03:51,180 --> 00:03:54,483
‫And it looks like some sorting is already happening.

65
00:03:56,160 --> 00:03:57,870
‫So you see here

66
00:03:57,870 --> 00:04:00,690
‫that here these days are actually sorted.

67
00:04:00,690 --> 00:04:02,463
‫So we start from in one month,

68
00:04:03,300 --> 00:04:05,400
‫which is basically in the future.

69
00:04:05,400 --> 00:04:06,750
‫And then here we have today

70
00:04:06,750 --> 00:04:10,230
‫and then three days ago, five, seven,

71
00:04:10,230 --> 00:04:13,200
‫26 and then two month ago.

72
00:04:13,200 --> 00:04:16,110
‫And so indeed that is working already.

73
00:04:16,110 --> 00:04:19,370
‫It is however apparently not sorting

74
00:04:19,370 --> 00:04:20,943
‫in the ascending way.

75
00:04:21,870 --> 00:04:24,600
‫So here if we change this to earlier first,

76
00:04:24,600 --> 00:04:29,250
‫then we still get exactly the same thing as before.

77
00:04:29,250 --> 00:04:31,770
‫And so let's change that here,

78
00:04:31,770 --> 00:04:34,200
‫because as the second parameter,

79
00:04:34,200 --> 00:04:38,040
‫we can pass in an object with options

80
00:04:38,040 --> 00:04:40,950
‫where we can specify the ascending option.

81
00:04:40,950 --> 00:04:44,820
‫And so this basically takes in a boolean saying

82
00:04:44,820 --> 00:04:48,390
‫basically whether the direction is ascending or not.

83
00:04:48,390 --> 00:04:52,940
‫And so here, we can check for sortBy .direction,

84
00:04:55,620 --> 00:04:59,073
‫and check if it is equal to ascending.

85
00:05:02,490 --> 00:05:04,083
‫And so now let's reload.

86
00:05:05,250 --> 00:05:07,860
‫And if we then come to recent first,

87
00:05:07,860 --> 00:05:11,850
‫then we first should see the future dates.

88
00:05:11,850 --> 00:05:13,170
‫And indeed.

89
00:05:13,170 --> 00:05:14,193
‫Beautiful.

90
00:05:15,210 --> 00:05:16,260
‫Now it works.

91
00:05:16,260 --> 00:05:19,170
‫So it's basically sorted in the opposite way.

92
00:05:19,170 --> 00:05:21,630
‫And now when I come here again,

93
00:05:21,630 --> 00:05:24,870
‫that will then immediately get this data here

94
00:05:24,870 --> 00:05:26,220
‫out of the cache.

95
00:05:26,220 --> 00:05:27,450
‫And this will work

96
00:05:27,450 --> 00:05:30,210
‫even for these other ones here.

97
00:05:30,210 --> 00:05:32,940
‫I mean it will not get these from cache now,

98
00:05:32,940 --> 00:05:35,523
‫but it will for this combination.

99
00:05:37,710 --> 00:05:39,030
‫So now here in the cache,

100
00:05:39,030 --> 00:05:40,410
‫we have the bookings

101
00:05:40,410 --> 00:05:43,350
‫with exactly this filter here

102
00:05:43,350 --> 00:05:45,630
‫and exactly this direction.

103
00:05:45,630 --> 00:05:49,503
‫And so, if at some point I come back to that.

104
00:05:51,330 --> 00:05:53,370
‫So if I now go back here,

105
00:05:53,370 --> 00:05:56,703
‫then the data is again received from cache.

106
00:05:57,810 --> 00:06:01,110
‫And so now with these three keys right here,

107
00:06:01,110 --> 00:06:02,400
‫and so in the cache,

108
00:06:02,400 --> 00:06:05,070
‫we could now have up to,

109
00:06:05,070 --> 00:06:07,170
‫well, 16 combinations.

110
00:06:07,170 --> 00:06:10,110
‫So we have four options here, four here,

111
00:06:10,110 --> 00:06:12,630
‫which is a total of 16 options.

112
00:06:12,630 --> 00:06:16,440
‫And so we could save these different options in the cache

113
00:06:16,440 --> 00:06:20,853
‫to basically get all the possible states of this table.

114
00:06:22,200 --> 00:06:23,310
‫Now okay.

115
00:06:23,310 --> 00:06:26,760
‫And I believe that's actually already it

116
00:06:26,760 --> 00:06:28,710
‫when it comes to sorting.

117
00:06:28,710 --> 00:06:30,690
‫And so now next up,

118
00:06:30,690 --> 00:06:34,770
‫we need to talk about the third important data operation,

119
00:06:34,770 --> 00:06:37,050
‫which is pagination.

120
00:06:37,050 --> 00:06:39,750
‫So many times, when we have data like this,

121
00:06:39,750 --> 00:06:42,900
‫we have exactly these three operations.

122
00:06:42,900 --> 00:06:46,260
‫So sort, filter, and pagination.

123
00:06:46,260 --> 00:06:47,790
‫And so therefore,

124
00:06:47,790 --> 00:06:50,433
‫next up will be pagination.