‫Now let's use the reusable page component
‫that we just built in order to paginate our bookings table.
‫Now the first thing that we actually need
‫is the number of results so that we can then pass it here
‫into discounts prop.
‫Now, we could just compute here by calculating the length
‫of this array, but there is also another way
‫so let me show you that other way as well,
‫so that you can learn about this feature of Supabase.
‫So right here in this select function,
‫we can pass in a second argument
‫which is this object with the count property.
‫So, here we can define count as exact.
‫And so this can actually be helpful whenever you don't want
‫to query the entire data
‫but really only need the number of results.
‫And so then you can just use this.
‫Now what this will do is that besides the data enter error,
‫this query here will then also return a variable.
‫So a property on the object called count.
‫And so then here we can destructure that
‫and then also return it here.
‫So, instead of just returning the data,
‫we can return an object with data and count.
‫Then of course this here will stop working, exactly.
‫And so the reason for that is that now the data contains
‫both the data and the count.
‫So the count are these 24 results.
‫So, let's come back here.
‫And so now the data is again that object.
‫And so let's then immediately destructure that here.
‫So here data, let's rename it to bookings
‫and then we have to count.
‫So from here, we can then also return that count,
‫grab that here, and then finally pass it in here.
‫And so now we should see, yes, 24 results.
‫Nice.
‫So, here we are finished.
‫And from here, let's now actually grab this right here.
‫So, basically where we calculate
‫or where we get the current page from the URL.
‫So we will need that here inside used booking as well.
‫So filter, sort, pagination, here at last.
‫Then let's just rename this here to page.
‫And then I want to pass this here as well
‫and also into the query key because, of course,
‫as soon as we change the page,
‫we also then want to re-fetch the data there.
‫So let's see what went wrong here.
‫So cannot read properties of undefined.
‫Ah, the reason for that is that, initially, of course,
‫the data will not yet exist.
‫So, let's as a default just use an empty object here.
‫And so then it'll try to destructure these
‫from that empty object.
‫Alright, and so now we have the page number here.
‫And indeed, actually there it is.
‫So, if we move to the next one, it'll then refetch the data
‫but we are still not doing the pagination
‫on the server side, so in or query.
‫And so for that, we now need to grab that here.
‫So, if there is a page, then let's do a few things.
‫So what we will want to do is to add something more
‫to our query.
‫So we do query will equal query.range.
‫So here range is the method from Supabase that we need.
‫And here we will have to pass in a from parameter
‫and a to parameter.
‫So for example, on the first page,
‫we want to go from result number zero to result number nine,
‫at least if 10 results is what we want.
‫And so let's then compute these values here.
‫So from and to,
‫so just like before here we take the page size
‫and multiply it by the current page.
‫Now I want to get that data, that value from here.
‫So, this page size here.
‫However, we now shouldn't copy paste this right here
‫into this file because we want this to always be the same.
‫So, if we define that this page size should actually be 20,
‫we don't want to come to both these files
‫and change the value there,
‫that would really become a maintenance nightmare.
‫So, instead what we can do is to just create
‫a global constants file here in our, where is that?
‫In our details folder right here.
‫So, let's create constants.js.
‫And so this is where we will then place this right here.
‫So let's export that here.
‫And then whenever we need to change the value,
‫we just come here.
‫And we could also have saved this as an environment variable
‫or create some config file
‫but this is a nice enough solution
‫if we just have one or two values like this.
‫So here, now let's try to import that.
‫Well, that doesn't really work.
‫Well here we have something that we don't need.
‫So, we want page size from,
‫and then utils and constants.
‫So let's then close this file.
‫And now we just import the same thing here, or yeah.
‫This is where we need it.
‫Now, alright, so I thought maybe we were in the wrong place,
‫but apparently not.
‫So we were computing the from variable here,
‫so that's where this error is coming from.
‫And so just like we did in the pagination component,
‫that works by multiplying the current page
‫times the page size minus one.
‫And here we need some parenthesis.
‫And so this in the beginning will become then zero.
‫And actually we need that here.
‫So, let's say we are at page number one
‫and so the first one needs to be zero.
‫And so then one minus one is zero times the page size
‫will still be zero.
‫So this is how we calculate from and then to
‫is basically from plus the page size
‫and then we need to do minus one
‫because otherwise we would end up with 10 here
‫where we only want nine.
‫So, it starts from zero to nine at the first page,
‫which is exactly 10 results.
‫And I think that should be it.
‫So if we try to go to page number one, then let's see
‫and well three, four, five, six, seven, eight,
‫nine, 10 results.
‫Great.
‫Then we go to the next one.
‫We still have three, four, five, six, seven, eight,
‫nine, 10 results.
‫And then on the next one, we should only have four results.
‫And indeed beautiful, there are the four results.
‫And we can of course now try to change this year,
‫for example, to just three pages.
‫And so then we should have a lot more pages.
‫So indeed, now on page three, we have results seven to nine
‫and exactly three.
‫And as we go back here, notice how then React query
‫is again able to get this data from the cache.
‫So now we are at page number four,
‫but already the same data, but with page number three
‫is in the cache.
‫And so if we go back, then the data beautifully comes
‫from the cache.
‫And if we go forward at this point,
‫then it already has page number four.
‫And so again, that's coming from the cache
‫and the same four page number five.
‫But now of course page number six does not exist yet.
‫And so if I click here, then again,
‫then that data will need to be loaded exactly on the fly.
‫So, basically as we click here.
‫However that doesn't create the best user experience
‫because at this point we are already used to having our data
‫kind of showing up instantaneously.
‫And so then having this loading spinner here again
‫is not the best experience for our users.
‫And so this is where the concept of prefetching
‫that I have mentioned earlier comes into play.
‫So let's check that out right in the next lecture.