1 00:00:01,110 --> 00:00:03,600 ‫To build the pagination feature, 2 00:00:03,600 --> 00:00:05,160 ‫let's actually start 3 00:00:05,160 --> 00:00:08,730 ‫by building a reusable pagination component 4 00:00:08,730 --> 00:00:10,140 ‫that we could reuse 5 00:00:10,140 --> 00:00:14,253 ‫for all kinds of data all over our application. 6 00:00:16,080 --> 00:00:19,890 ‫So this pagination component is just gonna be 7 00:00:19,890 --> 00:00:22,320 ‫a simple component that's similar 8 00:00:22,320 --> 00:00:25,650 ‫to the filter, anti-SortBy components. 9 00:00:25,650 --> 00:00:28,830 ‫In the sense that all that it's gonna do is 10 00:00:28,830 --> 00:00:31,830 ‫to render a few buttons that will allow us 11 00:00:31,830 --> 00:00:35,243 ‫to set the current page state to the URL, 12 00:00:35,243 --> 00:00:39,870 ‫so that then our use booking hooks here can get 13 00:00:39,870 --> 00:00:42,030 ‫that data from the URL. 14 00:00:42,030 --> 00:00:43,920 ‫So just like the filter 15 00:00:43,920 --> 00:00:47,823 ‫and the sort data are also read from the URL. 16 00:00:49,140 --> 00:00:53,190 ‫So we actually already have again, this pagination 17 00:00:53,190 --> 00:00:56,583 ‫component right here in the UI folder. 18 00:00:57,810 --> 00:00:58,920 ‫And once again 19 00:00:58,920 --> 00:01:03,180 ‫it contains a few styled components already. 20 00:01:03,180 --> 00:01:08,180 ‫So now let's create basically the rest of the component. 21 00:01:08,280 --> 00:01:09,594 ‫And so here, 22 00:01:09,594 --> 00:01:14,400 ‫I'm going to use the styled pagination component. 23 00:01:14,400 --> 00:01:16,980 ‫And for now, I will just place a paragraph 24 00:01:16,980 --> 00:01:19,533 ‫in here just with some text. 25 00:01:21,120 --> 00:01:23,430 ‫So here we will write the number 26 00:01:23,430 --> 00:01:25,713 ‫of the page that's being showed. 27 00:01:27,000 --> 00:01:29,493 ‫Let's write a span here. 28 00:01:30,540 --> 00:01:32,253 ‫So showing one, 29 00:01:33,120 --> 00:01:34,770 ‫two, 30 00:01:34,770 --> 00:01:35,733 ‫and then, 31 00:01:36,660 --> 00:01:38,280 ‫another span 32 00:01:38,280 --> 00:01:39,340 ‫with the number 10 33 00:01:40,950 --> 00:01:42,150 ‫of, 34 00:01:42,150 --> 00:01:45,520 ‫and then another span, let's say 23 35 00:01:47,700 --> 00:01:48,783 ‫results. 36 00:01:49,860 --> 00:01:53,700 ‫So these values here are, of course, just placeholders. 37 00:01:53,700 --> 00:01:57,303 ‫But this is just so that now we can actually include this. 38 00:01:58,350 --> 00:02:02,793 ‫So where do we want this pagination to be on our page? 39 00:02:03,630 --> 00:02:06,810 ‫Well, it doesn't make a lot of sense 40 00:02:06,810 --> 00:02:10,380 ‫for this pagination to be up here, right? 41 00:02:10,380 --> 00:02:14,910 ‫Instead, usually this is always close to the data itself. 42 00:02:14,910 --> 00:02:17,400 ‫And so that pagination will be here 43 00:02:17,400 --> 00:02:19,323 ‫at the bottom of the table. 44 00:02:20,340 --> 00:02:23,490 ‫So let's come to our booking table 45 00:02:23,490 --> 00:02:25,983 ‫that should still be open here. 46 00:02:27,060 --> 00:02:29,100 ‫This one we can close. 47 00:02:29,100 --> 00:02:33,450 ‫And so let's now actually use that table footer. 48 00:02:33,450 --> 00:02:37,230 ‫So here in the table component that we built earlier, 49 00:02:37,230 --> 00:02:40,200 ‫we had also the footer. 50 00:02:40,200 --> 00:02:43,683 ‫So that's just this styled component right here. 51 00:02:45,030 --> 00:02:48,060 ‫And so now it's time to use that. 52 00:02:48,060 --> 00:02:49,030 ‫So table 53 00:02:52,537 --> 00:02:53,403 ‫.footer. 54 00:02:54,937 --> 00:02:59,370 ‫And so then let's bring in the pagination, 55 00:02:59,370 --> 00:03:02,700 ‫and this is what's going to look like. 56 00:03:02,700 --> 00:03:07,020 ‫So again, showing one to 10 of the 23 results. 57 00:03:07,020 --> 00:03:08,820 ‫And then if you move to the next page, 58 00:03:08,820 --> 00:03:12,870 ‫it would say showing 10 to 20 results, 59 00:03:12,870 --> 00:03:14,883 ‫or 11 to 20 results. 60 00:03:16,200 --> 00:03:17,190 ‫All right. 61 00:03:17,190 --> 00:03:19,530 ‫And so then here on this right side, 62 00:03:19,530 --> 00:03:22,803 ‫we will have some buttons to go back and forth. 63 00:03:23,670 --> 00:03:27,060 ‫So just like a regular pagination that I'm sure 64 00:03:27,060 --> 00:03:29,253 ‫you have seen many, many times before. 65 00:03:31,740 --> 00:03:34,740 ‫So here I have a 66 00:03:34,740 --> 00:03:37,230 ‫buttons styled component for that, 67 00:03:37,230 --> 00:03:38,063 ‫and then 68 00:03:39,420 --> 00:03:41,520 ‫a pagination button. 69 00:03:41,520 --> 00:03:43,290 ‫And as always, please go check 70 00:03:43,290 --> 00:03:47,130 ‫out the corresponding CSS for that. 71 00:03:47,130 --> 00:03:49,680 ‫But now, here I will just use one 72 00:03:49,680 --> 00:03:54,180 ‫of our icons from the library that we included. 73 00:03:54,180 --> 00:03:56,883 ‫So Chevron-left, 74 00:04:00,660 --> 00:04:01,983 ‫and then a span, 75 00:04:03,300 --> 00:04:05,643 ‫saying previous. 76 00:04:08,190 --> 00:04:11,760 ‫And then here, let's actually duplicate all 77 00:04:11,760 --> 00:04:13,320 ‫of this 78 00:04:13,320 --> 00:04:14,350 ‫with a Chevron 79 00:04:15,420 --> 00:04:17,193 ‫to the right, 80 00:04:18,300 --> 00:04:19,473 ‫saying next. 81 00:04:21,690 --> 00:04:22,590 ‫Great. 82 00:04:22,590 --> 00:04:26,700 ‫Or actually here it needs to be the other way around. 83 00:04:26,700 --> 00:04:29,490 ‫Yeah, beautiful. 84 00:04:29,490 --> 00:04:33,210 ‫But, of course, now we need to kind of make this work. 85 00:04:33,210 --> 00:04:36,480 ‫And the first thing that this pagination should get 86 00:04:36,480 --> 00:04:38,940 ‫is the number of results. 87 00:04:38,940 --> 00:04:41,253 ‫So let's accept that as a prop. 88 00:04:42,630 --> 00:04:44,220 ‫Let's call it, count. 89 00:04:44,220 --> 00:04:46,590 ‫And then here, 90 00:04:46,590 --> 00:04:48,210 ‫let's 91 00:04:48,210 --> 00:04:50,160 ‫use that count, 92 00:04:50,160 --> 00:04:52,563 ‫and then we need to pass that value in. 93 00:04:54,420 --> 00:04:56,820 ‫Now here, we don't have that value yet, 94 00:04:56,820 --> 00:05:01,230 ‫but let's just use some fake data here. 95 00:05:01,230 --> 00:05:03,480 ‫So just 15, for example. 96 00:05:03,480 --> 00:05:06,180 ‫And we will then get this data here when we actually 97 00:05:06,180 --> 00:05:10,680 ‫implement the pagination for this particular case. 98 00:05:10,680 --> 00:05:14,760 ‫So when we go back to this use bookings hook right here, 99 00:05:14,760 --> 00:05:18,213 ‫but now we are just building this reusable component. 100 00:05:20,070 --> 00:05:24,543 ‫So for each of our buttons, let's create an event handler. 101 00:05:25,860 --> 00:05:28,053 ‫So let's just call them, next page, 102 00:05:30,360 --> 00:05:31,193 ‫and 103 00:05:33,960 --> 00:05:36,780 ‫one for the previous page. 104 00:05:36,780 --> 00:05:40,500 ‫So then here, we can hook them up. 105 00:05:40,500 --> 00:05:44,740 ‫So onclick here, we will want the previous 106 00:05:45,660 --> 00:05:46,773 ‫page function. 107 00:05:49,608 --> 00:05:50,523 ‫And then here, 108 00:05:51,990 --> 00:05:54,813 ‫the next page function. 109 00:05:56,910 --> 00:06:00,660 ‫Now calculating the next page or the previous page will, 110 00:06:00,660 --> 00:06:03,630 ‫of course, always depend on the current page. 111 00:06:03,630 --> 00:06:07,020 ‫And so that current page, we want as always 112 00:06:07,020 --> 00:06:08,583 ‫to get from the URL. 113 00:06:10,020 --> 00:06:13,180 ‫So searchParams and set 114 00:06:15,120 --> 00:06:16,830 ‫SearchParams, 115 00:06:16,830 --> 00:06:19,503 ‫we will get from useSearchParams. 116 00:06:22,620 --> 00:06:26,943 ‫And so then, let's get the current page from there. 117 00:06:28,950 --> 00:06:32,820 ‫So if there is actually no page, 118 00:06:32,820 --> 00:06:36,240 ‫so if there is no searchParams.get('page'), 119 00:06:41,010 --> 00:06:43,399 ‫then make it one 120 00:06:43,399 --> 00:06:45,210 ‫and one as a number. 121 00:06:45,210 --> 00:06:48,540 ‫And so therefore in the opposite case, 122 00:06:48,540 --> 00:06:52,968 ‫we actually need to convert this searchParams 123 00:06:52,968 --> 00:06:54,040 ‫.get 124 00:06:55,920 --> 00:06:57,303 ‫to a number. 125 00:06:59,580 --> 00:07:00,810 ‫Now, all right. 126 00:07:00,810 --> 00:07:02,880 ‫So with this, we have the current page. 127 00:07:02,880 --> 00:07:05,940 ‫Now then when we implement a pagination, 128 00:07:05,940 --> 00:07:10,140 ‫we also need to know the number of pages. 129 00:07:10,140 --> 00:07:13,620 ‫So here we already have the number of results, 130 00:07:13,620 --> 00:07:14,910 ‫but now from there we need 131 00:07:14,910 --> 00:07:18,333 ‫to calculate the actual number of pages. 132 00:07:20,490 --> 00:07:22,077 ‫So that's pageCount. 133 00:07:23,580 --> 00:07:27,660 ‫And so here basically, we will want to round up. 134 00:07:27,660 --> 00:07:31,357 ‫So Math 135 00:07:31,357 --> 00:07:32,313 ‫.ceiling, 136 00:07:33,360 --> 00:07:34,560 ‫and then here, 137 00:07:34,560 --> 00:07:39,030 ‫that's the actual count divided by the page size. 138 00:07:39,030 --> 00:07:43,350 ‫So by how many results will fit on one page. 139 00:07:43,350 --> 00:07:46,590 ‫So here we can set that manually to 10, 140 00:07:46,590 --> 00:07:50,850 ‫but that's kind of a magic number as we say it. 141 00:07:50,850 --> 00:07:53,400 ‫So a magic number is like a number 142 00:07:53,400 --> 00:07:57,270 ‫that someone reading this code will not really 143 00:07:57,270 --> 00:07:59,910 ‫understand where it is coming from, 144 00:07:59,910 --> 00:08:01,710 ‫or what that means. 145 00:08:01,710 --> 00:08:03,930 ‫So whenever we have a magic number, 146 00:08:03,930 --> 00:08:07,563 ‫it's always a good idea to place that into a variable. 147 00:08:08,490 --> 00:08:11,640 ‫So this is kind of a constant here. 148 00:08:11,640 --> 00:08:14,760 ‫So let's place that outside the function, 149 00:08:14,760 --> 00:08:17,400 ‫and we then also use this convention 150 00:08:17,400 --> 00:08:20,013 ‫of an uppercase variable name. 151 00:08:21,180 --> 00:08:24,810 ‫We will later need this in other files as well, 152 00:08:24,810 --> 00:08:28,110 ‫but for now, let's just keep it in this file. 153 00:08:28,110 --> 00:08:32,283 ‫And so now we are able to actually compute the next page. 154 00:08:33,360 --> 00:08:37,590 ‫So let's first store that in a variable called, next 155 00:08:37,590 --> 00:08:41,520 ‫because here we then need to do some conditionals. 156 00:08:41,520 --> 00:08:42,990 ‫So we first need to check 157 00:08:42,990 --> 00:08:46,980 ‫if the current page is equal, the pageCount, 158 00:08:46,980 --> 00:08:50,850 ‫or in other words, if we are already on the last page. 159 00:08:50,850 --> 00:08:52,140 ‫And so in that case, 160 00:08:52,140 --> 00:08:55,950 ‫the next page will also be the current page. 161 00:08:55,950 --> 00:08:59,850 ‫So basically, we then don't move up to another page 162 00:08:59,850 --> 00:09:02,013 ‫otherwise we will create a bug. 163 00:09:03,180 --> 00:09:05,580 ‫But in the opposite case, 164 00:09:05,580 --> 00:09:08,610 ‫so if we are not already on the last page, 165 00:09:08,610 --> 00:09:12,630 ‫then we can, of course, increase that by one. 166 00:09:12,630 --> 00:09:17,422 ‫And so then here we can again do searchParams 167 00:09:17,422 --> 00:09:19,053 ‫.set, 168 00:09:20,580 --> 00:09:24,570 ‫and then here to next, 169 00:09:24,570 --> 00:09:25,770 ‫and then setSearchParams 170 00:09:26,910 --> 00:09:27,743 ‫to 171 00:09:28,950 --> 00:09:29,783 ‫searchParams. 172 00:09:31,680 --> 00:09:32,520 ‫All right. 173 00:09:32,520 --> 00:09:34,110 ‫Next 174 00:09:34,110 --> 00:09:35,340 ‫here, 175 00:09:35,340 --> 00:09:39,420 ‫let's create the previous page function, 176 00:09:39,420 --> 00:09:43,650 ‫and again computing, which the next page should become. 177 00:09:43,650 --> 00:09:47,190 ‫Maybe let's call it, prev here, 178 00:09:47,190 --> 00:09:50,130 ‫so in order to be different. 179 00:09:50,130 --> 00:09:53,310 ‫And so here this time we ask the opposite. 180 00:09:53,310 --> 00:09:55,320 ‫So not if it's the last page, 181 00:09:55,320 --> 00:09:57,603 ‫but if it's the first page. 182 00:09:58,440 --> 00:10:00,130 ‫So in that case 183 00:10:01,020 --> 00:10:02,730 ‫then basically, 184 00:10:02,730 --> 00:10:04,080 ‫the new page 185 00:10:04,080 --> 00:10:07,080 ‫should become the current page. 186 00:10:07,080 --> 00:10:09,720 ‫So we then also don't want to move on, 187 00:10:09,720 --> 00:10:12,180 ‫but otherwise, 188 00:10:12,180 --> 00:10:15,090 ‫we can go one down. 189 00:10:15,090 --> 00:10:17,940 ‫So moving back by one page. 190 00:10:17,940 --> 00:10:19,800 ‫Now here, let's, 191 00:10:19,800 --> 00:10:23,073 ‫while we could copy this, yeah, let's do that. 192 00:10:24,270 --> 00:10:27,870 ‫Could also abstract it into its own function, 193 00:10:27,870 --> 00:10:29,163 ‫and let's keep it simple. 194 00:10:30,990 --> 00:10:32,850 ‫All right. 195 00:10:32,850 --> 00:10:37,110 ‫And yeah, since these functions are already hooked up, 196 00:10:37,110 --> 00:10:39,813 ‫we can actually already try to use them. 197 00:10:40,860 --> 00:10:42,540 ‫Let's just come back here so 198 00:10:42,540 --> 00:10:45,720 ‫that we don't have anything in the Euro Elliot. 199 00:10:45,720 --> 00:10:50,283 ‫And so let's try to click our buttons here. 200 00:10:51,180 --> 00:10:55,410 ‫And then apparently we have some error. 201 00:10:55,410 --> 00:10:59,430 ‫So searchParams is not a function. 202 00:10:59,430 --> 00:11:01,023 ‫Yeah, indeed it is. 203 00:11:02,430 --> 00:11:03,263 ‫Set 204 00:11:05,378 --> 00:11:06,461 ‫SearchParams. 205 00:11:13,796 --> 00:11:15,796 ‫So let's try that again. 206 00:11:17,100 --> 00:11:18,930 ‫And beautiful. 207 00:11:18,930 --> 00:11:21,510 ‫So we just moved to page number two, 208 00:11:21,510 --> 00:11:23,610 ‫which should already be the last one 209 00:11:23,610 --> 00:11:26,040 ‫'cause we only have 15 results. 210 00:11:26,040 --> 00:11:27,900 ‫And so then if I click here, 211 00:11:27,900 --> 00:11:30,390 ‫that does not go to the next one. 212 00:11:30,390 --> 00:11:33,180 ‫Then here it goes to the previous one, 213 00:11:33,180 --> 00:11:35,190 ‫but since we are now on page one, 214 00:11:35,190 --> 00:11:37,770 ‫we cannot go back any further. 215 00:11:37,770 --> 00:11:40,863 ‫So maybe let's actually do 45 pages here, 216 00:11:42,270 --> 00:11:45,213 ‫and so then I can keep going a bit more. 217 00:11:46,110 --> 00:11:48,450 ‫So now I'm on page number five, 218 00:11:48,450 --> 00:11:52,590 ‫and that should be the last one for 45 results. 219 00:11:52,590 --> 00:11:57,033 ‫And yeah, then that doesn't go any further. 220 00:11:58,800 --> 00:12:01,320 ‫So here we have these restrictions 221 00:12:01,320 --> 00:12:04,020 ‫in these functions already, 222 00:12:04,020 --> 00:12:07,260 ‫but we can make this even more secure 223 00:12:07,260 --> 00:12:09,300 ‫and a bit more explicit in the UI, 224 00:12:09,300 --> 00:12:11,940 ‫by even disabling these pages 225 00:12:11,940 --> 00:12:13,383 ‫or actually these buttons. 226 00:12:14,370 --> 00:12:17,580 ‫So here we can say disabled whenever the current 227 00:12:17,580 --> 00:12:19,710 ‫page is 228 00:12:19,710 --> 00:12:21,660 ‫equal one, 229 00:12:21,660 --> 00:12:25,110 ‫and then here if it's the last page. 230 00:12:25,110 --> 00:12:27,430 ‫So in that case, current page 231 00:12:28,650 --> 00:12:30,600 ‫is equal 232 00:12:30,600 --> 00:12:31,983 ‫to the pageCount. 233 00:12:35,220 --> 00:12:38,580 ‫And so now indeed, I cannot click here anymore. 234 00:12:38,580 --> 00:12:40,920 ‫And then as soon as we reached on the last one, 235 00:12:40,920 --> 00:12:43,233 ‫the button also gets disabled. 236 00:12:44,490 --> 00:12:45,390 ‫Now, all right. 237 00:12:45,390 --> 00:12:46,860 ‫And now here, let's just, 238 00:12:46,860 --> 00:12:50,223 ‫of course, also update those values. 239 00:12:52,470 --> 00:12:56,430 ‫So the beginning of the current page is 240 00:12:56,430 --> 00:12:58,713 ‫always the current page minus one. 241 00:13:01,320 --> 00:13:06,300 ‫So this is just a standard implementation 242 00:13:06,300 --> 00:13:09,063 ‫of any pagination. 243 00:13:10,410 --> 00:13:13,383 ‫And so this then will be zero here in the beginning. 244 00:13:14,430 --> 00:13:17,490 ‫So let's go actually to the first page. 245 00:13:17,490 --> 00:13:20,940 ‫And so indeed, the first page needs to start 246 00:13:20,940 --> 00:13:22,500 ‫at the very first result. 247 00:13:22,500 --> 00:13:25,770 ‫So that's then zero plus one. 248 00:13:25,770 --> 00:13:28,413 ‫So in the end, we add one back. 249 00:13:33,420 --> 00:13:35,910 ‫And then here, this one 250 00:13:35,910 --> 00:13:39,900 ‫is just the current page times 251 00:13:39,900 --> 00:13:41,020 ‫the page 252 00:13:42,930 --> 00:13:44,160 ‫size. 253 00:13:44,160 --> 00:13:45,810 ‫So not that, 254 00:13:45,810 --> 00:13:48,063 ‫but more like this. 255 00:13:49,942 --> 00:13:52,860 ‫So basically, this is just what we have here, 256 00:13:52,860 --> 00:13:56,730 ‫but here we just subtract one to the current page. 257 00:13:56,730 --> 00:14:01,730 ‫So if we reload, then we see after some time at least. 258 00:14:02,820 --> 00:14:07,440 ‫So on page number one, we are showing results one to 10, 259 00:14:07,440 --> 00:14:11,820 ‫then 11 to 20, 21 to 30, and so on. 260 00:14:11,820 --> 00:14:15,450 ‫Or here, actually we have a bug because here in the end, 261 00:14:15,450 --> 00:14:18,903 ‫we just want to show 45 here as well. 262 00:14:19,800 --> 00:14:23,730 ‫So let's just add a small condition there. 263 00:14:23,730 --> 00:14:25,953 ‫So if we are again on the last page, 264 00:14:29,880 --> 00:14:32,820 ‫then here we want to display the actual count 265 00:14:32,820 --> 00:14:36,153 ‫and otherwise, what we had previously. 266 00:14:38,010 --> 00:14:42,240 ‫Now, okay, and with this, we are almost finished. 267 00:14:42,240 --> 00:14:45,063 ‫But now what happens if we had, 268 00:14:45,930 --> 00:14:46,763 ‫for example 269 00:14:46,763 --> 00:14:50,122 ‫only five results, then in this case 270 00:14:50,122 --> 00:14:55,122 ‫it wouldn't make much sense to have any pagination at all. 271 00:14:55,410 --> 00:14:59,733 ‫So actually just go back here to the initial state. 272 00:15:02,010 --> 00:15:05,130 ‫And so here, we are already showing all the results, 273 00:15:05,130 --> 00:15:08,040 ‫and so both of the buttons are disabled. 274 00:15:08,040 --> 00:15:10,500 ‫And so yeah. 275 00:15:10,500 --> 00:15:12,210 ‫As I was saying, in this case, 276 00:15:12,210 --> 00:15:15,810 ‫it doesn't even make sense to return this pagination at all. 277 00:15:15,810 --> 00:15:18,390 ‫So then we can just return null. 278 00:15:18,390 --> 00:15:20,080 ‫So if the page 279 00:15:21,240 --> 00:15:22,440 ‫count 280 00:15:22,440 --> 00:15:26,100 ‫is less or equal one, 281 00:15:26,100 --> 00:15:29,190 ‫then just return null. 282 00:15:29,190 --> 00:15:31,413 ‫And so then that part is gone. 283 00:15:32,790 --> 00:15:34,290 ‫Beautiful. 284 00:15:34,290 --> 00:15:36,840 ‫So that's actually it. 285 00:15:36,840 --> 00:15:39,090 ‫So with this, we finish this part, 286 00:15:39,090 --> 00:15:40,770 ‫and now we are ready to hook 287 00:15:40,770 --> 00:15:45,270 ‫this up to our use bookings hook right here. 288 00:15:45,270 --> 00:15:47,100 ‫And, of course, also here 289 00:15:47,100 --> 00:15:49,563 ‫into the get bookings function itself.