1
00:00:01,650 --> 00:00:07,020
Onto our last action right now, insert cell before, as usual, once again, let's get a reminder of

2
00:00:07,020 --> 00:00:08,400
what is going to be inside of this payload.

3
00:00:08,790 --> 00:00:12,600
So I'm going to go and find Action's index status inside of here.

4
00:00:12,600 --> 00:00:14,520
I'll go to insert cell before action.

5
00:00:14,940 --> 00:00:20,910
So we're going to be given the ID of the cell where we want to create a new cell right before wherever

6
00:00:20,910 --> 00:00:25,150
this ID is will then be told, in addition, what type of cell this needs to be.

7
00:00:25,170 --> 00:00:27,440
So is it a code cell or a text cell?

8
00:00:27,840 --> 00:00:31,530
And there's one kind of hole in our logic right now with everything is how everything is set up.

9
00:00:31,890 --> 00:00:35,340
We eventually want to allow a user to, of course, insert a cell.

10
00:00:35,610 --> 00:00:40,620
So I should be able to say if I say or provide an ID of def right here, that is implying that I want

11
00:00:40,620 --> 00:00:42,450
to add a new cell right here.

12
00:00:42,450 --> 00:00:44,010
So this would be my new one.

13
00:00:44,250 --> 00:00:45,480
I'll put an end for new.

14
00:00:46,520 --> 00:00:52,910
So I could very easily use this insert cell before sort of thing to say, OK, if my ID provided is

15
00:00:52,910 --> 00:00:55,070
D.F., then I would want to put my new cell right there.

16
00:00:55,340 --> 00:00:59,020
If the ID provided is H.I.G., I would want to put my new cell right here.

17
00:00:59,690 --> 00:01:07,820
And of course, if my ID provided is ABC, I would want to put my new cell right here like so.

18
00:01:08,570 --> 00:01:11,600
But we don't really have a case or really any handling for saying that.

19
00:01:11,600 --> 00:01:14,510
I want to add in a new cell to the very end of my list.

20
00:01:14,770 --> 00:01:16,370
I'm not really accommodating for that right now.

21
00:01:16,850 --> 00:01:18,710
So we're going to add in a little corner case.

22
00:01:19,070 --> 00:01:25,550
We're going to say that the ID property of this incoming action can be either a string or null.

23
00:01:25,910 --> 00:01:31,520
If it isn't, well, then that means that we want to add in a new cell to the very end of our list.

24
00:01:32,030 --> 00:01:36,740
Otherwise, if it is defined as a string, we're going to add this new cell right before wherever we

25
00:01:36,740 --> 00:01:37,490
find that ID.

26
00:01:38,410 --> 00:01:43,060
We also have to make sure that we make an update to our data object as well, so whatever new cell we

27
00:01:43,060 --> 00:01:46,510
generate, we just need to make sure we add in this new cell to the data object.

28
00:01:47,380 --> 00:01:51,160
OK, so first thing we need to do is update our action interface definition.

29
00:01:51,310 --> 00:01:55,120
We can say that that ID property can be either a string or null.

30
00:01:55,240 --> 00:02:00,460
And again, if it is null, that means that we want to add in this new cell to the very end of the order

31
00:02:00,460 --> 00:02:00,820
array.

32
00:02:02,510 --> 00:02:07,100
So back at insert cell before action, I'm going to find it right here and I'm going to say this can

33
00:02:07,100 --> 00:02:09,860
be either strong or not like some.

34
00:02:12,200 --> 00:02:13,040
OK, very good.

35
00:02:13,740 --> 00:02:14,690
Let's save this.

36
00:02:15,610 --> 00:02:21,880
I'm going to go back over to my cell reducer on my insert cell before action right there and then inside

37
00:02:21,880 --> 00:02:25,360
of your well, of course, we can write all this logic before we write out any.

38
00:02:25,360 --> 00:02:29,950
However, I just want to give you a quick reminder that back over at the GLYMOUR documentation.

39
00:02:30,910 --> 00:02:36,970
Right here, there are some directions on how we can very easily insert new elements at a very particular

40
00:02:36,970 --> 00:02:37,460
index.

41
00:02:38,020 --> 00:02:43,720
So here is the documentation around Array Mutation's, and it says very clearly we can insert an index

42
00:02:43,930 --> 00:02:45,840
doing something like this right here.

43
00:02:45,850 --> 00:02:51,940
So essentially for us, it would be state splice, then the index where we want to add this thing zero

44
00:02:51,940 --> 00:02:53,650
and then the actual record we want to add.

45
00:02:53,710 --> 00:02:55,770
So just keep that in your mind for just a moment.

46
00:02:57,100 --> 00:03:00,910
All right, so then back over here, the first thing we're going to do is generate our new cell.

47
00:03:01,540 --> 00:03:05,800
Remember, whenever we create a cell, we've already got a definition of exactly what a cell is.

48
00:03:06,070 --> 00:03:09,100
We had created this definition inside of our cell that's file.

49
00:03:09,530 --> 00:03:11,290
So inside there, we created this interface.

50
00:03:11,320 --> 00:03:13,000
We said this is what a cell is.

51
00:03:13,000 --> 00:03:15,340
All cells must conform to this interface.

52
00:03:15,970 --> 00:03:21,130
We have already imports that interface into our cells reducer file right here.

53
00:03:21,830 --> 00:03:26,860
So as we start to think about creating a new cell and adding it into our state, we probably want to

54
00:03:26,860 --> 00:03:30,520
make sure that we somehow enforce some type checking around the cell that we are creating.

55
00:03:31,090 --> 00:03:32,860
Long story short, we're going to write out cell.

56
00:03:33,070 --> 00:03:35,230
I'm going to annotate its type as type cell.

57
00:03:36,290 --> 00:03:40,010
Well, said an object to it, and now we're using TypeScript to make sure we add all the appropriate

58
00:03:40,010 --> 00:03:42,200
properties to the new cell that we are creating.

59
00:03:43,220 --> 00:03:47,600
So inside of here, we have to provide an ID that means we have to randomly generate an idea.

60
00:03:47,630 --> 00:03:52,750
Of course, we also have to provide a type of cell for it and also give it some default content.

61
00:03:53,330 --> 00:03:56,780
So for default content, I'm going to say this thing is going to start off with an empty string.

62
00:03:57,810 --> 00:03:58,690
Or type.

63
00:03:58,710 --> 00:04:04,560
This is going to come from our action that pela property will do action payload type, they'll tell

64
00:04:04,560 --> 00:04:10,680
us the type of cell we are creating and then finally the ID, so the ID we're going to randomly generate

65
00:04:10,800 --> 00:04:12,200
inside of our client.

66
00:04:12,570 --> 00:04:16,410
So it's up to our redox application to essentially randomly generate this ID for us.

67
00:04:16,980 --> 00:04:21,750
Let's do a very quick aside and we're just gonna write out a very quick random idea generation function.

68
00:04:22,300 --> 00:04:26,760
I'm going to write that out at the very bottom of this file, right above the export default statement.

69
00:04:27,720 --> 00:04:29,940
They'll do random ID.

70
00:04:32,730 --> 00:04:38,160
And to generate a random ID, which will have to be a random series of numbers and letters, will do

71
00:04:38,160 --> 00:04:41,550
a return math not random, that's going to give us a random number.

72
00:04:42,060 --> 00:04:47,130
We're then going to convert that to a string, but we're going to use base thirty six, which means

73
00:04:47,130 --> 00:04:51,750
that this string that we are converting this thing to is going to be filled with numbers and letters.

74
00:04:52,290 --> 00:04:56,450
All the numbers from zero to nine, all the letters from A to Z.

75
00:04:57,150 --> 00:05:00,090
We're then going to take just a portion of the string that we get back.

76
00:05:00,660 --> 00:05:07,640
We'll do some string to the five substring here being very similar to slice for an array.

77
00:05:07,650 --> 00:05:10,410
So we're just taking a very small portion of the string we get back.

78
00:05:11,440 --> 00:05:16,810
I can recommend you commit this function right here to memory, turns out that having random ID generation

79
00:05:16,810 --> 00:05:17,960
is really, really handy.

80
00:05:18,460 --> 00:05:20,620
Very many places where you want to have something like this.

81
00:05:20,950 --> 00:05:22,530
So just remember that function right there.

82
00:05:22,540 --> 00:05:24,280
You might need to at some point time in the future.

83
00:05:25,270 --> 00:05:28,540
So we can now use that function to randomly generate our ID.

84
00:05:32,730 --> 00:05:38,700
OK, so this is the new cell that we now want to insert into our data object and our order array as

85
00:05:38,700 --> 00:05:38,950
well.

86
00:05:39,180 --> 00:05:43,770
Let's first take care of the data object, because that is really simple to make an update to still

87
00:05:43,830 --> 00:05:45,400
do state dot data.

88
00:05:45,420 --> 00:05:46,370
So that's our object.

89
00:05:46,920 --> 00:05:50,490
We're going to assign a new property to it at Cell Dot ID.

90
00:05:51,860 --> 00:05:56,210
That's going to essentially give us the new record inside of this object.

91
00:05:56,600 --> 00:05:59,210
We're saying that we're going to put in a new I.D. inside of here.

92
00:05:59,270 --> 00:06:02,780
So whatever I.D. we generate and we're going to set that to.

93
00:06:03,930 --> 00:06:05,880
The cell that we just generated.

94
00:06:08,130 --> 00:06:11,940
So the cell that we just generated to assign that will do equals cell like cell.

95
00:06:15,020 --> 00:06:16,980
OK, simple enough now.

96
00:06:17,060 --> 00:06:22,970
Next up, we're going to take a look at the idea of the action Paillot property and we're going to find.

97
00:06:23,950 --> 00:06:29,320
Exactly where that thing is, where ID is inside of our order array, because, remember, we now need

98
00:06:29,320 --> 00:06:34,480
to take the idea of this new cell and insert it right before wherever that current index is.

99
00:06:35,760 --> 00:06:37,410
So we'll do a quick check for index.

100
00:06:38,500 --> 00:06:42,770
That will be very similar to what we had inside of our last action handler up here.

101
00:06:43,300 --> 00:06:45,790
We'll do a state court order, find index.

102
00:06:47,480 --> 00:06:50,210
We're going to receive every IID one by one.

103
00:06:51,240 --> 00:06:58,320
And they will return whichever one returns, true, or a check of ID versus action payload ID.

104
00:07:01,890 --> 00:07:06,250
Now, I'm getting an error here from index, I guess I declared, oh, that's right.

105
00:07:06,860 --> 00:07:08,740
So we already declared index up here.

106
00:07:09,070 --> 00:07:13,800
So we're trying to declare it the index variable once again inside the same switch statement block.

107
00:07:14,290 --> 00:07:15,520
So does it get around this?

108
00:07:15,520 --> 00:07:20,290
Ideally, what we might do is extract a lot of this logic into little helper functions and then Cully's

109
00:07:20,290 --> 00:07:23,020
helper functions from each of these different action cases.

110
00:07:23,290 --> 00:07:26,950
But because we don't really need to do that, because I don't expect our reducer to grow much larger

111
00:07:26,950 --> 00:07:29,880
in size, we're just going to rename the index variable right here.

112
00:07:30,130 --> 00:07:34,890
Maybe a better name for this would be something like current index about found index.

113
00:07:34,900 --> 00:07:35,500
That's a reasonable.

114
00:07:38,210 --> 00:07:42,260
And the first thing we need to do after finding found index, remember, it is entirely possible that

115
00:07:42,260 --> 00:07:44,480
action payload ID is actually null.

116
00:07:44,930 --> 00:07:50,540
So if that thing is null, that means that we're probably not going to find an index to place this if

117
00:07:50,540 --> 00:07:53,330
we're not able to find some element with find index.

118
00:07:53,540 --> 00:07:57,230
And if you mouse over that thing, it's going to give us back negative one.

119
00:07:57,800 --> 00:07:59,300
So we're going to take a look at find index.

120
00:07:59,570 --> 00:08:04,370
If the value of it is negative, one or less and zero might be a better way to write that out, then

121
00:08:04,380 --> 00:08:08,660
we're going to go ahead and add our new cells ID to the very end.

122
00:08:09,940 --> 00:08:11,800
Of our order array.

123
00:08:13,740 --> 00:08:17,070
So we'll say if found, index is less than zero.

124
00:08:18,040 --> 00:08:23,800
Then we'll take a look at state border and we're going to push on to the very end sell ID.

125
00:08:25,420 --> 00:08:26,200
Otherwise.

126
00:08:27,250 --> 00:08:33,159
We want to insert this new cell or the new cell ID and to insert it, we can use that exact same logic

127
00:08:33,159 --> 00:08:35,799
that we just saw a moment ago back inside this documentation.

128
00:08:36,220 --> 00:08:41,710
So we want to do a state splice at the index that we want to add in this new cell.

129
00:08:43,750 --> 00:08:46,880
So we'll do a background, my code editor.

130
00:08:48,310 --> 00:08:50,410
State border splice.

131
00:08:51,940 --> 00:08:53,590
At found index.

132
00:08:54,730 --> 00:08:55,270
Zero.

133
00:08:56,410 --> 00:09:02,770
And we'll add in our new cell ID, so cell that ID like, so and that should be it.

134
00:09:04,530 --> 00:09:05,730
OK, so this looks pretty good.

135
00:09:06,330 --> 00:09:11,070
Well, we've just about finished up with our cells reducer here, but we've not really tested it out.

136
00:09:11,080 --> 00:09:14,050
And so there could be a really nasty bugs inside of here.

137
00:09:14,070 --> 00:09:14,760
Who knows?

138
00:09:15,240 --> 00:09:19,110
We don't really have any reasonable way of testing a LUDs code until we write out a lot more of our

139
00:09:19,110 --> 00:09:22,350
different components for moving cells around and stuff like that.

140
00:09:22,650 --> 00:09:27,960
So we should probably figure out some way, some reasonable way of maybe doing a quick test of what

141
00:09:27,960 --> 00:09:32,100
we've written out here, maybe without having to write out a full testing framework or something like

142
00:09:32,100 --> 00:09:34,170
that, or having to set up a full testing framework.

143
00:09:34,620 --> 00:09:37,770
So let's take a pause right here and come back the next video and see if there isn't some way that we

144
00:09:37,770 --> 00:09:42,000
could figure out to just very quickly validate some illogic we have inside of here without going through

145
00:09:42,000 --> 00:09:44,250
a ton of testing code and set up stuff.