Let's extract this entire use type selector right here into a separate file.
Remember that the type selector itself needs to know the idea of the cell that we're trying to display.
So we're probably going to end up making a hook.
And inside that hook, we will implement the selector.
The only reason that we're doing this is to keep our code so nice and clean and not have a ton of logic
inside of here.
So I'm going to find my hooks directory.
I'll make a new file inside.
They're called Use Cumulative Code.
That's.
Inside of there, I'm going to immediately define and export.
A function called Use Cumulative.
And then, as I just mentioned inside The Selecter itself, we really need to know the idea of the cell
that we are trying to find the cumulative code for.
So I'm going to assume that an argument to this hook is going to be cell ID as a string.
I'll then go back over to Kosal, I'm going to find our entire unit of code use type selector call.
We're going to take this entire thing.
Go back over to the hook.
I'm going to paste it in, then inside of here, there are one or two references to sell.
We just have to update those to take a look at sell instead.
Dollar first go down to the if statement we have right here, so this will be.
Sell ID and said instead of sell ID, sell ID, that's good.
Then back up at the top, we need to make sure we import use type selector.
From the same directory.
I don't think we need to assign anything to this emotive code array, instead, we'll just immediately
return the results.
And I think that should probably be it, let's save this file, go back over to Code TSX at the very
top, we'll import that, OK, we just put together.
And then we can make use of that hook inside of our component will say cumulative code is use of code
and once again, we need to tell us exactly what ideas we're trying to find cumulative code for.
So we'll provide cell ID and that should be at.
So I'd say this looks pretty good, the very last thing we might do here, you might recall we added
in this joint statement because I really just wanted to leave cumulative code as a array of strings
before you started to talk about all that, adding in the show function and stuff like that, maybe
the last thing we should do is inside the hook, do the actual joint operation.
So let's go back to the hook itself.
And then down at the very bottom of use type selector.
I'll add in a dot, join with the new line.
And we'll save that.
Let's go back over so now cumulative code is giving us a string instead of an array of strings, so
that means no longer do we have to do the joint operation in these three different locations.
So in all three locations, I can remove the join.
And I think we're all set, let's save this, go back over to our browser and do one last quick test.
The back over here, I should once again be able to do a show.
Each one with some content.
See that appear inside the first preview window, but not the second one, it looks good to me.
OK, well, that's definitely pretty good.
So two new features added in or I guess three.
We've got the cumulative code feature, we've got the show function built in.
And then finally, we are making sure that the show function is not kind of successively triggering
on each code so that we add in.
Well, let's take a pause here and as usual, move on in just a moment.