1
00:00:01,160 --> 00:00:05,950
I'm inside of our code cell components at the very top, right after that little bundle type select

2
00:00:05,970 --> 00:00:06,360
right there.

3
00:00:06,560 --> 00:00:08,180
We're going to add in another selector.

4
00:00:08,810 --> 00:00:12,050
So I'm going to call the results of the selector cumulative code.

5
00:00:12,650 --> 00:00:17,120
So the thought process behind this name right here is that we are describing the code for the current

6
00:00:17,120 --> 00:00:18,830
cell, plus all the previous ones.

7
00:00:18,830 --> 00:00:20,570
So it's kind of a cumulative result.

8
00:00:21,620 --> 00:00:23,840
Well, then call use typed selecter.

9
00:00:26,270 --> 00:00:31,280
We will receive the state argument and then inside of here is where we are going to write out some logic

10
00:00:31,610 --> 00:00:36,740
to get all the code from the current cell, which is passed into this component as a prop and all the

11
00:00:36,740 --> 00:00:40,230
previous cells, the code we're going to write out inside the selector itself.

12
00:00:40,250 --> 00:00:42,110
There's a lot of different ways to express this.

13
00:00:42,410 --> 00:00:44,740
We could make use of a reduced function.

14
00:00:44,750 --> 00:00:46,550
We can do that simple for loop.

15
00:00:46,550 --> 00:00:47,780
We could try to do a foreach.

16
00:00:47,780 --> 00:00:49,100
That would actually be rather challenging.

17
00:00:49,310 --> 00:00:51,970
But there's essentially just many different ways of implementing this.

18
00:00:52,370 --> 00:00:54,250
We're going to use a very straightforward approach.

19
00:00:54,770 --> 00:00:57,320
We're going to take a look at our current state.

20
00:00:57,860 --> 00:01:02,120
We're going to reach into our cells, piece of states, and we're going to get out that data object

21
00:01:02,540 --> 00:01:04,250
and our order array.

22
00:01:04,849 --> 00:01:10,100
We're then going to iterate over all of our different cells and we're going to produce an array of strings.

23
00:01:10,130 --> 00:01:14,450
This array of strings is going to be essentially all the code from the current cell and the previous

24
00:01:14,450 --> 00:01:14,900
cells.

25
00:01:15,850 --> 00:01:19,510
So all I mean to say here is we're going to write out a little bit of code very quickly, there's a

26
00:01:19,510 --> 00:01:21,970
lot of ways to write out what we're going to write out.

27
00:01:22,240 --> 00:01:24,220
If you don't like the way that I'm doing it, totally fine.

28
00:01:24,220 --> 00:01:26,020
You can replace it with your own implementation.

29
00:01:26,920 --> 00:01:27,550
So let's get to it.

30
00:01:28,950 --> 00:01:34,560
We're going to first reach into our cells piece of states and pull out the data object and the order

31
00:01:34,560 --> 00:01:37,830
array that will come from state court cells.

32
00:01:40,820 --> 00:01:44,210
We will then map over border.

33
00:01:45,560 --> 00:01:49,320
And produce an ordered array of all the different cells that we have.

34
00:01:50,000 --> 00:01:54,440
So remember, that is going to include both our code cells and our text cells as well.

35
00:01:55,230 --> 00:01:56,660
We'll call this ordered.

36
00:01:58,210 --> 00:01:58,810
Cels.

37
00:01:59,970 --> 00:02:02,550
And that will come from mapping overorder.

38
00:02:06,660 --> 00:02:12,090
But that should be because we're storing IDs inside of order, then for each ID, we will look into

39
00:02:12,090 --> 00:02:15,120
our data object and return the actual cell definition.

40
00:02:15,510 --> 00:02:17,070
So data at ID.

41
00:02:19,980 --> 00:02:24,060
Next up, I'm going to define a new era that I will call unit of code.

42
00:02:24,780 --> 00:02:25,950
There'll be an empty array.

43
00:02:27,750 --> 00:02:31,440
And then going to write out a very simple for loop, and I'm going to iterate over all these different

44
00:02:31,440 --> 00:02:32,220
ordered cells.

45
00:02:33,450 --> 00:02:38,910
So we'll say for let's see, I'm just going to abbreviate cell Assif right now of.

46
00:02:40,150 --> 00:02:41,710
Ordered sells.

47
00:02:43,100 --> 00:02:51,290
If we are working with a cell of type code, so if sea type is code, then this is a prior cell that

48
00:02:51,290 --> 00:02:55,370
we want to care or that we care about and we want to add the cells code to this cumulative array.

49
00:02:56,540 --> 00:03:01,990
It's all a cumulative OWD push, see that content?

50
00:03:03,560 --> 00:03:09,500
So this right here is what's going to build up this kind of cumulative array of all the of the current

51
00:03:09,500 --> 00:03:11,110
sell and all the previous ones as well.

52
00:03:14,060 --> 00:03:17,330
The for loop, however, is going to iterate through all of our different cells, and we want to make

53
00:03:17,330 --> 00:03:22,220
sure that it stops when it gets to the current cell that was passed into our code cell component right

54
00:03:22,220 --> 00:03:22,670
after this.

55
00:03:22,670 --> 00:03:24,250
If statement, I'll add in a second one.

56
00:03:24,280 --> 00:03:31,050
I'll say if Zugdidi so if the idea of the cell we are currently iterating over is equal to sell that

57
00:03:31,070 --> 00:03:38,810
ID, that is the ID, the cell that was passed into our component as a prop, then I want to break early

58
00:03:39,140 --> 00:03:40,160
out of this for loop.

59
00:03:41,740 --> 00:03:46,270
So, in other words, just pick up all the code from the previous cells until we get to the current

60
00:03:46,270 --> 00:03:51,010
cell, still pick that up, still add that into the cumulative code array, but then at that point,

61
00:03:51,010 --> 00:03:51,970
stop iteration.

62
00:03:52,940 --> 00:03:55,430
Then finally, after the for loop, I'll add in a return.

63
00:03:56,400 --> 00:03:57,630
You would have owed.

64
00:04:00,800 --> 00:04:06,650
OK, so there's our entire selecter, we are signing the results of that to cumulative code, I'll then

65
00:04:06,650 --> 00:04:08,060
do a quick control log.

66
00:04:10,500 --> 00:04:14,340
After the entire selecter, and we'll just make sure that we did this entire calculation correctly.

67
00:04:18,000 --> 00:04:19,200
OK, let's save this.

68
00:04:19,230 --> 00:04:20,220
I'm going to flip back over.

69
00:04:21,560 --> 00:04:23,660
Open up, my counsel, I'm going to do a refresh.

70
00:04:26,010 --> 00:04:30,120
All right, so take a look at that, so we're getting a variety of different kinds of bugs here, the

71
00:04:30,120 --> 00:04:32,820
very first console log is the cumulative code for the first.

72
00:04:32,820 --> 00:04:35,840
So we're only getting code for this cell right here.

73
00:04:36,480 --> 00:04:39,440
The second console log has two empty strings inside of it.

74
00:04:39,720 --> 00:04:41,750
That would be a console log from the second cell.

75
00:04:41,910 --> 00:04:46,050
It has all the code from the previous cell, plus the second one as well.

76
00:04:47,350 --> 00:04:51,730
I'm going to clear that console and then going to add in just a little bit of code to each of these

77
00:04:51,730 --> 00:04:55,150
on the first one, I'll do a log of a.

78
00:04:57,120 --> 00:05:00,600
And then on the second one, I'll do a console log of B.

79
00:05:01,980 --> 00:05:08,610
Now, if we look at the last two consulates, we should see the cumulative code for the first code cell,

80
00:05:09,120 --> 00:05:12,510
that one has only the code for this particular code cell.

81
00:05:14,490 --> 00:05:19,290
And then the very last council, besides one that obviously has a council to be inside of it, that

82
00:05:19,290 --> 00:05:21,910
is the second the last council log for me.

83
00:05:21,930 --> 00:05:26,190
So that's got all the code from the first council plus the second code, so.

84
00:05:27,440 --> 00:05:33,140
Now, all we really have to do is join together all these strings inside this array and pass that off

85
00:05:33,980 --> 00:05:39,950
to our bundling process, so essentially pass it off to create a bundle inside of the effect function.

86
00:05:40,640 --> 00:05:42,520
So let's take care of that step in just a moment.