1
00:00:00,360 --> 00:00:01,120
Nicely done.

2
00:00:01,170 --> 00:00:05,670
We were able to generate our long list, so now we have.

3
00:00:05,700 --> 00:00:06,260
All right.

4
00:00:06,720 --> 00:00:07,190
All right.

5
00:00:07,650 --> 00:00:15,660
And we would need to implement that in our UI where I would want to display only the first page.

6
00:00:15,960 --> 00:00:21,930
And then, of course, eventually we'll set up the buttons that control which page are we displaying

7
00:00:22,440 --> 00:00:24,340
and we're going to start in the use.

8
00:00:24,990 --> 00:00:33,540
So in our custom hook, instead of passing in the whole data in my set there, of course, I'll pipe

9
00:00:33,540 --> 00:00:34,790
through my patroni.

10
00:00:35,400 --> 00:00:41,550
So some data and then we go with pad unit function and then we pass in there.

11
00:00:41,730 --> 00:00:46,290
And I can tell right away that there's going to be a big fat error.

12
00:00:46,740 --> 00:00:49,950
But just bear with me and we'll fix it together.

13
00:00:50,310 --> 00:00:52,800
And technically not that bad.

14
00:00:53,280 --> 00:00:58,210
We just have empty lots, OK, that we can live with.

15
00:00:58,230 --> 00:00:58,650
All right.

16
00:00:59,100 --> 00:01:04,950
Now, of course, let's navigate to our app Jazz and decide what is happening.

17
00:01:05,460 --> 00:01:10,110
If I can still log the data, what should I see?

18
00:01:10,720 --> 00:01:18,380
So I go here, I inspect, and of course I have the array zero and then I have Array 12.

19
00:01:18,390 --> 00:01:18,800
Why?

20
00:01:19,420 --> 00:01:22,890
Because now I have my array of arrays.

21
00:01:23,220 --> 00:01:23,670
Correct.

22
00:01:24,440 --> 00:01:30,050
But you can also notice that, of course, I'm not displaying the actual follower, I'm just displaying

23
00:01:30,070 --> 00:01:33,260
that page and I would need to fix that.

24
00:01:33,650 --> 00:01:37,850
And the way I'm going to fix that, I'm going to come up with two state failures.

25
00:01:38,030 --> 00:01:39,470
One is going to be for the page.

26
00:01:39,770 --> 00:01:42,800
So I'm going to go with page and then set page.

27
00:01:43,010 --> 00:01:48,980
And then the second one is going to be the actual followers, the followers we're displaying, because,

28
00:01:49,220 --> 00:01:51,200
of course, we're not going to be displaying the whole list.

29
00:01:51,480 --> 00:01:57,740
We're going to go with use state here, initial viral up, because I would want to display page number

30
00:01:57,740 --> 00:01:58,040
one.

31
00:01:58,250 --> 00:02:03,950
And second thing is the actual followers that I'm displaying from that page.

32
00:02:04,200 --> 00:02:08,540
So we're going to go with followers, so and then set followers.

33
00:02:09,110 --> 00:02:17,050
OK, we have that one initial value for my followers is just going to be empty.

34
00:02:17,060 --> 00:02:17,460
All right.

35
00:02:17,990 --> 00:02:25,980
And now what I would want to do is set up a usufruct where on the app loads, then I would want to grab

36
00:02:25,980 --> 00:02:29,000
a certain page out of my whole list.

37
00:02:29,360 --> 00:02:30,980
So my whole list is data.

38
00:02:31,530 --> 00:02:37,100
I'm already saying that by default I would want to display the first page and of course, our need to

39
00:02:37,100 --> 00:02:43,700
set my followers, because if I'll change this around from data to followers, of course there's going

40
00:02:43,700 --> 00:02:49,120
to be nothing on the screen because that is just a empty array and we set up use fact.

41
00:02:49,400 --> 00:02:56,290
So we go here with usufruct and then we would want to run that one the app renders.

42
00:02:56,510 --> 00:03:05,330
So we go for time being with just empty array and we go here with set followers and we have the whole

43
00:03:05,330 --> 00:03:10,370
list and then whatever value we have for the page eventually will change dynamically.

44
00:03:10,650 --> 00:03:13,580
But of course for the time being this is zero.

45
00:03:13,910 --> 00:03:19,160
And once you say actually there's going to be an error, so let's save it and then let's see why we

46
00:03:19,160 --> 00:03:19,680
have the error.

47
00:03:20,120 --> 00:03:26,240
Well, we have the error because, of course, initially this data is just empty.

48
00:03:26,240 --> 00:03:26,620
All right.

49
00:03:26,960 --> 00:03:27,380
Correct.

50
00:03:27,560 --> 00:03:28,860
So if this is empty.

51
00:03:28,900 --> 00:03:29,170
Right.

52
00:03:29,180 --> 00:03:34,510
And I'm saying, well, grab me the first item from the array of functionality doesn't work.

53
00:03:34,880 --> 00:03:35,280
Correct.

54
00:03:35,630 --> 00:03:41,330
So now, of course, I would want to check whether I'm loading and if I'm loading, then I don't want

55
00:03:41,330 --> 00:03:41,780
to do that.

56
00:03:42,020 --> 00:03:46,040
I only want to do that once I'm done with my pagination.

57
00:03:46,190 --> 00:03:46,640
Correct.

58
00:03:46,850 --> 00:03:48,410
So that's why I will go with if.

59
00:03:49,250 --> 00:03:53,390
And then we're going to check for loading, and if that is the case, then I would want to return,

60
00:03:53,780 --> 00:03:57,410
then I would want to return from my callback function and don't do anything.

61
00:03:57,680 --> 00:04:01,910
And only when I actually have the data, then I would want to pattern it.

62
00:04:02,300 --> 00:04:08,690
Well, now we're going to have another issue, because initially when the app launch, would you check

63
00:04:08,690 --> 00:04:09,200
for loading?

64
00:04:09,380 --> 00:04:12,150
Then we return and we don't set up those followers.

65
00:04:12,710 --> 00:04:14,570
So remember the dependency.

66
00:04:14,600 --> 00:04:22,120
Right now, I'm just going to say one loading changes, rerun my callback function and once we serve

67
00:04:22,370 --> 00:04:25,570
notice, now I'm displaying that first list.

68
00:04:25,760 --> 00:04:33,890
So let me go over one more time in the use patch instead of passing in the whole data we set up to pagination

69
00:04:34,340 --> 00:04:38,710
bypassing the array of arrays in my data.

70
00:04:38,900 --> 00:04:40,310
And that's what I'm getting back.

71
00:04:40,310 --> 00:04:45,440
Of course, in my abcess I have the loading and I have the data.

72
00:04:46,070 --> 00:04:56,870
And inside of the objets I set up two more state bars, one for the current page and follower's from

73
00:04:56,870 --> 00:05:00,970
that front page, which at the moment is just this empty.

74
00:05:01,130 --> 00:05:01,550
All right.

75
00:05:02,030 --> 00:05:06,920
And then, of course, I iterate over those followers, which initially is just empty array.

76
00:05:07,100 --> 00:05:12,020
And for every item in the list, display that follower component.

77
00:05:12,230 --> 00:05:13,240
And that is good.

78
00:05:13,250 --> 00:05:20,480
But of course, there has to be some kind of way where instead of rendering empty array, I display

79
00:05:20,480 --> 00:05:27,890
the items from that certain page, which of course by default is zero, and that's where usufruct comes

80
00:05:27,890 --> 00:05:28,740
into play.

81
00:05:29,060 --> 00:05:36,840
But before we can set our followers, we need to check for loading because initially data is just empty

82
00:05:36,840 --> 00:05:37,060
array.

83
00:05:37,310 --> 00:05:40,970
So there is no item zero, item one or whatever.

84
00:05:41,160 --> 00:05:44,120
That's why we were getting that error.

85
00:05:44,540 --> 00:05:48,970
And that's why in the user, I say, if we're loading, then please return.

86
00:05:49,310 --> 00:05:50,200
Don't do anything.

87
00:05:50,480 --> 00:05:56,450
But then once I'm done loading that Sadr's followers to whatever page and of course you'll see that

88
00:05:56,450 --> 00:06:00,660
if I change this to, for example, to them since arrays are zero.

89
00:06:00,670 --> 00:06:04,580
And now, of course, we're displaying the third page.

90
00:06:04,940 --> 00:06:11,780
And then eventually the problem was that if we don't set up our dependency array, meaning if we just

91
00:06:11,780 --> 00:06:17,010
have it empty, then of course we check for loading initially and then we don't set those followers.

92
00:06:17,300 --> 00:06:21,730
That's why I'm saying, hey, independency all let's add loading.

93
00:06:22,280 --> 00:06:27,980
So that way when this loading changes, when it changes from true to false.

94
00:06:28,190 --> 00:06:34,710
So when we have a data, when we have already pagination are the way, then rerun the callback function.

95
00:06:35,060 --> 00:06:38,780
So in a callback function, of course, loading is not true anymore.

96
00:06:39,080 --> 00:06:46,000
So this one we skip and then we said follower's equal to the page.

97
00:06:46,370 --> 00:06:48,650
Hopefully we're all on the same page.

98
00:06:48,890 --> 00:06:55,160
And of course we can start setting up the buttons that control which page actually are displaying.