I'm inside of our code cell components at the very top, right after that little bundle type select
right there.
We're going to add in another selector.
So I'm going to call the results of the selector cumulative code.
So the thought process behind this name right here is that we are describing the code for the current
cell, plus all the previous ones.
So it's kind of a cumulative result.
Well, then call use typed selecter.
We will receive the state argument and then inside of here is where we are going to write out some logic
to get all the code from the current cell, which is passed into this component as a prop and all the
previous cells, the code we're going to write out inside the selector itself.
There's a lot of different ways to express this.
We could make use of a reduced function.
We can do that simple for loop.
We could try to do a foreach.
That would actually be rather challenging.
But there's essentially just many different ways of implementing this.
We're going to use a very straightforward approach.
We're going to take a look at our current state.
We're going to reach into our cells, piece of states, and we're going to get out that data object
and our order array.
We're then going to iterate over all of our different cells and we're going to produce an array of strings.
This array of strings is going to be essentially all the code from the current cell and the previous
cells.
So all I mean to say here is we're going to write out a little bit of code very quickly, there's a
lot of ways to write out what we're going to write out.
If you don't like the way that I'm doing it, totally fine.
You can replace it with your own implementation.
So let's get to it.
We're going to first reach into our cells piece of states and pull out the data object and the order
array that will come from state court cells.
We will then map over border.
And produce an ordered array of all the different cells that we have.
So remember, that is going to include both our code cells and our text cells as well.
We'll call this ordered.
Cels.
And that will come from mapping overorder.
But that should be because we're storing IDs inside of order, then for each ID, we will look into
our data object and return the actual cell definition.
So data at ID.
Next up, I'm going to define a new era that I will call unit of code.
There'll be an empty array.
And then going to write out a very simple for loop, and I'm going to iterate over all these different
ordered cells.
So we'll say for let's see, I'm just going to abbreviate cell Assif right now of.
Ordered sells.
If we are working with a cell of type code, so if sea type is code, then this is a prior cell that
we want to care or that we care about and we want to add the cells code to this cumulative array.
It's all a cumulative OWD push, see that content?
So this right here is what's going to build up this kind of cumulative array of all the of the current
sell and all the previous ones as well.
The for loop, however, is going to iterate through all of our different cells, and we want to make
sure that it stops when it gets to the current cell that was passed into our code cell component right
after this.
If statement, I'll add in a second one.
I'll say if Zugdidi so if the idea of the cell we are currently iterating over is equal to sell that
ID, that is the ID, the cell that was passed into our component as a prop, then I want to break early
out of this for loop.
So, in other words, just pick up all the code from the previous cells until we get to the current
cell, still pick that up, still add that into the cumulative code array, but then at that point,
stop iteration.
Then finally, after the for loop, I'll add in a return.
You would have owed.
OK, so there's our entire selecter, we are signing the results of that to cumulative code, I'll then
do a quick control log.
After the entire selecter, and we'll just make sure that we did this entire calculation correctly.
OK, let's save this.
I'm going to flip back over.
Open up, my counsel, I'm going to do a refresh.
All right, so take a look at that, so we're getting a variety of different kinds of bugs here, the
very first console log is the cumulative code for the first.
So we're only getting code for this cell right here.
The second console log has two empty strings inside of it.
That would be a console log from the second cell.
It has all the code from the previous cell, plus the second one as well.
I'm going to clear that console and then going to add in just a little bit of code to each of these
on the first one, I'll do a log of a.
And then on the second one, I'll do a console log of B.
Now, if we look at the last two consulates, we should see the cumulative code for the first code cell,
that one has only the code for this particular code cell.
And then the very last council, besides one that obviously has a council to be inside of it, that
is the second the last council log for me.
So that's got all the code from the first council plus the second code, so.
Now, all we really have to do is join together all these strings inside this array and pass that off
to our bundling process, so essentially pass it off to create a bundle inside of the effect function.
So let's take care of that step in just a moment.