1 00:00:00,430 --> 00:00:01,040 Nice work. 2 00:00:01,330 --> 00:00:06,850 We are in the home stretch, meaning we just need to add the buttons and we're good to go. 3 00:00:07,180 --> 00:00:12,760 And just like with search, I going to start by creating a placeholder because I don't want to hop back 4 00:00:12,760 --> 00:00:15,990 and forth and I'll name this handle page. 5 00:00:16,000 --> 00:00:17,380 That's the name of my function. 6 00:00:17,680 --> 00:00:19,770 And it's going to be looking for the value. 7 00:00:20,200 --> 00:00:23,020 So the name of my parameter will be value. 8 00:00:23,350 --> 00:00:25,300 Now, what kind of value will be passing in? 9 00:00:25,720 --> 00:00:32,830 Well, I'll pass in a string of increase or decrease meaning for the next button, there's going to 10 00:00:32,830 --> 00:00:34,600 be a value of increase. 11 00:00:34,820 --> 00:00:42,230 And of course, for the print button, I'm going to pass in a string of decrees and I'm going to log 12 00:00:42,250 --> 00:00:42,750 it for now. 13 00:00:42,970 --> 00:00:45,970 But of course, eventually there is going to be a dispatch. 14 00:00:46,190 --> 00:00:48,490 So here we'll set up the dispatch. 15 00:00:48,850 --> 00:00:56,020 So I'll save it and we'll never get down where I have the provider, of course, I would want and my 16 00:00:56,260 --> 00:00:57,130 handle. 17 00:00:57,370 --> 00:01:00,400 And then I just need to check on Old Page, I believe that was the name. 18 00:01:00,790 --> 00:01:06,550 And then once I said, of course I need to open up the sidebar, I am looking for the buttons. 19 00:01:06,560 --> 00:01:10,780 Ejaz, that's the component where we are going to set everything up. 20 00:01:11,200 --> 00:01:17,650 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, 21 00:01:18,040 --> 00:01:19,800 then I also want to get the page. 22 00:01:20,080 --> 00:01:21,370 So what is the current page? 23 00:01:21,370 --> 00:01:26,050 Because if we take a look at the complete project notice, I'm displaying, well, what is the page 24 00:01:26,050 --> 00:01:26,410 number? 25 00:01:26,680 --> 00:01:27,100 Correct. 26 00:01:27,370 --> 00:01:32,260 Whether that is forty nine fifty or whatever and the number of pages. 27 00:01:32,530 --> 00:01:37,150 So that is of course my total and the handle page. 28 00:01:37,150 --> 00:01:43,090 So of course that is the function that is responsible for the next and preview page. 29 00:01:43,630 --> 00:01:46,090 So now what I would want is to navigate back. 30 00:01:46,230 --> 00:01:47,370 I have my buttons. 31 00:01:47,380 --> 00:01:47,820 Awesome. 32 00:01:48,100 --> 00:01:50,140 And then I have my use global context. 33 00:01:50,530 --> 00:01:53,140 And of course I'm just grabbing is loading. 34 00:01:54,150 --> 00:01:56,160 And then I would want to get to Page. 35 00:01:56,190 --> 00:02:03,090 So what is the current page and I'm going to also get what is the total of my pages and not handle page. 36 00:02:03,100 --> 00:02:06,090 So that, of course, my function years global context. 37 00:02:06,090 --> 00:02:08,430 I invoke it at this point. 38 00:02:08,730 --> 00:02:10,800 I can make it this one a bit smaller. 39 00:02:11,280 --> 00:02:17,640 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 40 00:02:17,640 --> 00:02:20,340 name that we're looking for is BDM container. 41 00:02:20,790 --> 00:02:24,630 And then instead of this there, I would want to set up both of my buttons plus the paragraph. 42 00:02:25,140 --> 00:02:26,850 So the middle one will be paragraph. 43 00:02:27,210 --> 00:02:30,080 We're going to go with button and click. 44 00:02:30,570 --> 00:02:34,950 This is where I would want to pass in the string in the handle page. 45 00:02:34,960 --> 00:02:36,120 So that's going to be my value. 46 00:02:36,480 --> 00:02:40,120 And also I'm going to go with disabled. 47 00:02:40,470 --> 00:02:49,260 Now, why we're setting up disabled for both buttons is when I'm clicking next or priv, I essentially 48 00:02:49,260 --> 00:02:57,360 would want to disable the button while I'm loading because what I don't want is user just basically 49 00:02:57,360 --> 00:03:03,120 clicking, clicking, clicking and every time I'm invoking a feature request. 50 00:03:03,710 --> 00:03:10,200 So essentially notice once you click you have a different cursor and that just signals that I cannot 51 00:03:10,200 --> 00:03:11,040 click that button. 52 00:03:11,310 --> 00:03:14,540 And if you want to double check, that can definitely see it. 53 00:03:14,550 --> 00:03:17,400 If you take a look at the elements, we have button container. 54 00:03:17,640 --> 00:03:20,590 We have, for example, pre button and check it out. 55 00:03:20,790 --> 00:03:24,650 Now, once I click, you'll notice that disabled for a split second. 56 00:03:24,990 --> 00:03:26,940 So what happens while we're loading? 57 00:03:27,300 --> 00:03:33,390 I can't press that button again, so I can only press it once I get my data back. 58 00:03:33,840 --> 00:03:35,840 So hopefully that is clear. 59 00:03:36,150 --> 00:03:38,250 And of course, we can never get back. 60 00:03:38,550 --> 00:03:43,880 We have the button and then I'll set disabled Treo if is loading. 61 00:03:44,280 --> 00:03:51,090 So if I'm loading awesome, that means that I'm just going to disable the button. 62 00:03:51,090 --> 00:03:51,480 Correct. 63 00:03:51,720 --> 00:03:55,710 Because if it's loading strew then my button will be disabled. 64 00:03:56,010 --> 00:04:01,920 And as far as different cursor here, take a look at the infectiousness and I believe it is all the 65 00:04:01,920 --> 00:04:02,610 way in the bottom. 66 00:04:03,710 --> 00:04:09,440 So it may never get there and not removed, but I'm sorry, I must grow up alone. 67 00:04:09,950 --> 00:04:11,120 Yep, I messed up. 68 00:04:11,150 --> 00:04:18,110 It's not in the bottom, but you'll take a look at that button container and then button and call them 69 00:04:18,110 --> 00:04:18,710 disabled. 70 00:04:19,100 --> 00:04:23,140 So when it is disabled, that's when I'm just playing this cursor. 71 00:04:23,690 --> 00:04:27,700 So that's how I set up the scissors, just in case you are interested. 72 00:04:28,130 --> 00:04:35,420 And since this is going to be priv button, of course I'm going to go on click then I need to pass in 73 00:04:35,420 --> 00:04:36,320 my inline function. 74 00:04:36,320 --> 00:04:36,710 Correct. 75 00:04:37,130 --> 00:04:43,510 And in this case I don't care about the object, but I would want to invoke the handle page. 76 00:04:43,520 --> 00:04:44,450 So that's my function. 77 00:04:44,720 --> 00:04:50,900 And the like I said in the preview, I'll pass in one string, which in my case is going to be the crease 78 00:04:51,320 --> 00:04:56,780 and line and the next one, meaning the one that sets up the next page. 79 00:04:57,070 --> 00:04:59,860 Of course, I'll pass in the different string. 80 00:05:00,200 --> 00:05:06,200 Now, as far as the value inside of the button, I'll just say over here, let's save it. 81 00:05:06,530 --> 00:05:11,930 And now, of course, we have Premodern and eventually there's going to be paragraph with some values. 82 00:05:12,290 --> 00:05:16,040 So for the time being, let's just say some values. 83 00:05:16,250 --> 00:05:19,150 And we're going to get back there in a second. 84 00:05:19,460 --> 00:05:24,110 And now I would want to copy and paste and just change this button around where, of course, this is 85 00:05:24,110 --> 00:05:25,430 going to be the next button. 86 00:05:25,430 --> 00:05:29,500 But I still want to keep disabled is equal to is loading. 87 00:05:29,750 --> 00:05:34,840 So if I'm loading my stories, then of course I would want to disable my button. 88 00:05:35,180 --> 00:05:42,890 And then as far as the value we string value, of course now it is going to be increased, then I would 89 00:05:42,890 --> 00:05:45,320 want to display my pages. 90 00:05:45,710 --> 00:05:53,150 So instead of the paragraph, our one display page and you're not in here, we're going to do a little 91 00:05:53,150 --> 00:05:58,940 bit of cheating because remember that when we get back to data, what was the page number? 92 00:05:58,940 --> 00:06:00,980 By default, of course it was zero. 93 00:06:01,280 --> 00:06:01,730 Correct. 94 00:06:02,150 --> 00:06:06,970 And if you want, you can keep the zero page if that is your preference. 95 00:06:07,340 --> 00:06:12,420 In my case, what I'm going to do is say page plus one. 96 00:06:12,920 --> 00:06:19,790 So that means is that when I have page zero, actually I'm displaying to the user that that is the first 97 00:06:19,790 --> 00:06:25,120 page and then I'm just going to display, well, what is the total number of these pages? 98 00:06:25,400 --> 00:06:29,150 So we have a number of pages we save. 99 00:06:29,180 --> 00:06:33,250 And now, as you can see, tells me first page one out of 50. 100 00:06:33,500 --> 00:06:33,960 Awesome. 101 00:06:34,460 --> 00:06:40,040 So we have this functionality and then, of course, I can click click over here and what we should 102 00:06:40,040 --> 00:06:40,910 see in a console. 103 00:06:41,360 --> 00:06:46,600 And I think in here, I don't have to navigate to the bigger screen to say I have increase or decrease. 104 00:06:47,210 --> 00:06:53,480 So if I were to on previous page and of course I have decreased and then if I want to see the next page 105 00:06:53,810 --> 00:06:55,620 course, I have to increase. 106 00:06:56,120 --> 00:07:03,500 Now, I'm going to navigate back to context just and I would want to dispatch a action. 107 00:07:03,740 --> 00:07:04,160 Correct. 108 00:07:04,610 --> 00:07:06,470 So we go to the context. 109 00:07:06,770 --> 00:07:10,760 And then instead of just console logging, I'm going to go with dispatch. 110 00:07:11,090 --> 00:07:14,180 And then what is going to be the name of my action? 111 00:07:14,510 --> 00:07:19,910 Well, I'm going to go with Handal and on page sorry I keep on messing up. 112 00:07:20,210 --> 00:07:23,870 Previously I said handle page and now I'm saying handle search. 113 00:07:23,870 --> 00:07:26,090 Now this one should be handled page. 114 00:07:26,480 --> 00:07:27,740 That is of course my variable. 115 00:07:27,950 --> 00:07:34,670 And then as far as the payload, well, I'm going to pass in that value, whatever it is, either increase 116 00:07:35,030 --> 00:07:35,870 or decrease. 117 00:07:36,260 --> 00:07:41,660 And then finally in reducer, of course, we would need to handle that where we have the channel search 118 00:07:42,020 --> 00:07:42,980 right after it. 119 00:07:44,070 --> 00:07:51,270 We're going to go with our set up and in there, of course, we need to go, OK, then we're going to 120 00:07:51,270 --> 00:07:53,910 say Handal and then Page Colen. 121 00:07:54,240 --> 00:07:55,980 So so that is the syntax. 122 00:07:56,220 --> 00:07:57,900 And now we have two scenarios. 123 00:07:58,210 --> 00:08:04,830 We have one scenario where we are increasing and then we have another one where, of course, we are 124 00:08:04,860 --> 00:08:05,510 decreasing. 125 00:08:05,880 --> 00:08:11,610 And in this case, I'm going to say if action and then paillard, because remember, we're passing in 126 00:08:11,610 --> 00:08:14,860 the valley and we're going to check if we are increasing. 127 00:08:15,450 --> 00:08:18,300 And of course, if we are increasing, what do we want to do? 128 00:08:18,960 --> 00:08:21,330 Well, we're going to go on next page. 129 00:08:21,330 --> 00:08:27,450 So I'm going to set up some kind of hireable and that one will be equal state page, because remember, 130 00:08:27,780 --> 00:08:31,320 in a context, that is my state value, correct. 131 00:08:31,710 --> 00:08:32,340 My page. 132 00:08:32,790 --> 00:08:33,960 So on here, I'm just checking. 133 00:08:34,380 --> 00:08:40,950 So if I'm increasing, then please increase the state value of page by one. 134 00:08:41,340 --> 00:08:49,350 And then once I set up my next page to be equal to state page plus one, technically I'm done, but 135 00:08:49,350 --> 00:08:56,720 there's got to remember that we do run out of the pages so there is some kind of value. 136 00:08:57,270 --> 00:09:00,110 So of course by default we have it zero. 137 00:09:00,600 --> 00:09:08,700 But then once we fetch the stories from the API, we also get this data and then a number of pages. 138 00:09:08,700 --> 00:09:14,070 And we can clearly see that if we navigate to our browser and we scroll down. 139 00:09:14,430 --> 00:09:20,910 And of course, what I can see that at the very bottom I have a number of pages and then whatever is 140 00:09:20,910 --> 00:09:22,170 the value of the page. 141 00:09:22,530 --> 00:09:24,070 But then there's one more gotcha. 142 00:09:24,360 --> 00:09:31,450 So not only in here, we'll have to check whether we are at the end of our data. 143 00:09:31,920 --> 00:09:36,900 So essentially, if this is going to be bigger than the number of pages, then of course, I would want 144 00:09:36,900 --> 00:09:38,400 to set it back to zero. 145 00:09:38,400 --> 00:09:38,820 Correct. 146 00:09:39,210 --> 00:09:42,750 But there's one got you will notice how we have a number of pages. 147 00:09:43,050 --> 00:09:43,500 Correct. 148 00:09:43,740 --> 00:09:46,350 But our default one is zero. 149 00:09:47,170 --> 00:09:54,520 And what that means that if we start with zero and we have 50 pages, that just means that essentially 150 00:09:54,520 --> 00:09:57,980 the last page is not going to be 50, it's going to be 49. 151 00:09:58,390 --> 00:10:06,460 So if I scroll up and if you take a look at the URL, you'll see that we have, of course, page forty 152 00:10:06,460 --> 00:10:06,690 nine. 153 00:10:07,000 --> 00:10:09,020 So that still brings some results. 154 00:10:09,040 --> 00:10:14,510 However, if you pass in 50, then of course I'm not going to get anything back. 155 00:10:15,070 --> 00:10:17,000 So this is something to keep in mind. 156 00:10:17,250 --> 00:10:19,840 Yes, technically this is not an array. 157 00:10:20,410 --> 00:10:23,710 So this is not a JavaScript array where there are zero. 158 00:10:24,430 --> 00:10:32,920 However, since our initial value, our starting value is zero and I have 50 units, meaning 50 of those 159 00:10:32,920 --> 00:10:36,370 pages, then of course my last value won't be 50. 160 00:10:37,090 --> 00:10:41,920 So I'm not checking for the number of 50 or number of pages. 161 00:10:42,250 --> 00:10:44,500 I'll have to look for one before. 162 00:10:44,920 --> 00:10:52,600 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 163 00:10:52,600 --> 00:10:56,100 bigger than state and then pages. 164 00:10:56,860 --> 00:11:00,010 So remember the property was and B pages. 165 00:11:00,280 --> 00:11:01,150 I cannot do that. 166 00:11:01,150 --> 00:11:03,280 I have to go with minus one. 167 00:11:03,310 --> 00:11:03,760 Why? 168 00:11:04,060 --> 00:11:10,030 Well, because number of pages is going to be 50, but then the last page that returns a value is actually 169 00:11:10,030 --> 00:11:10,680 forty nine. 170 00:11:10,930 --> 00:11:14,300 And again, the reason for that is because we start with zero. 171 00:11:14,590 --> 00:11:17,210 So in this case, I'm want to say next page is zero. 172 00:11:17,860 --> 00:11:27,970 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 173 00:11:27,970 --> 00:11:28,330 zero. 174 00:11:28,570 --> 00:11:33,880 And as far as our turn, we go with the return now not and then I would want to spread out, of course, 175 00:11:33,880 --> 00:11:34,420 my state. 176 00:11:34,660 --> 00:11:40,540 And I just want to change the value for next page and we're almost done. 177 00:11:40,690 --> 00:11:42,790 But we also need to set up decrease. 178 00:11:43,060 --> 00:11:46,390 And there's one more thing that we would need to do in the context. 179 00:11:46,840 --> 00:11:52,090 So in order to speed this up, we're going to copy and paste and we're looking for decrease here. 180 00:11:52,600 --> 00:11:54,320 I'll use different variable. 181 00:11:55,180 --> 00:11:56,850 So let me select all of them. 182 00:11:57,280 --> 00:11:59,350 I'll say Prešov page. 183 00:11:59,710 --> 00:12:04,120 And in this case, of course, we're decreasing by one and we're checking. 184 00:12:04,450 --> 00:12:06,730 Well, what is the preview page value? 185 00:12:07,240 --> 00:12:15,040 If it is less than zero, then what do we need to do when we need to set our priv page equal not to 186 00:12:15,040 --> 00:12:17,380 the state and number of pages? 187 00:12:17,720 --> 00:12:22,140 Again, that value won't get anything since it will pass in fifty. 188 00:12:22,480 --> 00:12:24,670 We just saw it return nothing. 189 00:12:24,920 --> 00:12:27,340 So we need to go to one before. 190 00:12:27,610 --> 00:12:30,930 So every page is going to be equal to state number of pages. 191 00:12:31,450 --> 00:12:37,050 That's the total number of pages and then minus one and again, same thing. 192 00:12:37,090 --> 00:12:41,590 Page is equal to page and technically our functionality works. 193 00:12:41,590 --> 00:12:42,310 We can click. 194 00:12:43,240 --> 00:12:44,880 And everything looks beautiful. 195 00:12:45,340 --> 00:12:50,440 Now, the problem is that we're not watching anything, so why is that happening? 196 00:12:50,470 --> 00:12:56,960 Well, if we take a look at the context, when are we fetching for new stories? 197 00:12:57,490 --> 00:13:01,870 Well, at the moment, when they upload and when the query changes. 198 00:13:01,990 --> 00:13:02,440 Correct. 199 00:13:02,980 --> 00:13:03,280 But. 200 00:13:04,150 --> 00:13:11,140 Don't we need to fetch another set of stories when our page changes and of course we do so we go here 201 00:13:11,140 --> 00:13:14,640 with comma and state and then page. 202 00:13:15,130 --> 00:13:20,950 So when we change the value of the page, then of course we fetch a new set of stories. 203 00:13:21,380 --> 00:13:29,140 And of course, I can click and I have a new set of items that represent that page. 204 00:13:29,140 --> 00:13:35,590 And of course, when I'm loading notice how I kind of click multiple times so I can only click once 205 00:13:35,590 --> 00:13:39,400 I'm done loading this set of data. 206 00:13:39,850 --> 00:13:42,050 So of course I can keep on clicking notice. 207 00:13:42,100 --> 00:13:48,580 Now I'm loading longer, so that's why I'm not able to click multiple times and effectively I want to 208 00:13:48,580 --> 00:13:50,020 get to the end of her. 209 00:13:50,040 --> 00:13:52,990 I want to double check whether that functionality works. 210 00:13:53,380 --> 00:14:00,850 I should get to the last value and then once I have the last one, then of course I'm going to go back 211 00:14:00,850 --> 00:14:02,740 to one and of course I do. 212 00:14:03,010 --> 00:14:06,700 And the same is going to work if I'm going to use Brave, Beautiful. 213 00:14:07,000 --> 00:14:08,260 That's our project. 214 00:14:08,270 --> 00:14:13,240 If you want to start out, of course, you can do the same thing here in the browser window. 215 00:14:13,510 --> 00:14:15,850 And hopefully everyone enjoyed the project. 216 00:14:16,150 --> 00:14:17,590 And I hope to see your next one.