Our code cell component still has two pieces of local state code, and er remember, both these pieces
of local state are tied to the bundling process.
We're going to eventually move that entire bundling process into the redock side of our application,
but we're not quite ready for that just yet.
We're still kind of wiring up redux initially to our project and right now we only have our cells reducer.
So we're not going to worry about these two pieces of state for right now.
We are going to eventually move them over to the redox world in a little bit.
Right now, let's instead turn our attention to our text ed component.
So we're going to go through pretty much the same process that we just went through in the last video.
We're going to make sure that we communicate down that cell prop.
We're going to use that as the starting value of the text editor.
Whenever a user changes a value inside the text editor, we're going to call an action to update that.
So we're going to also make sure that we remove that local value piece of state.
So let's get to it.
Back inside my editor, I would first begin by finding the smallest item component, we will make sure
that we communicate down the cell Propp.
I'll then go into my text editor file.
We will set up our interface of text editor props.
And say that this is going to receive a cell property.
Let's make sure that we also import the cell interface at the top.
Well, then make use of that interface on our type invitation.
We will receive cell as a prop.
And then we can start to replace value and set value inside of here with some information from cell.
So let's first make sure that we consume the cells content property.
Remember, cell content contains the actual text of the user is writing to the text editor.
So I'm going to go down and find wherever I reference value inside of your.
Right now, it looks like we only make use of value right here and right here, it's going to replace
both those with cell content and cell not content.
Next up, we need to make sure that whenever we try to update the value piece of state, we instead
call an action creator to update the content property of our cell instead.
So for that, we, of course, need to import our action creators at the top, let's get an import for
U.S. actions from upland directory hoax U.S. actions.
I'll then get my update cell action greater from U.S. actions and once again, same thing as the last
video.
Remember, the first argument to this is the idea, the cell we want to update.
Second argument is going to be the new value or the new content for the cell.
Now we'll go and find wherever we called set value and call update sell instead.
It's going to go down a little bit.
Bindi and Ed component.
So here's where he calls set value, and I'm going to replace that with update sell.
First argument will be sell ID and the second will be either the value which remember can be undefined
just because of the type definition filed for this markdown ed component.
So if it is undefined, we're going to default to providing an empty string instead.
OK, that looks good.
Now, you might recall.
That we've got one other piece of local state inside of here called editing.
Remember, just because we're using Redox, we do not have to remove all local states.
In this case, no other component inside of application really cares about this editing flag.
So we don't really need to move this out into our reduc store.
There's not really any benefit to doing so.
It's completely fine, totally OK to leave this as local state.
You're no longer using anything related to our value piece of state, however, something to remove
that line entirely.
Now, one very small thing, if we save this and go back to the browser, you might notice that it appears
that our tech cells are just completely gone.
Well, they're not actually gone.
They just don't have any content inside them anymore.
There's no default content, no default text inside there.
I should still be able to click inside and turn it into a markdown editor and put some text in.
But again, by default, it appears that there's just nothing there.
So for right now, as a very temporary solution, let's go back over to our store file where we are
creating these initial default cells inside of St. Staats.
Here's where we create these initial default cells right now.
It would be fantastic if we had the ability to specify some default content or this Texel, we are creating
that one right there and the one down here.
But remember, we had wired up our insert cell before action creator to not accept any content property.
Instead, we are just able to specify where to insert the cell and what type of cell.
We don't again have the ability to specify what default content should be placed inside there.
So at this point in time, we kind of have to make a decision.
Do we want to place some default content and add another Paillot property to our action creator?
Or do we want to provide some kind of default content if none exists inside of our text editor component?
Well, this is really up to you.
Personally, I think that it maybe makes a little bit more sense to add in an additional payload property,
but right now, let's just go back over to our text editor and we'll say that when we provide a value.
To the preview version of our company right here, we're going to say that if Selig content is empty,
then I'm going to instead display a default message.
So we're going to do sell that content or I want to show click to edit.
Now we save this and go back over and refresh.
Now, by default, it just says click to edit now again, it can be kind of debated what the better
solution is.
Should we make sure that the cell itself has some default content or is it actually the component that
should provide some default content?
I maybe in retrospect, maybe it actually makes more sense for the component to show this kind of default
content, because the words click to edit really has no meaning to the cell itself, like the actually
actual cell object, the cell model.
The words click to edit really only has meaning inside the context of the text cell component.
It's only inside there.
It's only inside of our component that there's anything to actually click to edit.
So we if we ever try to show a cell that says click to edit inside of any other context where a user
can't actually click this thing and edit it in any way, it just wouldn't make sense.
So maybe it actually does in the long run make a little bit more sense to a place this content inside
of here.
Anyways, just a little thing to think about, OK, so it looks good we now have fixed up our text editor
and our code cell is looking pretty good as well.
So let's take a pause right here.
And as usual, move on in just a moment.