1
00:00:01,220 --> 00:00:07,220
Our code cell component still has two pieces of local state code, and er remember, both these pieces

2
00:00:07,220 --> 00:00:09,680
of local state are tied to the bundling process.

3
00:00:10,050 --> 00:00:14,270
We're going to eventually move that entire bundling process into the redock side of our application,

4
00:00:14,630 --> 00:00:16,129
but we're not quite ready for that just yet.

5
00:00:16,129 --> 00:00:21,200
We're still kind of wiring up redux initially to our project and right now we only have our cells reducer.

6
00:00:21,650 --> 00:00:24,410
So we're not going to worry about these two pieces of state for right now.

7
00:00:24,650 --> 00:00:27,820
We are going to eventually move them over to the redox world in a little bit.

8
00:00:28,400 --> 00:00:32,150
Right now, let's instead turn our attention to our text ed component.

9
00:00:32,780 --> 00:00:36,470
So we're going to go through pretty much the same process that we just went through in the last video.

10
00:00:36,860 --> 00:00:39,530
We're going to make sure that we communicate down that cell prop.

11
00:00:40,160 --> 00:00:43,730
We're going to use that as the starting value of the text editor.

12
00:00:43,970 --> 00:00:48,380
Whenever a user changes a value inside the text editor, we're going to call an action to update that.

13
00:00:48,390 --> 00:00:53,210
So we're going to also make sure that we remove that local value piece of state.

14
00:00:53,690 --> 00:00:54,650
So let's get to it.

15
00:00:56,020 --> 00:01:01,540
Back inside my editor, I would first begin by finding the smallest item component, we will make sure

16
00:01:01,540 --> 00:01:03,760
that we communicate down the cell Propp.

17
00:01:06,880 --> 00:01:09,220
I'll then go into my text editor file.

18
00:01:10,810 --> 00:01:15,220
We will set up our interface of text editor props.

19
00:01:16,460 --> 00:01:19,400
And say that this is going to receive a cell property.

20
00:01:20,670 --> 00:01:23,780
Let's make sure that we also import the cell interface at the top.

21
00:01:27,200 --> 00:01:29,540
Well, then make use of that interface on our type invitation.

22
00:01:34,940 --> 00:01:37,250
We will receive cell as a prop.

23
00:01:40,630 --> 00:01:45,420
And then we can start to replace value and set value inside of here with some information from cell.

24
00:01:46,280 --> 00:01:49,480
So let's first make sure that we consume the cells content property.

25
00:01:49,780 --> 00:01:53,950
Remember, cell content contains the actual text of the user is writing to the text editor.

26
00:01:54,580 --> 00:01:57,910
So I'm going to go down and find wherever I reference value inside of your.

27
00:01:59,620 --> 00:02:06,010
Right now, it looks like we only make use of value right here and right here, it's going to replace

28
00:02:06,010 --> 00:02:11,140
both those with cell content and cell not content.

29
00:02:13,170 --> 00:02:17,880
Next up, we need to make sure that whenever we try to update the value piece of state, we instead

30
00:02:17,880 --> 00:02:21,870
call an action creator to update the content property of our cell instead.

31
00:02:22,760 --> 00:02:28,790
So for that, we, of course, need to import our action creators at the top, let's get an import for

32
00:02:29,210 --> 00:02:34,820
U.S. actions from upland directory hoax U.S. actions.

33
00:02:37,700 --> 00:02:45,260
I'll then get my update cell action greater from U.S. actions and once again, same thing as the last

34
00:02:45,260 --> 00:02:45,610
video.

35
00:02:45,620 --> 00:02:49,020
Remember, the first argument to this is the idea, the cell we want to update.

36
00:02:49,250 --> 00:02:52,760
Second argument is going to be the new value or the new content for the cell.

37
00:02:54,470 --> 00:02:58,910
Now we'll go and find wherever we called set value and call update sell instead.

38
00:03:00,200 --> 00:03:01,400
It's going to go down a little bit.

39
00:03:02,910 --> 00:03:04,920
Bindi and Ed component.

40
00:03:07,430 --> 00:03:12,710
So here's where he calls set value, and I'm going to replace that with update sell.

41
00:03:13,610 --> 00:03:20,390
First argument will be sell ID and the second will be either the value which remember can be undefined

42
00:03:20,390 --> 00:03:23,780
just because of the type definition filed for this markdown ed component.

43
00:03:24,080 --> 00:03:27,950
So if it is undefined, we're going to default to providing an empty string instead.

44
00:03:29,140 --> 00:03:30,130
OK, that looks good.

45
00:03:31,340 --> 00:03:32,840
Now, you might recall.

46
00:03:34,080 --> 00:03:37,260
That we've got one other piece of local state inside of here called editing.

47
00:03:37,740 --> 00:03:41,460
Remember, just because we're using Redox, we do not have to remove all local states.

48
00:03:41,760 --> 00:03:46,440
In this case, no other component inside of application really cares about this editing flag.

49
00:03:46,830 --> 00:03:49,640
So we don't really need to move this out into our reduc store.

50
00:03:49,650 --> 00:03:51,390
There's not really any benefit to doing so.

51
00:03:51,780 --> 00:03:55,290
It's completely fine, totally OK to leave this as local state.

52
00:03:56,390 --> 00:04:00,080
You're no longer using anything related to our value piece of state, however, something to remove

53
00:04:00,080 --> 00:04:01,070
that line entirely.

54
00:04:03,210 --> 00:04:07,860
Now, one very small thing, if we save this and go back to the browser, you might notice that it appears

55
00:04:07,860 --> 00:04:09,930
that our tech cells are just completely gone.

56
00:04:10,320 --> 00:04:11,460
Well, they're not actually gone.

57
00:04:11,490 --> 00:04:13,410
They just don't have any content inside them anymore.

58
00:04:13,440 --> 00:04:16,740
There's no default content, no default text inside there.

59
00:04:17,079 --> 00:04:22,350
I should still be able to click inside and turn it into a markdown editor and put some text in.

60
00:04:23,070 --> 00:04:26,430
But again, by default, it appears that there's just nothing there.

61
00:04:27,120 --> 00:04:33,090
So for right now, as a very temporary solution, let's go back over to our store file where we are

62
00:04:33,090 --> 00:04:37,410
creating these initial default cells inside of St. Staats.

63
00:04:37,830 --> 00:04:40,470
Here's where we create these initial default cells right now.

64
00:04:43,550 --> 00:04:49,400
It would be fantastic if we had the ability to specify some default content or this Texel, we are creating

65
00:04:49,820 --> 00:04:51,520
that one right there and the one down here.

66
00:04:51,770 --> 00:04:57,520
But remember, we had wired up our insert cell before action creator to not accept any content property.

67
00:04:57,860 --> 00:05:02,480
Instead, we are just able to specify where to insert the cell and what type of cell.

68
00:05:02,780 --> 00:05:06,560
We don't again have the ability to specify what default content should be placed inside there.

69
00:05:07,250 --> 00:05:09,320
So at this point in time, we kind of have to make a decision.

70
00:05:09,650 --> 00:05:15,200
Do we want to place some default content and add another Paillot property to our action creator?

71
00:05:15,530 --> 00:05:21,290
Or do we want to provide some kind of default content if none exists inside of our text editor component?

72
00:05:22,000 --> 00:05:23,240
Well, this is really up to you.

73
00:05:24,590 --> 00:05:28,670
Personally, I think that it maybe makes a little bit more sense to add in an additional payload property,

74
00:05:29,000 --> 00:05:35,660
but right now, let's just go back over to our text editor and we'll say that when we provide a value.

75
00:05:37,160 --> 00:05:42,890
To the preview version of our company right here, we're going to say that if Selig content is empty,

76
00:05:43,160 --> 00:05:46,310
then I'm going to instead display a default message.

77
00:05:46,740 --> 00:05:52,700
So we're going to do sell that content or I want to show click to edit.

78
00:05:55,220 --> 00:05:58,220
Now we save this and go back over and refresh.

79
00:05:59,230 --> 00:06:04,600
Now, by default, it just says click to edit now again, it can be kind of debated what the better

80
00:06:04,600 --> 00:06:05,320
solution is.

81
00:06:05,320 --> 00:06:10,420
Should we make sure that the cell itself has some default content or is it actually the component that

82
00:06:10,420 --> 00:06:11,800
should provide some default content?

83
00:06:12,620 --> 00:06:17,060
I maybe in retrospect, maybe it actually makes more sense for the component to show this kind of default

84
00:06:17,060 --> 00:06:22,010
content, because the words click to edit really has no meaning to the cell itself, like the actually

85
00:06:22,130 --> 00:06:24,110
actual cell object, the cell model.

86
00:06:24,740 --> 00:06:30,100
The words click to edit really only has meaning inside the context of the text cell component.

87
00:06:30,740 --> 00:06:31,670
It's only inside there.

88
00:06:31,670 --> 00:06:34,830
It's only inside of our component that there's anything to actually click to edit.

89
00:06:35,180 --> 00:06:41,000
So we if we ever try to show a cell that says click to edit inside of any other context where a user

90
00:06:41,000 --> 00:06:45,080
can't actually click this thing and edit it in any way, it just wouldn't make sense.

91
00:06:45,470 --> 00:06:51,620
So maybe it actually does in the long run make a little bit more sense to a place this content inside

92
00:06:51,620 --> 00:06:51,920
of here.

93
00:06:53,240 --> 00:07:00,050
Anyways, just a little thing to think about, OK, so it looks good we now have fixed up our text editor

94
00:07:00,170 --> 00:07:01,880
and our code cell is looking pretty good as well.

95
00:07:02,120 --> 00:07:03,140
So let's take a pause right here.

96
00:07:03,140 --> 00:07:05,380
And as usual, move on in just a moment.