1
00:00:00,330 --> 00:00:06,270
And while we're still on a topic, let me showcase of that, of course, there's another way we would

2
00:00:06,270 --> 00:00:08,190
be able to set up the functionality.

3
00:00:08,610 --> 00:00:10,590
But please let me emphasize something.

4
00:00:10,930 --> 00:00:12,180
This is optional.

5
00:00:12,420 --> 00:00:17,940
If you are not interested in this alternative approach, of course, you can just move on to the next

6
00:00:17,940 --> 00:00:18,400
project.

7
00:00:18,780 --> 00:00:24,760
And what I'm trying to show you is that we don't have to use this use the fact.

8
00:00:24,930 --> 00:00:28,840
So the first one, not the second, of course, is for our like.

9
00:00:29,040 --> 00:00:31,170
So I want we will keep this one.

10
00:00:31,170 --> 00:00:36,840
We can refactor it a bit and we can set it up when we're clicking on the buttons.

11
00:00:37,190 --> 00:00:44,820
OK, so I'm going to open up right now my source folder, and then I would want to create a new file

12
00:00:45,210 --> 00:00:50,100
and I'm going to call this alternative like so Andrius.

13
00:00:50,470 --> 00:00:53,610
Then I'm going to grab everything that I have in the Jazz.

14
00:00:54,590 --> 00:01:01,490
So essentially, copy and paste like, so somehow we copy and paste and then you can keep the name here,

15
00:01:01,970 --> 00:01:06,860
notice, of course the component name is up, but then since we're exporting as default, it doesn't

16
00:01:06,860 --> 00:01:07,450
really matter.

17
00:01:07,790 --> 00:01:12,700
And then navigate in the US and import that alternative.

18
00:01:13,160 --> 00:01:19,470
And where I'm going to set this up will keep most of the code and we'll just refactor it in a few places.

19
00:01:19,760 --> 00:01:26,510
So we're going to go here with import and I'm going to call this alternative like so and that is coming

20
00:01:26,510 --> 00:01:28,500
from my file alternative file.

21
00:01:28,760 --> 00:01:33,820
And of course, now I'd want to replace instead of AB, I'm going to go with alternative.

22
00:01:34,220 --> 00:01:40,610
And if you copy paste everything correctly, of course the functionality won't change because we haven't

23
00:01:40,610 --> 00:01:41,710
refactored anything.

24
00:01:42,140 --> 00:01:44,060
And of course, I'm going to navigate back.

25
00:01:44,180 --> 00:01:50,480
And then like I said, I would want to set up my functionality without this year's effect because I've

26
00:01:50,480 --> 00:01:52,800
been getting some questions about why we're using user.

27
00:01:53,360 --> 00:01:58,160
And the idea was to show you that there's multiple ways how we can do that.

28
00:01:58,370 --> 00:02:04,310
And I just wanted to place all my logic in this one usufruct, because you'll see in a second that,

29
00:02:04,310 --> 00:02:06,410
yes, we can set it up in a different way.

30
00:02:06,410 --> 00:02:12,550
But then we're placing this logic, the one that we currently have in two separate functions.

31
00:02:12,560 --> 00:02:12,890
So.

32
00:02:13,830 --> 00:02:18,450
What I would want is notice here how we're setting up the index when we're clicking on the buttons.

33
00:02:18,820 --> 00:02:22,230
Now, I will remove both of these lines of code.

34
00:02:22,530 --> 00:02:25,280
So UNCLICK is going to be next slide.

35
00:02:25,770 --> 00:02:30,630
So the function that we haven't created yet and the same is going to be over here.

36
00:02:31,020 --> 00:02:33,780
So, of course, by the way, I messed that up.

37
00:02:34,080 --> 00:02:35,820
This should be next slide.

38
00:02:35,820 --> 00:02:37,500
And that one was previous.

39
00:02:38,010 --> 00:02:42,410
So let me remove over here and then I would want to create those functions.

40
00:02:42,690 --> 00:02:46,680
So where I have the use, the fact before or after, it doesn't really matter because we will remove

41
00:02:46,680 --> 00:02:47,180
it eventually.

42
00:02:47,190 --> 00:02:54,390
Anyway, I'm going to go with const and then next slide and no one is equal to my function.

43
00:02:54,870 --> 00:03:00,390
So I'm not as far as the logic, I would want to increase slide by one.

44
00:03:00,780 --> 00:03:01,230
Correct.

45
00:03:01,440 --> 00:03:03,010
That's the goal here.

46
00:03:03,270 --> 00:03:06,090
In this case, I'll check in the function.

47
00:03:06,450 --> 00:03:11,280
What is the index and if the index is bigger than the last index?

48
00:03:11,550 --> 00:03:15,750
Well, and of course what I'm going to do is set it back to zero.

49
00:03:16,230 --> 00:03:19,650
So in here, let's go with set index and we'll pass in the function.

50
00:03:19,740 --> 00:03:25,260
Remember, there's multiple ways that we can increase the value in a state and this is going to be the

51
00:03:25,260 --> 00:03:27,570
functional approach where we're passing the function.

52
00:03:27,860 --> 00:03:31,230
Then we have the old state value as a parameter.

53
00:03:31,240 --> 00:03:35,110
In this case, I'm going to call this index and I'm just going to say let index.

54
00:03:35,280 --> 00:03:37,530
So there's new variable by the name of index.

55
00:03:37,530 --> 00:03:38,790
And I'm purposely using what?

56
00:03:39,180 --> 00:03:41,970
And I'm going to go with old index plus one.

57
00:03:42,180 --> 00:03:42,610
Correct.

58
00:03:42,840 --> 00:03:43,770
Now, why we're doing that?

59
00:03:43,770 --> 00:03:46,860
Because, of course, we are increasing the slide.

60
00:03:47,100 --> 00:03:47,550
All right.

61
00:03:47,550 --> 00:03:48,080
That's good.

62
00:03:48,360 --> 00:03:54,750
But then, of course, since eventually I will run all the slides, I need to check what is the value

63
00:03:54,870 --> 00:03:57,200
if it is bigger than the last index?

64
00:03:57,370 --> 00:04:00,300
Well, then, of course, I would want to set it back to zero.

65
00:04:00,510 --> 00:04:08,470
So we're going to go what if index is bigger, bigger than people, not Mirae and the length minus one.

66
00:04:08,910 --> 00:04:15,180
So if the index is bigger than the last in Imura, then of course index is going to be zero.

67
00:04:15,390 --> 00:04:21,210
And then I remember when we used function approach, whatever I'm returning from this function now is

68
00:04:21,210 --> 00:04:22,220
going to be that new value.

69
00:04:22,440 --> 00:04:23,610
And what am I returning?

70
00:04:23,610 --> 00:04:24,720
I'm returning index.

71
00:04:25,080 --> 00:04:30,570
So if the index is not bigger than the last index, then we simply increase by one.

72
00:04:31,020 --> 00:04:37,830
If it is bigger than index, then of course we go to zero and you can probably already guess that we're

73
00:04:37,830 --> 00:04:41,040
going to do something very similar in a previous slide.

74
00:04:41,320 --> 00:04:45,080
A difference, of course, is going to be that will subtract one.

75
00:04:45,330 --> 00:04:48,570
So all the index this is going to be minus one.

76
00:04:48,810 --> 00:04:56,340
Then I'm going to be checking whether it's less than zero, so less than zero over here.

77
00:04:56,590 --> 00:05:04,140
And then if that is the case, if it is less than zero, then I go with index is equal to people that

78
00:05:04,140 --> 00:05:07,800
link and then minus one and I do the same thing.

79
00:05:07,980 --> 00:05:09,060
I return the index.

80
00:05:09,330 --> 00:05:13,710
And once we add both functions, of course now we can comment about the use of fact.

81
00:05:14,010 --> 00:05:15,390
We won't need this anymore.

82
00:05:15,660 --> 00:05:23,040
But there's one tiny Gotcher notice of the usufruct where we're setting up the like in this case.

83
00:05:23,040 --> 00:05:25,770
Again, we are not checking this value.

84
00:05:26,130 --> 00:05:26,550
Correct.

85
00:05:26,550 --> 00:05:29,640
We just go with that index and then we say plus one.

86
00:05:29,940 --> 00:05:35,400
So eventually, if we're using that autosite, of course, we will run out of those slides.

87
00:05:35,700 --> 00:05:41,280
So I purposely let this slide wrong and then notice eventually how we run out of slides.

88
00:05:41,610 --> 00:05:45,540
So what we have right now is the next and prive.

89
00:05:45,900 --> 00:05:49,200
So of course that works if you start clicking on the buttons.

90
00:05:49,200 --> 00:05:54,120
But if you'll just let slide, then of course eventually you will run out of slides.

91
00:05:54,450 --> 00:06:00,800
And what we would need to do is just grab the callback function that we have and pass it here.

92
00:06:01,230 --> 00:06:08,040
So instead of this index plus one, which is copy and paste and our functionality should work, so we

93
00:06:08,040 --> 00:06:14,940
go data slide and then eventually once we run out of slides, we just set our index back to zero.

94
00:06:15,980 --> 00:06:17,280
And we're going to be in good shape.

95
00:06:17,300 --> 00:06:20,140
So let me just wait a few seconds now.

96
00:06:20,190 --> 00:06:24,410
I'm going to have the last slide and let me just double check that everything works.

97
00:06:24,740 --> 00:06:28,570
And if that is the case, then, of course, we can move on to the next project.

98
00:06:28,580 --> 00:06:29,050
Beautiful.

99
00:06:29,360 --> 00:06:32,060
Everything is exactly like we wanted.

100
00:06:32,330 --> 00:06:35,390
And of course, we can work on next project.