1
00:00:00,210 --> 00:00:07,680
Nice job with our basic return in place, of course, we can add the functionality where as we're clicking

2
00:00:07,680 --> 00:00:14,830
on a button, we're displaying either the next person or the previous one.

3
00:00:15,330 --> 00:00:19,400
And of course, we will need to send that up of these buttons.

4
00:00:19,830 --> 00:00:24,630
So before we set up the functions, I mean, just add right away on click.

5
00:00:25,780 --> 00:00:33,520
To the and the next and I think I'm going to call as far as the function names, one is going to be

6
00:00:33,530 --> 00:00:37,270
brief person and next one is going to be a next person.

7
00:00:37,600 --> 00:00:39,330
So I'm going to hold brief person.

8
00:00:39,340 --> 00:00:43,000
Of course, that function doesn't exist, so I'll have to create it.

9
00:00:43,000 --> 00:00:50,260
Otherwise we're going to get a nice error and then copy and paste and I'll just say next person.

10
00:00:50,440 --> 00:00:57,040
So once I have my own collection, of course it's time to work on the functions and I think we can go

11
00:00:57,070 --> 00:01:03,880
with the next person first where I'm going to go with CONSED and then next person of course, next person

12
00:01:04,150 --> 00:01:06,550
I'm that is equal to my function.

13
00:01:06,790 --> 00:01:12,760
And then inside of this function, what I would want is to call of course set index because I would

14
00:01:12,760 --> 00:01:13,680
want to change the index.

15
00:01:14,050 --> 00:01:21,290
However, just so we can keep on practicing, I'm going to go with functional update form where I go

16
00:01:21,290 --> 00:01:23,940
with setting X and then I pass in the function.

17
00:01:24,280 --> 00:01:30,700
Remember as a primer, we are accessing the current state value and in this case I will call it the

18
00:01:30,700 --> 00:01:36,160
same answer that night as the index and then whatever we were returning from this function, of course,

19
00:01:36,160 --> 00:01:39,170
now will be that new state of value.

20
00:01:39,460 --> 00:01:43,600
So just to be a bit more explicit, I'm going to go with new variable.

21
00:01:43,600 --> 00:01:48,210
I'm going to say a new index, and that is equal to the index plus one.

22
00:01:48,220 --> 00:01:48,550
Why?

23
00:01:49,480 --> 00:01:50,950
Because I would want to see the next person.

24
00:01:50,950 --> 00:01:51,360
Correct.

25
00:01:51,640 --> 00:01:57,250
So if I have zero, then I would want to increase it by one, which would be, of course, person number

26
00:01:57,250 --> 00:02:00,240
two, since there are zero the next person.

27
00:02:00,610 --> 00:02:06,490
And then once I have that new index, then of course I'm going to go with a return and I would want

28
00:02:06,490 --> 00:02:07,980
to return that new index.

29
00:02:08,260 --> 00:02:10,410
So what we can do is just save.

30
00:02:10,750 --> 00:02:17,410
And then we still have a plan for the person, just copy and paste and then we need to change these

31
00:02:17,410 --> 00:02:18,040
values around.

32
00:02:18,040 --> 00:02:20,470
So Prešov person, that is the name of my function.

33
00:02:20,800 --> 00:02:22,120
I still access the index.

34
00:02:22,360 --> 00:02:23,530
It's still going to be a new index.

35
00:02:23,530 --> 00:02:28,990
But of course, since I would want to see the previous person instead of index plus one, I go index

36
00:02:28,990 --> 00:02:31,060
minus one, I save it.

37
00:02:31,450 --> 00:02:36,780
And when we click on a button, we should see the next person.

38
00:02:37,210 --> 00:02:43,330
Now, eventually we will run into there and there is going to be simple we're index.

39
00:02:43,480 --> 00:02:44,800
So the state value.

40
00:02:45,670 --> 00:02:51,430
It's going to be bigger than the last items index in my right.

41
00:02:51,880 --> 00:02:58,110
So if I check my data, I can see that I have added one, two, three, four.

42
00:02:58,600 --> 00:03:00,520
So I have four items.

43
00:03:00,850 --> 00:03:04,030
So the last index that I have is number three.

44
00:03:04,330 --> 00:03:09,310
So once this index gets bigger than three, then of course I have the error.

45
00:03:09,330 --> 00:03:09,650
Why?

46
00:03:09,940 --> 00:03:11,950
Well, because I'm looking for people.

47
00:03:12,280 --> 00:03:14,700
I'm an index number for for example.

48
00:03:15,040 --> 00:03:20,340
And then, of course, if the item is not there, well, that's why I have this error.

49
00:03:20,590 --> 00:03:26,830
And as far as the previous eye, right away I have that error because I'm looking for index minus one.

50
00:03:27,130 --> 00:03:33,370
So the preview is going to work if I navigate to the last person or maybe to the first person or whatever.

51
00:03:33,580 --> 00:03:37,270
And then, of course, I can still toggle here back and forth.

52
00:03:37,570 --> 00:03:38,640
So it works.

53
00:03:38,980 --> 00:03:46,030
But the problem is, once I get to the end of the day or beginning of the right and of course my functionality

54
00:03:46,360 --> 00:03:53,260
falls apart because such an indexes don't exist, whether that is negative or in my case, bigger than

55
00:03:53,260 --> 00:03:53,570
three.

56
00:03:53,980 --> 00:03:55,150
So what's the solution?

57
00:03:55,570 --> 00:03:59,590
Well, we can add here manually where we're checking for the value.

58
00:03:59,590 --> 00:04:07,120
And if the value is, for example, bigger than the last item in the array, then I just flip it to

59
00:04:07,270 --> 00:04:07,750
zero.

60
00:04:08,080 --> 00:04:13,720
Or since I know that I'm going to use it multiple times, I can just come up with a function where I

61
00:04:13,720 --> 00:04:16,900
go with CONST and I'll name this check number.

62
00:04:17,200 --> 00:04:19,470
Now I'll pass here the number.

63
00:04:19,840 --> 00:04:26,230
So as the argument, I'm going to be looking for a number and then inside this function I'm going to

64
00:04:26,230 --> 00:04:32,110
check, I'm going to say, hey, listen, if the number is bigger than the last item in the right,

65
00:04:32,320 --> 00:04:33,510
then return zero.

66
00:04:33,820 --> 00:04:39,970
If the number is less than zero, well, then return the last item in the array.

67
00:04:40,210 --> 00:04:47,560
So here I say if I'm not number and in order to get the last item in right, I need to go with my right

68
00:04:47,560 --> 00:04:53,830
name, then length and then minus one, because again, the arrays are zero indexed based.

69
00:04:54,100 --> 00:05:00,740
So in here I say if number is bigger than people and then that length and minus one.

70
00:05:01,510 --> 00:05:09,940
So if my number is bigger than the index of the last item in the right, well then just return zero.

71
00:05:10,420 --> 00:05:12,970
So then return the first item in the array.

72
00:05:13,360 --> 00:05:20,970
However, if the number is less than zero, well then of course just return to the last item in there.

73
00:05:21,340 --> 00:05:30,550
So I go here with number is less than zero, then of course return and now the value should be people

74
00:05:30,850 --> 00:05:32,660
on earth minus one.

75
00:05:33,040 --> 00:05:38,410
So if I come to the beginning of the right now, I would want to display the last item.

76
00:05:38,680 --> 00:05:43,770
Now, if the number is neither of these cases, then I can just simply return number.

77
00:05:43,980 --> 00:05:46,600
I can go with the return and the number.

78
00:05:46,870 --> 00:05:48,460
So I'll serve it here.

79
00:05:48,670 --> 00:05:55,330
And then instead of passing the new index now, I would want to pass that new index in my check number.

80
00:05:55,630 --> 00:06:02,920
So I go here with check number and I pass in the new index the same thing I'm going to do over here

81
00:06:03,160 --> 00:06:05,250
where I'm displaying the last person.

82
00:06:05,650 --> 00:06:12,370
So instead of just returning a new index, which of course could be negative now I'll pass the check

83
00:06:12,370 --> 00:06:12,730
number.

84
00:06:13,000 --> 00:06:19,360
And then if it is negative that I know that I'm going to get the last person in the array.

85
00:06:20,050 --> 00:06:21,670
So now, of course, our functionality works.

86
00:06:21,970 --> 00:06:25,990
We're notice we can go forward and we can go backwards.

87
00:06:25,990 --> 00:06:29,590
And if we come to the beginning of the year, then we display the last item.

88
00:06:29,860 --> 00:06:35,140
If we go to the end of the year and of course, we just display the first item.