One of the last major components we're going to put together is the ADL component.
So this is going to be a little kind of section divide between each of our different cells.
It's going to be a little faint line with a plus text and a plus code button, as you'd guess, of user
clicks on plus text.
We're going to add in a Texel right there.
And if they click on plus code, we're going to add in a code cell.
Instead, we want to show this divider between every single cell.
We also want to show it before any cell and after all cells as well.
On the trickiest things here is probably going to be figuring out where to add our ad cell components
just because we want to show it between every cell and at the start.
At the very end.
Beyond that, it's going to be a pretty simple and straightforward component, because remember, we've
already added in all the action creators needed to support this thing.
We've got that insert cell before action creator.
And that's how we're going to make sure that we can eventually click on these buttons and add in a new
cell at the required position.
All right.
So without further ado, let's flip back over to our editor and get started.
I'm going to first begin by finding my components directory inside there.
I'll make a new file called Add Cell.
We're definitely going to need some custom styling for this thing.
So I'm also going to add in an add sell access file.
Inside of ADL, TSX, so this is our component file I will immediately import in the case file.
Well, then create an ad, sell components.
And annotate annotate its type as React F.C..
I'll return a simple one.
That says add self right now and then a quick export default and sell.
All right, so let's think a little bit about the props that we're going to need to provide to this
thing now, if you recall, we mentioned just a moment ago, whenever a user clicks on one of these
buttons, we probably want to invoke that action cowriter that we already put together called insert
cell before.
So that's kind of implying that every single ad cell component is going to need to know the ID of the
cell immediately after it.
So in this case, the first instance right here is going to need to know the idea of this cell.
The next one needs to know the ID of this cell and then the very last one.
There's no cell after it.
So we would instead provide a next slide of no remember, no means.
We want to add in a new cell to the very bottom of our list.
We were to handle that case and we put together our action creators.
So when we think about the props we're going to receive, we might want to make sure that we add in
an interface for ad sell props, and we might want to say that we want to get some kind of prop called
Next Slide.
We could, of course, just call this ID.
But I think next slide just makes it really clear that this is the ID of the next cell that is about
to be rendered inside of our list.
So if you want to call it something else, as usual, totally fine, but I think the name next slide
makes a reasonable amount of sense here.
I'm going to say that this needs to be a string.
I'll immediately update my type invitation with ADL props I'm going to receive.
Next slide as a prop.
Let's immediately wire up an action creator and we'll start you out in a couple of buttons in place
of this simple one, so at the very top, we'll get our use actions hook.
From up on directory, folks use actions.
Inside of our component, I'm going to pull out the insert cell before action krater from use actions.
And then I know we just put that one in right there, but let's just go ahead and replace it right away.
I was thinking we might do a quick test, but I don't think we really need to, though.
Let's just go ahead and throw in a div right away.
We'll put in two buttons.
The first one will make it for, I don't know, let's show the code one first, it doesn't really make
a difference, but let's say a code is going to be displayed first and then second will be text.
So then whenever a user clicks on the first one put in an unclick callback and inside there we will
call our insert cell before action creator.
The first argument to this is the idea that we want to insert this new cell before that's going to be
the next cell ID, and then the second argument is the type of cell that we want to add on this case.
Of course, because we are labeling this button code, we probably want to create a code type cell going
to put in code.
I'll then duplicate that entire prop.
Where second button.
And we should only have to change the cell type over to text.
OK, let's table this let's take a pause right here, and when we come back, the next video, we're
going to make sure that we can show ad sell at all the appropriate locations.
And we can very quickly test out and make sure that clicking on these buttons does, in fact, actually
add in some new cells.