‫To build the pagination feature,
‫let's actually start
‫by building a reusable pagination component
‫that we could reuse
‫for all kinds of data all over our application.
‫So this pagination component is just gonna be
‫a simple component that's similar
‫to the filter, anti-SortBy components.
‫In the sense that all that it's gonna do is
‫to render a few buttons that will allow us
‫to set the current page state to the URL,
‫so that then our use booking hooks here can get
‫that data from the URL.
‫So just like the filter
‫and the sort data are also read from the URL.
‫So we actually already have again, this pagination
‫component right here in the UI folder.
‫And once again
‫it contains a few styled components already.
‫So now let's create basically the rest of the component.
‫And so here,
‫I'm going to use the styled pagination component.
‫And for now, I will just place a paragraph
‫in here just with some text.
‫So here we will write the number
‫of the page that's being showed.
‫Let's write a span here.
‫So showing one,
‫two,
‫and then,
‫another span
‫with the number 10
‫of,
‫and then another span, let's say 23
‫results.
‫So these values here are, of course, just placeholders.
‫But this is just so that now we can actually include this.
‫So where do we want this pagination to be on our page?
‫Well, it doesn't make a lot of sense
‫for this pagination to be up here, right?
‫Instead, usually this is always close to the data itself.
‫And so that pagination will be here
‫at the bottom of the table.
‫So let's come to our booking table
‫that should still be open here.
‫This one we can close.
‫And so let's now actually use that table footer.
‫So here in the table component that we built earlier,
‫we had also the footer.
‫So that's just this styled component right here.
‫And so now it's time to use that.
‫So table
‫.footer.
‫And so then let's bring in the pagination,
‫and this is what's going to look like.
‫So again, showing one to 10 of the 23 results.
‫And then if you move to the next page,
‫it would say showing 10 to 20 results,
‫or 11 to 20 results.
‫All right.
‫And so then here on this right side,
‫we will have some buttons to go back and forth.
‫So just like a regular pagination that I'm sure
‫you have seen many, many times before.
‫So here I have a
‫buttons styled component for that,
‫and then
‫a pagination button.
‫And as always, please go check
‫out the corresponding CSS for that.
‫But now, here I will just use one
‫of our icons from the library that we included.
‫So Chevron-left,
‫and then a span,
‫saying previous.
‫And then here, let's actually duplicate all
‫of this
‫with a Chevron
‫to the right,
‫saying next.
‫Great.
‫Or actually here it needs to be the other way around.
‫Yeah, beautiful.
‫But, of course, now we need to kind of make this work.
‫And the first thing that this pagination should get
‫is the number of results.
‫So let's accept that as a prop.
‫Let's call it, count.
‫And then here,
‫let's
‫use that count,
‫and then we need to pass that value in.
‫Now here, we don't have that value yet,
‫but let's just use some fake data here.
‫So just 15, for example.
‫And we will then get this data here when we actually
‫implement the pagination for this particular case.
‫So when we go back to this use bookings hook right here,
‫but now we are just building this reusable component.
‫So for each of our buttons, let's create an event handler.
‫So let's just call them, next page,
‫and
‫one for the previous page.
‫So then here, we can hook them up.
‫So onclick here, we will want the previous
‫page function.
‫And then here,
‫the next page function.
‫Now calculating the next page or the previous page will,
‫of course, always depend on the current page.
‫And so that current page, we want as always
‫to get from the URL.
‫So searchParams and set
‫SearchParams,
‫we will get from useSearchParams.
‫And so then, let's get the current page from there.
‫So if there is actually no page,
‫so if there is no searchParams.get('page'),
‫then make it one
‫and one as a number.
‫And so therefore in the opposite case,
‫we actually need to convert this searchParams
‫.get
‫to a number.
‫Now, all right.
‫So with this, we have the current page.
‫Now then when we implement a pagination,
‫we also need to know the number of pages.
‫So here we already have the number of results,
‫but now from there we need
‫to calculate the actual number of pages.
‫So that's pageCount.
‫And so here basically, we will want to round up.
‫So Math
‫.ceiling,
‫and then here,
‫that's the actual count divided by the page size.
‫So by how many results will fit on one page.
‫So here we can set that manually to 10,
‫but that's kind of a magic number as we say it.
‫So a magic number is like a number
‫that someone reading this code will not really
‫understand where it is coming from,
‫or what that means.
‫So whenever we have a magic number,
‫it's always a good idea to place that into a variable.
‫So this is kind of a constant here.
‫So let's place that outside the function,
‫and we then also use this convention
‫of an uppercase variable name.
‫We will later need this in other files as well,
‫but for now, let's just keep it in this file.
‫And so now we are able to actually compute the next page.
‫So let's first store that in a variable called, next
‫because here we then need to do some conditionals.
‫So we first need to check
‫if the current page is equal, the pageCount,
‫or in other words, if we are already on the last page.
‫And so in that case,
‫the next page will also be the current page.
‫So basically, we then don't move up to another page
‫otherwise we will create a bug.
‫But in the opposite case,
‫so if we are not already on the last page,
‫then we can, of course, increase that by one.
‫And so then here we can again do searchParams
‫.set,
‫and then here to next,
‫and then setSearchParams
‫to
‫searchParams.
‫All right.
‫Next
‫here,
‫let's create the previous page function,
‫and again computing, which the next page should become.
‫Maybe let's call it, prev here,
‫so in order to be different.
‫And so here this time we ask the opposite.
‫So not if it's the last page,
‫but if it's the first page.
‫So in that case
‫then basically,
‫the new page
‫should become the current page.
‫So we then also don't want to move on,
‫but otherwise,
‫we can go one down.
‫So moving back by one page.
‫Now here, let's,
‫while we could copy this, yeah, let's do that.
‫Could also abstract it into its own function,
‫and let's keep it simple.
‫All right.
‫And yeah, since these functions are already hooked up,
‫we can actually already try to use them.
‫Let's just come back here so
‫that we don't have anything in the Euro Elliot.
‫And so let's try to click our buttons here.
‫And then apparently we have some error.
‫So searchParams is not a function.
‫Yeah, indeed it is.
‫Set
‫SearchParams.
‫So let's try that again.
‫And beautiful.
‫So we just moved to page number two,
‫which should already be the last one
‫'cause we only have 15 results.
‫And so then if I click here,
‫that does not go to the next one.
‫Then here it goes to the previous one,
‫but since we are now on page one,
‫we cannot go back any further.
‫So maybe let's actually do 45 pages here,
‫and so then I can keep going a bit more.
‫So now I'm on page number five,
‫and that should be the last one for 45 results.
‫And yeah, then that doesn't go any further.
‫So here we have these restrictions
‫in these functions already,
‫but we can make this even more secure
‫and a bit more explicit in the UI,
‫by even disabling these pages
‫or actually these buttons.
‫So here we can say disabled whenever the current
‫page is
‫equal one,
‫and then here if it's the last page.
‫So in that case, current page
‫is equal
‫to the pageCount.
‫And so now indeed, I cannot click here anymore.
‫And then as soon as we reached on the last one,
‫the button also gets disabled.
‫Now, all right.
‫And now here, let's just,
‫of course, also update those values.
‫So the beginning of the current page is
‫always the current page minus one.
‫So this is just a standard implementation
‫of any pagination.
‫And so this then will be zero here in the beginning.
‫So let's go actually to the first page.
‫And so indeed, the first page needs to start
‫at the very first result.
‫So that's then zero plus one.
‫So in the end, we add one back.
‫And then here, this one
‫is just the current page times
‫the page
‫size.
‫So not that,
‫but more like this.
‫So basically, this is just what we have here,
‫but here we just subtract one to the current page.
‫So if we reload, then we see after some time at least.
‫So on page number one, we are showing results one to 10,
‫then 11 to 20, 21 to 30, and so on.
‫Or here, actually we have a bug because here in the end,
‫we just want to show 45 here as well.
‫So let's just add a small condition there.
‫So if we are again on the last page,
‫then here we want to display the actual count
‫and otherwise, what we had previously.
‫Now, okay, and with this, we are almost finished.
‫But now what happens if we had,
‫for example
‫only five results, then in this case
‫it wouldn't make much sense to have any pagination at all.
‫So actually just go back here to the initial state.
‫And so here, we are already showing all the results,
‫and so both of the buttons are disabled.
‫And so yeah.
‫As I was saying, in this case,
‫it doesn't even make sense to return this pagination at all.
‫So then we can just return null.
‫So if the page
‫count
‫is less or equal one,
‫then just return null.
‫And so then that part is gone.
‫Beautiful.
‫So that's actually it.
‫So with this, we finish this part,
‫and now we are ready to hook
‫this up to our use bookings hook right here.
‫And, of course, also here
‫into the get bookings function itself.