The next thing we're going to work on is to create a new component that we're going to call our action
bar, this action bar is going to show these little up arrow down arrow and X to move sales up, down
or delete it.
As you guess, as we put the action bar component together, we're going to eventually wired this up
to the move cell action creator and the delete cell action creators.
Let's go back over to our Ed. We'll start working on Action Bar right away.
All right, we're going to find my SIRC component's directory inside there, I'll make a new file called
Action Bar DOT TSX.
Then inside of here right away, let's go ahead and create our component.
Well, then export it at the bottom.
I'm going to annotate Action Bar as React FC.
And then right now, I'll put in a live.
And we'll give this thing red button elements.
We're going to eventually replace these buttons, possibly with something with a little bit better styling,
but these will work right now.
On the first one, I'm just going to give it some text of up, then down, then delete.
So, as you guess, we definitely need to wire up clicks on these different buttons to some different
action creators to remember all these different action creators around moving a cell or deleting a cell
requires some different arguments.
So, for example, if we go over to our action creators index sites file, if we want to delete a cell,
we must know the idea, the cell we want to delete.
And same thing for Mousel as well.
If we want to move a cell, we need to know the idea of the cell.
So without a doubt, we're probably going to provide the I.D. of the cell that we're going to try to
move up, down or delete.
So let's assume that we're going to provide that as a prop to this component.
I'm going to say that I expect to be given.
Inside of a action are props interface, just the idea of the cell that we're working with here.
We don't really need the whole cell in this case.
We just need to know the ID of the cell.
This will save us from an additional import and having to import the entire cell interface.
So we're going to say that we're going to be given the idea, the cell.
So I'll make sure I put on my type imitation of action bar props.
I'll then receive that Eid.
OK, so then after that, let's import our action, Grieder Hook or the EU's actions hook, and we'll
wire that thing up to our three different buttons at the top of the file.
I will import use actions from up on directory.
Folks use actions.
Then inside of our components.
We can get our move cell and delete cell action creators.
Well, this is coming along rather quickly.
I think the last big thing we have to do is to make sure that these buttons have an unclick handler
attached to them.
Whenever user clicks each one, we will invoke either Mousel or delete cell with the appropriate arguments.
Let's take care of up first.
I'm going to put in an unclick function.
Inside of here, I'm going to call Move Cell.
With a slide and in this case, you want to move it up.
Well, then do something very similar for down, so put in unclick.
Move, sell, ID and down.
And then finally.
For our delete button, you guessed it, we'll call delete cell and provide the idea, the cell.
Well, that came together rather quickly.
Now, all we really have to do is, of course, apply some styling to this and show it on the screen
at some point in time.
Let's first just try to show it on the screen.
So we probably want to show this thing as a part of our existing.
So list item component that will make sure that we can show one of these actions are things directly
on top of either Archerd cell or the text editor.
Let's go over to our cell list item component and show this action bar.
We'll go back over to my cell list item.
At the very top, I will import.
Action bar.
From Aschenbach.
Up this autocomplete is giving me a little bit of trouble here, action.
OK, it's going to type it out, no autocomplete for me.
We can then go down to our d'Hiv right here, so that child is going to be the actual text or code cell,
of course we're going to say that right above that we want to show.
Our action bar component, and when we do so, of course, we need to provide the ID of the cell.
We'll give it an ID and provide cell ID.
All right, well, that should be it.
So let's save this, we'll go back to the browser and do a quick test.
Now, I see all these buttons, of course, like I mentioned, we do have to apply a little bit of styling.
Let's try to just click them and move these cells around a little bit.
So I'm going to try to move the tech cell right here up on the screen.
So I click up a it actually worked.
If I click up again, remember, we had written into our action creator some logic to guard against
attempting to move the top cell up any further.
So I should be able to now click up some more and not see anything.
Break.
Looks good.
I should also be able to click down and move that cell down so I can go up and down, up and down.
Very good.
I'm going to go down to the very bottom with this cell.
And then down and once for the very last cell right there, if I keep on clicking down, nothing goes
wrong.
We should also be able to add in some text into these text cells.
And then make sure that as we move this thing around, it maintains the same text.
So if I move it up.
Yep, same text.
Same text.
Same thing for the code editor, I put in some code in there, I should be able to move it up.
Yep, looks good.
Move it down.
Looks good.
And then finally, last big test and I delete this.
So I click on delete d the cell disappear.
Delete, delete, delete.
Awesome.
Well, I got to be honest with you, this is probably the easiest component we've put together out of
all the components we've had to work on.
So the actions are really not that bad.
All we had to do is wear those buttons and then wire up the different action creators.
So I'm actually just pleasantly surprised that everything came together so nicely.
But of course, we do have to out in just a little bit of styling.
So let's come back to the next video.
We're going to add in a couple of class names here and there and then write out a little bit of custom
counts as well.