1
00:00:00,790 --> 00:00:04,710
Let's get started working on our handler for the Mousel action type.

2
00:00:05,110 --> 00:00:09,460
Let's first begin by getting a quick reminder on what is going be inside of this action's payload property.

3
00:00:09,890 --> 00:00:12,160
So I'll go to my actions in Dexter's file.

4
00:00:12,680 --> 00:00:15,100
Here's the interface for move cell action.

5
00:00:15,610 --> 00:00:19,630
So we're going to get a payload that gives us the ID of the cell that we're trying to move and then

6
00:00:19,630 --> 00:00:24,850
the direction so either up in the list or down in the list just to make sure it's really clear what

7
00:00:24,850 --> 00:00:26,860
this is all about and what our state looks like.

8
00:00:27,010 --> 00:00:28,660
Let's take a look at a diagram really quickly.

9
00:00:29,700 --> 00:00:36,030
OK, so we've got our state managed only by our cells reducer, so you'll notice that in this diagram

10
00:00:36,030 --> 00:00:40,920
I'm not showing the ER property or the other loading property, so I'm only showing data.

11
00:00:40,920 --> 00:00:45,480
So it's going to be our object that has all the IDs of our different cells and those items are going

12
00:00:45,480 --> 00:00:47,280
to point at the actual cell objects.

13
00:00:47,880 --> 00:00:51,510
We then have order which will be the array of strings that specifies the order that we're going to lay

14
00:00:51,510 --> 00:00:52,440
these out on the screen.

15
00:00:53,130 --> 00:00:59,610
So let's imagine first that the payload of our incoming action has an ID property of D.F. that implies

16
00:00:59,610 --> 00:01:01,470
that we want to move this string right here.

17
00:01:01,920 --> 00:01:06,840
If the direction is up, then we want to move that string earlier into the array and we want to swap

18
00:01:06,840 --> 00:01:09,150
it with the element right before it.

19
00:01:09,780 --> 00:01:11,400
So that is if the direction is up.

20
00:01:11,820 --> 00:01:14,820
Alternatively, if the direction is down, that moves.

21
00:01:14,820 --> 00:01:21,720
We want to move D.F. down and swap it with ABC so we would end up with that order like so.

22
00:01:22,730 --> 00:01:26,690
OK, so now that that is crystal clear, let's go back over to our editor and start running out a little

23
00:01:26,690 --> 00:01:27,170
bit of code.

24
00:01:29,630 --> 00:01:35,120
So here is our action type of Mousel I'm going to first begin by structuring off the direction property

25
00:01:35,270 --> 00:01:38,030
off of action payload so I get direction.

26
00:01:40,520 --> 00:01:43,190
From action that haloed.

27
00:01:45,440 --> 00:01:49,910
Next up, I'm going to try to find the index of the cell that we are trying to move inside of our order

28
00:01:49,910 --> 00:01:50,390
array.

29
00:01:51,460 --> 00:01:59,500
I'll say const index is state court order to find the index of that cell that we're looking for.

30
00:01:59,530 --> 00:02:03,670
We're going to use the find index method, find index takes a function.

31
00:02:04,030 --> 00:02:07,990
We're going to use that function to iterate over all the elements in the order array.

32
00:02:08,479 --> 00:02:10,630
We're going to receive all those IDs one by one.

33
00:02:11,320 --> 00:02:13,120
Then the first time we return.

34
00:02:13,120 --> 00:02:13,510
True.

35
00:02:13,510 --> 00:02:18,120
Inside this inner function, we're going to say that we just found the ID that we're looking for and

36
00:02:18,130 --> 00:02:23,230
we're going to return the index of that ID inside this array and assign it to the index variable.

37
00:02:24,160 --> 00:02:26,110
So we'll do a comparison of ID.

38
00:02:27,640 --> 00:02:30,520
Equal to action payload ID.

39
00:02:33,200 --> 00:02:38,930
Now, if we ran this line of code right here on the example we were just looking at and we had a payload

40
00:02:39,140 --> 00:02:44,690
or the idea of the payload was DSF, our index would be one because this is at index one.

41
00:02:45,860 --> 00:02:50,810
Now we're going to do a little comparison or a little kind of ternary operator right here to figure

42
00:02:50,810 --> 00:02:55,940
out the new index of this element that's going to create a new variable called Target Index.

43
00:02:57,400 --> 00:03:03,760
I'm going to say, if direction is equal to up, then we're going to assign index minus one.

44
00:03:04,810 --> 00:03:09,220
To target index, otherwise we will assign index plus one.

45
00:03:10,290 --> 00:03:13,030
To target or to target index.

46
00:03:13,740 --> 00:03:17,340
So let's take a look at another diagram just to make sure that this line of code is really clear as

47
00:03:17,340 --> 00:03:17,600
well.

48
00:03:18,750 --> 00:03:24,420
All right, so we're really introducing two pieces of terminology, index and target index, if our

49
00:03:24,420 --> 00:03:30,820
direction is up and our index is that index one, then our target index is going to be at zero.

50
00:03:31,200 --> 00:03:34,210
So in this case, our target index is this first element right here.

51
00:03:34,650 --> 00:03:36,920
So this is in the case that our direction is up.

52
00:03:37,650 --> 00:03:42,840
If direction is down, then our target index is going to be A, B, C, or that element on the other

53
00:03:42,840 --> 00:03:43,260
side.

54
00:03:44,260 --> 00:03:49,180
So this is when the direction is down, so all we're doing here to calculate target index, we're just

55
00:03:49,180 --> 00:03:53,440
using this ternary expression to decide whether or not we're trying to find the earlier element or that

56
00:03:53,440 --> 00:03:57,490
element right after the one that we just found on this line right here.

57
00:03:59,320 --> 00:04:04,030
All right, next up, we're going to do a real quick check, we're going to make sure that someone did

58
00:04:04,030 --> 00:04:08,510
not ask us to move this element that we just found outside the bounds of the array.

59
00:04:09,010 --> 00:04:11,620
So, for example, if our index.

60
00:04:13,590 --> 00:04:20,010
Was the last element right here in our direction is down that would imply that our target index is outside

61
00:04:20,010 --> 00:04:20,910
the array entirely.

62
00:04:21,089 --> 00:04:24,940
So it's an element or a place that we cannot swap this element with.

63
00:04:25,410 --> 00:04:27,990
Alternatively, if our index.

64
00:04:29,570 --> 00:04:35,310
Is the very first element in the array and our direction is up, we can't move this up anymore.

65
00:04:35,810 --> 00:04:40,130
So again, we're going to do a very quick check and make sure that the value of target index is legal

66
00:04:40,130 --> 00:04:41,420
and inside the bounds of the array.

67
00:04:42,110 --> 00:04:47,740
So for that, we'll do a very simple if statement will say if target index is less than zero.

68
00:04:47,750 --> 00:04:56,360
So that's before the start of the day, or if target index is greater than state order length minus

69
00:04:56,360 --> 00:04:59,150
one, that would be outside the very end of the array.

70
00:04:59,330 --> 00:05:03,740
If either of those are true, we're going to return early because this is going to be an invalid state

71
00:05:03,740 --> 00:05:04,250
update.

72
00:05:07,060 --> 00:05:10,900
OK, so now if we get past that point, we can then do our actual swapping logic.

73
00:05:11,260 --> 00:05:13,660
So for the actual swap and logic, it's going to be pretty straightforward.

74
00:05:13,900 --> 00:05:21,430
All we're going to do is say, OK, take whatever is at index right now and swap it with whatever is

75
00:05:21,430 --> 00:05:26,060
that target index and then take whatever is that index and put it where target indexes.

76
00:05:26,080 --> 00:05:28,390
So again, just some really basic swapping logic.

77
00:05:29,000 --> 00:05:35,380
So we'll write this out as state court order at index is going to be whatever is currently at state

78
00:05:35,590 --> 00:05:38,020
court order at Target Index.

79
00:05:39,770 --> 00:05:44,180
That's going to take, for example, are H.I.G. and move it over in place of.

80
00:05:48,370 --> 00:05:52,750
Then the next line right after that, we'll do a state court order target index.

81
00:05:54,660 --> 00:06:00,270
And will assign it to whatever the ID was inside of our action payload property or see the ID property

82
00:06:00,270 --> 00:06:03,630
of our action, payload action, haloed ID.

83
00:06:05,290 --> 00:06:09,430
And then finally, we do not need to return any state down here at the bottom of our case anymore.

84
00:06:10,450 --> 00:06:11,390
And that's pretty much it.

85
00:06:11,440 --> 00:06:13,570
So there is our move cell logic.

86
00:06:13,870 --> 00:06:17,740
At the end of the day, this is really just some basic swopping logic implemented in typescript.

87
00:06:17,950 --> 00:06:19,490
So nothing too crazy here right now.

88
00:06:20,290 --> 00:06:21,460
Well, I'd say this looks good.

89
00:06:21,520 --> 00:06:23,050
We can't really test this out just yet.

90
00:06:23,050 --> 00:06:27,910
So we should probably remember we need to eventually test this logic and make sure it works as expected.

91
00:06:28,620 --> 00:06:29,620
Let's take a pause right here.

92
00:06:29,650 --> 00:06:33,040
We'll come back to the next video and start to implement insert cell before.