1
00:00:01,140 --> 00:00:04,470
‫Now let's use the reusable page component

2
00:00:04,470 --> 00:00:09,303
‫that we just built in order to paginate our bookings table.

3
00:00:11,040 --> 00:00:13,368
‫Now the first thing that we actually need

4
00:00:13,368 --> 00:00:18,120
‫is the number of results so that we can then pass it here

5
00:00:18,120 --> 00:00:20,460
‫into discounts prop.

6
00:00:20,460 --> 00:00:24,530
‫Now, we could just compute here by calculating the length

7
00:00:24,530 --> 00:00:28,373
‫of this array, but there is also another way

8
00:00:28,373 --> 00:00:32,490
‫so let me show you that other way as well,

9
00:00:32,490 --> 00:00:35,913
‫so that you can learn about this feature of Supabase.

10
00:00:36,750 --> 00:00:40,410
‫So right here in this select function,

11
00:00:40,410 --> 00:00:43,622
‫we can pass in a second argument

12
00:00:43,622 --> 00:00:48,180
‫which is this object with the count property.

13
00:00:48,180 --> 00:00:53,180
‫So, here we can define count as exact.

14
00:00:53,460 --> 00:00:57,450
‫And so this can actually be helpful whenever you don't want

15
00:00:57,450 --> 00:00:59,340
‫to query the entire data

16
00:00:59,340 --> 00:01:03,060
‫but really only need the number of results.

17
00:01:03,060 --> 00:01:06,183
‫And so then you can just use this.

18
00:01:07,050 --> 00:01:11,970
‫Now what this will do is that besides the data enter error,

19
00:01:11,970 --> 00:01:16,383
‫this query here will then also return a variable.

20
00:01:17,370 --> 00:01:20,217
‫So a property on the object called count.

21
00:01:20,217 --> 00:01:23,520
‫And so then here we can destructure that

22
00:01:23,520 --> 00:01:26,073
‫and then also return it here.

23
00:01:27,420 --> 00:01:29,610
‫So, instead of just returning the data,

24
00:01:29,610 --> 00:01:34,610
‫we can return an object with data and count.

25
00:01:35,010 --> 00:01:40,010
‫Then of course this here will stop working, exactly.

26
00:01:40,140 --> 00:01:45,140
‫And so the reason for that is that now the data contains

27
00:01:45,720 --> 00:01:48,390
‫both the data and the count.

28
00:01:48,390 --> 00:01:51,243
‫So the count are these 24 results.

29
00:01:53,280 --> 00:01:55,590
‫So, let's come back here.

30
00:01:55,590 --> 00:02:00,030
‫And so now the data is again that object.

31
00:02:00,030 --> 00:02:03,420
‫And so let's then immediately destructure that here.

32
00:02:03,420 --> 00:02:07,800
‫So here data, let's rename it to bookings

33
00:02:07,800 --> 00:02:09,870
‫and then we have to count.

34
00:02:09,870 --> 00:02:14,870
‫So from here, we can then also return that count,

35
00:02:15,660 --> 00:02:20,660
‫grab that here, and then finally pass it in here.

36
00:02:24,060 --> 00:02:29,060
‫And so now we should see, yes, 24 results.

37
00:02:30,600 --> 00:02:31,433
‫Nice.

38
00:02:32,490 --> 00:02:34,740
‫So, here we are finished.

39
00:02:34,740 --> 00:02:39,740
‫And from here, let's now actually grab this right here.

40
00:02:40,680 --> 00:02:42,840
‫So, basically where we calculate

41
00:02:42,840 --> 00:02:46,113
‫or where we get the current page from the URL.

42
00:02:47,340 --> 00:02:52,260
‫So we will need that here inside used booking as well.

43
00:02:52,260 --> 00:02:57,260
‫So filter, sort, pagination, here at last.

44
00:03:00,810 --> 00:03:05,340
‫Then let's just rename this here to page.

45
00:03:05,340 --> 00:03:09,480
‫And then I want to pass this here as well

46
00:03:09,480 --> 00:03:14,480
‫and also into the query key because, of course,

47
00:03:14,610 --> 00:03:16,860
‫as soon as we change the page,

48
00:03:16,860 --> 00:03:21,243
‫we also then want to re-fetch the data there.

49
00:03:22,110 --> 00:03:26,340
‫So let's see what went wrong here.

50
00:03:26,340 --> 00:03:30,330
‫So cannot read properties of undefined.

51
00:03:30,330 --> 00:03:33,900
‫Ah, the reason for that is that, initially, of course,

52
00:03:33,900 --> 00:03:36,300
‫the data will not yet exist.

53
00:03:36,300 --> 00:03:41,100
‫So, let's as a default just use an empty object here.

54
00:03:41,100 --> 00:03:44,190
‫And so then it'll try to destructure these

55
00:03:44,190 --> 00:03:45,663
‫from that empty object.

56
00:03:47,520 --> 00:03:52,380
‫Alright, and so now we have the page number here.

57
00:03:52,380 --> 00:03:55,410
‫And indeed, actually there it is.

58
00:03:55,410 --> 00:03:59,160
‫So, if we move to the next one, it'll then refetch the data

59
00:03:59,160 --> 00:04:02,460
‫but we are still not doing the pagination

60
00:04:02,460 --> 00:04:06,450
‫on the server side, so in or query.

61
00:04:06,450 --> 00:04:11,450
‫And so for that, we now need to grab that here.

62
00:04:15,090 --> 00:04:20,090
‫So, if there is a page, then let's do a few things.

63
00:04:22,650 --> 00:04:26,670
‫So what we will want to do is to add something more

64
00:04:26,670 --> 00:04:27,630
‫to our query.

65
00:04:27,630 --> 00:04:32,630
‫So we do query will equal query.range.

66
00:04:32,850 --> 00:04:37,290
‫So here range is the method from Supabase that we need.

67
00:04:37,290 --> 00:04:41,340
‫And here we will have to pass in a from parameter

68
00:04:41,340 --> 00:04:43,500
‫and a to parameter.

69
00:04:43,500 --> 00:04:45,870
‫So for example, on the first page,

70
00:04:45,870 --> 00:04:50,870
‫we want to go from result number zero to result number nine,

71
00:04:51,300 --> 00:04:54,450
‫at least if 10 results is what we want.

72
00:04:54,450 --> 00:04:58,710
‫And so let's then compute these values here.

73
00:04:58,710 --> 00:05:00,273
‫So from and to,

74
00:05:01,560 --> 00:05:05,940
‫so just like before here we take the page size

75
00:05:05,940 --> 00:05:09,360
‫and multiply it by the current page.

76
00:05:09,360 --> 00:05:14,360
‫Now I want to get that data, that value from here.

77
00:05:15,480 --> 00:05:18,030
‫So, this page size here.

78
00:05:18,030 --> 00:05:22,260
‫However, we now shouldn't copy paste this right here

79
00:05:22,260 --> 00:05:26,430
‫into this file because we want this to always be the same.

80
00:05:26,430 --> 00:05:30,690
‫So, if we define that this page size should actually be 20,

81
00:05:30,690 --> 00:05:33,810
‫we don't want to come to both these files

82
00:05:33,810 --> 00:05:35,520
‫and change the value there,

83
00:05:35,520 --> 00:05:39,390
‫that would really become a maintenance nightmare.

84
00:05:39,390 --> 00:05:44,010
‫So, instead what we can do is to just create

85
00:05:44,010 --> 00:05:49,010
‫a global constants file here in our, where is that?

86
00:05:49,440 --> 00:05:53,400
‫In our details folder right here.

87
00:05:53,400 --> 00:05:58,400
‫So, let's create constants.js.

88
00:05:58,590 --> 00:06:02,763
‫And so this is where we will then place this right here.

89
00:06:05,070 --> 00:06:08,157
‫So let's export that here.

90
00:06:08,157 --> 00:06:10,650
‫And then whenever we need to change the value,

91
00:06:10,650 --> 00:06:12,390
‫we just come here.

92
00:06:12,390 --> 00:06:16,380
‫And we could also have saved this as an environment variable

93
00:06:16,380 --> 00:06:18,870
‫or create some config file

94
00:06:18,870 --> 00:06:20,880
‫but this is a nice enough solution

95
00:06:20,880 --> 00:06:24,840
‫if we just have one or two values like this.

96
00:06:24,840 --> 00:06:27,633
‫So here, now let's try to import that.

97
00:06:29,400 --> 00:06:30,950
‫Well, that doesn't really work.

98
00:06:33,540 --> 00:06:35,890
‫Well here we have something that we don't need.

99
00:06:38,190 --> 00:06:42,873
‫So, we want page size from,

100
00:06:44,844 --> 00:06:46,560
‫and then utils and constants.

101
00:06:50,220 --> 00:06:54,060
‫So let's then close this file.

102
00:06:54,060 --> 00:06:58,713
‫And now we just import the same thing here, or yeah.

103
00:07:01,590 --> 00:07:03,240
‫This is where we need it.

104
00:07:03,240 --> 00:07:08,240
‫Now, alright, so I thought maybe we were in the wrong place,

105
00:07:10,620 --> 00:07:12,630
‫but apparently not.

106
00:07:12,630 --> 00:07:16,200
‫So we were computing the from variable here,

107
00:07:16,200 --> 00:07:18,780
‫so that's where this error is coming from.

108
00:07:18,780 --> 00:07:22,080
‫And so just like we did in the pagination component,

109
00:07:22,080 --> 00:07:25,560
‫that works by multiplying the current page

110
00:07:25,560 --> 00:07:30,560
‫times the page size minus one.

111
00:07:32,670 --> 00:07:35,253
‫And here we need some parenthesis.

112
00:07:36,360 --> 00:07:40,410
‫And so this in the beginning will become then zero.

113
00:07:40,410 --> 00:07:43,353
‫And actually we need that here.

114
00:07:44,190 --> 00:07:46,950
‫So, let's say we are at page number one

115
00:07:46,950 --> 00:07:49,740
‫and so the first one needs to be zero.

116
00:07:49,740 --> 00:07:53,610
‫And so then one minus one is zero times the page size

117
00:07:53,610 --> 00:07:55,083
‫will still be zero.

118
00:07:56,310 --> 00:08:01,310
‫So this is how we calculate from and then to

119
00:08:01,380 --> 00:08:06,380
‫is basically from plus the page size

120
00:08:09,030 --> 00:08:11,130
‫and then we need to do minus one

121
00:08:11,130 --> 00:08:14,580
‫because otherwise we would end up with 10 here

122
00:08:14,580 --> 00:08:16,383
‫where we only want nine.

123
00:08:17,580 --> 00:08:21,570
‫So, it starts from zero to nine at the first page,

124
00:08:21,570 --> 00:08:23,883
‫which is exactly 10 results.

125
00:08:25,170 --> 00:08:27,903
‫And I think that should be it.

126
00:08:28,860 --> 00:08:32,890
‫So if we try to go to page number one, then let's see

127
00:08:34,170 --> 00:08:39,170
‫and well three, four, five, six, seven, eight,

128
00:08:40,650 --> 00:08:42,693
‫nine, 10 results.

129
00:08:43,710 --> 00:08:44,940
‫Great.

130
00:08:44,940 --> 00:08:46,410
‫Then we go to the next one.

131
00:08:46,410 --> 00:08:49,230
‫We still have three, four, five, six, seven, eight,

132
00:08:49,230 --> 00:08:50,610
‫nine, 10 results.

133
00:08:50,610 --> 00:08:55,050
‫And then on the next one, we should only have four results.

134
00:08:55,050 --> 00:09:00,050
‫And indeed beautiful, there are the four results.

135
00:09:00,360 --> 00:09:03,480
‫And we can of course now try to change this year,

136
00:09:03,480 --> 00:09:06,000
‫for example, to just three pages.

137
00:09:06,000 --> 00:09:09,510
‫And so then we should have a lot more pages.

138
00:09:09,510 --> 00:09:14,190
‫So indeed, now on page three, we have results seven to nine

139
00:09:14,190 --> 00:09:16,293
‫and exactly three.

140
00:09:18,484 --> 00:09:23,400
‫And as we go back here, notice how then React query

141
00:09:23,400 --> 00:09:27,420
‫is again able to get this data from the cache.

142
00:09:27,420 --> 00:09:29,670
‫So now we are at page number four,

143
00:09:29,670 --> 00:09:33,780
‫but already the same data, but with page number three

144
00:09:33,780 --> 00:09:35,250
‫is in the cache.

145
00:09:35,250 --> 00:09:39,420
‫And so if we go back, then the data beautifully comes

146
00:09:39,420 --> 00:09:40,890
‫from the cache.

147
00:09:40,890 --> 00:09:44,070
‫And if we go forward at this point,

148
00:09:44,070 --> 00:09:46,740
‫then it already has page number four.

149
00:09:46,740 --> 00:09:49,470
‫And so again, that's coming from the cache

150
00:09:49,470 --> 00:09:52,500
‫and the same four page number five.

151
00:09:52,500 --> 00:09:57,270
‫But now of course page number six does not exist yet.

152
00:09:57,270 --> 00:09:59,730
‫And so if I click here, then again,

153
00:09:59,730 --> 00:10:04,260
‫then that data will need to be loaded exactly on the fly.

154
00:10:04,260 --> 00:10:07,530
‫So, basically as we click here.

155
00:10:07,530 --> 00:10:11,130
‫However that doesn't create the best user experience

156
00:10:11,130 --> 00:10:15,960
‫because at this point we are already used to having our data

157
00:10:15,960 --> 00:10:18,210
‫kind of showing up instantaneously.

158
00:10:18,210 --> 00:10:20,880
‫And so then having this loading spinner here again

159
00:10:20,880 --> 00:10:24,570
‫is not the best experience for our users.

160
00:10:24,570 --> 00:10:28,260
‫And so this is where the concept of prefetching

161
00:10:28,260 --> 00:10:32,310
‫that I have mentioned earlier comes into play.

162
00:10:32,310 --> 00:10:36,213
‫So let's check that out right in the next lecture.