1
00:00:00,150 --> 00:00:07,590
All right, so our function only works if we don't run out of the items or if we don't try to look for

2
00:00:07,590 --> 00:00:11,190
the items that have the negative indexes.

3
00:00:11,520 --> 00:00:13,560
So how we would be able to fix that?

4
00:00:13,920 --> 00:00:20,390
Well, since in here we just go with an X minus one in X plus one, I could set up the use of fact.

5
00:00:20,700 --> 00:00:25,020
Please keep in mind it is just one of the ways how we could set up the slider.

6
00:00:25,380 --> 00:00:31,950
Technically, we can also set this functionality in here when we are either decreasing or increasing

7
00:00:32,790 --> 00:00:33,870
the value of the index.

8
00:00:34,140 --> 00:00:37,210
But I just wanted to use in this case, the use effect.

9
00:00:37,540 --> 00:00:46,590
So what we could do is just set up a usufruct which will run in two cases when our index changes or

10
00:00:46,800 --> 00:00:48,720
when our people changes.

11
00:00:49,290 --> 00:00:53,600
At first I would want to get the last index of my people.

12
00:00:53,970 --> 00:01:03,420
So I'm going to vote cards and then last index is equal to a people and then length, not story length

13
00:01:03,780 --> 00:01:05,810
and then minus one.

14
00:01:06,180 --> 00:01:09,330
So that is always going to get me the last index in my array.

15
00:01:09,720 --> 00:01:15,660
If I have fifty thousand items or if I have five and once I have the index, then I'm just going to

16
00:01:15,660 --> 00:01:23,430
check Mersa if index is negative, well then I would want to set my index equal to the last index.

17
00:01:23,730 --> 00:01:24,990
So last index.

18
00:01:25,200 --> 00:01:27,000
Now why am I doing that again.

19
00:01:27,330 --> 00:01:32,490
Because there are no items so person index will never be negative.

20
00:01:32,970 --> 00:01:40,620
And in order for me to add that last slide, if I click on Priv right away and of course I just need

21
00:01:40,620 --> 00:01:43,320
to check Masen index is negative.

22
00:01:43,560 --> 00:01:49,650
So set the index to be the last index and you'll see what happens in a second.

23
00:01:49,980 --> 00:01:57,570
So once I save, you'll notice that at this point, once I click, then of course my functionality works

24
00:01:57,930 --> 00:02:00,630
quite well because I decrease the index.

25
00:02:01,050 --> 00:02:03,330
But in the use effect, I called that.

26
00:02:03,720 --> 00:02:10,680
I said, hey, listen, if the index is less than zero, so set index to be the last index.

27
00:02:11,100 --> 00:02:20,400
So now, of course, when we click on PRIV right from the get go, Susan, of course has the last slide

28
00:02:20,790 --> 00:02:21,240
correct.

29
00:02:21,570 --> 00:02:27,420
But she will become active because what we're doing, we're saying set index equal to the index.

30
00:02:27,660 --> 00:02:31,140
So now our index, the last index will be active.

31
00:02:31,440 --> 00:02:33,750
So, Susan, we'll get the active one.

32
00:02:33,990 --> 00:02:37,980
And then in this case, when we're checking, hey, index minus one.

33
00:02:37,990 --> 00:02:40,720
Well, what is the value now, of course, of that value?

34
00:02:40,740 --> 00:02:43,580
Makes sense because that's why we're displaying the beta.

35
00:02:43,890 --> 00:02:45,600
That's why we're able to do this.

36
00:02:46,020 --> 00:02:52,300
And you can probably already guess that we need to do the same thing if we run out of the items.

37
00:02:52,650 --> 00:02:54,250
Now, how do we run out of the items?

38
00:02:54,270 --> 00:03:00,870
Well, that is if the index more here is bigger than the last index.

39
00:03:01,020 --> 00:03:06,630
If that is the case, then I would want to go back to the start and I'm going to say set index zero.

40
00:03:06,900 --> 00:03:12,210
And our functionality definitely works because I keep on looking for the next items.

41
00:03:12,540 --> 00:03:18,100
And then once I'm at the end of the array, well, then again, I just flip it back tomorrow.

42
00:03:18,600 --> 00:03:22,090
Now, if I'll be looking right from the get go from the previous one.

43
00:03:22,110 --> 00:03:27,390
Notice how nicely again, change the classes as well as the indexes.

44
00:03:27,780 --> 00:03:34,460
And I also want to set up right away the use effect where we have the order slide.

45
00:03:34,780 --> 00:03:36,510
OK, so let's navigate back.

46
00:03:37,290 --> 00:03:42,300
We'll set up another use effect because remember, we can have as many used effects as we would want

47
00:03:42,750 --> 00:03:47,780
and we'll say here, use fact and we'll set up my interval.

48
00:03:47,820 --> 00:03:50,310
So in JavaScript we have set interval.

49
00:03:50,670 --> 00:03:58,010
And let's just say that every time the index will change, I would want to set my interval.

50
00:03:58,290 --> 00:03:59,760
Now there's going to be one Gocha.

51
00:04:00,240 --> 00:04:02,850
So let's call our set interval now.

52
00:04:02,850 --> 00:04:07,100
We need to pass in our callback function and then in how long it's going to run.

53
00:04:07,440 --> 00:04:09,810
So I'm going to go with three seconds.

54
00:04:09,810 --> 00:04:11,010
So that's what it is.

55
00:04:11,310 --> 00:04:12,900
Three thousand milliseconds.

56
00:04:13,230 --> 00:04:20,400
And what I would want is in three thousand milliseconds or three seconds, I would want to call my set

57
00:04:20,790 --> 00:04:23,870
index and then I'll add one plus one.

58
00:04:23,910 --> 00:04:27,660
Now it's up to you if you want to go the opposite direction.

59
00:04:27,660 --> 00:04:31,550
If you want to go back to the end of the day, you can also do that as well.

60
00:04:31,870 --> 00:04:35,030
Mark, I'm just going to say set index and then plus one.

61
00:04:35,310 --> 00:04:39,210
So in three thousand seconds, once the index changes.

62
00:04:40,090 --> 00:04:45,880
I would want to see the next slide, but if there's going to be a gotcha and this is going to be a perfect

63
00:04:45,880 --> 00:04:53,230
use case of why we need a cleanup function, this is exactly why I did this example, because you'll

64
00:04:53,230 --> 00:04:59,500
notice that if I start clicking over here watching the next slide, well, there's going to be a mess

65
00:04:59,500 --> 00:05:00,060
eventually.

66
00:05:00,400 --> 00:05:01,780
And why is that happening?

67
00:05:02,290 --> 00:05:09,160
Well, because every single time one index is changing, I'm invoking this new set interval.

68
00:05:09,520 --> 00:05:11,230
And that's not what I would want.

69
00:05:11,630 --> 00:05:12,010
Right.

70
00:05:12,310 --> 00:05:15,330
What I would want is to clean out the previous one.

71
00:05:15,790 --> 00:05:21,640
So once I click, yeah, I would want to add this option that after, I don't know, three seconds or

72
00:05:21,640 --> 00:05:25,510
whatever, the active slide becomes a different slide.

73
00:05:25,510 --> 00:05:32,350
But I don't want to do this every time I click because notice that I have just a bunch of set intervals

74
00:05:32,590 --> 00:05:34,550
and my application goes bananas.

75
00:05:34,960 --> 00:05:36,130
Now, what is the solution?

76
00:05:36,490 --> 00:05:39,330
Well, set interval returns a value.

77
00:05:39,640 --> 00:05:39,940
I'm here.

78
00:05:39,940 --> 00:05:43,410
I can say, let's slider and I'll hold on to that value.

79
00:05:43,930 --> 00:05:48,560
And then in my clean up function, I'm going to clear out the interval.

80
00:05:48,970 --> 00:05:55,270
So in that case, what is going to happen that yes, once I click, once I increase or decrease or by

81
00:05:55,270 --> 00:06:01,300
the way, I remember this also runs by default, meaning on the initial rather than before.

82
00:06:01,300 --> 00:06:02,830
I set up a new interval.

83
00:06:03,040 --> 00:06:07,570
Next time I click on a button, I will clean out my previous one.

84
00:06:07,670 --> 00:06:14,350
That's why it is so crucial we go with return now or callback function and then in here we just passing

85
00:06:14,350 --> 00:06:20,450
clear interval and we pass in the value that we got back from set interval.

86
00:06:20,740 --> 00:06:22,120
So now it's going to happen.

87
00:06:23,020 --> 00:06:29,950
Is that once you click, yes, after three seconds, there's going to be a automatic slide.

88
00:06:30,190 --> 00:06:33,490
Now, if you want to change this value to, for example, five seconds, that's up to you.

89
00:06:33,910 --> 00:06:40,700
But now, if I press multiple times, you'll notice that my functionality doesn't break, OK?

90
00:06:40,990 --> 00:06:48,130
Still, it checks for the last time I clicked because it removes the previous ones, the intervals and

91
00:06:48,130 --> 00:06:49,800
only the last time I click.

92
00:06:50,110 --> 00:06:53,470
Then after 30 seconds, I can see my next slide.

93
00:06:53,480 --> 00:06:57,090
And of course it is also happening on our initial render notice.

94
00:06:57,370 --> 00:07:01,830
Once we refresh, we're going to get this on a slide again.

95
00:07:01,840 --> 00:07:10,000
Probably the toughest part is going to be over here where depending on that index, we're adding those

96
00:07:10,000 --> 00:07:10,420
slides.

97
00:07:10,810 --> 00:07:13,000
Hopefully everything is clear.

98
00:07:13,030 --> 00:07:15,470
How is that happening with us?

99
00:07:15,790 --> 00:07:20,640
Hopefully everyone enjoy the project and I hope to see your next project.