We are all done with the refactor on the side of things, so let's now go back over to the back side
and do a little bit of a refactor there as well.
To begin, I'm going to go into my components directory.
I'm going to find the ad TSX file at the very top right away.
We no longer have an action creator of insert cell before.
Instead it is insert cell after.
We also need to update our two button on click functions, so insert cell after and insert cell after.
OK, that is it for ADL.
Last refactor is inside of Selt list.
Inside of here.
We're going to first make sure that when we render out our list of cells, we're always going to show
first the cell itself through cell list item and then the ADL component.
It's all we have to do is swap these two things.
Socialist item and then add sell and then finally ad sell down here inside of our return block.
Rather than displaying it below rendered cells, we're going to instead put it right above like so.
The last thing I want to mention here that we should probably refactor, we don't technically have to,
but is just a little bit misleading, the ADSO component receives a probe of next slide.
So technically, we're not talking about the next cell anymore.
We're kind of talking about the previous slide.
So we should probably rename this just to be a little bit more consistent.
So on Ad Cell, I'm going to change new cell ID to.
Previous slide, I'll change it down here as well.
And then, of course, we have to go back into our ADL component self and update our interface to back
inside of ADL.
Let's update to previous.
Slide update, the top name and side of our argument list.
And then make sure that we pass through previous slide on both of our unclick functions, so there's
one and there's two.
And that should be it.
OK, so I know, like I said, I apologize for not just kind of doing it the right way at the very start,
but when I was building this application originally, I ran into the same issue and I said, oh, wow,
that's kind of a nasty little access issue.
And I went through all the different possible solutions and realized, oh, yeah, probably should have
been an insert sell after.
So when we started writing the course, I figured, hey, let's just put this in as a little demonstration
of something that could very easily go wrong if we don't put in a lot of thought ahead of time.
All right, so enough of that, let's go back over to our browser and do a final test to make sure I
refresh.
I think we got everything.
Maybe we didn't.
It looks like I might have forgotten to write.
So this is where we've got some code inside of our store file where we are creating a couple of different
cells when our application first boots up.
So let's go back to that store file.
We just need to make sure we update those action types as well.
Inside of states, I will find Staats, yep, got for them, got to fix them all up.
So we'll do an insert sell after.
And cell after, after and after.
All right, so now let's do a test.
Now, if you are not able to refresh or if you do refresh and you still see an error message, remember
all the completed code for this video with all the refactored stuff is attached to this lecture you
can always download.
That's a file and take a look at my files.
All right, so let's go ahead and do a quick test, I'm going to first go down to the very bottom one
down here.
I'm going to add on plus text.
And sure enough, it adds in a cell right after it without any funny interaction.
We delete the code cells just so we can see it a little bit more easily.
They'll do a plus text.
Yep.
Excellent.
No more funny jumping or fading out or anything like that.
I should also be able to add one at the very top.
Yep, that looks like it probably worked correctly.
It's kind of hard to tell because they all say click to edit, but it's going to change these to say
one, two and then three.
Now, when I click on plus text right here, it should add in a new text at the very top.
Yes, it definitely does.
Same thing for code.
Yep.
That works to.
All right, well, I think that this completely solves this entire issue looks pretty good.
I'd say that we've got a pretty reasonable solution here.
So let's take a pause and move on in just a moment.