Original subtitles

1 1

So let's now finish 2

2

building the pagination feature. 3

3

And for that let's actually think 4

4

about some different scenarios. 5

5

And to do that, 6

6

I will actually come here to the demo. 7

7

So the buttons that we want to render down here 8

8

are not always the same. 9

9

So, in this first scenario we are on page one. 10

10

And so therefore, 11

11

only this next button here is showing, right. 12

12

But there is, of course, no button to go back. 13

13

Now, if we had actually less than 10 results, 14

14

so basically only one search page, 15

15

then there would be no buttons at all. 16

16

Then if we are on some other page, 17

17

which is not the first page, 18

18

well, then we have a button to go back 19

19

and one to go forward. 20

20

So that is basically the third scenario. 21

21

And then if we go all the way to the last page, 22

22

then we only have a button to go back. 23

23

And so we have to account 24

24

for all of these different scenarios, okay. 25

25

So let's go back 26

26

and basically implement a new view 27

27

for this pagination. 28

28

So, here in the views, 29

29

we create a new file called paginationView.js. 30

30

And here let's actually copy some code from here 31

31

so we don't have the same work 32

32

over and over again. 33

33

Then of course, this one here is called PaginationView, 34

34

and the parent element is not this one, 35

35

so let's go check out or markup. 36

36

And so here we already are had the right element. 37

37

So you see that after this unordered list of results, 38

38

we have this div element with a class of pagination. 39

39

And so then this one here already contains the template 40

40

for a button to go back, 41

41

so to the previous page, 42

42

and one button to go to the next page. 43

43

So we're going to need this soon 44

44

but for now let's just complete this setup here, okay. 45

45

And so now just as all the other classes, 46

46

we will have a generate markup method here, 47

47

generateMarkup, 48

48

because remember, that is the method 49

49

that the render method is going to call 50

50

in order to generate the markup 51

51

for the view that we're working on, right. 52

52

So again, every view, at least every view 53

53

that renders something to the user interface 54

54

needs a generate markup method. 55

55

So that's this one here. 56

56

And so now let's account 57

57

for these different scenarios that we just saw. 58

58

So let's say the first one is, we are at page one, 59

59

and there are other pages. 60

60

Then the next one is we are on page one, 61

61

and there are no other pages. 62

62

Then there is the scenario that we are 63

63

on the last page, 64

64

and also the scenario 65

65

that we are on some other page, basically. 66

66

So other page, like this, okay. 67

67

So what data do we need in order to figure out 68

68

if we are on page one, 69

69

and if there are other pages? 70

70

Well, for that, we are going to need, basically, 71

71

this entire search object here. 72

72

So this contains all the search results, 73

73

and also the current page and the results per page. 74

74

And so we will need all of this data 75

75

in order to compute 76

76

which buttons should be displayed, all right. 77

77

And so let's actually go to our controller, 78

78

and already call the render function 79

79

so that we can parse in the data that we need, 80

80

and so that we can then use it. 81

81

And, well, when do we actually want 82

82

to display the pagination? 83

83

Well, it's actually right at the moment 84

84

when we are also displaying the search results. 85

85

So we will actually do that right here 86

86

after displaying the results. 87

87

So we get the search query, 88

88

load the search results, render the results, 89

89

and then also render the initial pagination buttons. 90

90

And so now here we actually need to export this view, 91

91

so that we can then import it into the controller. 92

92

So just like we have been doing in all the other views, 93

93

we say export default, 94

94

and then a new PaginationView object. 95

95

And so then we come here and import that. 96

96

So results becomes pagination, 97

97

and now of course that view 98

98

has a render method on it. 99

99

So paginationView.render, 100

100

and here we need to parse in 101

101

basically the entire search object. 102

102

So state.search. 103

103

And actually that's model.state.search. 104

104

And so now, 105

105

through the magic of this view class here, 106

106

we now get access to this data 107

107

that we just parsed in, in this._data, right. 108

108

So right here, this._data 109

109

is now the entire search results object basically. 110

110

So, in order to figure out if we are on page one 111

111

and there are other pages, 112

112

we need to know how many pages there are. 113

113

So, let's compute that. 114

114

So const numPages, 115

115

and how do we actually know the number of pages? 116

116

Well, basically we need the number of results 117

117

divided by the number of results per page, right. 118

118

So for example if we had 60 results, 119

119

and 10 results per page, then, we had six pages. 120

120

So, the number of results comes from this.data.results. 121

121

So let's check that in the model here again. 122

122

So results, again, is the entire array, 123

123

which contains, so all the search results, 124

124

and then we also have results per page, 125

125

which is this configuration constant 126

126

that we set to 10, remember. 127

127

So let me copy this, 128

128

and then here we will divide that. 129

129

So this.data.resultsPerPage. 130

130

And this is a very important variable, 131

131

so let's start by logging it to the console, 132

132

and with this, we will then also know 133

133

if we correctly hooked everything up here. 134

134

So basically, if this render here 135

135

of the pagination view is already doing its work. 136

136

So let's see. 137

137

Searching for pizza. 138

138

Well, here we get some, (chuckles) not a number. 139

139

And of course, well, 140

140

here actually we already have something rendered. 141

141

And so that's undefined because right now 142

142

we are not returning anything from this function. 143

143

And so if we don't return anything 144

144

by default undefined is returned, 145

145

and so that's 10 basically rendered here to the page. 146

146

But anyway, what matters here 147

147

is that for some reason we got not a number. 148

148

So that means, ah! 149

149

And I know why here. 150

150

So here, this is the entire array, right. 151

151

So we are dividing this array by the number. 152

152

But of course what we want is the length of the array. 153

153

So let's try that again. 154

154

Yeah, now we get 5.9 pages. 155

155

And of course we now need to round that 156

156

to the next highest integer. 157

157

And so for that we simply use Math.ceil, remember. 158

158

And so this will now become six, okay. 159

159

So, let's do some check here. 160

160

So if we're currently on page one, 161

161

which is this.data.page equals one. 162

162

And so now it is very important 163

163

that we actually have the current page in this state, right. 164

164

So that's why we put it right here. 165

165

So whenever the getSearchResultsPage method 166

166

is being called with some value. 167

167

So just to illustrate this, 168

168

let's actually render the results at page two, 169

169

just to then test if what we have here works. 170

170

But anyway, here we are testing if we're on page one. 171

171

And so that's this.data.page equals one, 172

172

and there are other pages. 173

173

And so basically that means 174

174

that the current page needs to be less 175

175

than the number of pages. 176

176

And so that basically means 177

177

that number of pages here is greater than one. 178

178

So numPages greater than one. 179

179

So this is our first if check, 180

180

let's actually log that to the console page one 181

181

and others. 182

182

Or actually let's even return that string. 183

183

'Cause we already know that this will then get printed. 184

184

Even though of course, 185

185

this is not at all what we want. 186

186

Now this one here we will leave to the end. 187

187

So let's continue with this one. 188

188

So being on the last page basically means 189

189

that the current page 190

190

is the same as the number of pages, right. 191

191

So data.page is equal the number of pages. 192

192

So in the current example we have six pages. 193

193

And so if the current page is number six, 194

194

well, then that means we are on the last page. 195

195

So here let's return last page. 196

196

Then here some other page, 197

197

basically simply means that the current page 198

198

is less than the number of pages. 199

199

And if any of what I'm saying doesn't make sense, 200

200

then probably the best thing to do 201

201

is to pause the video, 202

202

and think about this on your own. 203

203

So that's always my advice. 204

204

So basically, reflecting on what I'm saying 205

205

is usually the best solution to really figuring out 206

206

what exactly it is what I'm doing here. 207

207

So of course I'm trying my best to explain everything, 208

208

but at a certain point, 209

209

you also have to take a look at the code 210

210

and think about it on your own a bit. 211

211

But anyway, this actually already covers 212

212

all of the scenarios. 213

213

So if none of these scenarios here is met, 214

214

then that basically means that we are on page one, 215

215

and there are no other pages. 216

216

And so in this case we can return only one page. 217

217

And actually that is not really true 218

218

because let's say that we only had one, 219

219

so that numPage would be one, 220

220

then actually this here would also be true. 221

221

So here we have to add the same as before, 222

222

so numPages needs to be also greater than one. 223

223

So then we are really on the last page 224

224

and need to render some other buttons. 225

225

So, but to test this, 226

226

let's keep in mind that we are currently on page two. 227

227

And so therefore, 228

228

we want to now see other page rendered. 229

229

So let's see. 230

230

And indeed, there we have another page. 231

231

Now let's try page number six. 232

232

So here we see we have six pages, 233

233

and so now it says last page. 234

234

Great. 235

235

And now page number one. 236

236

And so one more time. 237

237

And so page one but there are other pages. 238

238

Great. 239

239

So this was I think the hardest part, 240

240

so figuring out these different scenarios. 241

241

And now all we need to do is to create the markup. 242

242

So let's come here to the HTML and grab this code. 243

243

So this is the code for going to the previous page. 244

244

So when do we want to go to the previous page? 245

245

Well, for example right here, 246

246

on the last page, right. 247

247

So here, in fact, we only want exactly that one button. 248

248

Now what is the page here that we want to go to? 249

249

So we need this number here. 250

250

Well, that page is basically the current one minus one. 251

251

Right. 252

252

So, we are using this this.data.page a lot of times, 253

253

so let's store that in a variable. 254

254

So, yeah, const current page is this. 255

255

And so now let's replace that everywhere here 256

256

with current page. 257

257

So here we will then want the current page minus one. 258

258

And here we need to replace the icons. 259

259

Okay. 260

260

Then here on page one, 261

261

we basically need the opposite. 262

262

So again, we only want just one button 263

263

but the one to go to the next page. 264

264

So let's grab it. 265

265

And actually it's almost the same markup. 266

266

So another nice template literal. 267

267

And now here it says page three. 268

268

And so of course, 269

269

here we will now want to go to the current page plus one. 270

270

Right. 271

271

And then here, again, we need to replace the icons. 272

272

Okay. 273

273

And then here for the other page, 274

274

we want basically both of them. 275

275

So let's return this, 276

276

or actually this one here. 277

277

So first the button to go back. 278

278

And then also add the button to go forward. 279

279

All right, and then when we're on page one, 280

280

then we simply return nothing, 281

281

because here we don't want to render any button. 282

282

So if there are no other pages 283

283

there's nowhere to go, of course. 284

284

All right. 285

285

So let's see what page we are currently on, 286

286

so page one. 287

287

And so that should render then this button here. 288

288

So saying, page two. 289

289

So let's see. 290

290

And indeed, page two. 291

291

Now of course if we click here 292

292

then nothing's going to happen, 293

293

but for now that is not the point. 294

294

Let's try page number four now. 295

295

So, go back to page three or forward to page five. 296

296

So beautiful. 297

297

So it looks like it's working, 298

298

let's just try the last page here now. 299

299

Oh, what's going on here? 300

300

And indeed, it says to go back to page five 301

301

but no page to go forward. 302

302

So that's awesome. 303

303

Now the next thing that we need to do here 304

304

is to then add an event listener to these buttons, 305

305

so that we can then actually go back 306

306

and display another page. 307

307

So right now, this is not useful at all 308

308

but at least we already have our buttons here 309

309

showing up right in the beginning 310

310

when the search results are loaded. 311

311

Okay. 312

312

Now, this code here could of course be refactored 313

313

because we are repeating a lot of code here. 314

314

So this button is the same as this next button 315

315

and the previous button is also the same here, okay. 316

316

So we could refactor that 317

317

but I will actually not do it here, 318

318

and instead leave it for you as a challenge. 319

319

So you might create a method called, 320

320

for example, generate markup button, 321

321

and then refactor that code in that method. 322

322

But here, I'm not gonna waste any more time, 323

323

and instead, I will go immediately 324

324

to adding the event listener. 325

325

Now just like before, 326

326

we need to use the publisher subscriber pattern, 327

327

just like we did, for example here, 328

328

in the recipe view, remember? 329

329

So, again that works by creating a publisher, 330

330

which is basically a function 331

331

which is the one listening for the event, 332

332

which receives a handler function, 333

333

which in our case, is going to be a controller 334

334

that lives here in the controller. 335

335

And so with this, 336

336

we will then be able to listen for the event 337

337

here in the view where it makes sense, 338

338

while at the same time, 339

339

being able to handle that event 340

340

from the controller, basically, okay. 341

341

So, let's add that method here. 342

342

So addHandler, 343

343

I'm just calling it click. 344

344

So for a click on one of the buttons. 345

345

Okay. 346

346

Now here we are going to use event delegation, 347

347

because there are going to be two buttons, 348

348

but of course, 349

349

we don't want to listen to each of them individually. 350

350

So instead, we will add the event listener 351

351

to the common parent element, 352

352

which is indeed this.parentElement. 353

353

So .addEventListener, 354

354

and this time, finally, listening for a click. 355

355

And then here we have a function, 356

356

because we cannot immediately call the handler 357

357

that comes in here, 358

358

because first, we will need to figure out 359

359

which button was actually clicked, 360

360

based on the event. 361

361

So that's event delegation 362

362

and I hope you remember how it works. 363

363

So in this case we can simply create a button element 364

364

and select the closest button element 365

365

to the clicked element. 366

366

So the clicked element is e.target, 367

367

and then closest, 368

368

which is really an amazing method. 369

369

And so here we can now, 370

370

basically look for this button. 371

371

So for the element with this class, all right. 372

372

So remember that the closest method 373

373

is a little bit like query selector, 374

374

but instead for searching down in the tree, 375

375

so for children, 376

376

it basically searches up in the tree. 377

377

So it looks for parents. 378

378

And this is important because here in the button, 379

379

we might actually click on this span element, 380

380

or on this SVG or this use, 381

381

instead of clicking on the button itself. 382

382

So we cannot simply set the button to e.target, 383

383

but we actually need to search 384

384

for the closest button element itself. 385

385

And just to see that this works, 386

386

let's actually now create our controller. 387

387

So here we will then log that button 388

388

to the console only for now, all right. 389

389

And so now let's go to the controller 390

390

and as always create a new controller here. 391

391

So basically this is the controller 392

392

that will be executed whenever a click 393

393

on one of the buttons happens. 394

394

So controlPagination is a function, 395

395

which for now doesn't really do anything, 396

396

let's just call it Pag controller. 397

397

So simply logging this to the console, 398

398

but what matters here is that now, 399

399

we call the paginationView and addhandlerClick. 400

400

And so this will then, of course, 401

401

call this function here, 402

402

which in turn will call addEventListener, 403

403

so that we can start listening for the click event 404

404

on this pagination element, okay. 405

405

Now here we also parse in the handler. 406

406

So that's controlPagination, 407

407

And so just, again to check if everything is working, 408

408

let's simply also call that handler right here. 409

409

So once we click on the button now, 410

410

we should see this button logged to the console, 411

411

and then also the handler function should run, 412

412

which is, of course, this one, 413

413

and so that should then log Pag controller. 414

414

So let's see. 415

415

So looks like we're still on the last page. 416

416

Let's click and yeah. 417

417

So everything works as expected, 418

418

we have the button correctly selected, 419

419

and it also says pagination controller. 420

420

Great. 421

421

So now we have the click on the button, 422

422

so it is correctly selected 423

423

but why did we actually select the button? 424

424

Well, we need a way of knowing 425

425

which is the page where we need to go now. 426

426

So it says here page five 427

427

but how will JavaScript know 428

428

that it should now actually display 429

429

the results of page number five here? 430

430

Well, this is where we, one more time, 431

431

need to basically establish a connection 432

432

between the dumb and our code. 433

433

And so remember that we can do that 434

434

using the custom data attributes. 435

435

So what we will do here 436

436

is to create a data attribute 437

437

on each of the buttons, 438

438

which will contain the page that we want to go to. 439

439

And so then in our code, 440

440

we can read that data and make JavaScript 441

441

or make our application go to that exact page. 442

442

And so this is basically the final piece 443

443

of the puzzle, okay. 444

444

So here in our button, 445

445

let's now add that data attribute, 446

446

so data, and I'm gonna call it goto. 447

447

And so the page to want to go to 448

448

is exactly the same as this one. 449

449

So basically exactly the same that it says 450

450

in the button text itself. 451

451

So now let's copy that everywhere. 452

452

Here it is page number, so minus one. 453

453

Here again minus one. 454

454

And then here on this it is page plus one, right. 455

455

And so then here, 456

456

we can actually get that number, of course, 457

457

from the button. 458

458

So let's call it goToPage 459

459

and it is btn.dataset.goto. 460

460

And then let's log that to the console. 461

461

All right. 462

462

And actually, let's go to some other page. 463

463

So basically start this here on page four, 464

464

just so we have two buttons. 465

465

Very weird what's happening here with the scroll. 466

466

But anyway, here we have now, 467

467

the buttons for page three and five. 468

468

So let's click. 469

469

And indeed, here we have the five, 470

470

and we also successfully read the five here. 471

471

Now you see that this is here, 472

472

like kind of in this white, 473

473

while this here is purple. 474

474

So remember that purple here means the number, 475

475

and so this is still a string, 476

476

and so we will need to convert that. 477

477

But another thing that I wanted to show you, 478

478

is that of course, 479

479

we can also click outside of one of the buttons, right. 480

480

And so then here the button is of course null, 481

481

and we get an error by trying to read the data set. 482

482

So, let's first convert 483

483

that value we get from the user interface, 484

484

but all of this should only happen 485

485

if there actually is a button. 486

486

So, yet another guard clause here, 487

487

saying if there is no button, 488

488

then return immediately, okay. 489

489

So let's try another one now, pasta, 490

490

and if we click now, 491

491

then here we get the number three, 492

492

and here, the number five, right. 493

493

So, what are we going to do now with this number? 494

494

Well, we can simply parse that number back 495

495

to the controller basically. 496

496

And then in the controller, 497

497

we can finally, finally use that number 498

498

to actually render the results 499

499

on the page that we want, 500

500

by using, again, this method here, all right. 501

501

So these pagination and results controllers 502

502

are kind of intertwined. 503

503

So I think that this is a little bit confusing 504

504

because of that, 505

505

but if you analyze all of this here, maybe afterwards, 506

506

you'll see that it makes sense. 507

507

So we already see that here in the controller 508

508

we are rendering the pagination in the beginning, 509

509

and so here in the pagination 510

510

we will later render the new results. 511

511

But let's not get ahead of ourselves. 512

512

So what I want to do now here 513

513

is to actually parse that page into the handler. 514

514

Okay. 515

515

And so of course our handler 516

516

now needs to accept this value. 517

517

So let's call it again, goToPage. 518

518

And just to see, again, if this works, 519

519

log that value to the console. 520

520

Okay. 521

521

And indeed, we get page number five, 522

522

which is the button that we clicked on, 523

523

coming from the controller this time. 524

524

And now, finally, 525

525

what should actually happen here 526

526

on the user interface, once we click this button? 527

527

Well, we should get the search results 528

528

for page number five, 529

529

and they should be rendered here, right. 530

530

And then also new buttons should be rendered too. 531

531

So this should then change to page four, 532

532

and this to page Six. 533

533

Because when we go forward, 534

534

then these two values here are, of course, 535

535

going to increase, okay. 536

536

And so let's simply do that. 537

537

And we already know how to do it, 538

538

because we already did it before. 539

539

So, remember I said we want to render the results 540

540

and we want to render the pagination buttons. 541

541

And so that is exactly what we already have here. 542

542

And so, let's simply copy and paste it right here. 543

543

So let me change this here to render new results. 544

544

And then here, render new pagination buttons. 545

545

And then here, of course, we want not number four 546

546

but we want goToPage. 547

547

And then here rendering the new pagination buttons 548

548

is actually going to stay exactly the same, right. 549

549

So, when we do this here, 550

550

so get search results with this new page, 551

551

let's say four, 552

552

then here in the model, 553

553

state.search.page gets updated 554

554

to that new value, right. 555

555

So the state.search object is then different, 556

556

and so that is the object that we then parse 557

557

into rendering the new pagination. 558

558

And so therefore, 559

559

it will then render new buttons 560

560

because the page before has been changed, okay. 561

561

And so this should now actually work. 562

562

Just keep in mind that we will, again, 563

563

start at page number four. 564

564

Well let's actually make that page three. 565

565

Oh, and before actually checking out the results, 566

566

I just wanted to say that this actually works 567

567

because render will basically overwrite 568

568

the markup that was there previously. 569

569

And the reason for that is 570

570

that we here have the clear method. 571

571

And so before any new HTML is inserted into the page, 572

572

the parentElement is first cleared, 573

573

so it's first emptied, right. 574

574

And so then that means that render here 575

575

basically overwrites everything that was there 576

576

and puts the new content in the same place. 577

577

But anyway, let's make sure to reload, pizza, 578

578

and we are at page number three. 579

579

And now let's see the magic happen. 580

580

And I hope we don't have any bug here. 581

581

And it works! 582

582

So beautiful, beautiful. 583

583

And congratulations also for you 584

584

to following up until this point. 585

585

So this is, I think up until this point, 586

586

the most impressive work that we have done. 587

587

So you see everything updates here just as expected, 588

588

we get new content, 589

589

and now page six, you see here, 590

590

will be the last page, so let's see. 591

591

And yeah, so now we don't have the last button, 592

592

and we can only go back to page five. 593

593

So now let's go to the first page, 594

594

and indeed, we can only now move forward 595

595

and get the first 10 results here. 596

596

So, really great work here. 597

597

I'm really happy about this progress here. 598

598

Now just to make sure, one more thing, 599

599

let's try this here with the results per page 600

600

of a different value. 601

601

So let's say that we actually wanted 602

602

like only five results per page. 603

603

So then we should get a lot more pages. 604

604

And so it's important that we check 605

605

that that actually works. 606

606

So you see that it does actually work already. 607

607

So we only have five results here now, 608

608

and we can also already see 609

609

that we will have 12 pages. 610

610

Oh, and we are still on page number three. 611

611

But now we will be able to go back 612

612

or actually to go forward to page number 12. 613

613

And so each of these pages only has five recipes. 614

614

And now let's just try to search 615

615

for something that is not very common, 616

616

like dip for example. 617

617

And, wow, we still have a couple of pages here actually. 618

618

But before we go any further, 619

619

let's put this here actually to zero 620

620

or actually to one, 621

621

and remember that parsing nothing 622

622

is basically the same as setting it to one. 623

623

So let's try dip here again. 624

624

But it seems like we have still six pages. 625

625

So I just wanted to find some search term 626

626

that only has one page. 627

627

Let's try hummus maybe. 628

628

Ah, but we again have four pages. 629

629

Well we can fake that by, or here, 630

630

by having 50 results on one page. 631

631

And so with this, 632

632

we should already only have one page with pasta. 633

633

So pasta has 45 results, 634

634

but here we want 50 on one page. 635

635

So we only have one page you see, 636

636

and indeed, no buttons. 637

637

Great. 638

638

Let's put it back to a meaningful value, so 10. 639

639

And so with this, we are actually done. 640

640

Let's just clean up our code here a little bit more, 641

641

but I think that with this 642

642

we are now good to call this finished. 643

643

And actually we finished now the entire part one 644

644

of our flowchart, right. 645

645

So this was already done, this here as well. 646

646

And now, here what we did 647

647

was to listen to this event, 648

648

then render the pagination buttons, 649

649

and of course, 650

650

render the corresponding search results. 651

651

So all of this is now in place, 652

652

but I ask you to really analyze again 653

653

the code that we have here in control pagination, 654

654

as well as here in control search results. 655

655

Because again, these two controllers, 656

656

they're kind of intertwined. 657

657

So they both are doing similar things, 658

658

at least when it comes to displaying the pagination 659

659

and the results themselves. 660

660

So it's very important 661

661

that you understand the flow of this data here, 662

662

especially of this, goToPage, okay. 663

663

And then maybe also analyze again 664

664

how all of this here works, 665

665

but then you're good to go to the next video. 666

666

And so there we will discuss, 667

667

basically our next step, what we should do next. 668

668

So that next video is gonna be a lot shorter, 669

669

so that we can finally take a break 670

670

from this application. 671

671

So again, analyze this like I told you to, 672

672

and then after you're ready, 673

673

let's go move on to our next part of the flowchart.