1
00:00:01,010 --> 00:00:04,250
One of the last major components we're going to put together is the ADL component.

2
00:00:04,580 --> 00:00:08,680
So this is going to be a little kind of section divide between each of our different cells.

3
00:00:09,230 --> 00:00:14,510
It's going to be a little faint line with a plus text and a plus code button, as you'd guess, of user

4
00:00:14,510 --> 00:00:15,440
clicks on plus text.

5
00:00:15,440 --> 00:00:17,230
We're going to add in a Texel right there.

6
00:00:17,510 --> 00:00:19,850
And if they click on plus code, we're going to add in a code cell.

7
00:00:19,850 --> 00:00:23,540
Instead, we want to show this divider between every single cell.

8
00:00:23,810 --> 00:00:28,340
We also want to show it before any cell and after all cells as well.

9
00:00:30,920 --> 00:00:35,630
On the trickiest things here is probably going to be figuring out where to add our ad cell components

10
00:00:35,960 --> 00:00:38,810
just because we want to show it between every cell and at the start.

11
00:00:38,810 --> 00:00:39,500
At the very end.

12
00:00:39,810 --> 00:00:43,220
Beyond that, it's going to be a pretty simple and straightforward component, because remember, we've

13
00:00:43,220 --> 00:00:46,410
already added in all the action creators needed to support this thing.

14
00:00:46,580 --> 00:00:49,430
We've got that insert cell before action creator.

15
00:00:49,550 --> 00:00:53,120
And that's how we're going to make sure that we can eventually click on these buttons and add in a new

16
00:00:53,120 --> 00:00:54,680
cell at the required position.

17
00:00:55,430 --> 00:00:55,730
All right.

18
00:00:55,730 --> 00:00:58,790
So without further ado, let's flip back over to our editor and get started.

19
00:01:00,740 --> 00:01:03,530
I'm going to first begin by finding my components directory inside there.

20
00:01:03,560 --> 00:01:06,120
I'll make a new file called Add Cell.

21
00:01:07,520 --> 00:01:09,920
We're definitely going to need some custom styling for this thing.

22
00:01:09,930 --> 00:01:13,970
So I'm also going to add in an add sell access file.

23
00:01:15,300 --> 00:01:21,660
Inside of ADL, TSX, so this is our component file I will immediately import in the case file.

24
00:01:24,840 --> 00:01:27,930
Well, then create an ad, sell components.

25
00:01:29,810 --> 00:01:33,450
And annotate annotate its type as React F.C..

26
00:01:36,700 --> 00:01:38,860
I'll return a simple one.

27
00:01:39,790 --> 00:01:45,910
That says add self right now and then a quick export default and sell.

28
00:01:48,470 --> 00:01:52,040
All right, so let's think a little bit about the props that we're going to need to provide to this

29
00:01:52,040 --> 00:01:56,840
thing now, if you recall, we mentioned just a moment ago, whenever a user clicks on one of these

30
00:01:56,840 --> 00:02:01,250
buttons, we probably want to invoke that action cowriter that we already put together called insert

31
00:02:01,250 --> 00:02:02,270
cell before.

32
00:02:02,780 --> 00:02:09,020
So that's kind of implying that every single ad cell component is going to need to know the ID of the

33
00:02:09,020 --> 00:02:10,610
cell immediately after it.

34
00:02:10,970 --> 00:02:15,410
So in this case, the first instance right here is going to need to know the idea of this cell.

35
00:02:16,010 --> 00:02:20,390
The next one needs to know the ID of this cell and then the very last one.

36
00:02:20,420 --> 00:02:21,730
There's no cell after it.

37
00:02:21,980 --> 00:02:26,840
So we would instead provide a next slide of no remember, no means.

38
00:02:26,840 --> 00:02:29,710
We want to add in a new cell to the very bottom of our list.

39
00:02:29,750 --> 00:02:32,180
We were to handle that case and we put together our action creators.

40
00:02:33,110 --> 00:02:37,690
So when we think about the props we're going to receive, we might want to make sure that we add in

41
00:02:37,690 --> 00:02:43,760
an interface for ad sell props, and we might want to say that we want to get some kind of prop called

42
00:02:44,000 --> 00:02:45,520
Next Slide.

43
00:02:45,770 --> 00:02:47,510
We could, of course, just call this ID.

44
00:02:47,810 --> 00:02:52,880
But I think next slide just makes it really clear that this is the ID of the next cell that is about

45
00:02:52,880 --> 00:02:54,290
to be rendered inside of our list.

46
00:02:55,460 --> 00:02:59,480
So if you want to call it something else, as usual, totally fine, but I think the name next slide

47
00:02:59,480 --> 00:03:01,520
makes a reasonable amount of sense here.

48
00:03:02,210 --> 00:03:03,770
I'm going to say that this needs to be a string.

49
00:03:05,320 --> 00:03:11,770
I'll immediately update my type invitation with ADL props I'm going to receive.

50
00:03:12,750 --> 00:03:14,900
Next slide as a prop.

51
00:03:17,300 --> 00:03:21,680
Let's immediately wire up an action creator and we'll start you out in a couple of buttons in place

52
00:03:21,680 --> 00:03:26,210
of this simple one, so at the very top, we'll get our use actions hook.

53
00:03:28,310 --> 00:03:31,910
From up on directory, folks use actions.

54
00:03:35,190 --> 00:03:43,830
Inside of our component, I'm going to pull out the insert cell before action krater from use actions.

55
00:03:45,180 --> 00:03:49,690
And then I know we just put that one in right there, but let's just go ahead and replace it right away.

56
00:03:50,280 --> 00:03:53,500
I was thinking we might do a quick test, but I don't think we really need to, though.

57
00:03:53,520 --> 00:03:55,590
Let's just go ahead and throw in a div right away.

58
00:03:57,210 --> 00:03:58,380
We'll put in two buttons.

59
00:04:01,540 --> 00:04:05,440
The first one will make it for, I don't know, let's show the code one first, it doesn't really make

60
00:04:05,440 --> 00:04:10,810
a difference, but let's say a code is going to be displayed first and then second will be text.

61
00:04:12,590 --> 00:04:18,079
So then whenever a user clicks on the first one put in an unclick callback and inside there we will

62
00:04:18,079 --> 00:04:20,899
call our insert cell before action creator.

63
00:04:23,950 --> 00:04:28,590
The first argument to this is the idea that we want to insert this new cell before that's going to be

64
00:04:28,590 --> 00:04:35,080
the next cell ID, and then the second argument is the type of cell that we want to add on this case.

65
00:04:35,080 --> 00:04:40,820
Of course, because we are labeling this button code, we probably want to create a code type cell going

66
00:04:40,890 --> 00:04:41,830
to put in code.

67
00:04:44,910 --> 00:04:46,810
I'll then duplicate that entire prop.

68
00:04:47,850 --> 00:04:48,830
Where second button.

69
00:04:50,530 --> 00:04:54,490
And we should only have to change the cell type over to text.

70
00:04:56,980 --> 00:05:01,780
OK, let's table this let's take a pause right here, and when we come back, the next video, we're

71
00:05:01,780 --> 00:05:05,500
going to make sure that we can show ad sell at all the appropriate locations.

72
00:05:05,500 --> 00:05:09,850
And we can very quickly test out and make sure that clicking on these buttons does, in fact, actually

73
00:05:09,850 --> 00:05:11,230
add in some new cells.