Nice work.
We are in the home stretch, meaning we just need to add the buttons and we're good to go.
And just like with search, I going to start by creating a placeholder because I don't want to hop back
and forth and I'll name this handle page.
That's the name of my function.
And it's going to be looking for the value.
So the name of my parameter will be value.
Now, what kind of value will be passing in?
Well, I'll pass in a string of increase or decrease meaning for the next button, there's going to
be a value of increase.
And of course, for the print button, I'm going to pass in a string of decrees and I'm going to log
it for now.
But of course, eventually there is going to be a dispatch.
So here we'll set up the dispatch.
So I'll save it and we'll never get down where I have the provider, of course, I would want and my
handle.
And then I just need to check on Old Page, I believe that was the name.
And then once I said, of course I need to open up the sidebar, I am looking for the buttons.
Ejaz, that's the component where we are going to set everything up.
And as far as the return we're going to get is loading and you'll see why I'm going to implement a loading,
then I also want to get the page.
So what is the current page?
Because if we take a look at the complete project notice, I'm displaying, well, what is the page
number?
Correct.
Whether that is forty nine fifty or whatever and the number of pages.
So that is of course my total and the handle page.
So of course that is the function that is responsible for the next and preview page.
So now what I would want is to navigate back.
I have my buttons.
Awesome.
And then I have my use global context.
And of course I'm just grabbing is loading.
And then I would want to get to Page.
So what is the current page and I'm going to also get what is the total of my pages and not handle page.
So that, of course, my function years global context.
I invoke it at this point.
I can make it this one a bit smaller.
But as far as my return, I'm going to go with this here and we're going to add the class and the class
name that we're looking for is BDM container.
And then instead of this there, I would want to set up both of my buttons plus the paragraph.
So the middle one will be paragraph.
We're going to go with button and click.
This is where I would want to pass in the string in the handle page.
So that's going to be my value.
And also I'm going to go with disabled.
Now, why we're setting up disabled for both buttons is when I'm clicking next or priv, I essentially
would want to disable the button while I'm loading because what I don't want is user just basically
clicking, clicking, clicking and every time I'm invoking a feature request.
So essentially notice once you click you have a different cursor and that just signals that I cannot
click that button.
And if you want to double check, that can definitely see it.
If you take a look at the elements, we have button container.
We have, for example, pre button and check it out.
Now, once I click, you'll notice that disabled for a split second.
So what happens while we're loading?
I can't press that button again, so I can only press it once I get my data back.
So hopefully that is clear.
And of course, we can never get back.
We have the button and then I'll set disabled Treo if is loading.
So if I'm loading awesome, that means that I'm just going to disable the button.
Correct.
Because if it's loading strew then my button will be disabled.
And as far as different cursor here, take a look at the infectiousness and I believe it is all the
way in the bottom.
So it may never get there and not removed, but I'm sorry, I must grow up alone.
Yep, I messed up.
It's not in the bottom, but you'll take a look at that button container and then button and call them
disabled.
So when it is disabled, that's when I'm just playing this cursor.
So that's how I set up the scissors, just in case you are interested.
And since this is going to be priv button, of course I'm going to go on click then I need to pass in
my inline function.
Correct.
And in this case I don't care about the object, but I would want to invoke the handle page.
So that's my function.
And the like I said in the preview, I'll pass in one string, which in my case is going to be the crease
and line and the next one, meaning the one that sets up the next page.
Of course, I'll pass in the different string.
Now, as far as the value inside of the button, I'll just say over here, let's save it.
And now, of course, we have Premodern and eventually there's going to be paragraph with some values.
So for the time being, let's just say some values.
And we're going to get back there in a second.
And now I would want to copy and paste and just change this button around where, of course, this is
going to be the next button.
But I still want to keep disabled is equal to is loading.
So if I'm loading my stories, then of course I would want to disable my button.
And then as far as the value we string value, of course now it is going to be increased, then I would
want to display my pages.
So instead of the paragraph, our one display page and you're not in here, we're going to do a little
bit of cheating because remember that when we get back to data, what was the page number?
By default, of course it was zero.
Correct.
And if you want, you can keep the zero page if that is your preference.
In my case, what I'm going to do is say page plus one.
So that means is that when I have page zero, actually I'm displaying to the user that that is the first
page and then I'm just going to display, well, what is the total number of these pages?
So we have a number of pages we save.
And now, as you can see, tells me first page one out of 50.
Awesome.
So we have this functionality and then, of course, I can click click over here and what we should
see in a console.
And I think in here, I don't have to navigate to the bigger screen to say I have increase or decrease.
So if I were to on previous page and of course I have decreased and then if I want to see the next page
course, I have to increase.
Now, I'm going to navigate back to context just and I would want to dispatch a action.
Correct.
So we go to the context.
And then instead of just console logging, I'm going to go with dispatch.
And then what is going to be the name of my action?
Well, I'm going to go with Handal and on page sorry I keep on messing up.
Previously I said handle page and now I'm saying handle search.
Now this one should be handled page.
That is of course my variable.
And then as far as the payload, well, I'm going to pass in that value, whatever it is, either increase
or decrease.
And then finally in reducer, of course, we would need to handle that where we have the channel search
right after it.
We're going to go with our set up and in there, of course, we need to go, OK, then we're going to
say Handal and then Page Colen.
So so that is the syntax.
And now we have two scenarios.
We have one scenario where we are increasing and then we have another one where, of course, we are
decreasing.
And in this case, I'm going to say if action and then paillard, because remember, we're passing in
the valley and we're going to check if we are increasing.
And of course, if we are increasing, what do we want to do?
Well, we're going to go on next page.
So I'm going to set up some kind of hireable and that one will be equal state page, because remember,
in a context, that is my state value, correct.
My page.
So on here, I'm just checking.
So if I'm increasing, then please increase the state value of page by one.
And then once I set up my next page to be equal to state page plus one, technically I'm done, but
there's got to remember that we do run out of the pages so there is some kind of value.
So of course by default we have it zero.
But then once we fetch the stories from the API, we also get this data and then a number of pages.
And we can clearly see that if we navigate to our browser and we scroll down.
And of course, what I can see that at the very bottom I have a number of pages and then whatever is
the value of the page.
But then there's one more gotcha.
So not only in here, we'll have to check whether we are at the end of our data.
So essentially, if this is going to be bigger than the number of pages, then of course, I would want
to set it back to zero.
Correct.
But there's one got you will notice how we have a number of pages.
Correct.
But our default one is zero.
And what that means that if we start with zero and we have 50 pages, that just means that essentially
the last page is not going to be 50, it's going to be 49.
So if I scroll up and if you take a look at the URL, you'll see that we have, of course, page forty
nine.
So that still brings some results.
However, if you pass in 50, then of course I'm not going to get anything back.
So this is something to keep in mind.
Yes, technically this is not an array.
So this is not a JavaScript array where there are zero.
However, since our initial value, our starting value is zero and I have 50 units, meaning 50 of those
pages, then of course my last value won't be 50.
So I'm not checking for the number of 50 or number of pages.
I'll have to look for one before.
And where I'm going with this is that when we set up our if I'm not going to say if the next page is
bigger than state and then pages.
So remember the property was and B pages.
I cannot do that.
I have to go with minus one.
Why?
Well, because number of pages is going to be 50, but then the last page that returns a value is actually
forty nine.
And again, the reason for that is because we start with zero.
So in this case, I'm want to say next page is zero.
So if my next page is bigger than the last page in my data and of course I just need to go back to the
zero.
And as far as our turn, we go with the return now not and then I would want to spread out, of course,
my state.
And I just want to change the value for next page and we're almost done.
But we also need to set up decrease.
And there's one more thing that we would need to do in the context.
So in order to speed this up, we're going to copy and paste and we're looking for decrease here.
I'll use different variable.
So let me select all of them.
I'll say Prešov page.
And in this case, of course, we're decreasing by one and we're checking.
Well, what is the preview page value?
If it is less than zero, then what do we need to do when we need to set our priv page equal not to
the state and number of pages?
Again, that value won't get anything since it will pass in fifty.
We just saw it return nothing.
So we need to go to one before.
So every page is going to be equal to state number of pages.
That's the total number of pages and then minus one and again, same thing.
Page is equal to page and technically our functionality works.
We can click.
And everything looks beautiful.
Now, the problem is that we're not watching anything, so why is that happening?
Well, if we take a look at the context, when are we fetching for new stories?
Well, at the moment, when they upload and when the query changes.
Correct.
But.
Don't we need to fetch another set of stories when our page changes and of course we do so we go here
with comma and state and then page.
So when we change the value of the page, then of course we fetch a new set of stories.
And of course, I can click and I have a new set of items that represent that page.
And of course, when I'm loading notice how I kind of click multiple times so I can only click once
I'm done loading this set of data.
So of course I can keep on clicking notice.
Now I'm loading longer, so that's why I'm not able to click multiple times and effectively I want to
get to the end of her.
I want to double check whether that functionality works.
I should get to the last value and then once I have the last one, then of course I'm going to go back
to one and of course I do.
And the same is going to work if I'm going to use Brave, Beautiful.
That's our project.
If you want to start out, of course, you can do the same thing here in the browser window.
And hopefully everyone enjoyed the project.
And I hope to see your next one.