1
00:00:02,920 --> 00:00:08,360
Now before we actually move onto authentication, there's one more thing we can do on the frontend and

2
00:00:08,360 --> 00:00:09,820
that is pagination,

3
00:00:09,890 --> 00:00:13,630
so splitting our list of posts across multiple pages

4
00:00:13,730 --> 00:00:15,930
and I want to do that first.

5
00:00:15,980 --> 00:00:25,520
Now for that we need multiple posts, so let's quickly create a couple of posts like a cup of coffee, choose

6
00:00:25,520 --> 00:00:28,350
that cup image which fits it quite well,

7
00:00:29,070 --> 00:00:35,430
so tasty, whatever you want and click accept and let's add another post, a real duck because I replaced

8
00:00:35,430 --> 00:00:36,650
that image of the other duck

9
00:00:36,660 --> 00:00:38,930
so maybe it's time to add another one,

10
00:00:39,330 --> 00:00:43,000
this is a duck, click accept

11
00:00:43,180 --> 00:00:50,200
and now you see here I only see two posts on the frontend, I don't see any more posts in that. If I

12
00:00:50,200 --> 00:00:54,880
reload, I see three however but I actually want to limit that,

13
00:00:54,880 --> 00:01:00,850
I want to limit the amount of posts I see there and instead pass some information to the frontend that

14
00:01:00,850 --> 00:01:05,650
allows the frontend to show some next and previous buttons at the bottom.

15
00:01:05,650 --> 00:01:10,720
Now all the logic for this was already added to the frontend but on the backend, I need to return different

16
00:01:10,750 --> 00:01:19,300
data, I need to paginate my data. For that, we should dive into our controller and there into the get posts method

17
00:01:19,300 --> 00:01:24,970
or action because that is where I fetch all posts of course and that is where I want to implement pagination

18
00:01:24,970 --> 00:01:26,070
.

19
00:01:26,080 --> 00:01:34,560
Now it turns out that in my frontend, feed.js, where I load my posts so in the load posts method there,

20
00:01:34,840 --> 00:01:37,620
I actually do set some pages,

21
00:01:37,840 --> 00:01:45,260
I have my own pagination logic in there and I can pass that page data back onto my backend.

22
00:01:45,400 --> 00:01:50,740
I want to do that through query parameters and I want to do that in load posts in the frontend code,

23
00:01:50,930 --> 00:01:58,660
here in my url I'll add questionmark page equals to add a page query parameter and I'll add this

24
00:01:58,900 --> 00:02:04,690
page variable which I'm creating up here and this will be managed internally in my frontend app, so this

25
00:02:04,690 --> 00:02:09,260
will be either 1 or 2 or whichever page I'll try to load there.

26
00:02:09,440 --> 00:02:16,750
So now I pass that page query parameter to my backend and there, I now need to extract it to implement pagination.

27
00:02:17,410 --> 00:02:25,600
So in my get post action here, I can extract the current page by accessing request and then query parameters

28
00:02:25,660 --> 00:02:29,590
are stored in the query object and then page,

29
00:02:29,590 --> 00:02:31,510
I'll set this to one as a default.

30
00:02:31,530 --> 00:02:33,550
You saw the syntax a couple of times,

31
00:02:33,660 --> 00:02:39,180
this or syntax checks whatever this is undefined in which case it would assign this value

32
00:02:39,180 --> 00:02:43,200
so that I always start on page 1.

33
00:02:43,290 --> 00:02:46,970
Then I'll set the per page value to two and I do this

34
00:02:46,980 --> 00:02:49,500
because I have the same value in the frontend.

35
00:02:49,710 --> 00:02:55,320
Now of course you could find a more elaborate solution where you pass that per page data from the backend

36
00:02:55,320 --> 00:02:58,830
to the frontend so that the frontend can adjust dynamically

37
00:02:58,920 --> 00:03:02,390
but here I want to show the general setup and how this works,

38
00:03:02,460 --> 00:03:07,970
so I am hardcoded per page here and I have hardcoded it in the frontend.

39
00:03:08,010 --> 00:03:13,650
Now I'll create a new variable, total items which I'll need to determine how many items I have in the

40
00:03:13,650 --> 00:03:21,360
database because now I'll add a new find request and I will add count documents here to find out how

41
00:03:21,360 --> 00:03:23,460
many documents I actually have,

42
00:03:23,460 --> 00:03:27,360
this will not retrieve the documents, it will just count them.

43
00:03:27,460 --> 00:03:37,030
Then I can have success or fail, if I fail I'll have the same logic as before, so I'll check the status

44
00:03:37,030 --> 00:03:38,180
code, add it

45
00:03:38,200 --> 00:03:45,550
if it does not exist and forward the error. If I succeed, then in this then block, in this function there,

46
00:03:45,540 --> 00:03:51,790
I'll know how many items I have and I'll store that value in my total items variable.

47
00:03:51,790 --> 00:03:57,580
I created that variable so that I can now also use that data in other functions than this function

48
00:03:58,440 --> 00:04:04,960
because in here, in this then block, I now want to return my old fetching logic

49
00:04:04,990 --> 00:04:05,500
so that I

50
00:04:05,500 --> 00:04:11,790
first of all count and once I got the count, I actually find the documents and retrieve them.

51
00:04:12,160 --> 00:04:17,310
So here I will return this and all that logic, so this then block

52
00:04:17,320 --> 00:04:19,450
essentially, I'll cut that out.

53
00:04:19,510 --> 00:04:25,350
I'll remove the catch block, I'll add the then block after the first then block and this catch block

54
00:04:25,390 --> 00:04:29,870
will now take care about both counting and then this internal finding.

55
00:04:29,890 --> 00:04:36,370
However here I will not just find of course, I want to add pagination and the logic is the same as before.

56
00:04:36,640 --> 00:04:43,120
We can skip a certain amount of items with the skip method and there, I calculate the current page minus

57
00:04:43,120 --> 00:04:52,000
one times per page, so that if I am on page 1, this will result in 0 and I skip no items,

58
00:04:52,000 --> 00:04:59,430
if I'm on page 2, this will result in one and I skip all the items that were on page 1 and

59
00:04:59,440 --> 00:05:03,990
I also want to limit the amount of items I retrieve with the limit method

60
00:05:04,170 --> 00:05:06,390
and here I take per page,

61
00:05:06,430 --> 00:05:12,730
so the amount of items I want to have on each page. This is what I now return in there and then the posts

62
00:05:12,730 --> 00:05:20,300
here are these well limited amounts of posts. In my response I now don't just to return to posts

63
00:05:20,350 --> 00:05:26,470
though, in my frontend I also have some logic to take the total amount of posts into account so that

64
00:05:26,570 --> 00:05:33,040
in my react frontend I know when to show the next and previous buttons. For that I'll add another argument

65
00:05:33,130 --> 00:05:35,900
to the data that I returned in the response,

66
00:05:35,920 --> 00:05:38,050
I'll add total items in there,

67
00:05:38,110 --> 00:05:41,710
I'll be looking for this total items property in my frontend code,

68
00:05:41,770 --> 00:05:43,900
so you should get this right

69
00:05:44,020 --> 00:05:45,590
not misspell it

70
00:05:45,850 --> 00:05:52,840
and the value will be my total items variable, so this variable value which I assign here will be stored

71
00:05:52,960 --> 00:05:53,770
down there.

72
00:05:55,050 --> 00:06:02,220
With that if I save that backend, if I reload the frontend, you now see a next button here, if you click

73
00:06:02,220 --> 00:06:03,700
it we load the next page and

74
00:06:03,740 --> 00:06:06,080
we only have one item and I can go back.

75
00:06:06,240 --> 00:06:11,250
So now I have pagination added as well, as you saw in the same way as before

76
00:06:11,280 --> 00:06:13,600
because rest APIs are not that

77
00:06:13,610 --> 00:06:17,830
different in the end, just handled differently because we have a separate frontend.