1
00:00:00,910 --> 00:00:05,260
Just to make sure that our solar item is working correctly, along with The Selecter that we put inside

2
00:00:05,260 --> 00:00:10,210
of our sullies component, let's manually dispatch an action or two inside of our store once again to

3
00:00:10,210 --> 00:00:11,380
create one or two cells.

4
00:00:11,590 --> 00:00:15,010
We'll just make sure that the IDs of them are, in fact, being printed up successfully.

5
00:00:15,710 --> 00:00:24,850
So back inside my state Staats file, I'm going to once again import action type from action types.

6
00:00:26,810 --> 00:00:28,790
Well, then do a story, dispatch.

7
00:00:31,080 --> 00:00:41,340
With that type of action type insert cell before in a payload of ID null and type of code and then going

8
00:00:41,340 --> 00:00:47,910
to copy paste that down one time and for the second one, I'll give it a type of text so we will have

9
00:00:47,940 --> 00:00:49,350
one of each kind of cell.

10
00:00:51,570 --> 00:00:57,000
All right, let's save this, go back over to our browser, and if we refresh now, we should see the

11
00:00:57,000 --> 00:00:58,770
ID of both those cells.

12
00:00:59,130 --> 00:01:00,300
Well, that definitely looks good.

13
00:01:00,300 --> 00:01:04,660
So it means that we are correctly selecting some information out of our store, getting information

14
00:01:04,680 --> 00:01:07,980
those cells down into the cell list item and printing up some information.

15
00:01:08,700 --> 00:01:13,170
Now, the last thing we really have to do inside of our cell list item for now is making sure that we

16
00:01:13,170 --> 00:01:14,970
render the appropriate kind of cell.

17
00:01:14,970 --> 00:01:20,220
So a code cell or a text editor or whatever we need to show rather than, of course, just simply the

18
00:01:20,220 --> 00:01:20,660
ID.

19
00:01:21,180 --> 00:01:22,230
So let's take care of that.

20
00:01:23,930 --> 00:01:30,020
Back inside of cell list item, remember, right now, we do not actually have a text editor cell component,

21
00:01:30,170 --> 00:01:32,080
but we do have a code cell component.

22
00:01:32,540 --> 00:01:35,790
So we're going to use code cell and text editor for now.

23
00:01:36,470 --> 00:01:41,450
We're going to show one of these two components based upon the kind of cell that we are iterating over

24
00:01:41,450 --> 00:01:44,540
or the one that was passed in to our cells item as props.

25
00:01:45,400 --> 00:01:47,600
So I'm going to import both those components at the top.

26
00:01:50,250 --> 00:01:51,750
We'll get our code sell.

27
00:01:54,740 --> 00:01:55,400
Kozel.

28
00:01:56,470 --> 00:01:58,540
And text editor from.

29
00:01:59,580 --> 00:02:00,480
Text Ed.

30
00:02:02,850 --> 00:02:04,530
Then inside of our functional component.

31
00:02:05,650 --> 00:02:09,370
There's many different ways, of course, that we can figure out what kind of cell we want to display,

32
00:02:09,370 --> 00:02:10,620
what kind of component and what not.

33
00:02:10,870 --> 00:02:12,310
We'll take a pretty straightforward approach.

34
00:02:12,490 --> 00:02:17,320
I'm going to say let child Colin James export element.

35
00:02:18,660 --> 00:02:22,110
And then if cell, that type is code.

36
00:02:23,290 --> 00:02:26,620
Then I'm going to change the value of child to be.

37
00:02:27,780 --> 00:02:28,800
Code cell.

38
00:02:30,840 --> 00:02:38,730
Otherwise, child will be an instance of text editor, so again, many different ways we can put in

39
00:02:38,730 --> 00:02:40,830
this logic right here, but this will work for now.

40
00:02:42,810 --> 00:02:47,880
So then finally, rather than showing the slide, I'm going to replace that with whatever we decided

41
00:02:47,880 --> 00:02:49,140
to show for child.

42
00:02:52,230 --> 00:02:58,320
All right, let's save this, go back over and now if we refresh, we should see one code editor and

43
00:02:58,320 --> 00:03:01,790
one text editor appear a there we go.

44
00:03:02,370 --> 00:03:05,340
So we see our code editor up here with some code inside of it.

45
00:03:05,550 --> 00:03:06,690
There's our text editor.

46
00:03:07,270 --> 00:03:13,380
It does appear that I'm not seeing the bottom bar of kind of bottom reciter of our code editor itself.

47
00:03:13,740 --> 00:03:15,630
Definitely something we can fix up in just a moment.

48
00:03:15,900 --> 00:03:18,630
But overall, I would say that this is a reasonable success.

49
00:03:19,350 --> 00:03:24,840
We can now start to copy paste a couple more of these dispatches inside of our store file if you want

50
00:03:24,840 --> 00:03:25,100
to.

51
00:03:25,560 --> 00:03:28,650
So I'm going to take the two existing ones we have really quick.

52
00:03:30,990 --> 00:03:34,920
And two more underneath that, so I've now got four dispatches inside of here.

53
00:03:35,920 --> 00:03:43,870
And if I save this, do a quick refresh now, I should see code editor, a cell code editor and Texel.

54
00:03:45,070 --> 00:03:46,960
All right, I'd say this looks pretty reasonable.

55
00:03:48,600 --> 00:03:52,530
It's obviously a couple of things for us to fix up here, a couple of things for us to improve because

56
00:03:52,950 --> 00:03:57,090
well, as you could guess, we don't always want to just be mentally dispatching the creation of all

57
00:03:57,090 --> 00:03:57,530
these cells.

58
00:03:57,540 --> 00:04:00,920
So clearly, definitely still some work for us to do, but definitely a good step forward.

59
00:04:01,320 --> 00:04:04,310
So let's continue with some improvements in just a moment.