Let's get started working on our handler for the Mousel action type.
Let's first begin by getting a quick reminder on what is going be inside of this action's payload property.
So I'll go to my actions in Dexter's file.
Here's the interface for move cell action.
So we're going to get a payload that gives us the ID of the cell that we're trying to move and then
the direction so either up in the list or down in the list just to make sure it's really clear what
this is all about and what our state looks like.
Let's take a look at a diagram really quickly.
OK, so we've got our state managed only by our cells reducer, so you'll notice that in this diagram
I'm not showing the ER property or the other loading property, so I'm only showing data.
So it's going to be our object that has all the IDs of our different cells and those items are going
to point at the actual cell objects.
We then have order which will be the array of strings that specifies the order that we're going to lay
these out on the screen.
So let's imagine first that the payload of our incoming action has an ID property of D.F. that implies
that we want to move this string right here.
If the direction is up, then we want to move that string earlier into the array and we want to swap
it with the element right before it.
So that is if the direction is up.
Alternatively, if the direction is down, that moves.
We want to move D.F. down and swap it with ABC so we would end up with that order like so.
OK, so now that that is crystal clear, let's go back over to our editor and start running out a little
bit of code.
So here is our action type of Mousel I'm going to first begin by structuring off the direction property
off of action payload so I get direction.
From action that haloed.
Next up, I'm going to try to find the index of the cell that we are trying to move inside of our order
array.
I'll say const index is state court order to find the index of that cell that we're looking for.
We're going to use the find index method, find index takes a function.
We're going to use that function to iterate over all the elements in the order array.
We're going to receive all those IDs one by one.
Then the first time we return.
True.
Inside this inner function, we're going to say that we just found the ID that we're looking for and
we're going to return the index of that ID inside this array and assign it to the index variable.
So we'll do a comparison of ID.
Equal to action payload ID.
Now, if we ran this line of code right here on the example we were just looking at and we had a payload
or the idea of the payload was DSF, our index would be one because this is at index one.
Now we're going to do a little comparison or a little kind of ternary operator right here to figure
out the new index of this element that's going to create a new variable called Target Index.
I'm going to say, if direction is equal to up, then we're going to assign index minus one.
To target index, otherwise we will assign index plus one.
To target or to target index.
So let's take a look at another diagram just to make sure that this line of code is really clear as
well.
All right, so we're really introducing two pieces of terminology, index and target index, if our
direction is up and our index is that index one, then our target index is going to be at zero.
So in this case, our target index is this first element right here.
So this is in the case that our direction is up.
If direction is down, then our target index is going to be A, B, C, or that element on the other
side.
So this is when the direction is down, so all we're doing here to calculate target index, we're just
using this ternary expression to decide whether or not we're trying to find the earlier element or that
element right after the one that we just found on this line right here.
All right, next up, we're going to do a real quick check, we're going to make sure that someone did
not ask us to move this element that we just found outside the bounds of the array.
So, for example, if our index.
Was the last element right here in our direction is down that would imply that our target index is outside
the array entirely.
So it's an element or a place that we cannot swap this element with.
Alternatively, if our index.
Is the very first element in the array and our direction is up, we can't move this up anymore.
So again, we're going to do a very quick check and make sure that the value of target index is legal
and inside the bounds of the array.
So for that, we'll do a very simple if statement will say if target index is less than zero.
So that's before the start of the day, or if target index is greater than state order length minus
one, that would be outside the very end of the array.
If either of those are true, we're going to return early because this is going to be an invalid state
update.
OK, so now if we get past that point, we can then do our actual swapping logic.
So for the actual swap and logic, it's going to be pretty straightforward.
All we're going to do is say, OK, take whatever is at index right now and swap it with whatever is
that target index and then take whatever is that index and put it where target indexes.
So again, just some really basic swapping logic.
So we'll write this out as state court order at index is going to be whatever is currently at state
court order at Target Index.
That's going to take, for example, are H.I.G. and move it over in place of.
Then the next line right after that, we'll do a state court order target index.
And will assign it to whatever the ID was inside of our action payload property or see the ID property
of our action, payload action, haloed ID.
And then finally, we do not need to return any state down here at the bottom of our case anymore.
And that's pretty much it.
So there is our move cell logic.
At the end of the day, this is really just some basic swopping logic implemented in typescript.
So nothing too crazy here right now.
Well, I'd say this looks good.
We can't really test this out just yet.
So we should probably remember we need to eventually test this logic and make sure it works as expected.
Let's take a pause right here.
We'll come back to the next video and start to implement insert cell before.