Welcome back to the next feature
of the Forkify Application
and this one is going to be Pagination.
So lets take a look at our current implementation
of the search to get an idea what the problem is.
So you see we have 59 results for pizza
but now all of these results are displayed here,
basically at once.
Right?
And so this is not user friendly at all.
So and a final demo application,
we only have 10 results on this page
and then we can go to the next page
and basically get the next 10 results.
And so that's what we want to do right now
in our application as well.
Now, this problem is actually harder to solve
than it might seem like
but I'm sure that together we can do it.
So let's think about what we have to do here.
So remember that it is the control search results function
that is responsible for rendering
the search results right here.
And currently, we are simply rendering
all the search results like this.
However, in the first page, we only want
to render 10 results and not all of the results.
Right?
And then if we're on page one,
we want to render the second 10 results.
So from result 11 to result 20.
And so let's basically create a function in our model
which will take in the page that we want to render
and which will then only return the results
that we actually want to render for that page.
Okay?
And that's actually not so difficult.
So let's create a new function here
and also export it and let's call it
get search results page.
So I function and this one is of course
not going to be an a sync function
because we already have the search results
loaded at this point.
So at the point when we will call this function.
All we want to do in this function,
is basically reach into the state
and then get the data for the page that is being requested.
So what we will return here,
is basically a part of the results.
So let's write that here because that will be helpful
to understand the logic we need to write here.
So we will return state.search.results,
which remember is this array here.
Right?
And then we only want to return part of it
and so that's a slice.
So again for the first page,
we would like to return from result one to result 10.
And so that would be zero to nine actually
because the array is zero based.
Now of course, we're not gonna hard code these values here
but we can basically calculate them based on the page.
So let me try that.
So we will basically create a start variable.
So let's set that to zero for now.
So basically having the same values as here
and also an end variable.
So we want to start at a certain point
and then also end at a certain point.
Right?
But again, we don't want to hard code
these values of course but instead,
we want to calculate them dynamically.
So here we will want a nine and here a zero
and so how can we calculate that?
Well, the easiest way that everyone does it,
or at least, I think that's the way that everyone does it,
is to take the page and then minus one
and then simply multiply it by the amount of results
that we want on the page.
So let's say 10 here for now
and then here we do the same, simply with page.
So page times 10.
Okay?
So let's say that we requested page one.
So one minus one is zero and zero times 10 is then zero.
So just as we wanted and for the end parameter
then pages one times 10 is 10.
And actually the slice method here does not include
the last value that we pass in
and so actually 10 is perfect here.
So that will then extract all the way to nine.
Now one page is two, so for page two,
then here we will have two minus one is one, times 10,10.
So it will start at 10
and then go to two times 10 which is 20.
And the same for all the other pages that we pass in.
And so this is actually already it.
Now let's just refactor this code
because of course this year isn't important data about
or application and so it should go into the state.
Okay?
So let's call that results per page
and so let's set it to 10.
So here instead of 10,
we have state.search.results per page.
So that's a lot better.
But actually, we can do even better
because this year now looks kind
of like a magic number, right?
So a number that comes out of nowhere
and so I think you can see where I'm going with this.
So I will create another constant in our configuration file
and then if at some point in the future
we want to change the configuration,
in this case of the results we want per page,
we can simply come here to
the configuration file and change that.
So let's import that.
So that's right here, replace that here, man,
so that should work just fine now.
Now, okay and now let's go back to our controller
and so, again this is the way we did it previously,
so all the results but now we only want some results.
And so we can now call that function that we just created.
So model.get search results and then let's say
we want to start with page one.
And of course we will then later on
get this value here dynamically.
But for now we just want to see if this actually works.
So let's see and let's search here again for pizza.
So again 59 results.
But we still get all the results here for some reason.
So let's only lock this here to the console.
So just to see what our function here is doing.
Well, apparently, it doesn't really do anything.
So get search results per page.
I think that is the correct name.
So that should actually work.
Well, let's just log something here,
just so we see if this function is actually being executed.
So start and end.
Well, nothing is happening here for some reason.
Maybe we need to stop parcel,
sometimes that is necessary and then run it again.
So let's build it all again.
Let's also try it again.
Ah, and now it seems to work and indeed,
now we only get 10 results.
So sometimes you actually have to stop and restart parcel.
This isn't the first time that this has happened to me
and probably I should have warned you
about this problem also earlier
but anyway, now we see that this actually worked.
So great, then we can get rid of this
and also have this console.log right here.
Okay? now let's try something else, like page two.
But apparently it didn't change anything.
Maybe we just have to turn off the hot module reload.
Let's try that.
Now, and now I think that these 10 here are different
or are they? Well, I'm not sure let's try page number three.
So we started with pizza dip.
So let's see what we get this time at first.
Yeah, so these actually look new to me
so it looks like Currently, we are indeed,
on page number three.
Now, okay and now just to finish this part,
here in our model, we should also store
this page number that is coming in, in the state
and that's going to be important because later
when we will display the page number here,
then we kind of need to know at which page we actually are.
Okay?
And so, this really makes sense because, again, this
is a very important piece of data about our application.
And so it's good that in any point of time,
we can know in our application on which page
we currently are in the search results.
So let's simply say state.search.page is equal to page.
And then let's actually also set it up here.
So the page, we can set it to one by default.
Okay?
And then finally, we can make this even better
and say that by default, the page should be that default.
So state.search.page.
And so now if we don't pass anything into the page,
then the page will simply become the default
of one that we just had before.
So we can remove that one from there
and it should then still be working in our own version,
so pasta this time, and yeah, so here we get or 10 results.
And so we are done with this part
but this was actually the easy part
because now we need to render the pagination buttons here
and so let's leave that for the next video.