WEBVTT 1 00:00:01.340 --> 00:00:03.150 So let's now finish 2 00:00:03.150 --> 00:00:05.223 building the pagination feature. 3 00:00:06.890 --> 00:00:08.980 And for that let's actually think 4 00:00:08.980 --> 00:00:11.653 about some different scenarios. 5 00:00:11.653 --> 00:00:12.540 And to do that, 6 00:00:12.540 --> 00:00:14.683 I will actually come here to the demo. 7 00:00:16.960 --> 00:00:19.890 So the buttons that we want to render down here 8 00:00:19.890 --> 00:00:22.090 are not always the same. 9 00:00:22.090 --> 00:00:25.930 So, in this first scenario we are on page one. 10 00:00:25.930 --> 00:00:27.630 And so therefore, 11 00:00:27.630 --> 00:00:31.230 only this next button here is showing, right. 12 00:00:31.230 --> 00:00:34.720 But there is, of course, no button to go back. 13 00:00:34.720 --> 00:00:39.210 Now, if we had actually less than 10 results, 14 00:00:39.210 --> 00:00:41.730 so basically only one search page, 15 00:00:41.730 --> 00:00:44.003 then there would be no buttons at all. 16 00:00:45.750 --> 00:00:48.180 Then if we are on some other page, 17 00:00:48.180 --> 00:00:50.430 which is not the first page, 18 00:00:50.430 --> 00:00:52.730 well, then we have a button to go back 19 00:00:52.730 --> 00:00:54.800 and one to go forward. 20 00:00:54.800 --> 00:00:57.760 So that is basically the third scenario. 21 00:00:57.760 --> 00:01:00.950 And then if we go all the way to the last page, 22 00:01:00.950 --> 00:01:03.723 then we only have a button to go back. 23 00:01:04.700 --> 00:01:06.330 And so we have to account 24 00:01:06.330 --> 00:01:09.860 for all of these different scenarios, okay. 25 00:01:09.860 --> 00:01:11.240 So let's go back 26 00:01:11.240 --> 00:01:13.970 and basically implement a new view 27 00:01:13.970 --> 00:01:15.963 for this pagination. 28 00:01:17.420 --> 00:01:19.650 So, here in the views, 29 00:01:19.650 --> 00:01:23.493 we create a new file called paginationView.js. 30 00:01:28.410 --> 00:01:32.830 And here let's actually copy some code from here 31 00:01:32.830 --> 00:01:34.680 so we don't have the same work 32 00:01:34.680 --> 00:01:35.983 over and over again. 33 00:01:39.560 --> 00:01:42.773 Then of course, this one here is called PaginationView, 34 00:01:45.836 --> 00:01:49.450 and the parent element is not this one, 35 00:01:49.450 --> 00:01:51.873 so let's go check out or markup. 36 00:01:53.584 --> 00:01:57.740 And so here we already are had the right element. 37 00:01:57.740 --> 00:02:02.250 So you see that after this unordered list of results, 38 00:02:02.250 --> 00:02:06.710 we have this div element with a class of pagination. 39 00:02:06.710 --> 00:02:10.090 And so then this one here already contains the template 40 00:02:10.090 --> 00:02:12.180 for a button to go back, 41 00:02:12.180 --> 00:02:13.800 so to the previous page, 42 00:02:13.800 --> 00:02:16.053 and one button to go to the next page. 43 00:02:17.640 --> 00:02:19.770 So we're going to need this soon 44 00:02:19.770 --> 00:02:24.770 but for now let's just complete this setup here, okay. 45 00:02:27.240 --> 00:02:29.770 And so now just as all the other classes, 46 00:02:29.770 --> 00:02:33.549 we will have a generate markup method here, 47 00:02:33.549 --> 00:02:34.799 generateMarkup, 48 00:02:37.270 --> 00:02:40.060 because remember, that is the method 49 00:02:40.060 --> 00:02:42.920 that the render method is going to call 50 00:02:42.920 --> 00:02:44.900 in order to generate the markup 51 00:02:44.900 --> 00:02:49.250 for the view that we're working on, right. 52 00:02:49.250 --> 00:02:52.030 So again, every view, at least every view 53 00:02:52.030 --> 00:02:55.070 that renders something to the user interface 54 00:02:55.070 --> 00:02:57.543 needs a generate markup method. 55 00:02:58.610 --> 00:03:00.600 So that's this one here. 56 00:03:00.600 --> 00:03:02.020 And so now let's account 57 00:03:02.020 --> 00:03:05.143 for these different scenarios that we just saw. 58 00:03:06.410 --> 00:03:10.740 So let's say the first one is, we are at page one, 59 00:03:10.740 --> 00:03:14.663 and there are other pages. 60 00:03:15.660 --> 00:03:18.040 Then the next one is we are on page one, 61 00:03:18.040 --> 00:03:22.160 and there are no other pages. 62 00:03:22.160 --> 00:03:24.440 Then there is the scenario that we are 63 00:03:25.680 --> 00:03:27.380 on the last page, 64 00:03:27.380 --> 00:03:28.950 and also the scenario 65 00:03:28.950 --> 00:03:33.363 that we are on some other page, basically. 66 00:03:34.470 --> 00:03:39.470 So other page, like this, okay. 67 00:03:39.530 --> 00:03:43.890 So what data do we need in order to figure out 68 00:03:43.890 --> 00:03:45.530 if we are on page one, 69 00:03:45.530 --> 00:03:47.623 and if there are other pages? 70 00:03:48.520 --> 00:03:52.800 Well, for that, we are going to need, basically, 71 00:03:52.800 --> 00:03:56.270 this entire search object here. 72 00:03:56.270 --> 00:03:58.720 So this contains all the search results, 73 00:03:58.720 --> 00:04:02.760 and also the current page and the results per page. 74 00:04:02.760 --> 00:04:04.860 And so we will need all of this data 75 00:04:04.860 --> 00:04:05.940 in order to compute 76 00:04:05.940 --> 00:04:10.090 which buttons should be displayed, all right. 77 00:04:10.090 --> 00:04:12.710 And so let's actually go to our controller, 78 00:04:12.710 --> 00:04:14.960 and already call the render function 79 00:04:14.960 --> 00:04:18.000 so that we can parse in the data that we need, 80 00:04:18.000 --> 00:04:20.083 and so that we can then use it. 81 00:04:20.920 --> 00:04:23.590 And, well, when do we actually want 82 00:04:23.590 --> 00:04:25.840 to display the pagination? 83 00:04:25.840 --> 00:04:28.600 Well, it's actually right at the moment 84 00:04:28.600 --> 00:04:31.203 when we are also displaying the search results. 85 00:04:32.240 --> 00:04:34.510 So we will actually do that right here 86 00:04:34.510 --> 00:04:36.313 after displaying the results. 87 00:04:37.160 --> 00:04:38.830 So we get the search query, 88 00:04:38.830 --> 00:04:42.050 load the search results, render the results, 89 00:04:42.050 --> 00:04:47.050 and then also render the initial pagination buttons. 90 00:04:51.810 --> 00:04:55.190 And so now here we actually need to export this view, 91 00:04:55.190 --> 00:04:58.430 so that we can then import it into the controller. 92 00:04:58.430 --> 00:05:01.873 So just like we have been doing in all the other views, 93 00:05:02.720 --> 00:05:05.480 we say export default, 94 00:05:05.480 --> 00:05:09.093 and then a new PaginationView object. 95 00:05:10.370 --> 00:05:15.093 And so then we come here and import that. 96 00:05:17.560 --> 00:05:22.030 So results becomes pagination, 97 00:05:22.030 --> 00:05:23.850 and now of course that view 98 00:05:23.850 --> 00:05:25.633 has a render method on it. 99 00:05:27.520 --> 00:05:31.100 So paginationView.render, 100 00:05:31.100 --> 00:05:32.840 and here we need to parse in 101 00:05:32.840 --> 00:05:36.590 basically the entire search object. 102 00:05:36.590 --> 00:05:40.910 So state.search. 103 00:05:40.910 --> 00:05:45.320 And actually that's model.state.search. 104 00:05:45.320 --> 00:05:46.193 And so now, 105 00:05:47.390 --> 00:05:50.340 through the magic of this view class here, 106 00:05:50.340 --> 00:05:51.893 we now get access to this data 107 00:05:51.893 --> 00:05:55.567 that we just parsed in, in this._data, right. 108 00:05:59.100 --> 00:06:01.600 So right here, this._data 109 00:06:02.880 --> 00:06:06.913 is now the entire search results object basically. 110 00:06:07.800 --> 00:06:11.410 So, in order to figure out if we are on page one 111 00:06:11.410 --> 00:06:13.180 and there are other pages, 112 00:06:13.180 --> 00:06:16.200 we need to know how many pages there are. 113 00:06:16.200 --> 00:06:18.063 So, let's compute that. 114 00:06:19.220 --> 00:06:20.843 So const numPages, 115 00:06:22.620 --> 00:06:25.333 and how do we actually know the number of pages? 116 00:06:26.200 --> 00:06:28.970 Well, basically we need the number of results 117 00:06:28.970 --> 00:06:33.360 divided by the number of results per page, right. 118 00:06:33.360 --> 00:06:36.040 So for example if we had 60 results, 119 00:06:36.040 --> 00:06:40.710 and 10 results per page, then, we had six pages. 120 00:06:40.710 --> 00:06:45.577 So, the number of results comes from this.data.results. 121 00:06:51.390 --> 00:06:54.320 So let's check that in the model here again. 122 00:06:54.320 --> 00:06:57.490 So results, again, is the entire array, 123 00:06:57.490 --> 00:07:00.480 which contains, so all the search results, 124 00:07:00.480 --> 00:07:03.230 and then we also have results per page, 125 00:07:03.230 --> 00:07:05.840 which is this configuration constant 126 00:07:05.840 --> 00:07:08.840 that we set to 10, remember. 127 00:07:08.840 --> 00:07:10.630 So let me copy this, 128 00:07:10.630 --> 00:07:14.180 and then here we will divide that. 129 00:07:14.180 --> 00:07:17.413 So this.data.resultsPerPage. 130 00:07:19.100 --> 00:07:21.020 And this is a very important variable, 131 00:07:21.020 --> 00:07:24.710 so let's start by logging it to the console, 132 00:07:24.710 --> 00:07:26.720 and with this, we will then also know 133 00:07:26.720 --> 00:07:29.670 if we correctly hooked everything up here. 134 00:07:29.670 --> 00:07:31.487 So basically, if this render here 135 00:07:31.487 --> 00:07:35.053 of the pagination view is already doing its work. 136 00:07:36.430 --> 00:07:37.573 So let's see. 137 00:07:41.070 --> 00:07:42.453 Searching for pizza. 138 00:07:44.130 --> 00:07:48.580 Well, here we get some, (chuckles) not a number. 139 00:07:48.580 --> 00:07:50.300 And of course, well, 140 00:07:50.300 --> 00:07:53.760 here actually we already have something rendered. 141 00:07:53.760 --> 00:07:56.230 And so that's undefined because right now 142 00:07:56.230 --> 00:08:00.400 we are not returning anything from this function. 143 00:08:00.400 --> 00:08:02.660 And so if we don't return anything 144 00:08:02.660 --> 00:08:05.310 by default undefined is returned, 145 00:08:05.310 --> 00:08:09.283 and so that's 10 basically rendered here to the page. 146 00:08:10.300 --> 00:08:12.160 But anyway, what matters here 147 00:08:12.160 --> 00:08:15.730 is that for some reason we got not a number. 148 00:08:15.730 --> 00:08:18.810 So that means, ah! 149 00:08:18.810 --> 00:08:20.690 And I know why here. 150 00:08:20.690 --> 00:08:24.630 So here, this is the entire array, right. 151 00:08:24.630 --> 00:08:27.440 So we are dividing this array by the number. 152 00:08:27.440 --> 00:08:30.633 But of course what we want is the length of the array. 153 00:08:33.430 --> 00:08:35.023 So let's try that again. 154 00:08:36.700 --> 00:08:40.950 Yeah, now we get 5.9 pages. 155 00:08:40.950 --> 00:08:43.000 And of course we now need to round that 156 00:08:43.000 --> 00:08:45.790 to the next highest integer. 157 00:08:45.790 --> 00:08:50.763 And so for that we simply use Math.ceil, remember. 158 00:08:52.250 --> 00:08:56.550 And so this will now become six, okay. 159 00:08:56.550 --> 00:09:00.193 So, let's do some check here. 160 00:09:01.150 --> 00:09:03.330 So if we're currently on page one, 161 00:09:03.330 --> 00:09:08.330 which is this.data.page equals one. 162 00:09:11.810 --> 00:09:13.370 And so now it is very important 163 00:09:13.370 --> 00:09:17.960 that we actually have the current page in this state, right. 164 00:09:17.960 --> 00:09:19.743 So that's why we put it right here. 165 00:09:20.830 --> 00:09:24.700 So whenever the getSearchResultsPage method 166 00:09:24.700 --> 00:09:27.173 is being called with some value. 167 00:09:28.800 --> 00:09:30.380 So just to illustrate this, 168 00:09:30.380 --> 00:09:33.563 let's actually render the results at page two, 169 00:09:34.960 --> 00:09:38.023 just to then test if what we have here works. 170 00:09:39.000 --> 00:09:42.570 But anyway, here we are testing if we're on page one. 171 00:09:42.570 --> 00:09:46.780 And so that's this.data.page equals one, 172 00:09:46.780 --> 00:09:48.860 and there are other pages. 173 00:09:48.860 --> 00:09:50.600 And so basically that means 174 00:09:50.600 --> 00:09:53.210 that the current page needs to be less 175 00:09:53.210 --> 00:09:55.070 than the number of pages. 176 00:09:55.070 --> 00:09:56.630 And so that basically means 177 00:09:56.630 --> 00:09:59.763 that number of pages here is greater than one. 178 00:10:00.840 --> 00:10:04.433 So numPages greater than one. 179 00:10:05.490 --> 00:10:07.833 So this is our first if check, 180 00:10:09.270 --> 00:10:14.270 let's actually log that to the console page one 181 00:10:14.790 --> 00:10:16.370 and others. 182 00:10:16.370 --> 00:10:18.893 Or actually let's even return that string. 183 00:10:19.900 --> 00:10:22.983 'Cause we already know that this will then get printed. 184 00:10:24.470 --> 00:10:25.720 Even though of course, 185 00:10:25.720 --> 00:10:27.693 this is not at all what we want. 186 00:10:28.620 --> 00:10:31.270 Now this one here we will leave to the end. 187 00:10:31.270 --> 00:10:32.923 So let's continue with this one. 188 00:10:34.690 --> 00:10:37.723 So being on the last page basically means 189 00:10:37.723 --> 00:10:39.130 that the current page 190 00:10:39.130 --> 00:10:43.950 is the same as the number of pages, right. 191 00:10:43.950 --> 00:10:48.950 So data.page is equal the number of pages. 192 00:10:51.280 --> 00:10:54.100 So in the current example we have six pages. 193 00:10:54.100 --> 00:10:57.120 And so if the current page is number six, 194 00:10:57.120 --> 00:11:00.173 well, then that means we are on the last page. 195 00:11:01.550 --> 00:11:06.550 So here let's return last page. 196 00:11:11.540 --> 00:11:13.800 Then here some other page, 197 00:11:13.800 --> 00:11:16.260 basically simply means that the current page 198 00:11:16.260 --> 00:11:18.423 is less than the number of pages. 199 00:11:21.830 --> 00:11:24.840 And if any of what I'm saying doesn't make sense, 200 00:11:24.840 --> 00:11:26.910 then probably the best thing to do 201 00:11:26.910 --> 00:11:28.560 is to pause the video, 202 00:11:28.560 --> 00:11:30.623 and think about this on your own. 203 00:11:31.610 --> 00:11:33.773 So that's always my advice. 204 00:11:35.030 --> 00:11:38.280 So basically, reflecting on what I'm saying 205 00:11:38.280 --> 00:11:42.700 is usually the best solution to really figuring out 206 00:11:42.700 --> 00:11:45.990 what exactly it is what I'm doing here. 207 00:11:45.990 --> 00:11:49.060 So of course I'm trying my best to explain everything, 208 00:11:49.060 --> 00:11:50.260 but at a certain point, 209 00:11:50.260 --> 00:11:53.390 you also have to take a look at the code 210 00:11:53.390 --> 00:11:56.123 and think about it on your own a bit. 211 00:11:57.320 --> 00:12:00.640 But anyway, this actually already covers 212 00:12:00.640 --> 00:12:01.913 all of the scenarios. 213 00:12:03.220 --> 00:12:05.970 So if none of these scenarios here is met, 214 00:12:05.970 --> 00:12:09.480 then that basically means that we are on page one, 215 00:12:09.480 --> 00:12:11.383 and there are no other pages. 216 00:12:17.447 --> 00:12:21.447 And so in this case we can return only one page. 217 00:12:24.450 --> 00:12:27.400 And actually that is not really true 218 00:12:27.400 --> 00:12:30.110 because let's say that we only had one, 219 00:12:30.110 --> 00:12:32.350 so that numPage would be one, 220 00:12:32.350 --> 00:12:35.570 then actually this here would also be true. 221 00:12:35.570 --> 00:12:38.550 So here we have to add the same as before, 222 00:12:38.550 --> 00:12:41.593 so numPages needs to be also greater than one. 223 00:12:42.530 --> 00:12:45.290 So then we are really on the last page 224 00:12:45.290 --> 00:12:47.870 and need to render some other buttons. 225 00:12:47.870 --> 00:12:49.430 So, but to test this, 226 00:12:49.430 --> 00:12:52.173 let's keep in mind that we are currently on page two. 227 00:12:53.430 --> 00:12:54.270 And so therefore, 228 00:12:54.270 --> 00:12:57.983 we want to now see other page rendered. 229 00:13:01.130 --> 00:13:03.090 So let's see. 230 00:13:03.090 --> 00:13:06.670 And indeed, there we have another page. 231 00:13:06.670 --> 00:13:08.443 Now let's try page number six. 232 00:13:14.630 --> 00:13:17.470 So here we see we have six pages, 233 00:13:17.470 --> 00:13:19.653 and so now it says last page. 234 00:13:20.670 --> 00:13:21.890 Great. 235 00:13:21.890 --> 00:13:23.393 And now page number one. 236 00:13:25.490 --> 00:13:27.363 And so one more time. 237 00:13:29.600 --> 00:13:33.310 And so page one but there are other pages. 238 00:13:33.310 --> 00:13:34.190 Great. 239 00:13:34.190 --> 00:13:37.090 So this was I think the hardest part, 240 00:13:37.090 --> 00:13:39.790 so figuring out these different scenarios. 241 00:13:39.790 --> 00:13:42.903 And now all we need to do is to create the markup. 242 00:13:43.870 --> 00:13:48.400 So let's come here to the HTML and grab this code. 243 00:13:48.400 --> 00:13:51.463 So this is the code for going to the previous page. 244 00:13:55.510 --> 00:13:58.700 So when do we want to go to the previous page? 245 00:13:58.700 --> 00:14:00.693 Well, for example right here, 246 00:14:01.570 --> 00:14:04.050 on the last page, right. 247 00:14:04.050 --> 00:14:08.023 So here, in fact, we only want exactly that one button. 248 00:14:13.330 --> 00:14:17.470 Now what is the page here that we want to go to? 249 00:14:17.470 --> 00:14:19.860 So we need this number here. 250 00:14:19.860 --> 00:14:23.943 Well, that page is basically the current one minus one. 251 00:14:25.630 --> 00:14:26.463 Right. 252 00:14:27.500 --> 00:14:32.500 So, we are using this this.data.page a lot of times, 253 00:14:33.040 --> 00:14:34.943 so let's store that in a variable. 254 00:14:37.360 --> 00:14:42.360 So, yeah, const current page is this. 255 00:14:46.030 --> 00:14:50.150 And so now let's replace that everywhere here 256 00:14:50.150 --> 00:14:52.053 with current page. 257 00:14:53.250 --> 00:14:58.250 So here we will then want the current page minus one. 258 00:14:59.420 --> 00:15:02.473 And here we need to replace the icons. 259 00:15:05.710 --> 00:15:06.543 Okay. 260 00:15:07.640 --> 00:15:09.690 Then here on page one, 261 00:15:09.690 --> 00:15:12.100 we basically need the opposite. 262 00:15:12.100 --> 00:15:15.060 So again, we only want just one button 263 00:15:15.060 --> 00:15:18.080 but the one to go to the next page. 264 00:15:18.080 --> 00:15:19.323 So let's grab it. 265 00:15:20.370 --> 00:15:23.363 And actually it's almost the same markup. 266 00:15:26.890 --> 00:15:29.633 So another nice template literal. 267 00:15:35.000 --> 00:15:38.493 And now here it says page three. 268 00:15:39.530 --> 00:15:40.630 And so of course, 269 00:15:40.630 --> 00:15:45.133 here we will now want to go to the current page plus one. 270 00:15:48.150 --> 00:15:49.330 Right. 271 00:15:49.330 --> 00:15:52.653 And then here, again, we need to replace the icons. 272 00:15:57.560 --> 00:15:58.423 Okay. 273 00:15:59.670 --> 00:16:02.740 And then here for the other page, 274 00:16:02.740 --> 00:16:04.893 we want basically both of them. 275 00:16:05.990 --> 00:16:09.150 So let's return this, 276 00:16:09.150 --> 00:16:11.270 or actually this one here. 277 00:16:11.270 --> 00:16:13.863 So first the button to go back. 278 00:16:17.038 --> 00:16:20.747 And then also add the button to go forward. 279 00:16:23.730 --> 00:16:28.470 All right, and then when we're on page one, 280 00:16:28.470 --> 00:16:30.530 then we simply return nothing, 281 00:16:30.530 --> 00:16:33.900 because here we don't want to render any button. 282 00:16:33.900 --> 00:16:35.300 So if there are no other pages 283 00:16:35.300 --> 00:16:37.573 there's nowhere to go, of course. 284 00:16:38.630 --> 00:16:40.110 All right. 285 00:16:40.110 --> 00:16:42.950 So let's see what page we are currently on, 286 00:16:42.950 --> 00:16:44.600 so page one. 287 00:16:44.600 --> 00:16:48.217 And so that should render then this button here. 288 00:16:50.870 --> 00:16:54.610 So saying, page two. 289 00:16:54.610 --> 00:16:55.483 So let's see. 290 00:16:57.130 --> 00:17:00.050 And indeed, page two. 291 00:17:00.050 --> 00:17:01.500 Now of course if we click here 292 00:17:01.500 --> 00:17:03.400 then nothing's going to happen, 293 00:17:03.400 --> 00:17:05.273 but for now that is not the point. 294 00:17:06.440 --> 00:17:08.723 Let's try page number four now. 295 00:17:13.560 --> 00:17:18.560 So, go back to page three or forward to page five. 296 00:17:19.200 --> 00:17:21.030 So beautiful. 297 00:17:21.030 --> 00:17:22.850 So it looks like it's working, 298 00:17:22.850 --> 00:17:26.313 let's just try the last page here now. 299 00:17:30.760 --> 00:17:32.293 Oh, what's going on here? 300 00:17:36.420 --> 00:17:39.990 And indeed, it says to go back to page five 301 00:17:39.990 --> 00:17:42.450 but no page to go forward. 302 00:17:42.450 --> 00:17:44.040 So that's awesome. 303 00:17:44.040 --> 00:17:46.170 Now the next thing that we need to do here 304 00:17:46.170 --> 00:17:50.130 is to then add an event listener to these buttons, 305 00:17:50.130 --> 00:17:52.860 so that we can then actually go back 306 00:17:52.860 --> 00:17:55.300 and display another page. 307 00:17:55.300 --> 00:17:58.290 So right now, this is not useful at all 308 00:17:58.290 --> 00:18:00.480 but at least we already have our buttons here 309 00:18:00.480 --> 00:18:02.560 showing up right in the beginning 310 00:18:02.560 --> 00:18:04.533 when the search results are loaded. 311 00:18:06.400 --> 00:18:08.000 Okay. 312 00:18:08.000 --> 00:18:11.980 Now, this code here could of course be refactored 313 00:18:11.980 --> 00:18:14.180 because we are repeating a lot of code here. 314 00:18:15.310 --> 00:18:19.130 So this button is the same as this next button 315 00:18:19.130 --> 00:18:23.300 and the previous button is also the same here, okay. 316 00:18:23.300 --> 00:18:24.940 So we could refactor that 317 00:18:24.940 --> 00:18:27.060 but I will actually not do it here, 318 00:18:27.060 --> 00:18:29.940 and instead leave it for you as a challenge. 319 00:18:29.940 --> 00:18:32.310 So you might create a method called, 320 00:18:32.310 --> 00:18:35.230 for example, generate markup button, 321 00:18:35.230 --> 00:18:38.920 and then refactor that code in that method. 322 00:18:38.920 --> 00:18:42.020 But here, I'm not gonna waste any more time, 323 00:18:42.020 --> 00:18:44.030 and instead, I will go immediately 324 00:18:44.030 --> 00:18:46.750 to adding the event listener. 325 00:18:46.750 --> 00:18:48.230 Now just like before, 326 00:18:48.230 --> 00:18:51.970 we need to use the publisher subscriber pattern, 327 00:18:51.970 --> 00:18:54.050 just like we did, for example here, 328 00:18:54.050 --> 00:18:56.573 in the recipe view, remember? 329 00:18:57.580 --> 00:19:01.210 So, again that works by creating a publisher, 330 00:19:01.210 --> 00:19:03.640 which is basically a function 331 00:19:03.640 --> 00:19:06.260 which is the one listening for the event, 332 00:19:06.260 --> 00:19:08.600 which receives a handler function, 333 00:19:08.600 --> 00:19:11.709 which in our case, is going to be a controller 334 00:19:11.709 --> 00:19:13.940 that lives here in the controller. 335 00:19:13.940 --> 00:19:14.890 And so with this, 336 00:19:14.890 --> 00:19:17.770 we will then be able to listen for the event 337 00:19:17.770 --> 00:19:20.620 here in the view where it makes sense, 338 00:19:20.620 --> 00:19:22.030 while at the same time, 339 00:19:22.030 --> 00:19:24.070 being able to handle that event 340 00:19:24.070 --> 00:19:27.023 from the controller, basically, okay. 341 00:19:28.180 --> 00:19:31.333 So, let's add that method here. 342 00:19:32.300 --> 00:19:33.483 So addHandler, 343 00:19:35.360 --> 00:19:36.773 I'm just calling it click. 344 00:19:37.680 --> 00:19:40.213 So for a click on one of the buttons. 345 00:19:42.060 --> 00:19:43.530 Okay. 346 00:19:43.530 --> 00:19:47.230 Now here we are going to use event delegation, 347 00:19:47.230 --> 00:19:49.720 because there are going to be two buttons, 348 00:19:49.720 --> 00:19:50.553 but of course, 349 00:19:50.553 --> 00:19:54.200 we don't want to listen to each of them individually. 350 00:19:54.200 --> 00:19:57.170 So instead, we will add the event listener 351 00:19:57.170 --> 00:19:59.833 to the common parent element, 352 00:20:00.680 --> 00:20:02.703 which is indeed this.parentElement. 353 00:20:06.360 --> 00:20:07.410 So .addEventListener, 354 00:20:10.342 --> 00:20:14.120 and this time, finally, listening for a click. 355 00:20:15.668 --> 00:20:17.930 And then here we have a function, 356 00:20:17.930 --> 00:20:20.570 because we cannot immediately call the handler 357 00:20:20.570 --> 00:20:22.170 that comes in here, 358 00:20:22.170 --> 00:20:24.740 because first, we will need to figure out 359 00:20:24.740 --> 00:20:26.970 which button was actually clicked, 360 00:20:26.970 --> 00:20:28.463 based on the event. 361 00:20:29.390 --> 00:20:31.370 So that's event delegation 362 00:20:31.370 --> 00:20:34.550 and I hope you remember how it works. 363 00:20:34.550 --> 00:20:39.550 So in this case we can simply create a button element 364 00:20:40.950 --> 00:20:43.210 and select the closest button element 365 00:20:43.210 --> 00:20:45.320 to the clicked element. 366 00:20:45.320 --> 00:20:48.550 So the clicked element is e.target, 367 00:20:48.550 --> 00:20:51.380 and then closest, 368 00:20:51.380 --> 00:20:54.040 which is really an amazing method. 369 00:20:54.040 --> 00:20:55.403 And so here we can now, 370 00:20:57.130 --> 00:21:00.540 basically look for this button. 371 00:21:00.540 --> 00:21:04.963 So for the element with this class, all right. 372 00:21:05.800 --> 00:21:08.480 So remember that the closest method 373 00:21:08.480 --> 00:21:10.610 is a little bit like query selector, 374 00:21:10.610 --> 00:21:13.120 but instead for searching down in the tree, 375 00:21:13.120 --> 00:21:14.730 so for children, 376 00:21:14.730 --> 00:21:17.430 it basically searches up in the tree. 377 00:21:17.430 --> 00:21:19.380 So it looks for parents. 378 00:21:19.380 --> 00:21:22.750 And this is important because here in the button, 379 00:21:22.750 --> 00:21:26.220 we might actually click on this span element, 380 00:21:26.220 --> 00:21:29.340 or on this SVG or this use, 381 00:21:29.340 --> 00:21:32.150 instead of clicking on the button itself. 382 00:21:32.150 --> 00:21:35.730 So we cannot simply set the button to e.target, 383 00:21:35.730 --> 00:21:37.990 but we actually need to search 384 00:21:37.990 --> 00:21:40.333 for the closest button element itself. 385 00:21:41.360 --> 00:21:43.550 And just to see that this works, 386 00:21:43.550 --> 00:21:46.390 let's actually now create our controller. 387 00:21:46.390 --> 00:21:48.470 So here we will then log that button 388 00:21:48.470 --> 00:21:52.400 to the console only for now, all right. 389 00:21:52.400 --> 00:21:54.600 And so now let's go to the controller 390 00:21:54.600 --> 00:21:57.173 and as always create a new controller here. 391 00:21:58.360 --> 00:22:00.400 So basically this is the controller 392 00:22:00.400 --> 00:22:02.830 that will be executed whenever a click 393 00:22:02.830 --> 00:22:04.563 on one of the buttons happens. 394 00:22:06.620 --> 00:22:11.620 So controlPagination is a function, 395 00:22:14.710 --> 00:22:17.840 which for now doesn't really do anything, 396 00:22:17.840 --> 00:22:21.970 let's just call it Pag controller. 397 00:22:21.970 --> 00:22:24.143 So simply logging this to the console, 398 00:22:25.190 --> 00:22:27.223 but what matters here is that now, 399 00:22:28.170 --> 00:22:32.900 we call the paginationView and addhandlerClick. 400 00:22:32.900 --> 00:22:35.600 And so this will then, of course, 401 00:22:35.600 --> 00:22:37.240 call this function here, 402 00:22:37.240 --> 00:22:40.230 which in turn will call addEventListener, 403 00:22:40.230 --> 00:22:43.080 so that we can start listening for the click event 404 00:22:43.930 --> 00:22:48.313 on this pagination element, okay. 405 00:22:49.260 --> 00:22:52.063 Now here we also parse in the handler. 406 00:22:53.100 --> 00:22:55.840 So that's controlPagination, 407 00:22:55.840 --> 00:22:59.650 And so just, again to check if everything is working, 408 00:22:59.650 --> 00:23:02.823 let's simply also call that handler right here. 409 00:23:03.960 --> 00:23:06.590 So once we click on the button now, 410 00:23:06.590 --> 00:23:09.740 we should see this button logged to the console, 411 00:23:09.740 --> 00:23:13.000 and then also the handler function should run, 412 00:23:13.000 --> 00:23:15.880 which is, of course, this one, 413 00:23:15.880 --> 00:23:19.250 and so that should then log Pag controller. 414 00:23:19.250 --> 00:23:20.363 So let's see. 415 00:23:24.230 --> 00:23:27.440 So looks like we're still on the last page. 416 00:23:27.440 --> 00:23:30.530 Let's click and yeah. 417 00:23:30.530 --> 00:23:33.350 So everything works as expected, 418 00:23:33.350 --> 00:23:35.890 we have the button correctly selected, 419 00:23:35.890 --> 00:23:38.643 and it also says pagination controller. 420 00:23:39.720 --> 00:23:40.670 Great. 421 00:23:40.670 --> 00:23:44.270 So now we have the click on the button, 422 00:23:44.270 --> 00:23:46.210 so it is correctly selected 423 00:23:46.210 --> 00:23:48.553 but why did we actually select the button? 424 00:23:49.520 --> 00:23:52.220 Well, we need a way of knowing 425 00:23:52.220 --> 00:23:55.760 which is the page where we need to go now. 426 00:23:55.760 --> 00:23:58.080 So it says here page five 427 00:23:58.080 --> 00:23:59.483 but how will JavaScript know 428 00:23:59.483 --> 00:24:01.960 that it should now actually display 429 00:24:01.960 --> 00:24:04.920 the results of page number five here? 430 00:24:04.920 --> 00:24:08.050 Well, this is where we, one more time, 431 00:24:08.050 --> 00:24:10.730 need to basically establish a connection 432 00:24:10.730 --> 00:24:13.810 between the dumb and our code. 433 00:24:13.810 --> 00:24:15.920 And so remember that we can do that 434 00:24:15.920 --> 00:24:18.123 using the custom data attributes. 435 00:24:19.130 --> 00:24:20.490 So what we will do here 436 00:24:20.490 --> 00:24:22.520 is to create a data attribute 437 00:24:22.520 --> 00:24:24.240 on each of the buttons, 438 00:24:24.240 --> 00:24:27.710 which will contain the page that we want to go to. 439 00:24:27.710 --> 00:24:29.290 And so then in our code, 440 00:24:29.290 --> 00:24:33.100 we can read that data and make JavaScript 441 00:24:33.100 --> 00:24:36.670 or make our application go to that exact page. 442 00:24:36.670 --> 00:24:40.110 And so this is basically the final piece 443 00:24:40.110 --> 00:24:44.180 of the puzzle, okay. 444 00:24:44.180 --> 00:24:45.540 So here in our button, 445 00:24:45.540 --> 00:24:48.173 let's now add that data attribute, 446 00:24:49.640 --> 00:24:53.293 so data, and I'm gonna call it goto. 447 00:24:56.860 --> 00:24:59.190 And so the page to want to go to 448 00:24:59.190 --> 00:25:01.093 is exactly the same as this one. 449 00:25:02.870 --> 00:25:05.590 So basically exactly the same that it says 450 00:25:06.700 --> 00:25:08.303 in the button text itself. 451 00:25:09.720 --> 00:25:11.453 So now let's copy that everywhere. 452 00:25:12.540 --> 00:25:15.653 Here it is page number, so minus one. 453 00:25:17.980 --> 00:25:19.513 Here again minus one. 454 00:25:21.950 --> 00:25:26.950 And then here on this it is page plus one, right. 455 00:25:28.490 --> 00:25:29.690 And so then here, 456 00:25:29.690 --> 00:25:33.890 we can actually get that number, of course, 457 00:25:33.890 --> 00:25:34.913 from the button. 458 00:25:37.270 --> 00:25:38.550 So let's call it goToPage 459 00:25:40.650 --> 00:25:43.990 and it is btn.dataset.goto. 460 00:25:49.130 --> 00:25:52.380 And then let's log that to the console. 461 00:25:54.000 --> 00:25:55.720 All right. 462 00:25:55.720 --> 00:25:58.500 And actually, let's go to some other page. 463 00:25:58.500 --> 00:26:02.560 So basically start this here on page four, 464 00:26:02.560 --> 00:26:03.960 just so we have two buttons. 465 00:26:08.780 --> 00:26:12.520 Very weird what's happening here with the scroll. 466 00:26:12.520 --> 00:26:15.320 But anyway, here we have now, 467 00:26:15.320 --> 00:26:17.823 the buttons for page three and five. 468 00:26:18.780 --> 00:26:20.720 So let's click. 469 00:26:20.720 --> 00:26:23.110 And indeed, here we have the five, 470 00:26:23.110 --> 00:26:26.450 and we also successfully read the five here. 471 00:26:26.450 --> 00:26:28.270 Now you see that this is here, 472 00:26:28.270 --> 00:26:29.890 like kind of in this white, 473 00:26:29.890 --> 00:26:32.740 while this here is purple. 474 00:26:32.740 --> 00:26:36.190 So remember that purple here means the number, 475 00:26:36.190 --> 00:26:38.240 and so this is still a string, 476 00:26:38.240 --> 00:26:40.540 and so we will need to convert that. 477 00:26:40.540 --> 00:26:42.870 But another thing that I wanted to show you, 478 00:26:42.870 --> 00:26:44.260 is that of course, 479 00:26:44.260 --> 00:26:49.140 we can also click outside of one of the buttons, right. 480 00:26:49.140 --> 00:26:51.960 And so then here the button is of course null, 481 00:26:51.960 --> 00:26:54.883 and we get an error by trying to read the data set. 482 00:26:56.870 --> 00:27:00.460 So, let's first convert 483 00:27:00.460 --> 00:27:03.170 that value we get from the user interface, 484 00:27:03.170 --> 00:27:05.250 but all of this should only happen 485 00:27:05.250 --> 00:27:07.303 if there actually is a button. 486 00:27:08.510 --> 00:27:12.550 So, yet another guard clause here, 487 00:27:12.550 --> 00:27:14.483 saying if there is no button, 488 00:27:16.080 --> 00:27:19.713 then return immediately, okay. 489 00:27:22.280 --> 00:27:24.543 So let's try another one now, pasta, 490 00:27:27.020 --> 00:27:28.420 and if we click now, 491 00:27:28.420 --> 00:27:31.240 then here we get the number three, 492 00:27:31.240 --> 00:27:35.360 and here, the number five, right. 493 00:27:35.360 --> 00:27:38.713 So, what are we going to do now with this number? 494 00:27:40.140 --> 00:27:43.300 Well, we can simply parse that number back 495 00:27:43.300 --> 00:27:45.360 to the controller basically. 496 00:27:45.360 --> 00:27:46.800 And then in the controller, 497 00:27:46.800 --> 00:27:50.010 we can finally, finally use that number 498 00:27:50.010 --> 00:27:51.750 to actually render the results 499 00:27:51.750 --> 00:27:53.540 on the page that we want, 500 00:27:53.540 --> 00:27:57.283 by using, again, this method here, all right. 501 00:27:58.230 --> 00:28:02.370 So these pagination and results controllers 502 00:28:02.370 --> 00:28:04.940 are kind of intertwined. 503 00:28:04.940 --> 00:28:07.510 So I think that this is a little bit confusing 504 00:28:07.510 --> 00:28:08.950 because of that, 505 00:28:08.950 --> 00:28:12.360 but if you analyze all of this here, maybe afterwards, 506 00:28:12.360 --> 00:28:14.590 you'll see that it makes sense. 507 00:28:14.590 --> 00:28:17.070 So we already see that here in the controller 508 00:28:17.070 --> 00:28:20.120 we are rendering the pagination in the beginning, 509 00:28:20.120 --> 00:28:21.720 and so here in the pagination 510 00:28:21.720 --> 00:28:24.393 we will later render the new results. 511 00:28:25.820 --> 00:28:28.453 But let's not get ahead of ourselves. 512 00:28:29.320 --> 00:28:30.950 So what I want to do now here 513 00:28:30.950 --> 00:28:34.903 is to actually parse that page into the handler. 514 00:28:37.280 --> 00:28:38.220 Okay. 515 00:28:38.220 --> 00:28:39.680 And so of course our handler 516 00:28:39.680 --> 00:28:42.163 now needs to accept this value. 517 00:28:43.730 --> 00:28:45.977 So let's call it again, goToPage. 518 00:28:49.020 --> 00:28:51.313 And just to see, again, if this works, 519 00:28:53.700 --> 00:28:56.023 log that value to the console. 520 00:28:58.070 --> 00:28:58.963 Okay. 521 00:29:00.070 --> 00:29:02.730 And indeed, we get page number five, 522 00:29:02.730 --> 00:29:05.170 which is the button that we clicked on, 523 00:29:05.170 --> 00:29:07.183 coming from the controller this time. 524 00:29:08.170 --> 00:29:09.360 And now, finally, 525 00:29:09.360 --> 00:29:11.100 what should actually happen here 526 00:29:11.100 --> 00:29:14.313 on the user interface, once we click this button? 527 00:29:15.270 --> 00:29:18.060 Well, we should get the search results 528 00:29:18.060 --> 00:29:19.820 for page number five, 529 00:29:19.820 --> 00:29:23.010 and they should be rendered here, right. 530 00:29:23.010 --> 00:29:26.263 And then also new buttons should be rendered too. 531 00:29:27.690 --> 00:29:31.000 So this should then change to page four, 532 00:29:31.000 --> 00:29:33.130 and this to page Six. 533 00:29:33.130 --> 00:29:35.180 Because when we go forward, 534 00:29:35.180 --> 00:29:37.420 then these two values here are, of course, 535 00:29:37.420 --> 00:29:40.430 going to increase, okay. 536 00:29:40.430 --> 00:29:42.500 And so let's simply do that. 537 00:29:42.500 --> 00:29:44.800 And we already know how to do it, 538 00:29:44.800 --> 00:29:47.083 because we already did it before. 539 00:29:48.270 --> 00:29:51.850 So, remember I said we want to render the results 540 00:29:51.850 --> 00:29:54.860 and we want to render the pagination buttons. 541 00:29:54.860 --> 00:29:58.500 And so that is exactly what we already have here. 542 00:29:58.500 --> 00:30:03.500 And so, let's simply copy and paste it right here. 543 00:30:03.880 --> 00:30:07.963 So let me change this here to render new results. 544 00:30:09.400 --> 00:30:14.400 And then here, render new pagination buttons. 545 00:30:14.770 --> 00:30:18.090 And then here, of course, we want not number four 546 00:30:18.090 --> 00:30:19.653 but we want goToPage. 547 00:30:20.720 --> 00:30:24.460 And then here rendering the new pagination buttons 548 00:30:24.460 --> 00:30:28.990 is actually going to stay exactly the same, right. 549 00:30:28.990 --> 00:30:31.240 So, when we do this here, 550 00:30:31.240 --> 00:30:34.480 so get search results with this new page, 551 00:30:34.480 --> 00:30:36.030 let's say four, 552 00:30:36.030 --> 00:30:37.320 then here in the model, 553 00:30:37.320 --> 00:30:40.660 state.search.page gets updated 554 00:30:40.660 --> 00:30:43.520 to that new value, right. 555 00:30:43.520 --> 00:30:46.850 So the state.search object is then different, 556 00:30:46.850 --> 00:30:49.450 and so that is the object that we then parse 557 00:30:49.450 --> 00:30:52.970 into rendering the new pagination. 558 00:30:52.970 --> 00:30:53.840 And so therefore, 559 00:30:53.840 --> 00:30:55.840 it will then render new buttons 560 00:30:55.840 --> 00:31:00.790 because the page before has been changed, okay. 561 00:31:00.790 --> 00:31:03.400 And so this should now actually work. 562 00:31:03.400 --> 00:31:05.390 Just keep in mind that we will, again, 563 00:31:05.390 --> 00:31:08.320 start at page number four. 564 00:31:08.320 --> 00:31:10.543 Well let's actually make that page three. 565 00:31:11.790 --> 00:31:15.260 Oh, and before actually checking out the results, 566 00:31:15.260 --> 00:31:18.260 I just wanted to say that this actually works 567 00:31:18.260 --> 00:31:21.090 because render will basically overwrite 568 00:31:21.090 --> 00:31:24.170 the markup that was there previously. 569 00:31:24.170 --> 00:31:25.693 And the reason for that is 570 00:31:25.693 --> 00:31:28.730 that we here have the clear method. 571 00:31:28.730 --> 00:31:32.900 And so before any new HTML is inserted into the page, 572 00:31:32.900 --> 00:31:36.280 the parentElement is first cleared, 573 00:31:36.280 --> 00:31:39.020 so it's first emptied, right. 574 00:31:39.020 --> 00:31:43.500 And so then that means that render here 575 00:31:43.500 --> 00:31:46.610 basically overwrites everything that was there 576 00:31:46.610 --> 00:31:49.133 and puts the new content in the same place. 577 00:31:50.560 --> 00:31:55.450 But anyway, let's make sure to reload, pizza, 578 00:31:55.450 --> 00:31:58.600 and we are at page number three. 579 00:31:58.600 --> 00:32:01.540 And now let's see the magic happen. 580 00:32:01.540 --> 00:32:04.043 And I hope we don't have any bug here. 581 00:32:05.140 --> 00:32:07.900 And it works! 582 00:32:07.900 --> 00:32:10.010 So beautiful, beautiful. 583 00:32:10.010 --> 00:32:12.660 And congratulations also for you 584 00:32:12.660 --> 00:32:15.730 to following up until this point. 585 00:32:15.730 --> 00:32:19.150 So this is, I think up until this point, 586 00:32:19.150 --> 00:32:21.663 the most impressive work that we have done. 587 00:32:23.880 --> 00:32:28.160 So you see everything updates here just as expected, 588 00:32:28.160 --> 00:32:30.080 we get new content, 589 00:32:30.080 --> 00:32:33.640 and now page six, you see here, 590 00:32:33.640 --> 00:32:36.283 will be the last page, so let's see. 591 00:32:37.280 --> 00:32:40.970 And yeah, so now we don't have the last button, 592 00:32:40.970 --> 00:32:43.203 and we can only go back to page five. 593 00:32:44.420 --> 00:32:46.700 So now let's go to the first page, 594 00:32:46.700 --> 00:32:50.010 and indeed, we can only now move forward 595 00:32:50.010 --> 00:32:52.830 and get the first 10 results here. 596 00:32:52.830 --> 00:32:55.283 So, really great work here. 597 00:32:56.510 --> 00:32:58.903 I'm really happy about this progress here. 598 00:32:59.770 --> 00:33:02.490 Now just to make sure, one more thing, 599 00:33:02.490 --> 00:33:05.800 let's try this here with the results per page 600 00:33:05.800 --> 00:33:06.863 of a different value. 601 00:33:08.670 --> 00:33:11.150 So let's say that we actually wanted 602 00:33:11.150 --> 00:33:13.623 like only five results per page. 603 00:33:15.470 --> 00:33:20.470 So then we should get a lot more pages. 604 00:33:20.510 --> 00:33:22.340 And so it's important that we check 605 00:33:22.340 --> 00:33:23.883 that that actually works. 606 00:33:25.210 --> 00:33:29.110 So you see that it does actually work already. 607 00:33:29.110 --> 00:33:31.680 So we only have five results here now, 608 00:33:31.680 --> 00:33:33.720 and we can also already see 609 00:33:33.720 --> 00:33:35.643 that we will have 12 pages. 610 00:33:38.140 --> 00:33:41.770 Oh, and we are still on page number three. 611 00:33:41.770 --> 00:33:44.520 But now we will be able to go back 612 00:33:44.520 --> 00:33:48.303 or actually to go forward to page number 12. 613 00:33:50.230 --> 00:33:55.230 And so each of these pages only has five recipes. 614 00:33:59.000 --> 00:34:00.730 And now let's just try to search 615 00:34:00.730 --> 00:34:03.220 for something that is not very common, 616 00:34:03.220 --> 00:34:05.523 like dip for example. 617 00:34:08.200 --> 00:34:11.273 And, wow, we still have a couple of pages here actually. 618 00:34:14.320 --> 00:34:16.390 But before we go any further, 619 00:34:16.390 --> 00:34:19.870 let's put this here actually to zero 620 00:34:19.870 --> 00:34:21.320 or actually to one, 621 00:34:21.320 --> 00:34:23.280 and remember that parsing nothing 622 00:34:23.280 --> 00:34:26.093 is basically the same as setting it to one. 623 00:34:30.800 --> 00:34:33.483 So let's try dip here again. 624 00:34:35.370 --> 00:34:38.370 But it seems like we have still six pages. 625 00:34:38.370 --> 00:34:40.600 So I just wanted to find some search term 626 00:34:40.600 --> 00:34:42.690 that only has one page. 627 00:34:42.690 --> 00:34:44.173 Let's try hummus maybe. 628 00:34:45.110 --> 00:34:47.233 Ah, but we again have four pages. 629 00:34:48.140 --> 00:34:52.450 Well we can fake that by, or here, 630 00:34:52.450 --> 00:34:56.090 by having 50 results on one page. 631 00:34:56.090 --> 00:34:57.133 And so with this, 632 00:34:59.140 --> 00:35:03.150 we should already only have one page with pasta. 633 00:35:03.150 --> 00:35:05.850 So pasta has 45 results, 634 00:35:05.850 --> 00:35:08.320 but here we want 50 on one page. 635 00:35:08.320 --> 00:35:10.910 So we only have one page you see, 636 00:35:10.910 --> 00:35:12.683 and indeed, no buttons. 637 00:35:14.500 --> 00:35:15.790 Great. 638 00:35:15.790 --> 00:35:20.213 Let's put it back to a meaningful value, so 10. 639 00:35:22.010 --> 00:35:24.713 And so with this, we are actually done. 640 00:35:25.560 --> 00:35:29.163 Let's just clean up our code here a little bit more, 641 00:35:30.370 --> 00:35:32.170 but I think that with this 642 00:35:32.170 --> 00:35:36.850 we are now good to call this finished. 643 00:35:36.850 --> 00:35:40.100 And actually we finished now the entire part one 644 00:35:40.100 --> 00:35:42.990 of our flowchart, right. 645 00:35:42.990 --> 00:35:46.300 So this was already done, this here as well. 646 00:35:46.300 --> 00:35:48.820 And now, here what we did 647 00:35:48.820 --> 00:35:51.840 was to listen to this event, 648 00:35:51.840 --> 00:35:53.860 then render the pagination buttons, 649 00:35:53.860 --> 00:35:54.860 and of course, 650 00:35:54.860 --> 00:35:57.490 render the corresponding search results. 651 00:35:57.490 --> 00:35:59.800 So all of this is now in place, 652 00:35:59.800 --> 00:36:03.980 but I ask you to really analyze again 653 00:36:03.980 --> 00:36:07.440 the code that we have here in control pagination, 654 00:36:07.440 --> 00:36:10.960 as well as here in control search results. 655 00:36:10.960 --> 00:36:13.030 Because again, these two controllers, 656 00:36:13.030 --> 00:36:15.270 they're kind of intertwined. 657 00:36:15.270 --> 00:36:18.150 So they both are doing similar things, 658 00:36:18.150 --> 00:36:21.370 at least when it comes to displaying the pagination 659 00:36:21.370 --> 00:36:24.040 and the results themselves. 660 00:36:24.040 --> 00:36:25.340 So it's very important 661 00:36:25.340 --> 00:36:28.053 that you understand the flow of this data here, 662 00:36:29.780 --> 00:36:34.380 especially of this, goToPage, okay. 663 00:36:34.380 --> 00:36:36.170 And then maybe also analyze again 664 00:36:36.170 --> 00:36:38.030 how all of this here works, 665 00:36:38.030 --> 00:36:40.960 but then you're good to go to the next video. 666 00:36:40.960 --> 00:36:43.010 And so there we will discuss, 667 00:36:43.010 --> 00:36:46.570 basically our next step, what we should do next. 668 00:36:46.570 --> 00:36:49.310 So that next video is gonna be a lot shorter, 669 00:36:49.310 --> 00:36:51.890 so that we can finally take a break 670 00:36:51.890 --> 00:36:53.640 from this application. 671 00:36:53.640 --> 00:36:56.730 So again, analyze this like I told you to, 672 00:36:56.730 --> 00:36:58.500 and then after you're ready, 673 00:36:58.500 --> 00:37:03.083 let's go move on to our next part of the flowchart.