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.