Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,340 --> 00:00:03,150 So let's now finish 2 2 00:00:03,150 --> 00:00:05,223 building the pagination feature. 3 3 00:00:06,890 --> 00:00:08,980 And for that let's actually think 4 4 00:00:08,980 --> 00:00:11,653 about some different scenarios. 5 5 00:00:11,653 --> 00:00:12,540 And to do that, 6 6 00:00:12,540 --> 00:00:14,683 I will actually come here to the demo. 7 7 00:00:16,960 --> 00:00:19,890 So the buttons that we want to render down here 8 8 00:00:19,890 --> 00:00:22,090 are not always the same. 9 9 00:00:22,090 --> 00:00:25,930 So, in this first scenario we are on page one. 10 10 00:00:25,930 --> 00:00:27,630 And so therefore, 11 11 00:00:27,630 --> 00:00:31,230 only this next button here is showing, right. 12 12 00:00:31,230 --> 00:00:34,720 But there is, of course, no button to go back. 13 13 00:00:34,720 --> 00:00:39,210 Now, if we had actually less than 10 results, 14 14 00:00:39,210 --> 00:00:41,730 so basically only one search page, 15 15 00:00:41,730 --> 00:00:44,003 then there would be no buttons at all. 16 16 00:00:45,750 --> 00:00:48,180 Then if we are on some other page, 17 17 00:00:48,180 --> 00:00:50,430 which is not the first page, 18 18 00:00:50,430 --> 00:00:52,730 well, then we have a button to go back 19 19 00:00:52,730 --> 00:00:54,800 and one to go forward. 20 20 00:00:54,800 --> 00:00:57,760 So that is basically the third scenario. 21 21 00:00:57,760 --> 00:01:00,950 And then if we go all the way to the last page, 22 22 00:01:00,950 --> 00:01:03,723 then we only have a button to go back. 23 23 00:01:04,700 --> 00:01:06,330 And so we have to account 24 24 00:01:06,330 --> 00:01:09,860 for all of these different scenarios, okay. 25 25 00:01:09,860 --> 00:01:11,240 So let's go back 26 26 00:01:11,240 --> 00:01:13,970 and basically implement a new view 27 27 00:01:13,970 --> 00:01:15,963 for this pagination. 28 28 00:01:17,420 --> 00:01:19,650 So, here in the views, 29 29 00:01:19,650 --> 00:01:23,493 we create a new file called paginationView.js. 30 30 00:01:28,410 --> 00:01:32,830 And here let's actually copy some code from here 31 31 00:01:32,830 --> 00:01:34,680 so we don't have the same work 32 32 00:01:34,680 --> 00:01:35,983 over and over again. 33 33 00:01:39,560 --> 00:01:42,773 Then of course, this one here is called PaginationView, 34 34 00:01:45,836 --> 00:01:49,450 and the parent element is not this one, 35 35 00:01:49,450 --> 00:01:51,873 so let's go check out or markup. 36 36 00:01:53,584 --> 00:01:57,740 And so here we already are had the right element. 37 37 00:01:57,740 --> 00:02:02,250 So you see that after this unordered list of results, 38 38 00:02:02,250 --> 00:02:06,710 we have this div element with a class of pagination. 39 39 00:02:06,710 --> 00:02:10,090 And so then this one here already contains the template 40 40 00:02:10,090 --> 00:02:12,180 for a button to go back, 41 41 00:02:12,180 --> 00:02:13,800 so to the previous page, 42 42 00:02:13,800 --> 00:02:16,053 and one button to go to the next page. 43 43 00:02:17,640 --> 00:02:19,770 So we're going to need this soon 44 44 00:02:19,770 --> 00:02:24,770 but for now let's just complete this setup here, okay. 45 45 00:02:27,240 --> 00:02:29,770 And so now just as all the other classes, 46 46 00:02:29,770 --> 00:02:33,549 we will have a generate markup method here, 47 47 00:02:33,549 --> 00:02:34,799 generateMarkup, 48 48 00:02:37,270 --> 00:02:40,060 because remember, that is the method 49 49 00:02:40,060 --> 00:02:42,920 that the render method is going to call 50 50 00:02:42,920 --> 00:02:44,900 in order to generate the markup 51 51 00:02:44,900 --> 00:02:49,250 for the view that we're working on, right. 52 52 00:02:49,250 --> 00:02:52,030 So again, every view, at least every view 53 53 00:02:52,030 --> 00:02:55,070 that renders something to the user interface 54 54 00:02:55,070 --> 00:02:57,543 needs a generate markup method. 55 55 00:02:58,610 --> 00:03:00,600 So that's this one here. 56 56 00:03:00,600 --> 00:03:02,020 And so now let's account 57 57 00:03:02,020 --> 00:03:05,143 for these different scenarios that we just saw. 58 58 00:03:06,410 --> 00:03:10,740 So let's say the first one is, we are at page one, 59 59 00:03:10,740 --> 00:03:14,663 and there are other pages. 60 60 00:03:15,660 --> 00:03:18,040 Then the next one is we are on page one, 61 61 00:03:18,040 --> 00:03:22,160 and there are no other pages. 62 62 00:03:22,160 --> 00:03:24,440 Then there is the scenario that we are 63 63 00:03:25,680 --> 00:03:27,380 on the last page, 64 64 00:03:27,380 --> 00:03:28,950 and also the scenario 65 65 00:03:28,950 --> 00:03:33,363 that we are on some other page, basically. 66 66 00:03:34,470 --> 00:03:39,470 So other page, like this, okay. 67 67 00:03:39,530 --> 00:03:43,890 So what data do we need in order to figure out 68 68 00:03:43,890 --> 00:03:45,530 if we are on page one, 69 69 00:03:45,530 --> 00:03:47,623 and if there are other pages? 70 70 00:03:48,520 --> 00:03:52,800 Well, for that, we are going to need, basically, 71 71 00:03:52,800 --> 00:03:56,270 this entire search object here. 72 72 00:03:56,270 --> 00:03:58,720 So this contains all the search results, 73 73 00:03:58,720 --> 00:04:02,760 and also the current page and the results per page. 74 74 00:04:02,760 --> 00:04:04,860 And so we will need all of this data 75 75 00:04:04,860 --> 00:04:05,940 in order to compute 76 76 00:04:05,940 --> 00:04:10,090 which buttons should be displayed, all right. 77 77 00:04:10,090 --> 00:04:12,710 And so let's actually go to our controller, 78 78 00:04:12,710 --> 00:04:14,960 and already call the render function 79 79 00:04:14,960 --> 00:04:18,000 so that we can parse in the data that we need, 80 80 00:04:18,000 --> 00:04:20,083 and so that we can then use it. 81 81 00:04:20,920 --> 00:04:23,590 And, well, when do we actually want 82 82 00:04:23,590 --> 00:04:25,840 to display the pagination? 83 83 00:04:25,840 --> 00:04:28,600 Well, it's actually right at the moment 84 84 00:04:28,600 --> 00:04:31,203 when we are also displaying the search results. 85 85 00:04:32,240 --> 00:04:34,510 So we will actually do that right here 86 86 00:04:34,510 --> 00:04:36,313 after displaying the results. 87 87 00:04:37,160 --> 00:04:38,830 So we get the search query, 88 88 00:04:38,830 --> 00:04:42,050 load the search results, render the results, 89 89 00:04:42,050 --> 00:04:47,050 and then also render the initial pagination buttons. 90 90 00:04:51,810 --> 00:04:55,190 And so now here we actually need to export this view, 91 91 00:04:55,190 --> 00:04:58,430 so that we can then import it into the controller. 92 92 00:04:58,430 --> 00:05:01,873 So just like we have been doing in all the other views, 93 93 00:05:02,720 --> 00:05:05,480 we say export default, 94 94 00:05:05,480 --> 00:05:09,093 and then a new PaginationView object. 95 95 00:05:10,370 --> 00:05:15,093 And so then we come here and import that. 96 96 00:05:17,560 --> 00:05:22,030 So results becomes pagination, 97 97 00:05:22,030 --> 00:05:23,850 and now of course that view 98 98 00:05:23,850 --> 00:05:25,633 has a render method on it. 99 99 00:05:27,520 --> 00:05:31,100 So paginationView.render, 100 100 00:05:31,100 --> 00:05:32,840 and here we need to parse in 101 101 00:05:32,840 --> 00:05:36,590 basically the entire search object. 102 102 00:05:36,590 --> 00:05:40,910 So state.search. 103 103 00:05:40,910 --> 00:05:45,320 And actually that's model.state.search. 104 104 00:05:45,320 --> 00:05:46,193 And so now, 105 105 00:05:47,390 --> 00:05:50,340 through the magic of this view class here, 106 106 00:05:50,340 --> 00:05:51,893 we now get access to this data 107 107 00:05:51,893 --> 00:05:55,567 that we just parsed in, in this._data, right. 108 108 00:05:59,100 --> 00:06:01,600 So right here, this._data 109 109 00:06:02,880 --> 00:06:06,913 is now the entire search results object basically. 110 110 00:06:07,800 --> 00:06:11,410 So, in order to figure out if we are on page one 111 111 00:06:11,410 --> 00:06:13,180 and there are other pages, 112 112 00:06:13,180 --> 00:06:16,200 we need to know how many pages there are. 113 113 00:06:16,200 --> 00:06:18,063 So, let's compute that. 114 114 00:06:19,220 --> 00:06:20,843 So const numPages, 115 115 00:06:22,620 --> 00:06:25,333 and how do we actually know the number of pages? 116 116 00:06:26,200 --> 00:06:28,970 Well, basically we need the number of results 117 117 00:06:28,970 --> 00:06:33,360 divided by the number of results per page, right. 118 118 00:06:33,360 --> 00:06:36,040 So for example if we had 60 results, 119 119 00:06:36,040 --> 00:06:40,710 and 10 results per page, then, we had six pages. 120 120 00:06:40,710 --> 00:06:45,577 So, the number of results comes from this.data.results. 121 121 00:06:51,390 --> 00:06:54,320 So let's check that in the model here again. 122 122 00:06:54,320 --> 00:06:57,490 So results, again, is the entire array, 123 123 00:06:57,490 --> 00:07:00,480 which contains, so all the search results, 124 124 00:07:00,480 --> 00:07:03,230 and then we also have results per page, 125 125 00:07:03,230 --> 00:07:05,840 which is this configuration constant 126 126 00:07:05,840 --> 00:07:08,840 that we set to 10, remember. 127 127 00:07:08,840 --> 00:07:10,630 So let me copy this, 128 128 00:07:10,630 --> 00:07:14,180 and then here we will divide that. 129 129 00:07:14,180 --> 00:07:17,413 So this.data.resultsPerPage. 130 130 00:07:19,100 --> 00:07:21,020 And this is a very important variable, 131 131 00:07:21,020 --> 00:07:24,710 so let's start by logging it to the console, 132 132 00:07:24,710 --> 00:07:26,720 and with this, we will then also know 133 133 00:07:26,720 --> 00:07:29,670 if we correctly hooked everything up here. 134 134 00:07:29,670 --> 00:07:31,487 So basically, if this render here 135 135 00:07:31,487 --> 00:07:35,053 of the pagination view is already doing its work. 136 136 00:07:36,430 --> 00:07:37,573 So let's see. 137 137 00:07:41,070 --> 00:07:42,453 Searching for pizza. 138 138 00:07:44,130 --> 00:07:48,580 Well, here we get some, (chuckles) not a number. 139 139 00:07:48,580 --> 00:07:50,300 And of course, well, 140 140 00:07:50,300 --> 00:07:53,760 here actually we already have something rendered. 141 141 00:07:53,760 --> 00:07:56,230 And so that's undefined because right now 142 142 00:07:56,230 --> 00:08:00,400 we are not returning anything from this function. 143 143 00:08:00,400 --> 00:08:02,660 And so if we don't return anything 144 144 00:08:02,660 --> 00:08:05,310 by default undefined is returned, 145 145 00:08:05,310 --> 00:08:09,283 and so that's 10 basically rendered here to the page. 146 146 00:08:10,300 --> 00:08:12,160 But anyway, what matters here 147 147 00:08:12,160 --> 00:08:15,730 is that for some reason we got not a number. 148 148 00:08:15,730 --> 00:08:18,810 So that means, ah! 149 149 00:08:18,810 --> 00:08:20,690 And I know why here. 150 150 00:08:20,690 --> 00:08:24,630 So here, this is the entire array, right. 151 151 00:08:24,630 --> 00:08:27,440 So we are dividing this array by the number. 152 152 00:08:27,440 --> 00:08:30,633 But of course what we want is the length of the array. 153 153 00:08:33,430 --> 00:08:35,023 So let's try that again. 154 154 00:08:36,700 --> 00:08:40,950 Yeah, now we get 5.9 pages. 155 155 00:08:40,950 --> 00:08:43,000 And of course we now need to round that 156 156 00:08:43,000 --> 00:08:45,790 to the next highest integer. 157 157 00:08:45,790 --> 00:08:50,763 And so for that we simply use Math.ceil, remember. 158 158 00:08:52,250 --> 00:08:56,550 And so this will now become six, okay. 159 159 00:08:56,550 --> 00:09:00,193 So, let's do some check here. 160 160 00:09:01,150 --> 00:09:03,330 So if we're currently on page one, 161 161 00:09:03,330 --> 00:09:08,330 which is this.data.page equals one. 162 162 00:09:11,810 --> 00:09:13,370 And so now it is very important 163 163 00:09:13,370 --> 00:09:17,960 that we actually have the current page in this state, right. 164 164 00:09:17,960 --> 00:09:19,743 So that's why we put it right here. 165 165 00:09:20,830 --> 00:09:24,700 So whenever the getSearchResultsPage method 166 166 00:09:24,700 --> 00:09:27,173 is being called with some value. 167 167 00:09:28,800 --> 00:09:30,380 So just to illustrate this, 168 168 00:09:30,380 --> 00:09:33,563 let's actually render the results at page two, 169 169 00:09:34,960 --> 00:09:38,023 just to then test if what we have here works. 170 170 00:09:39,000 --> 00:09:42,570 But anyway, here we are testing if we're on page one. 171 171 00:09:42,570 --> 00:09:46,780 And so that's this.data.page equals one, 172 172 00:09:46,780 --> 00:09:48,860 and there are other pages. 173 173 00:09:48,860 --> 00:09:50,600 And so basically that means 174 174 00:09:50,600 --> 00:09:53,210 that the current page needs to be less 175 175 00:09:53,210 --> 00:09:55,070 than the number of pages. 176 176 00:09:55,070 --> 00:09:56,630 And so that basically means 177 177 00:09:56,630 --> 00:09:59,763 that number of pages here is greater than one. 178 178 00:10:00,840 --> 00:10:04,433 So numPages greater than one. 179 179 00:10:05,490 --> 00:10:07,833 So this is our first if check, 180 180 00:10:09,270 --> 00:10:14,270 let's actually log that to the console page one 181 181 00:10:14,790 --> 00:10:16,370 and others. 182 182 00:10:16,370 --> 00:10:18,893 Or actually let's even return that string. 183 183 00:10:19,900 --> 00:10:22,983 'Cause we already know that this will then get printed. 184 184 00:10:24,470 --> 00:10:25,720 Even though of course, 185 185 00:10:25,720 --> 00:10:27,693 this is not at all what we want. 186 186 00:10:28,620 --> 00:10:31,270 Now this one here we will leave to the end. 187 187 00:10:31,270 --> 00:10:32,923 So let's continue with this one. 188 188 00:10:34,690 --> 00:10:37,723 So being on the last page basically means 189 189 00:10:37,723 --> 00:10:39,130 that the current page 190 190 00:10:39,130 --> 00:10:43,950 is the same as the number of pages, right. 191 191 00:10:43,950 --> 00:10:48,950 So data.page is equal the number of pages. 192 192 00:10:51,280 --> 00:10:54,100 So in the current example we have six pages. 193 193 00:10:54,100 --> 00:10:57,120 And so if the current page is number six, 194 194 00:10:57,120 --> 00:11:00,173 well, then that means we are on the last page. 195 195 00:11:01,550 --> 00:11:06,550 So here let's return last page. 196 196 00:11:11,540 --> 00:11:13,800 Then here some other page, 197 197 00:11:13,800 --> 00:11:16,260 basically simply means that the current page 198 198 00:11:16,260 --> 00:11:18,423 is less than the number of pages. 199 199 00:11:21,830 --> 00:11:24,840 And if any of what I'm saying doesn't make sense, 200 200 00:11:24,840 --> 00:11:26,910 then probably the best thing to do 201 201 00:11:26,910 --> 00:11:28,560 is to pause the video, 202 202 00:11:28,560 --> 00:11:30,623 and think about this on your own. 203 203 00:11:31,610 --> 00:11:33,773 So that's always my advice. 204 204 00:11:35,030 --> 00:11:38,280 So basically, reflecting on what I'm saying 205 205 00:11:38,280 --> 00:11:42,700 is usually the best solution to really figuring out 206 206 00:11:42,700 --> 00:11:45,990 what exactly it is what I'm doing here. 207 207 00:11:45,990 --> 00:11:49,060 So of course I'm trying my best to explain everything, 208 208 00:11:49,060 --> 00:11:50,260 but at a certain point, 209 209 00:11:50,260 --> 00:11:53,390 you also have to take a look at the code 210 210 00:11:53,390 --> 00:11:56,123 and think about it on your own a bit. 211 211 00:11:57,320 --> 00:12:00,640 But anyway, this actually already covers 212 212 00:12:00,640 --> 00:12:01,913 all of the scenarios. 213 213 00:12:03,220 --> 00:12:05,970 So if none of these scenarios here is met, 214 214 00:12:05,970 --> 00:12:09,480 then that basically means that we are on page one, 215 215 00:12:09,480 --> 00:12:11,383 and there are no other pages. 216 216 00:12:17,447 --> 00:12:21,447 And so in this case we can return only one page. 217 217 00:12:24,450 --> 00:12:27,400 And actually that is not really true 218 218 00:12:27,400 --> 00:12:30,110 because let's say that we only had one, 219 219 00:12:30,110 --> 00:12:32,350 so that numPage would be one, 220 220 00:12:32,350 --> 00:12:35,570 then actually this here would also be true. 221 221 00:12:35,570 --> 00:12:38,550 So here we have to add the same as before, 222 222 00:12:38,550 --> 00:12:41,593 so numPages needs to be also greater than one. 223 223 00:12:42,530 --> 00:12:45,290 So then we are really on the last page 224 224 00:12:45,290 --> 00:12:47,870 and need to render some other buttons. 225 225 00:12:47,870 --> 00:12:49,430 So, but to test this, 226 226 00:12:49,430 --> 00:12:52,173 let's keep in mind that we are currently on page two. 227 227 00:12:53,430 --> 00:12:54,270 And so therefore, 228 228 00:12:54,270 --> 00:12:57,983 we want to now see other page rendered. 229 229 00:13:01,130 --> 00:13:03,090 So let's see. 230 230 00:13:03,090 --> 00:13:06,670 And indeed, there we have another page. 231 231 00:13:06,670 --> 00:13:08,443 Now let's try page number six. 232 232 00:13:14,630 --> 00:13:17,470 So here we see we have six pages, 233 233 00:13:17,470 --> 00:13:19,653 and so now it says last page. 234 234 00:13:20,670 --> 00:13:21,890 Great. 235 235 00:13:21,890 --> 00:13:23,393 And now page number one. 236 236 00:13:25,490 --> 00:13:27,363 And so one more time. 237 237 00:13:29,600 --> 00:13:33,310 And so page one but there are other pages. 238 238 00:13:33,310 --> 00:13:34,190 Great. 239 239 00:13:34,190 --> 00:13:37,090 So this was I think the hardest part, 240 240 00:13:37,090 --> 00:13:39,790 so figuring out these different scenarios. 241 241 00:13:39,790 --> 00:13:42,903 And now all we need to do is to create the markup. 242 242 00:13:43,870 --> 00:13:48,400 So let's come here to the HTML and grab this code. 243 243 00:13:48,400 --> 00:13:51,463 So this is the code for going to the previous page. 244 244 00:13:55,510 --> 00:13:58,700 So when do we want to go to the previous page? 245 245 00:13:58,700 --> 00:14:00,693 Well, for example right here, 246 246 00:14:01,570 --> 00:14:04,050 on the last page, right. 247 247 00:14:04,050 --> 00:14:08,023 So here, in fact, we only want exactly that one button. 248 248 00:14:13,330 --> 00:14:17,470 Now what is the page here that we want to go to? 249 249 00:14:17,470 --> 00:14:19,860 So we need this number here. 250 250 00:14:19,860 --> 00:14:23,943 Well, that page is basically the current one minus one. 251 251 00:14:25,630 --> 00:14:26,463 Right. 252 252 00:14:27,500 --> 00:14:32,500 So, we are using this this.data.page a lot of times, 253 253 00:14:33,040 --> 00:14:34,943 so let's store that in a variable. 254 254 00:14:37,360 --> 00:14:42,360 So, yeah, const current page is this. 255 255 00:14:46,030 --> 00:14:50,150 And so now let's replace that everywhere here 256 256 00:14:50,150 --> 00:14:52,053 with current page. 257 257 00:14:53,250 --> 00:14:58,250 So here we will then want the current page minus one. 258 258 00:14:59,420 --> 00:15:02,473 And here we need to replace the icons. 259 259 00:15:05,710 --> 00:15:06,543 Okay. 260 260 00:15:07,640 --> 00:15:09,690 Then here on page one, 261 261 00:15:09,690 --> 00:15:12,100 we basically need the opposite. 262 262 00:15:12,100 --> 00:15:15,060 So again, we only want just one button 263 263 00:15:15,060 --> 00:15:18,080 but the one to go to the next page. 264 264 00:15:18,080 --> 00:15:19,323 So let's grab it. 265 265 00:15:20,370 --> 00:15:23,363 And actually it's almost the same markup. 266 266 00:15:26,890 --> 00:15:29,633 So another nice template literal. 267 267 00:15:35,000 --> 00:15:38,493 And now here it says page three. 268 268 00:15:39,530 --> 00:15:40,630 And so of course, 269 269 00:15:40,630 --> 00:15:45,133 here we will now want to go to the current page plus one. 270 270 00:15:48,150 --> 00:15:49,330 Right. 271 271 00:15:49,330 --> 00:15:52,653 And then here, again, we need to replace the icons. 272 272 00:15:57,560 --> 00:15:58,423 Okay. 273 273 00:15:59,670 --> 00:16:02,740 And then here for the other page, 274 274 00:16:02,740 --> 00:16:04,893 we want basically both of them. 275 275 00:16:05,990 --> 00:16:09,150 So let's return this, 276 276 00:16:09,150 --> 00:16:11,270 or actually this one here. 277 277 00:16:11,270 --> 00:16:13,863 So first the button to go back. 278 278 00:16:17,038 --> 00:16:20,747 And then also add the button to go forward. 279 279 00:16:23,730 --> 00:16:28,470 All right, and then when we're on page one, 280 280 00:16:28,470 --> 00:16:30,530 then we simply return nothing, 281 281 00:16:30,530 --> 00:16:33,900 because here we don't want to render any button. 282 282 00:16:33,900 --> 00:16:35,300 So if there are no other pages 283 283 00:16:35,300 --> 00:16:37,573 there's nowhere to go, of course. 284 284 00:16:38,630 --> 00:16:40,110 All right. 285 285 00:16:40,110 --> 00:16:42,950 So let's see what page we are currently on, 286 286 00:16:42,950 --> 00:16:44,600 so page one. 287 287 00:16:44,600 --> 00:16:48,217 And so that should render then this button here. 288 288 00:16:50,870 --> 00:16:54,610 So saying, page two. 289 289 00:16:54,610 --> 00:16:55,483 So let's see. 290 290 00:16:57,130 --> 00:17:00,050 And indeed, page two. 291 291 00:17:00,050 --> 00:17:01,500 Now of course if we click here 292 292 00:17:01,500 --> 00:17:03,400 then nothing's going to happen, 293 293 00:17:03,400 --> 00:17:05,273 but for now that is not the point. 294 294 00:17:06,440 --> 00:17:08,723 Let's try page number four now. 295 295 00:17:13,560 --> 00:17:18,560 So, go back to page three or forward to page five. 296 296 00:17:19,200 --> 00:17:21,030 So beautiful. 297 297 00:17:21,030 --> 00:17:22,850 So it looks like it's working, 298 298 00:17:22,850 --> 00:17:26,313 let's just try the last page here now. 299 299 00:17:30,760 --> 00:17:32,293 Oh, what's going on here? 300 300 00:17:36,420 --> 00:17:39,990 And indeed, it says to go back to page five 301 301 00:17:39,990 --> 00:17:42,450 but no page to go forward. 302 302 00:17:42,450 --> 00:17:44,040 So that's awesome. 303 303 00:17:44,040 --> 00:17:46,170 Now the next thing that we need to do here 304 304 00:17:46,170 --> 00:17:50,130 is to then add an event listener to these buttons, 305 305 00:17:50,130 --> 00:17:52,860 so that we can then actually go back 306 306 00:17:52,860 --> 00:17:55,300 and display another page. 307 307 00:17:55,300 --> 00:17:58,290 So right now, this is not useful at all 308 308 00:17:58,290 --> 00:18:00,480 but at least we already have our buttons here 309 309 00:18:00,480 --> 00:18:02,560 showing up right in the beginning 310 310 00:18:02,560 --> 00:18:04,533 when the search results are loaded. 311 311 00:18:06,400 --> 00:18:08,000 Okay. 312 312 00:18:08,000 --> 00:18:11,980 Now, this code here could of course be refactored 313 313 00:18:11,980 --> 00:18:14,180 because we are repeating a lot of code here. 314 314 00:18:15,310 --> 00:18:19,130 So this button is the same as this next button 315 315 00:18:19,130 --> 00:18:23,300 and the previous button is also the same here, okay. 316 316 00:18:23,300 --> 00:18:24,940 So we could refactor that 317 317 00:18:24,940 --> 00:18:27,060 but I will actually not do it here, 318 318 00:18:27,060 --> 00:18:29,940 and instead leave it for you as a challenge. 319 319 00:18:29,940 --> 00:18:32,310 So you might create a method called, 320 320 00:18:32,310 --> 00:18:35,230 for example, generate markup button, 321 321 00:18:35,230 --> 00:18:38,920 and then refactor that code in that method. 322 322 00:18:38,920 --> 00:18:42,020 But here, I'm not gonna waste any more time, 323 323 00:18:42,020 --> 00:18:44,030 and instead, I will go immediately 324 324 00:18:44,030 --> 00:18:46,750 to adding the event listener. 325 325 00:18:46,750 --> 00:18:48,230 Now just like before, 326 326 00:18:48,230 --> 00:18:51,970 we need to use the publisher subscriber pattern, 327 327 00:18:51,970 --> 00:18:54,050 just like we did, for example here, 328 328 00:18:54,050 --> 00:18:56,573 in the recipe view, remember? 329 329 00:18:57,580 --> 00:19:01,210 So, again that works by creating a publisher, 330 330 00:19:01,210 --> 00:19:03,640 which is basically a function 331 331 00:19:03,640 --> 00:19:06,260 which is the one listening for the event, 332 332 00:19:06,260 --> 00:19:08,600 which receives a handler function, 333 333 00:19:08,600 --> 00:19:11,709 which in our case, is going to be a controller 334 334 00:19:11,709 --> 00:19:13,940 that lives here in the controller. 335 335 00:19:13,940 --> 00:19:14,890 And so with this, 336 336 00:19:14,890 --> 00:19:17,770 we will then be able to listen for the event 337 337 00:19:17,770 --> 00:19:20,620 here in the view where it makes sense, 338 338 00:19:20,620 --> 00:19:22,030 while at the same time, 339 339 00:19:22,030 --> 00:19:24,070 being able to handle that event 340 340 00:19:24,070 --> 00:19:27,023 from the controller, basically, okay. 341 341 00:19:28,180 --> 00:19:31,333 So, let's add that method here. 342 342 00:19:32,300 --> 00:19:33,483 So addHandler, 343 343 00:19:35,360 --> 00:19:36,773 I'm just calling it click. 344 344 00:19:37,680 --> 00:19:40,213 So for a click on one of the buttons. 345 345 00:19:42,060 --> 00:19:43,530 Okay. 346 346 00:19:43,530 --> 00:19:47,230 Now here we are going to use event delegation, 347 347 00:19:47,230 --> 00:19:49,720 because there are going to be two buttons, 348 348 00:19:49,720 --> 00:19:50,553 but of course, 349 349 00:19:50,553 --> 00:19:54,200 we don't want to listen to each of them individually. 350 350 00:19:54,200 --> 00:19:57,170 So instead, we will add the event listener 351 351 00:19:57,170 --> 00:19:59,833 to the common parent element, 352 352 00:20:00,680 --> 00:20:02,703 which is indeed this.parentElement. 353 353 00:20:06,360 --> 00:20:07,410 So .addEventListener, 354 354 00:20:10,342 --> 00:20:14,120 and this time, finally, listening for a click. 355 355 00:20:15,668 --> 00:20:17,930 And then here we have a function, 356 356 00:20:17,930 --> 00:20:20,570 because we cannot immediately call the handler 357 357 00:20:20,570 --> 00:20:22,170 that comes in here, 358 358 00:20:22,170 --> 00:20:24,740 because first, we will need to figure out 359 359 00:20:24,740 --> 00:20:26,970 which button was actually clicked, 360 360 00:20:26,970 --> 00:20:28,463 based on the event. 361 361 00:20:29,390 --> 00:20:31,370 So that's event delegation 362 362 00:20:31,370 --> 00:20:34,550 and I hope you remember how it works. 363 363 00:20:34,550 --> 00:20:39,550 So in this case we can simply create a button element 364 364 00:20:40,950 --> 00:20:43,210 and select the closest button element 365 365 00:20:43,210 --> 00:20:45,320 to the clicked element. 366 366 00:20:45,320 --> 00:20:48,550 So the clicked element is e.target, 367 367 00:20:48,550 --> 00:20:51,380 and then closest, 368 368 00:20:51,380 --> 00:20:54,040 which is really an amazing method. 369 369 00:20:54,040 --> 00:20:55,403 And so here we can now, 370 370 00:20:57,130 --> 00:21:00,540 basically look for this button. 371 371 00:21:00,540 --> 00:21:04,963 So for the element with this class, all right. 372 372 00:21:05,800 --> 00:21:08,480 So remember that the closest method 373 373 00:21:08,480 --> 00:21:10,610 is a little bit like query selector, 374 374 00:21:10,610 --> 00:21:13,120 but instead for searching down in the tree, 375 375 00:21:13,120 --> 00:21:14,730 so for children, 376 376 00:21:14,730 --> 00:21:17,430 it basically searches up in the tree. 377 377 00:21:17,430 --> 00:21:19,380 So it looks for parents. 378 378 00:21:19,380 --> 00:21:22,750 And this is important because here in the button, 379 379 00:21:22,750 --> 00:21:26,220 we might actually click on this span element, 380 380 00:21:26,220 --> 00:21:29,340 or on this SVG or this use, 381 381 00:21:29,340 --> 00:21:32,150 instead of clicking on the button itself. 382 382 00:21:32,150 --> 00:21:35,730 So we cannot simply set the button to e.target, 383 383 00:21:35,730 --> 00:21:37,990 but we actually need to search 384 384 00:21:37,990 --> 00:21:40,333 for the closest button element itself. 385 385 00:21:41,360 --> 00:21:43,550 And just to see that this works, 386 386 00:21:43,550 --> 00:21:46,390 let's actually now create our controller. 387 387 00:21:46,390 --> 00:21:48,470 So here we will then log that button 388 388 00:21:48,470 --> 00:21:52,400 to the console only for now, all right. 389 389 00:21:52,400 --> 00:21:54,600 And so now let's go to the controller 390 390 00:21:54,600 --> 00:21:57,173 and as always create a new controller here. 391 391 00:21:58,360 --> 00:22:00,400 So basically this is the controller 392 392 00:22:00,400 --> 00:22:02,830 that will be executed whenever a click 393 393 00:22:02,830 --> 00:22:04,563 on one of the buttons happens. 394 394 00:22:06,620 --> 00:22:11,620 So controlPagination is a function, 395 395 00:22:14,710 --> 00:22:17,840 which for now doesn't really do anything, 396 396 00:22:17,840 --> 00:22:21,970 let's just call it Pag controller. 397 397 00:22:21,970 --> 00:22:24,143 So simply logging this to the console, 398 398 00:22:25,190 --> 00:22:27,223 but what matters here is that now, 399 399 00:22:28,170 --> 00:22:32,900 we call the paginationView and addhandlerClick. 400 400 00:22:32,900 --> 00:22:35,600 And so this will then, of course, 401 401 00:22:35,600 --> 00:22:37,240 call this function here, 402 402 00:22:37,240 --> 00:22:40,230 which in turn will call addEventListener, 403 403 00:22:40,230 --> 00:22:43,080 so that we can start listening for the click event 404 404 00:22:43,930 --> 00:22:48,313 on this pagination element, okay. 405 405 00:22:49,260 --> 00:22:52,063 Now here we also parse in the handler. 406 406 00:22:53,100 --> 00:22:55,840 So that's controlPagination, 407 407 00:22:55,840 --> 00:22:59,650 And so just, again to check if everything is working, 408 408 00:22:59,650 --> 00:23:02,823 let's simply also call that handler right here. 409 409 00:23:03,960 --> 00:23:06,590 So once we click on the button now, 410 410 00:23:06,590 --> 00:23:09,740 we should see this button logged to the console, 411 411 00:23:09,740 --> 00:23:13,000 and then also the handler function should run, 412 412 00:23:13,000 --> 00:23:15,880 which is, of course, this one, 413 413 00:23:15,880 --> 00:23:19,250 and so that should then log Pag controller. 414 414 00:23:19,250 --> 00:23:20,363 So let's see. 415 415 00:23:24,230 --> 00:23:27,440 So looks like we're still on the last page. 416 416 00:23:27,440 --> 00:23:30,530 Let's click and yeah. 417 417 00:23:30,530 --> 00:23:33,350 So everything works as expected, 418 418 00:23:33,350 --> 00:23:35,890 we have the button correctly selected, 419 419 00:23:35,890 --> 00:23:38,643 and it also says pagination controller. 420 420 00:23:39,720 --> 00:23:40,670 Great. 421 421 00:23:40,670 --> 00:23:44,270 So now we have the click on the button, 422 422 00:23:44,270 --> 00:23:46,210 so it is correctly selected 423 423 00:23:46,210 --> 00:23:48,553 but why did we actually select the button? 424 424 00:23:49,520 --> 00:23:52,220 Well, we need a way of knowing 425 425 00:23:52,220 --> 00:23:55,760 which is the page where we need to go now. 426 426 00:23:55,760 --> 00:23:58,080 So it says here page five 427 427 00:23:58,080 --> 00:23:59,483 but how will JavaScript know 428 428 00:23:59,483 --> 00:24:01,960 that it should now actually display 429 429 00:24:01,960 --> 00:24:04,920 the results of page number five here? 430 430 00:24:04,920 --> 00:24:08,050 Well, this is where we, one more time, 431 431 00:24:08,050 --> 00:24:10,730 need to basically establish a connection 432 432 00:24:10,730 --> 00:24:13,810 between the dumb and our code. 433 433 00:24:13,810 --> 00:24:15,920 And so remember that we can do that 434 434 00:24:15,920 --> 00:24:18,123 using the custom data attributes. 435 435 00:24:19,130 --> 00:24:20,490 So what we will do here 436 436 00:24:20,490 --> 00:24:22,520 is to create a data attribute 437 437 00:24:22,520 --> 00:24:24,240 on each of the buttons, 438 438 00:24:24,240 --> 00:24:27,710 which will contain the page that we want to go to. 439 439 00:24:27,710 --> 00:24:29,290 And so then in our code, 440 440 00:24:29,290 --> 00:24:33,100 we can read that data and make JavaScript 441 441 00:24:33,100 --> 00:24:36,670 or make our application go to that exact page. 442 442 00:24:36,670 --> 00:24:40,110 And so this is basically the final piece 443 443 00:24:40,110 --> 00:24:44,180 of the puzzle, okay. 444 444 00:24:44,180 --> 00:24:45,540 So here in our button, 445 445 00:24:45,540 --> 00:24:48,173 let's now add that data attribute, 446 446 00:24:49,640 --> 00:24:53,293 so data, and I'm gonna call it goto. 447 447 00:24:56,860 --> 00:24:59,190 And so the page to want to go to 448 448 00:24:59,190 --> 00:25:01,093 is exactly the same as this one. 449 449 00:25:02,870 --> 00:25:05,590 So basically exactly the same that it says 450 450 00:25:06,700 --> 00:25:08,303 in the button text itself. 451 451 00:25:09,720 --> 00:25:11,453 So now let's copy that everywhere. 452 452 00:25:12,540 --> 00:25:15,653 Here it is page number, so minus one. 453 453 00:25:17,980 --> 00:25:19,513 Here again minus one. 454 454 00:25:21,950 --> 00:25:26,950 And then here on this it is page plus one, right. 455 455 00:25:28,490 --> 00:25:29,690 And so then here, 456 456 00:25:29,690 --> 00:25:33,890 we can actually get that number, of course, 457 457 00:25:33,890 --> 00:25:34,913 from the button. 458 458 00:25:37,270 --> 00:25:38,550 So let's call it goToPage 459 459 00:25:40,650 --> 00:25:43,990 and it is btn.dataset.goto. 460 460 00:25:49,130 --> 00:25:52,380 And then let's log that to the console. 461 461 00:25:54,000 --> 00:25:55,720 All right. 462 462 00:25:55,720 --> 00:25:58,500 And actually, let's go to some other page. 463 463 00:25:58,500 --> 00:26:02,560 So basically start this here on page four, 464 464 00:26:02,560 --> 00:26:03,960 just so we have two buttons. 465 465 00:26:08,780 --> 00:26:12,520 Very weird what's happening here with the scroll. 466 466 00:26:12,520 --> 00:26:15,320 But anyway, here we have now, 467 467 00:26:15,320 --> 00:26:17,823 the buttons for page three and five. 468 468 00:26:18,780 --> 00:26:20,720 So let's click. 469 469 00:26:20,720 --> 00:26:23,110 And indeed, here we have the five, 470 470 00:26:23,110 --> 00:26:26,450 and we also successfully read the five here. 471 471 00:26:26,450 --> 00:26:28,270 Now you see that this is here, 472 472 00:26:28,270 --> 00:26:29,890 like kind of in this white, 473 473 00:26:29,890 --> 00:26:32,740 while this here is purple. 474 474 00:26:32,740 --> 00:26:36,190 So remember that purple here means the number, 475 475 00:26:36,190 --> 00:26:38,240 and so this is still a string, 476 476 00:26:38,240 --> 00:26:40,540 and so we will need to convert that. 477 477 00:26:40,540 --> 00:26:42,870 But another thing that I wanted to show you, 478 478 00:26:42,870 --> 00:26:44,260 is that of course, 479 479 00:26:44,260 --> 00:26:49,140 we can also click outside of one of the buttons, right. 480 480 00:26:49,140 --> 00:26:51,960 And so then here the button is of course null, 481 481 00:26:51,960 --> 00:26:54,883 and we get an error by trying to read the data set. 482 482 00:26:56,870 --> 00:27:00,460 So, let's first convert 483 483 00:27:00,460 --> 00:27:03,170 that value we get from the user interface, 484 484 00:27:03,170 --> 00:27:05,250 but all of this should only happen 485 485 00:27:05,250 --> 00:27:07,303 if there actually is a button. 486 486 00:27:08,510 --> 00:27:12,550 So, yet another guard clause here, 487 487 00:27:12,550 --> 00:27:14,483 saying if there is no button, 488 488 00:27:16,080 --> 00:27:19,713 then return immediately, okay. 489 489 00:27:22,280 --> 00:27:24,543 So let's try another one now, pasta, 490 490 00:27:27,020 --> 00:27:28,420 and if we click now, 491 491 00:27:28,420 --> 00:27:31,240 then here we get the number three, 492 492 00:27:31,240 --> 00:27:35,360 and here, the number five, right. 493 493 00:27:35,360 --> 00:27:38,713 So, what are we going to do now with this number? 494 494 00:27:40,140 --> 00:27:43,300 Well, we can simply parse that number back 495 495 00:27:43,300 --> 00:27:45,360 to the controller basically. 496 496 00:27:45,360 --> 00:27:46,800 And then in the controller, 497 497 00:27:46,800 --> 00:27:50,010 we can finally, finally use that number 498 498 00:27:50,010 --> 00:27:51,750 to actually render the results 499 499 00:27:51,750 --> 00:27:53,540 on the page that we want, 500 500 00:27:53,540 --> 00:27:57,283 by using, again, this method here, all right. 501 501 00:27:58,230 --> 00:28:02,370 So these pagination and results controllers 502 502 00:28:02,370 --> 00:28:04,940 are kind of intertwined. 503 503 00:28:04,940 --> 00:28:07,510 So I think that this is a little bit confusing 504 504 00:28:07,510 --> 00:28:08,950 because of that, 505 505 00:28:08,950 --> 00:28:12,360 but if you analyze all of this here, maybe afterwards, 506 506 00:28:12,360 --> 00:28:14,590 you'll see that it makes sense. 507 507 00:28:14,590 --> 00:28:17,070 So we already see that here in the controller 508 508 00:28:17,070 --> 00:28:20,120 we are rendering the pagination in the beginning, 509 509 00:28:20,120 --> 00:28:21,720 and so here in the pagination 510 510 00:28:21,720 --> 00:28:24,393 we will later render the new results. 511 511 00:28:25,820 --> 00:28:28,453 But let's not get ahead of ourselves. 512 512 00:28:29,320 --> 00:28:30,950 So what I want to do now here 513 513 00:28:30,950 --> 00:28:34,903 is to actually parse that page into the handler. 514 514 00:28:37,280 --> 00:28:38,220 Okay. 515 515 00:28:38,220 --> 00:28:39,680 And so of course our handler 516 516 00:28:39,680 --> 00:28:42,163 now needs to accept this value. 517 517 00:28:43,730 --> 00:28:45,977 So let's call it again, goToPage. 518 518 00:28:49,020 --> 00:28:51,313 And just to see, again, if this works, 519 519 00:28:53,700 --> 00:28:56,023 log that value to the console. 520 520 00:28:58,070 --> 00:28:58,963 Okay. 521 521 00:29:00,070 --> 00:29:02,730 And indeed, we get page number five, 522 522 00:29:02,730 --> 00:29:05,170 which is the button that we clicked on, 523 523 00:29:05,170 --> 00:29:07,183 coming from the controller this time. 524 524 00:29:08,170 --> 00:29:09,360 And now, finally, 525 525 00:29:09,360 --> 00:29:11,100 what should actually happen here 526 526 00:29:11,100 --> 00:29:14,313 on the user interface, once we click this button? 527 527 00:29:15,270 --> 00:29:18,060 Well, we should get the search results 528 528 00:29:18,060 --> 00:29:19,820 for page number five, 529 529 00:29:19,820 --> 00:29:23,010 and they should be rendered here, right. 530 530 00:29:23,010 --> 00:29:26,263 And then also new buttons should be rendered too. 531 531 00:29:27,690 --> 00:29:31,000 So this should then change to page four, 532 532 00:29:31,000 --> 00:29:33,130 and this to page Six. 533 533 00:29:33,130 --> 00:29:35,180 Because when we go forward, 534 534 00:29:35,180 --> 00:29:37,420 then these two values here are, of course, 535 535 00:29:37,420 --> 00:29:40,430 going to increase, okay. 536 536 00:29:40,430 --> 00:29:42,500 And so let's simply do that. 537 537 00:29:42,500 --> 00:29:44,800 And we already know how to do it, 538 538 00:29:44,800 --> 00:29:47,083 because we already did it before. 539 539 00:29:48,270 --> 00:29:51,850 So, remember I said we want to render the results 540 540 00:29:51,850 --> 00:29:54,860 and we want to render the pagination buttons. 541 541 00:29:54,860 --> 00:29:58,500 And so that is exactly what we already have here. 542 542 00:29:58,500 --> 00:30:03,500 And so, let's simply copy and paste it right here. 543 543 00:30:03,880 --> 00:30:07,963 So let me change this here to render new results. 544 544 00:30:09,400 --> 00:30:14,400 And then here, render new pagination buttons. 545 545 00:30:14,770 --> 00:30:18,090 And then here, of course, we want not number four 546 546 00:30:18,090 --> 00:30:19,653 but we want goToPage. 547 547 00:30:20,720 --> 00:30:24,460 And then here rendering the new pagination buttons 548 548 00:30:24,460 --> 00:30:28,990 is actually going to stay exactly the same, right. 549 549 00:30:28,990 --> 00:30:31,240 So, when we do this here, 550 550 00:30:31,240 --> 00:30:34,480 so get search results with this new page, 551 551 00:30:34,480 --> 00:30:36,030 let's say four, 552 552 00:30:36,030 --> 00:30:37,320 then here in the model, 553 553 00:30:37,320 --> 00:30:40,660 state.search.page gets updated 554 554 00:30:40,660 --> 00:30:43,520 to that new value, right. 555 555 00:30:43,520 --> 00:30:46,850 So the state.search object is then different, 556 556 00:30:46,850 --> 00:30:49,450 and so that is the object that we then parse 557 557 00:30:49,450 --> 00:30:52,970 into rendering the new pagination. 558 558 00:30:52,970 --> 00:30:53,840 And so therefore, 559 559 00:30:53,840 --> 00:30:55,840 it will then render new buttons 560 560 00:30:55,840 --> 00:31:00,790 because the page before has been changed, okay. 561 561 00:31:00,790 --> 00:31:03,400 And so this should now actually work. 562 562 00:31:03,400 --> 00:31:05,390 Just keep in mind that we will, again, 563 563 00:31:05,390 --> 00:31:08,320 start at page number four. 564 564 00:31:08,320 --> 00:31:10,543 Well let's actually make that page three. 565 565 00:31:11,790 --> 00:31:15,260 Oh, and before actually checking out the results, 566 566 00:31:15,260 --> 00:31:18,260 I just wanted to say that this actually works 567 567 00:31:18,260 --> 00:31:21,090 because render will basically overwrite 568 568 00:31:21,090 --> 00:31:24,170 the markup that was there previously. 569 569 00:31:24,170 --> 00:31:25,693 And the reason for that is 570 570 00:31:25,693 --> 00:31:28,730 that we here have the clear method. 571 571 00:31:28,730 --> 00:31:32,900 And so before any new HTML is inserted into the page, 572 572 00:31:32,900 --> 00:31:36,280 the parentElement is first cleared, 573 573 00:31:36,280 --> 00:31:39,020 so it's first emptied, right. 574 574 00:31:39,020 --> 00:31:43,500 And so then that means that render here 575 575 00:31:43,500 --> 00:31:46,610 basically overwrites everything that was there 576 576 00:31:46,610 --> 00:31:49,133 and puts the new content in the same place. 577 577 00:31:50,560 --> 00:31:55,450 But anyway, let's make sure to reload, pizza, 578 578 00:31:55,450 --> 00:31:58,600 and we are at page number three. 579 579 00:31:58,600 --> 00:32:01,540 And now let's see the magic happen. 580 580 00:32:01,540 --> 00:32:04,043 And I hope we don't have any bug here. 581 581 00:32:05,140 --> 00:32:07,900 And it works! 582 582 00:32:07,900 --> 00:32:10,010 So beautiful, beautiful. 583 583 00:32:10,010 --> 00:32:12,660 And congratulations also for you 584 584 00:32:12,660 --> 00:32:15,730 to following up until this point. 585 585 00:32:15,730 --> 00:32:19,150 So this is, I think up until this point, 586 586 00:32:19,150 --> 00:32:21,663 the most impressive work that we have done. 587 587 00:32:23,880 --> 00:32:28,160 So you see everything updates here just as expected, 588 588 00:32:28,160 --> 00:32:30,080 we get new content, 589 589 00:32:30,080 --> 00:32:33,640 and now page six, you see here, 590 590 00:32:33,640 --> 00:32:36,283 will be the last page, so let's see. 591 591 00:32:37,280 --> 00:32:40,970 And yeah, so now we don't have the last button, 592 592 00:32:40,970 --> 00:32:43,203 and we can only go back to page five. 593 593 00:32:44,420 --> 00:32:46,700 So now let's go to the first page, 594 594 00:32:46,700 --> 00:32:50,010 and indeed, we can only now move forward 595 595 00:32:50,010 --> 00:32:52,830 and get the first 10 results here. 596 596 00:32:52,830 --> 00:32:55,283 So, really great work here. 597 597 00:32:56,510 --> 00:32:58,903 I'm really happy about this progress here. 598 598 00:32:59,770 --> 00:33:02,490 Now just to make sure, one more thing, 599 599 00:33:02,490 --> 00:33:05,800 let's try this here with the results per page 600 600 00:33:05,800 --> 00:33:06,863 of a different value. 601 601 00:33:08,670 --> 00:33:11,150 So let's say that we actually wanted 602 602 00:33:11,150 --> 00:33:13,623 like only five results per page. 603 603 00:33:15,470 --> 00:33:20,470 So then we should get a lot more pages. 604 604 00:33:20,510 --> 00:33:22,340 And so it's important that we check 605 605 00:33:22,340 --> 00:33:23,883 that that actually works. 606 606 00:33:25,210 --> 00:33:29,110 So you see that it does actually work already. 607 607 00:33:29,110 --> 00:33:31,680 So we only have five results here now, 608 608 00:33:31,680 --> 00:33:33,720 and we can also already see 609 609 00:33:33,720 --> 00:33:35,643 that we will have 12 pages. 610 610 00:33:38,140 --> 00:33:41,770 Oh, and we are still on page number three. 611 611 00:33:41,770 --> 00:33:44,520 But now we will be able to go back 612 612 00:33:44,520 --> 00:33:48,303 or actually to go forward to page number 12. 613 613 00:33:50,230 --> 00:33:55,230 And so each of these pages only has five recipes. 614 614 00:33:59,000 --> 00:34:00,730 And now let's just try to search 615 615 00:34:00,730 --> 00:34:03,220 for something that is not very common, 616 616 00:34:03,220 --> 00:34:05,523 like dip for example. 617 617 00:34:08,200 --> 00:34:11,273 And, wow, we still have a couple of pages here actually. 618 618 00:34:14,320 --> 00:34:16,390 But before we go any further, 619 619 00:34:16,390 --> 00:34:19,870 let's put this here actually to zero 620 620 00:34:19,870 --> 00:34:21,320 or actually to one, 621 621 00:34:21,320 --> 00:34:23,280 and remember that parsing nothing 622 622 00:34:23,280 --> 00:34:26,093 is basically the same as setting it to one. 623 623 00:34:30,800 --> 00:34:33,483 So let's try dip here again. 624 624 00:34:35,370 --> 00:34:38,370 But it seems like we have still six pages. 625 625 00:34:38,370 --> 00:34:40,600 So I just wanted to find some search term 626 626 00:34:40,600 --> 00:34:42,690 that only has one page. 627 627 00:34:42,690 --> 00:34:44,173 Let's try hummus maybe. 628 628 00:34:45,110 --> 00:34:47,233 Ah, but we again have four pages. 629 629 00:34:48,140 --> 00:34:52,450 Well we can fake that by, or here, 630 630 00:34:52,450 --> 00:34:56,090 by having 50 results on one page. 631 631 00:34:56,090 --> 00:34:57,133 And so with this, 632 632 00:34:59,140 --> 00:35:03,150 we should already only have one page with pasta. 633 633 00:35:03,150 --> 00:35:05,850 So pasta has 45 results, 634 634 00:35:05,850 --> 00:35:08,320 but here we want 50 on one page. 635 635 00:35:08,320 --> 00:35:10,910 So we only have one page you see, 636 636 00:35:10,910 --> 00:35:12,683 and indeed, no buttons. 637 637 00:35:14,500 --> 00:35:15,790 Great. 638 638 00:35:15,790 --> 00:35:20,213 Let's put it back to a meaningful value, so 10. 639 639 00:35:22,010 --> 00:35:24,713 And so with this, we are actually done. 640 640 00:35:25,560 --> 00:35:29,163 Let's just clean up our code here a little bit more, 641 641 00:35:30,370 --> 00:35:32,170 but I think that with this 642 642 00:35:32,170 --> 00:35:36,850 we are now good to call this finished. 643 643 00:35:36,850 --> 00:35:40,100 And actually we finished now the entire part one 644 644 00:35:40,100 --> 00:35:42,990 of our flowchart, right. 645 645 00:35:42,990 --> 00:35:46,300 So this was already done, this here as well. 646 646 00:35:46,300 --> 00:35:48,820 And now, here what we did 647 647 00:35:48,820 --> 00:35:51,840 was to listen to this event, 648 648 00:35:51,840 --> 00:35:53,860 then render the pagination buttons, 649 649 00:35:53,860 --> 00:35:54,860 and of course, 650 650 00:35:54,860 --> 00:35:57,490 render the corresponding search results. 651 651 00:35:57,490 --> 00:35:59,800 So all of this is now in place, 652 652 00:35:59,800 --> 00:36:03,980 but I ask you to really analyze again 653 653 00:36:03,980 --> 00:36:07,440 the code that we have here in control pagination, 654 654 00:36:07,440 --> 00:36:10,960 as well as here in control search results. 655 655 00:36:10,960 --> 00:36:13,030 Because again, these two controllers, 656 656 00:36:13,030 --> 00:36:15,270 they're kind of intertwined. 657 657 00:36:15,270 --> 00:36:18,150 So they both are doing similar things, 658 658 00:36:18,150 --> 00:36:21,370 at least when it comes to displaying the pagination 659 659 00:36:21,370 --> 00:36:24,040 and the results themselves. 660 660 00:36:24,040 --> 00:36:25,340 So it's very important 661 661 00:36:25,340 --> 00:36:28,053 that you understand the flow of this data here, 662 662 00:36:29,780 --> 00:36:34,380 especially of this, goToPage, okay. 663 663 00:36:34,380 --> 00:36:36,170 And then maybe also analyze again 664 664 00:36:36,170 --> 00:36:38,030 how all of this here works, 665 665 00:36:38,030 --> 00:36:40,960 but then you're good to go to the next video. 666 666 00:36:40,960 --> 00:36:43,010 And so there we will discuss, 667 667 00:36:43,010 --> 00:36:46,570 basically our next step, what we should do next. 668 668 00:36:46,570 --> 00:36:49,310 So that next video is gonna be a lot shorter, 669 669 00:36:49,310 --> 00:36:51,890 so that we can finally take a break 670 670 00:36:51,890 --> 00:36:53,640 from this application. 671 671 00:36:53,640 --> 00:36:56,730 So again, analyze this like I told you to, 672 672 00:36:56,730 --> 00:36:58,500 and then after you're ready, 673 673 00:36:58,500 --> 00:37:03,083 let's go move on to our next part of the flowchart. 56261