Onto our last action right now, insert cell before, as usual, once again, let's get a reminder of
what is going to be inside of this payload.
So I'm going to go and find Action's index status inside of here.
I'll go to insert cell before action.
So we're going to be given the ID of the cell where we want to create a new cell right before wherever
this ID is will then be told, in addition, what type of cell this needs to be.
So is it a code cell or a text cell?
And there's one kind of hole in our logic right now with everything is how everything is set up.
We eventually want to allow a user to, of course, insert a cell.
So I should be able to say if I say or provide an ID of def right here, that is implying that I want
to add a new cell right here.
So this would be my new one.
I'll put an end for new.
So I could very easily use this insert cell before sort of thing to say, OK, if my ID provided is
D.F., then I would want to put my new cell right there.
If the ID provided is H.I.G., I would want to put my new cell right here.
And of course, if my ID provided is ABC, I would want to put my new cell right here like so.
But we don't really have a case or really any handling for saying that.
I want to add in a new cell to the very end of my list.
I'm not really accommodating for that right now.
So we're going to add in a little corner case.
We're going to say that the ID property of this incoming action can be either a string or null.
If it isn't, well, then that means that we want to add in a new cell to the very end of our list.
Otherwise, if it is defined as a string, we're going to add this new cell right before wherever we
find that ID.
We also have to make sure that we make an update to our data object as well, so whatever new cell we
generate, we just need to make sure we add in this new cell to the data object.
OK, so first thing we need to do is update our action interface definition.
We can say that that ID property can be either a string or null.
And again, if it is null, that means that we want to add in this new cell to the very end of the order
array.
So back at insert cell before action, I'm going to find it right here and I'm going to say this can
be either strong or not like some.
OK, very good.
Let's save this.
I'm going to go back over to my cell reducer on my insert cell before action right there and then inside
of your well, of course, we can write all this logic before we write out any.
However, I just want to give you a quick reminder that back over at the GLYMOUR documentation.
Right here, there are some directions on how we can very easily insert new elements at a very particular
index.
So here is the documentation around Array Mutation's, and it says very clearly we can insert an index
doing something like this right here.
So essentially for us, it would be state splice, then the index where we want to add this thing zero
and then the actual record we want to add.
So just keep that in your mind for just a moment.
All right, so then back over here, the first thing we're going to do is generate our new cell.
Remember, whenever we create a cell, we've already got a definition of exactly what a cell is.
We had created this definition inside of our cell that's file.
So inside there, we created this interface.
We said this is what a cell is.
All cells must conform to this interface.
We have already imports that interface into our cells reducer file right here.
So as we start to think about creating a new cell and adding it into our state, we probably want to
make sure that we somehow enforce some type checking around the cell that we are creating.
Long story short, we're going to write out cell.
I'm going to annotate its type as type cell.
Well, said an object to it, and now we're using TypeScript to make sure we add all the appropriate
properties to the new cell that we are creating.
So inside of here, we have to provide an ID that means we have to randomly generate an idea.
Of course, we also have to provide a type of cell for it and also give it some default content.
So for default content, I'm going to say this thing is going to start off with an empty string.
Or type.
This is going to come from our action that pela property will do action payload type, they'll tell
us the type of cell we are creating and then finally the ID, so the ID we're going to randomly generate
inside of our client.
So it's up to our redox application to essentially randomly generate this ID for us.
Let's do a very quick aside and we're just gonna write out a very quick random idea generation function.
I'm going to write that out at the very bottom of this file, right above the export default statement.
They'll do random ID.
And to generate a random ID, which will have to be a random series of numbers and letters, will do
a return math not random, that's going to give us a random number.
We're then going to convert that to a string, but we're going to use base thirty six, which means
that this string that we are converting this thing to is going to be filled with numbers and letters.
All the numbers from zero to nine, all the letters from A to Z.
We're then going to take just a portion of the string that we get back.
We'll do some string to the five substring here being very similar to slice for an array.
So we're just taking a very small portion of the string we get back.
I can recommend you commit this function right here to memory, turns out that having random ID generation
is really, really handy.
Very many places where you want to have something like this.
So just remember that function right there.
You might need to at some point time in the future.
So we can now use that function to randomly generate our ID.
OK, so this is the new cell that we now want to insert into our data object and our order array as
well.
Let's first take care of the data object, because that is really simple to make an update to still
do state dot data.
So that's our object.
We're going to assign a new property to it at Cell Dot ID.
That's going to essentially give us the new record inside of this object.
We're saying that we're going to put in a new I.D. inside of here.
So whatever I.D. we generate and we're going to set that to.
The cell that we just generated.
So the cell that we just generated to assign that will do equals cell like cell.
OK, simple enough now.
Next up, we're going to take a look at the idea of the action Paillot property and we're going to find.
Exactly where that thing is, where ID is inside of our order array, because, remember, we now need
to take the idea of this new cell and insert it right before wherever that current index is.
So we'll do a quick check for index.
That will be very similar to what we had inside of our last action handler up here.
We'll do a state court order, find index.
We're going to receive every IID one by one.
And they will return whichever one returns, true, or a check of ID versus action payload ID.
Now, I'm getting an error here from index, I guess I declared, oh, that's right.
So we already declared index up here.
So we're trying to declare it the index variable once again inside the same switch statement block.
So does it get around this?
Ideally, what we might do is extract a lot of this logic into little helper functions and then Cully's
helper functions from each of these different action cases.
But because we don't really need to do that, because I don't expect our reducer to grow much larger
in size, we're just going to rename the index variable right here.
Maybe a better name for this would be something like current index about found index.
That's a reasonable.
And the first thing we need to do after finding found index, remember, it is entirely possible that
action payload ID is actually null.
So if that thing is null, that means that we're probably not going to find an index to place this if
we're not able to find some element with find index.
And if you mouse over that thing, it's going to give us back negative one.
So we're going to take a look at find index.
If the value of it is negative, one or less and zero might be a better way to write that out, then
we're going to go ahead and add our new cells ID to the very end.
Of our order array.
So we'll say if found, index is less than zero.
Then we'll take a look at state border and we're going to push on to the very end sell ID.
Otherwise.
We want to insert this new cell or the new cell ID and to insert it, we can use that exact same logic
that we just saw a moment ago back inside this documentation.
So we want to do a state splice at the index that we want to add in this new cell.
So we'll do a background, my code editor.
State border splice.
At found index.
Zero.
And we'll add in our new cell ID, so cell that ID like, so and that should be it.
OK, so this looks pretty good.
Well, we've just about finished up with our cells reducer here, but we've not really tested it out.
And so there could be a really nasty bugs inside of here.
Who knows?
We don't really have any reasonable way of testing a LUDs code until we write out a lot more of our
different components for moving cells around and stuff like that.
So we should probably figure out some way, some reasonable way of maybe doing a quick test of what
we've written out here, maybe without having to write out a full testing framework or something like
that, or having to set up a full testing framework.
So let's take a pause right here and come back the next video and see if there isn't some way that we
could figure out to just very quickly validate some illogic we have inside of here without going through
a ton of testing code and set up stuff.