1
00:00:01,090 --> 00:00:04,850
Let's extract this entire use type selector right here into a separate file.

2
00:00:05,260 --> 00:00:09,870
Remember that the type selector itself needs to know the idea of the cell that we're trying to display.

3
00:00:10,480 --> 00:00:12,640
So we're probably going to end up making a hook.

4
00:00:12,820 --> 00:00:15,010
And inside that hook, we will implement the selector.

5
00:00:15,490 --> 00:00:19,780
The only reason that we're doing this is to keep our code so nice and clean and not have a ton of logic

6
00:00:19,780 --> 00:00:20,350
inside of here.

7
00:00:21,170 --> 00:00:22,810
So I'm going to find my hooks directory.

8
00:00:23,100 --> 00:00:24,100
I'll make a new file inside.

9
00:00:24,100 --> 00:00:27,310
They're called Use Cumulative Code.

10
00:00:27,310 --> 00:00:28,120
That's.

11
00:00:30,660 --> 00:00:34,620
Inside of there, I'm going to immediately define and export.

12
00:00:35,780 --> 00:00:37,850
A function called Use Cumulative.

13
00:00:41,960 --> 00:00:46,940
And then, as I just mentioned inside The Selecter itself, we really need to know the idea of the cell

14
00:00:47,090 --> 00:00:49,070
that we are trying to find the cumulative code for.

15
00:00:49,310 --> 00:00:53,990
So I'm going to assume that an argument to this hook is going to be cell ID as a string.

16
00:00:55,270 --> 00:01:02,080
I'll then go back over to Kosal, I'm going to find our entire unit of code use type selector call.

17
00:01:02,760 --> 00:01:04,000
We're going to take this entire thing.

18
00:01:10,860 --> 00:01:11,920
Go back over to the hook.

19
00:01:12,510 --> 00:01:17,660
I'm going to paste it in, then inside of here, there are one or two references to sell.

20
00:01:17,790 --> 00:01:21,000
We just have to update those to take a look at sell instead.

21
00:01:22,810 --> 00:01:25,900
Dollar first go down to the if statement we have right here, so this will be.

22
00:01:26,970 --> 00:01:33,330
Sell ID and said instead of sell ID, sell ID, that's good.

23
00:01:34,450 --> 00:01:37,960
Then back up at the top, we need to make sure we import use type selector.

24
00:01:45,050 --> 00:01:46,040
From the same directory.

25
00:01:48,600 --> 00:01:53,190
I don't think we need to assign anything to this emotive code array, instead, we'll just immediately

26
00:01:53,190 --> 00:01:54,050
return the results.

27
00:01:55,400 --> 00:02:02,930
And I think that should probably be it, let's save this file, go back over to Code TSX at the very

28
00:02:02,930 --> 00:02:05,120
top, we'll import that, OK, we just put together.

29
00:02:15,250 --> 00:02:22,200
And then we can make use of that hook inside of our component will say cumulative code is use of code

30
00:02:22,840 --> 00:02:27,850
and once again, we need to tell us exactly what ideas we're trying to find cumulative code for.

31
00:02:28,160 --> 00:02:31,540
So we'll provide cell ID and that should be at.

32
00:02:33,060 --> 00:02:37,260
So I'd say this looks pretty good, the very last thing we might do here, you might recall we added

33
00:02:37,260 --> 00:02:43,140
in this joint statement because I really just wanted to leave cumulative code as a array of strings

34
00:02:43,290 --> 00:02:47,880
before you started to talk about all that, adding in the show function and stuff like that, maybe

35
00:02:48,030 --> 00:02:51,930
the last thing we should do is inside the hook, do the actual joint operation.

36
00:02:52,470 --> 00:02:53,790
So let's go back to the hook itself.

37
00:02:54,730 --> 00:02:57,670
And then down at the very bottom of use type selector.

38
00:02:59,970 --> 00:03:03,570
I'll add in a dot, join with the new line.

39
00:03:04,740 --> 00:03:05,580
And we'll save that.

40
00:03:07,970 --> 00:03:12,790
Let's go back over so now cumulative code is giving us a string instead of an array of strings, so

41
00:03:12,830 --> 00:03:17,300
that means no longer do we have to do the joint operation in these three different locations.

42
00:03:17,770 --> 00:03:20,390
So in all three locations, I can remove the join.

43
00:03:25,300 --> 00:03:32,110
And I think we're all set, let's save this, go back over to our browser and do one last quick test.

44
00:03:33,560 --> 00:03:37,340
The back over here, I should once again be able to do a show.

45
00:03:39,160 --> 00:03:41,530
Each one with some content.

46
00:03:42,460 --> 00:03:47,020
See that appear inside the first preview window, but not the second one, it looks good to me.

47
00:03:48,000 --> 00:03:49,860
OK, well, that's definitely pretty good.

48
00:03:49,890 --> 00:03:52,740
So two new features added in or I guess three.

49
00:03:52,770 --> 00:03:56,010
We've got the cumulative code feature, we've got the show function built in.

50
00:03:56,220 --> 00:04:01,590
And then finally, we are making sure that the show function is not kind of successively triggering

51
00:04:01,620 --> 00:04:03,390
on each code so that we add in.

52
00:04:04,370 --> 00:04:07,430
Well, let's take a pause here and as usual, move on in just a moment.