1
00:00:00,790 --> 00:00:05,110
We are all done with the refactor on the side of things, so let's now go back over to the back side

2
00:00:05,110 --> 00:00:07,150
and do a little bit of a refactor there as well.

3
00:00:07,600 --> 00:00:09,670
To begin, I'm going to go into my components directory.

4
00:00:09,730 --> 00:00:14,130
I'm going to find the ad TSX file at the very top right away.

5
00:00:14,200 --> 00:00:17,400
We no longer have an action creator of insert cell before.

6
00:00:17,410 --> 00:00:19,750
Instead it is insert cell after.

7
00:00:20,600 --> 00:00:29,570
We also need to update our two button on click functions, so insert cell after and insert cell after.

8
00:00:31,930 --> 00:00:33,670
OK, that is it for ADL.

9
00:00:34,870 --> 00:00:37,720
Last refactor is inside of Selt list.

10
00:00:38,530 --> 00:00:39,100
Inside of here.

11
00:00:40,090 --> 00:00:44,500
We're going to first make sure that when we render out our list of cells, we're always going to show

12
00:00:44,710 --> 00:00:49,390
first the cell itself through cell list item and then the ADL component.

13
00:00:49,820 --> 00:00:51,850
It's all we have to do is swap these two things.

14
00:00:53,780 --> 00:00:59,720
Socialist item and then add sell and then finally ad sell down here inside of our return block.

15
00:01:00,850 --> 00:01:07,330
Rather than displaying it below rendered cells, we're going to instead put it right above like so.

16
00:01:10,990 --> 00:01:14,920
The last thing I want to mention here that we should probably refactor, we don't technically have to,

17
00:01:15,220 --> 00:01:20,520
but is just a little bit misleading, the ADSO component receives a probe of next slide.

18
00:01:20,860 --> 00:01:23,500
So technically, we're not talking about the next cell anymore.

19
00:01:23,530 --> 00:01:25,860
We're kind of talking about the previous slide.

20
00:01:26,410 --> 00:01:29,560
So we should probably rename this just to be a little bit more consistent.

21
00:01:30,160 --> 00:01:33,880
So on Ad Cell, I'm going to change new cell ID to.

22
00:01:36,030 --> 00:01:39,800
Previous slide, I'll change it down here as well.

23
00:01:42,470 --> 00:01:48,830
And then, of course, we have to go back into our ADL component self and update our interface to back

24
00:01:48,830 --> 00:01:49,730
inside of ADL.

25
00:01:50,890 --> 00:01:53,380
Let's update to previous.

26
00:01:54,460 --> 00:01:58,180
Slide update, the top name and side of our argument list.

27
00:02:02,090 --> 00:02:07,250
And then make sure that we pass through previous slide on both of our unclick functions, so there's

28
00:02:07,250 --> 00:02:08,840
one and there's two.

29
00:02:09,990 --> 00:02:10,900
And that should be it.

30
00:02:11,760 --> 00:02:17,190
OK, so I know, like I said, I apologize for not just kind of doing it the right way at the very start,

31
00:02:17,190 --> 00:02:22,290
but when I was building this application originally, I ran into the same issue and I said, oh, wow,

32
00:02:22,290 --> 00:02:24,150
that's kind of a nasty little access issue.

33
00:02:24,370 --> 00:02:27,600
And I went through all the different possible solutions and realized, oh, yeah, probably should have

34
00:02:27,600 --> 00:02:29,260
been an insert sell after.

35
00:02:29,700 --> 00:02:34,110
So when we started writing the course, I figured, hey, let's just put this in as a little demonstration

36
00:02:34,110 --> 00:02:38,330
of something that could very easily go wrong if we don't put in a lot of thought ahead of time.

37
00:02:39,710 --> 00:02:44,690
All right, so enough of that, let's go back over to our browser and do a final test to make sure I

38
00:02:44,690 --> 00:02:45,300
refresh.

39
00:02:45,680 --> 00:02:46,790
I think we got everything.

40
00:02:46,790 --> 00:02:47,720
Maybe we didn't.

41
00:02:47,750 --> 00:02:50,620
It looks like I might have forgotten to write.

42
00:02:50,810 --> 00:02:56,060
So this is where we've got some code inside of our store file where we are creating a couple of different

43
00:02:56,060 --> 00:02:58,100
cells when our application first boots up.

44
00:02:58,700 --> 00:03:00,010
So let's go back to that store file.

45
00:03:00,020 --> 00:03:03,130
We just need to make sure we update those action types as well.

46
00:03:06,880 --> 00:03:12,850
Inside of states, I will find Staats, yep, got for them, got to fix them all up.

47
00:03:13,400 --> 00:03:15,850
So we'll do an insert sell after.

48
00:03:17,080 --> 00:03:20,500
And cell after, after and after.

49
00:03:22,160 --> 00:03:23,450
All right, so now let's do a test.

50
00:03:26,540 --> 00:03:31,790
Now, if you are not able to refresh or if you do refresh and you still see an error message, remember

51
00:03:31,790 --> 00:03:36,410
all the completed code for this video with all the refactored stuff is attached to this lecture you

52
00:03:36,410 --> 00:03:37,070
can always download.

53
00:03:37,070 --> 00:03:39,200
That's a file and take a look at my files.

54
00:03:40,330 --> 00:03:43,750
All right, so let's go ahead and do a quick test, I'm going to first go down to the very bottom one

55
00:03:43,750 --> 00:03:44,290
down here.

56
00:03:44,680 --> 00:03:46,120
I'm going to add on plus text.

57
00:03:46,630 --> 00:03:51,820
And sure enough, it adds in a cell right after it without any funny interaction.

58
00:03:52,120 --> 00:03:54,880
We delete the code cells just so we can see it a little bit more easily.

59
00:03:55,420 --> 00:03:56,500
They'll do a plus text.

60
00:03:56,800 --> 00:03:57,140
Yep.

61
00:03:57,190 --> 00:03:57,670
Excellent.

62
00:03:57,680 --> 00:04:00,460
No more funny jumping or fading out or anything like that.

63
00:04:00,980 --> 00:04:02,830
I should also be able to add one at the very top.

64
00:04:04,060 --> 00:04:06,680
Yep, that looks like it probably worked correctly.

65
00:04:06,700 --> 00:04:11,020
It's kind of hard to tell because they all say click to edit, but it's going to change these to say

66
00:04:11,020 --> 00:04:13,530
one, two and then three.

67
00:04:13,930 --> 00:04:17,750
Now, when I click on plus text right here, it should add in a new text at the very top.

68
00:04:18,070 --> 00:04:19,060
Yes, it definitely does.

69
00:04:19,540 --> 00:04:20,620
Same thing for code.

70
00:04:20,959 --> 00:04:21,180
Yep.

71
00:04:21,250 --> 00:04:21,880
That works to.

72
00:04:23,020 --> 00:04:28,240
All right, well, I think that this completely solves this entire issue looks pretty good.

73
00:04:28,450 --> 00:04:31,080
I'd say that we've got a pretty reasonable solution here.

74
00:04:31,180 --> 00:04:33,330
So let's take a pause and move on in just a moment.