WEBVTT 1 00:00:01.130 --> 00:00:03.700 Welcome back to the next feature 2 00:00:03.700 --> 00:00:06.080 of the Forkify Application 3 00:00:06.080 --> 00:00:08.783 and this one is going to be Pagination. 4 00:00:10.280 --> 00:00:13.260 So lets take a look at our current implementation 5 00:00:13.260 --> 00:00:17.850 of the search to get an idea what the problem is. 6 00:00:17.850 --> 00:00:22.270 So you see we have 59 results for pizza 7 00:00:22.270 --> 00:00:25.510 but now all of these results are displayed here, 8 00:00:25.510 --> 00:00:27.562 basically at once. 9 00:00:27.562 --> 00:00:28.600 Right? 10 00:00:28.600 --> 00:00:31.710 And so this is not user friendly at all. 11 00:00:31.710 --> 00:00:35.370 So and a final demo application, 12 00:00:35.370 --> 00:00:38.320 we only have 10 results on this page 13 00:00:38.320 --> 00:00:40.610 and then we can go to the next page 14 00:00:40.610 --> 00:00:44.080 and basically get the next 10 results. 15 00:00:44.080 --> 00:00:47.570 And so that's what we want to do right now 16 00:00:47.570 --> 00:00:49.910 in our application as well. 17 00:00:49.910 --> 00:00:53.180 Now, this problem is actually harder to solve 18 00:00:53.180 --> 00:00:55.090 than it might seem like 19 00:00:55.090 --> 00:00:58.580 but I'm sure that together we can do it. 20 00:00:58.580 --> 00:01:01.433 So let's think about what we have to do here. 21 00:01:02.530 --> 00:01:06.400 So remember that it is the control search results function 22 00:01:06.400 --> 00:01:08.660 that is responsible for rendering 23 00:01:08.660 --> 00:01:10.533 the search results right here. 24 00:01:11.470 --> 00:01:13.810 And currently, we are simply rendering 25 00:01:13.810 --> 00:01:16.830 all the search results like this. 26 00:01:16.830 --> 00:01:19.530 However, in the first page, we only want 27 00:01:19.530 --> 00:01:23.103 to render 10 results and not all of the results. 28 00:01:24.150 --> 00:01:24.983 Right? 29 00:01:24.983 --> 00:01:27.140 And then if we're on page one, 30 00:01:27.140 --> 00:01:30.580 we want to render the second 10 results. 31 00:01:30.580 --> 00:01:34.400 So from result 11 to result 20. 32 00:01:34.400 --> 00:01:38.060 And so let's basically create a function in our model 33 00:01:38.060 --> 00:01:41.340 which will take in the page that we want to render 34 00:01:41.340 --> 00:01:44.410 and which will then only return the results 35 00:01:44.410 --> 00:01:47.483 that we actually want to render for that page. 36 00:01:49.250 --> 00:01:50.083 Okay? 37 00:01:51.210 --> 00:01:53.393 And that's actually not so difficult. 38 00:01:54.930 --> 00:01:57.730 So let's create a new function here 39 00:01:57.730 --> 00:02:00.580 and also export it and let's call it 40 00:02:00.580 --> 00:02:04.900 get search results page. 41 00:02:06.580 --> 00:02:09.310 So I function and this one is of course 42 00:02:09.310 --> 00:02:11.500 not going to be an a sync function 43 00:02:11.500 --> 00:02:13.890 because we already have the search results 44 00:02:13.890 --> 00:02:15.850 loaded at this point. 45 00:02:15.850 --> 00:02:19.030 So at the point when we will call this function. 46 00:02:19.030 --> 00:02:20.770 All we want to do in this function, 47 00:02:20.770 --> 00:02:23.140 is basically reach into the state 48 00:02:23.140 --> 00:02:26.993 and then get the data for the page that is being requested. 49 00:02:29.870 --> 00:02:32.300 So what we will return here, 50 00:02:32.300 --> 00:02:36.530 is basically a part of the results. 51 00:02:36.530 --> 00:02:39.460 So let's write that here because that will be helpful 52 00:02:39.460 --> 00:02:42.520 to understand the logic we need to write here. 53 00:02:42.520 --> 00:02:47.520 So we will return state.search.results, 54 00:02:47.660 --> 00:02:51.253 which remember is this array here. 55 00:02:52.230 --> 00:02:53.063 Right? 56 00:02:53.063 --> 00:02:56.360 And then we only want to return part of it 57 00:02:56.360 --> 00:02:57.793 and so that's a slice. 58 00:02:59.050 --> 00:03:01.180 So again for the first page, 59 00:03:01.180 --> 00:03:05.820 we would like to return from result one to result 10. 60 00:03:05.820 --> 00:03:09.660 And so that would be zero to nine actually 61 00:03:09.660 --> 00:03:12.940 because the array is zero based. 62 00:03:12.940 --> 00:03:16.350 Now of course, we're not gonna hard code these values here 63 00:03:16.350 --> 00:03:20.800 but we can basically calculate them based on the page. 64 00:03:20.800 --> 00:03:21.973 So let me try that. 65 00:03:23.120 --> 00:03:27.053 So we will basically create a start variable. 66 00:03:27.900 --> 00:03:30.840 So let's set that to zero for now. 67 00:03:30.840 --> 00:03:32.990 So basically having the same values as here 68 00:03:36.610 --> 00:03:40.993 and also an end variable. 69 00:03:42.200 --> 00:03:44.630 So we want to start at a certain point 70 00:03:44.630 --> 00:03:47.283 and then also end at a certain point. 71 00:03:48.400 --> 00:03:49.233 Right? 72 00:03:49.233 --> 00:03:51.450 But again, we don't want to hard code 73 00:03:51.450 --> 00:03:53.630 these values of course but instead, 74 00:03:53.630 --> 00:03:56.273 we want to calculate them dynamically. 75 00:03:57.110 --> 00:04:00.890 So here we will want a nine and here a zero 76 00:04:00.890 --> 00:04:02.733 and so how can we calculate that? 77 00:04:03.680 --> 00:04:06.460 Well, the easiest way that everyone does it, 78 00:04:06.460 --> 00:04:09.890 or at least, I think that's the way that everyone does it, 79 00:04:09.890 --> 00:04:14.890 is to take the page and then minus one 80 00:04:16.350 --> 00:04:19.540 and then simply multiply it by the amount of results 81 00:04:19.540 --> 00:04:21.950 that we want on the page. 82 00:04:21.950 --> 00:04:24.190 So let's say 10 here for now 83 00:04:25.340 --> 00:04:29.390 and then here we do the same, simply with page. 84 00:04:29.390 --> 00:04:33.020 So page times 10. 85 00:04:33.020 --> 00:04:33.853 Okay? 86 00:04:34.890 --> 00:04:38.490 So let's say that we requested page one. 87 00:04:38.490 --> 00:04:43.490 So one minus one is zero and zero times 10 is then zero. 88 00:04:44.070 --> 00:04:47.860 So just as we wanted and for the end parameter 89 00:04:47.860 --> 00:04:52.150 then pages one times 10 is 10. 90 00:04:52.150 --> 00:04:55.590 And actually the slice method here does not include 91 00:04:55.590 --> 00:04:57.584 the last value that we pass in 92 00:04:57.584 --> 00:05:00.440 and so actually 10 is perfect here. 93 00:05:00.440 --> 00:05:04.220 So that will then extract all the way to nine. 94 00:05:04.220 --> 00:05:08.060 Now one page is two, so for page two, 95 00:05:08.060 --> 00:05:13.060 then here we will have two minus one is one, times 10,10. 96 00:05:13.420 --> 00:05:14.840 So it will start at 10 97 00:05:14.840 --> 00:05:18.650 and then go to two times 10 which is 20. 98 00:05:18.650 --> 00:05:22.930 And the same for all the other pages that we pass in. 99 00:05:22.930 --> 00:05:25.630 And so this is actually already it. 100 00:05:25.630 --> 00:05:27.323 Now let's just refactor this code 101 00:05:27.323 --> 00:05:31.100 because of course this year isn't important data about 102 00:05:31.100 --> 00:05:35.253 or application and so it should go into the state. 103 00:05:36.920 --> 00:05:37.753 Okay? 104 00:05:39.090 --> 00:05:44.090 So let's call that results per page 105 00:05:45.810 --> 00:05:47.653 and so let's set it to 10. 106 00:05:51.260 --> 00:05:53.030 So here instead of 10, 107 00:05:53.030 --> 00:05:57.780 we have state.search.results per page. 108 00:06:01.380 --> 00:06:03.630 So that's a lot better. 109 00:06:03.630 --> 00:06:05.880 But actually, we can do even better 110 00:06:05.880 --> 00:06:08.230 because this year now looks kind 111 00:06:08.230 --> 00:06:10.990 of like a magic number, right? 112 00:06:10.990 --> 00:06:13.720 So a number that comes out of nowhere 113 00:06:13.720 --> 00:06:16.653 and so I think you can see where I'm going with this. 114 00:06:17.660 --> 00:06:21.051 So I will create another constant in our configuration file 115 00:06:21.051 --> 00:06:24.010 and then if at some point in the future 116 00:06:24.010 --> 00:06:26.478 we want to change the configuration, 117 00:06:26.478 --> 00:06:30.010 in this case of the results we want per page, 118 00:06:30.010 --> 00:06:31.570 we can simply come here to 119 00:06:31.570 --> 00:06:34.343 the configuration file and change that. 120 00:06:35.670 --> 00:06:36.993 So let's import that. 121 00:06:40.170 --> 00:06:45.170 So that's right here, replace that here, man, 122 00:06:45.910 --> 00:06:48.313 so that should work just fine now. 123 00:06:50.593 --> 00:06:54.560 Now, okay and now let's go back to our controller 124 00:06:54.560 --> 00:06:59.560 and so, again this is the way we did it previously, 125 00:06:59.630 --> 00:07:04.330 so all the results but now we only want some results. 126 00:07:04.330 --> 00:07:08.360 And so we can now call that function that we just created. 127 00:07:08.360 --> 00:07:13.260 So model.get search results and then let's say 128 00:07:13.260 --> 00:07:16.090 we want to start with page one. 129 00:07:16.090 --> 00:07:18.420 And of course we will then later on 130 00:07:18.420 --> 00:07:20.610 get this value here dynamically. 131 00:07:20.610 --> 00:07:23.823 But for now we just want to see if this actually works. 132 00:07:24.750 --> 00:07:29.750 So let's see and let's search here again for pizza. 133 00:07:31.660 --> 00:07:33.833 So again 59 results. 134 00:07:36.830 --> 00:07:41.313 But we still get all the results here for some reason. 135 00:07:43.300 --> 00:07:47.963 So let's only lock this here to the console. 136 00:07:50.040 --> 00:07:53.603 So just to see what our function here is doing. 137 00:07:57.470 --> 00:08:01.093 Well, apparently, it doesn't really do anything. 138 00:08:01.960 --> 00:08:04.790 So get search results per page. 139 00:08:04.790 --> 00:08:07.750 I think that is the correct name. 140 00:08:07.750 --> 00:08:10.423 So that should actually work. 141 00:08:11.360 --> 00:08:13.190 Well, let's just log something here, 142 00:08:13.190 --> 00:08:16.823 just so we see if this function is actually being executed. 143 00:08:17.680 --> 00:08:20.083 So start and end. 144 00:08:24.040 --> 00:08:27.303 Well, nothing is happening here for some reason. 145 00:08:31.020 --> 00:08:34.260 Maybe we need to stop parcel, 146 00:08:34.260 --> 00:08:37.993 sometimes that is necessary and then run it again. 147 00:08:40.900 --> 00:08:42.683 So let's build it all again. 148 00:08:44.780 --> 00:08:47.023 Let's also try it again. 149 00:08:48.970 --> 00:08:52.410 Ah, and now it seems to work and indeed, 150 00:08:52.410 --> 00:08:54.903 now we only get 10 results. 151 00:08:56.510 --> 00:09:00.320 So sometimes you actually have to stop and restart parcel. 152 00:09:00.320 --> 00:09:02.980 This isn't the first time that this has happened to me 153 00:09:02.980 --> 00:09:05.150 and probably I should have warned you 154 00:09:05.150 --> 00:09:07.630 about this problem also earlier 155 00:09:08.500 --> 00:09:12.503 but anyway, now we see that this actually worked. 156 00:09:13.350 --> 00:09:18.130 So great, then we can get rid of this 157 00:09:18.130 --> 00:09:21.723 and also have this console.log right here. 158 00:09:25.380 --> 00:09:28.913 Okay? now let's try something else, like page two. 159 00:09:33.330 --> 00:09:36.610 But apparently it didn't change anything. 160 00:09:36.610 --> 00:09:41.490 Maybe we just have to turn off the hot module reload. 161 00:09:41.490 --> 00:09:42.563 Let's try that. 162 00:09:49.380 --> 00:09:53.690 Now, and now I think that these 10 here are different 163 00:09:53.690 --> 00:09:58.143 or are they? Well, I'm not sure let's try page number three. 164 00:10:00.330 --> 00:10:02.653 So we started with pizza dip. 165 00:10:04.190 --> 00:10:07.023 So let's see what we get this time at first. 166 00:10:09.431 --> 00:10:13.370 Yeah, so these actually look new to me 167 00:10:13.370 --> 00:10:16.330 so it looks like Currently, we are indeed, 168 00:10:16.330 --> 00:10:17.633 on page number three. 169 00:10:18.930 --> 00:10:22.670 Now, okay and now just to finish this part, 170 00:10:22.670 --> 00:10:25.210 here in our model, we should also store 171 00:10:25.210 --> 00:10:28.677 this page number that is coming in, in the state 172 00:10:28.677 --> 00:10:33.350 and that's going to be important because later 173 00:10:33.350 --> 00:10:35.650 when we will display the page number here, 174 00:10:35.650 --> 00:10:40.593 then we kind of need to know at which page we actually are. 175 00:10:41.840 --> 00:10:42.860 Okay? 176 00:10:42.860 --> 00:10:47.570 And so, this really makes sense because, again, this 177 00:10:47.570 --> 00:10:51.333 is a very important piece of data about our application. 178 00:10:52.670 --> 00:10:55.280 And so it's good that in any point of time, 179 00:10:55.280 --> 00:10:58.310 we can know in our application on which page 180 00:10:58.310 --> 00:11:00.563 we currently are in the search results. 181 00:11:02.430 --> 00:11:07.430 So let's simply say state.search.page is equal to page. 182 00:11:11.910 --> 00:11:15.283 And then let's actually also set it up here. 183 00:11:17.320 --> 00:11:22.230 So the page, we can set it to one by default. 184 00:11:22.230 --> 00:11:23.820 Okay? 185 00:11:23.820 --> 00:11:27.160 And then finally, we can make this even better 186 00:11:27.160 --> 00:11:31.003 and say that by default, the page should be that default. 187 00:11:32.590 --> 00:11:37.590 So state.search.page. 188 00:11:37.859 --> 00:11:41.230 And so now if we don't pass anything into the page, 189 00:11:41.230 --> 00:11:43.950 then the page will simply become the default 190 00:11:43.950 --> 00:11:46.093 of one that we just had before. 191 00:11:47.100 --> 00:11:51.080 So we can remove that one from there 192 00:11:51.080 --> 00:11:56.080 and it should then still be working in our own version, 193 00:11:57.460 --> 00:12:02.460 so pasta this time, and yeah, so here we get or 10 results. 194 00:12:03.360 --> 00:12:05.690 And so we are done with this part 195 00:12:05.690 --> 00:12:07.981 but this was actually the easy part 196 00:12:07.981 --> 00:12:12.981 because now we need to render the pagination buttons here 197 00:12:13.560 --> 00:12:15.733 and so let's leave that for the next video.