Original subtitles

1 1

Welcome back to the next feature 2

2

of the Forkify Application 3

3

and this one is going to be Pagination. 4

4

So lets take a look at our current implementation 5

5

of the search to get an idea what the problem is. 6

6

So you see we have 59 results for pizza 7

7

but now all of these results are displayed here, 8

8

basically at once. 9

9

Right? 10

10

And so this is not user friendly at all. 11

11

So and a final demo application, 12

12

we only have 10 results on this page 13

13

and then we can go to the next page 14

14

and basically get the next 10 results. 15

15

And so that's what we want to do right now 16

16

in our application as well. 17

17

Now, this problem is actually harder to solve 18

18

than it might seem like 19

19

but I'm sure that together we can do it. 20

20

So let's think about what we have to do here. 21

21

So remember that it is the control search results function 22

22

that is responsible for rendering 23

23

the search results right here. 24

24

And currently, we are simply rendering 25

25

all the search results like this. 26

26

However, in the first page, we only want 27

27

to render 10 results and not all of the results. 28

28

Right? 29

29

And then if we're on page one, 30

30

we want to render the second 10 results. 31

31

So from result 11 to result 20. 32

32

And so let's basically create a function in our model 33

33

which will take in the page that we want to render 34

34

and which will then only return the results 35

35

that we actually want to render for that page. 36

36

Okay? 37

37

And that's actually not so difficult. 38

38

So let's create a new function here 39

39

and also export it and let's call it 40

40

get search results page. 41

41

So I function and this one is of course 42

42

not going to be an a sync function 43

43

because we already have the search results 44

44

loaded at this point. 45

45

So at the point when we will call this function. 46

46

All we want to do in this function, 47

47

is basically reach into the state 48

48

and then get the data for the page that is being requested. 49

49

So what we will return here, 50

50

is basically a part of the results. 51

51

So let's write that here because that will be helpful 52

52

to understand the logic we need to write here. 53

53

So we will return state.search.results, 54

54

which remember is this array here. 55

55

Right? 56

56

And then we only want to return part of it 57

57

and so that's a slice. 58

58

So again for the first page, 59

59

we would like to return from result one to result 10. 60

60

And so that would be zero to nine actually 61

61

because the array is zero based. 62

62

Now of course, we're not gonna hard code these values here 63

63

but we can basically calculate them based on the page. 64

64

So let me try that. 65

65

So we will basically create a start variable. 66

66

So let's set that to zero for now. 67

67

So basically having the same values as here 68

68

and also an end variable. 69

69

So we want to start at a certain point 70

70

and then also end at a certain point. 71

71

Right? 72

72

But again, we don't want to hard code 73

73

these values of course but instead, 74

74

we want to calculate them dynamically. 75

75

So here we will want a nine and here a zero 76

76

and so how can we calculate that? 77

77

Well, the easiest way that everyone does it, 78

78

or at least, I think that's the way that everyone does it, 79

79

is to take the page and then minus one 80

80

and then simply multiply it by the amount of results 81

81

that we want on the page. 82

82

So let's say 10 here for now 83

83

and then here we do the same, simply with page. 84

84

So page times 10. 85

85

Okay? 86

86

So let's say that we requested page one. 87

87

So one minus one is zero and zero times 10 is then zero. 88

88

So just as we wanted and for the end parameter 89

89

then pages one times 10 is 10. 90

90

And actually the slice method here does not include 91

91

the last value that we pass in 92

92

and so actually 10 is perfect here. 93

93

So that will then extract all the way to nine. 94

94

Now one page is two, so for page two, 95

95

then here we will have two minus one is one, times 10,10. 96

96

So it will start at 10 97

97

and then go to two times 10 which is 20. 98

98

And the same for all the other pages that we pass in. 99

99

And so this is actually already it. 100

100

Now let's just refactor this code 101

101

because of course this year isn't important data about 102

102

or application and so it should go into the state. 103

103

Okay? 104

104

So let's call that results per page 105

105

and so let's set it to 10. 106

106

So here instead of 10, 107

107

we have state.search.results per page. 108

108

So that's a lot better. 109

109

But actually, we can do even better 110

110

because this year now looks kind 111

111

of like a magic number, right? 112

112

So a number that comes out of nowhere 113

113

and so I think you can see where I'm going with this. 114

114

So I will create another constant in our configuration file 115

115

and then if at some point in the future 116

116

we want to change the configuration, 117

117

in this case of the results we want per page, 118

118

we can simply come here to 119

119

the configuration file and change that. 120

120

So let's import that. 121

121

So that's right here, replace that here, man, 122

122

so that should work just fine now. 123

123

Now, okay and now let's go back to our controller 124

124

and so, again this is the way we did it previously, 125

125

so all the results but now we only want some results. 126

126

And so we can now call that function that we just created. 127

127

So model.get search results and then let's say 128

128

we want to start with page one. 129

129

And of course we will then later on 130

130

get this value here dynamically. 131

131

But for now we just want to see if this actually works. 132

132

So let's see and let's search here again for pizza. 133

133

So again 59 results. 134

134

But we still get all the results here for some reason. 135

135

So let's only lock this here to the console. 136

136

So just to see what our function here is doing. 137

137

Well, apparently, it doesn't really do anything. 138

138

So get search results per page. 139

139

I think that is the correct name. 140

140

So that should actually work. 141

141

Well, let's just log something here, 142

142

just so we see if this function is actually being executed. 143

143

So start and end. 144

144

Well, nothing is happening here for some reason. 145

145

Maybe we need to stop parcel, 146

146

sometimes that is necessary and then run it again. 147

147

So let's build it all again. 148

148

Let's also try it again. 149

149

Ah, and now it seems to work and indeed, 150

150

now we only get 10 results. 151

151

So sometimes you actually have to stop and restart parcel. 152

152

This isn't the first time that this has happened to me 153

153

and probably I should have warned you 154

154

about this problem also earlier 155

155

but anyway, now we see that this actually worked. 156

156

So great, then we can get rid of this 157

157

and also have this console.log right here. 158

158

Okay? now let's try something else, like page two. 159

159

But apparently it didn't change anything. 160

160

Maybe we just have to turn off the hot module reload. 161

161

Let's try that. 162

162

Now, and now I think that these 10 here are different 163

163

or are they? Well, I'm not sure let's try page number three. 164

164

So we started with pizza dip. 165

165

So let's see what we get this time at first. 166

166

Yeah, so these actually look new to me 167

167

so it looks like Currently, we are indeed, 168

168

on page number three. 169

169

Now, okay and now just to finish this part, 170

170

here in our model, we should also store 171

171

this page number that is coming in, in the state 172

172

and that's going to be important because later 173

173

when we will display the page number here, 174

174

then we kind of need to know at which page we actually are. 175

175

Okay? 176

176

And so, this really makes sense because, again, this 177

177

is a very important piece of data about our application. 178

178

And so it's good that in any point of time, 179

179

we can know in our application on which page 180

180

we currently are in the search results. 181

181

So let's simply say state.search.page is equal to page. 182

182

And then let's actually also set it up here. 183

183

So the page, we can set it to one by default. 184

184

Okay? 185

185

And then finally, we can make this even better 186

186

and say that by default, the page should be that default. 187

187

So state.search.page. 188

188

And so now if we don't pass anything into the page, 189

189

then the page will simply become the default 190

190

of one that we just had before. 191

191

So we can remove that one from there 192

192

and it should then still be working in our own version, 193

193

so pasta this time, and yeah, so here we get or 10 results. 194

194

And so we are done with this part 195

195

but this was actually the easy part 196

196

because now we need to render the pagination buttons here 197

197

and so let's leave that for the next video.