In the coming series of videos, we're going to start to do some risk factors to some of the components
we have spent a lot of time on, such as our code cell component and the text editor component.
I first want to make it sure it's really clear exactly what factors we have to do.
So quick diagram or two.
OK, so this is a diagram of our cell list component.
Remember, our cell list is being given an array of cells and then iterates over that list of cells
and creates a separate cell list item and it passes a cell object down to each of them.
The cell list items then in turn create either a code cell or a text editor.
There's just one big problem right now.
These code cell and text ed components are currently functioning by making use of some local state.
So the code cell has a local input piece of state that is whatever user types into the code.
Ed, we don't want to store this local state anymore.
We only had this local state so we could develop these components in isolation.
But now that we've got Redox in play, we're going to start to extract these local pieces of state and
we're going to instead have the code that needs to be shown inside of a code cell and the text that
needs to be shown inside of a text editor, a component come from a cell Propp instead.
So remember, these cell objects have a content property assigned to them.
So we want that content property to be used as the code that we're going to show inside of Code Cell.
And as the text we want to show inside the text editor.
So we need to go into both these components.
We need to make sure that we start to extract these local pieces of state.
We need to make sure that we pass down these cell props and use the values inside them as well.
And then whenever a user starts to change some content inside a code cell or text editor, we, of course,
need to dispatch an action that tells our Reduc store that some piece of data has changed and update
the content property of the appropriate cells.
So long story short, putting this in more simple terms, we really just need to update these components
and bring them into a redux style world.
So let's get to it.
To get started, I'm going to first go over to my cell list item component inside of here.
This is where we show our code cell and the text editor.
Let's first focus just on code cell by itself.
So I'm going to make sure that I provide as a prop the cell object that this code cell is supposed to
be displaying.
We're going to get an error message right away just because Kozel is not set up to receive that PROPP
So of course, let's go back over to our code cell component.
Here it is right here.
And set up a props interface.
So right above the component, I will put together an interface of code cell.
Props.
I'm going to say that this thing should be given a cell object that should be of type cell and remember,
the cell interface is defined inside of our redox subprojects.
So we're going to import the cell interface from up one directory state.
We can then use this interface to put on a type annotation to our components or put in a colon right
there, react FC code cell across.
As soon as we add that in the air message that we just had a moment ago inside of cell list item should
go away.
That looks good.
We can now close this file.
Inside of Kozel, let's first begin by receiving that cell from.
OK, so now we've got the cell coming in, we've also got these three pieces of local state that we
eventually want to remove.
We're going to start to do a little bit of an incremental refactor here.
We're going to start to have our component make use of the cell as a source of input and possibly areas,
possibly code, rather than maintaining these local pieces of state.
So we're going to eventually delete those and replace them with a lot of redox related things.
To get started, we're going to first focus on just making sure that we pull the input number, this
piece of state right here is whatever a user has typed into the code editor.
We're going to pull that value from the cell content property.
And whenever a user makes a change that input and normally we would call that input, we're going to
instead call in action krater that will update our cell definition inside of our store.
That means that we need to both make use of a value out of our cell and we also need to call an action
creator whenever a user changes that input inside the actual code editor.
So because we need to definitely dispatch an action or an action creator, let's make sure that we import
that helper that we just put together that use actions at the very top.
So we'll get that from our Hooke's use actions file.
Well, then get our update cell action creator by calling use actions, and then if you don't quite
remember our update, cell action creator makes arguments of the idea of the cell we want to update
and the new content for it.
So we'll go and find wherever we are currently updating the input piece of states and instead we will
call updates cell.
So I'm going to scroll down a little bit.
Here's our code editor.
This is where we were updating that input piece of St..
So we're going to instead.
Replace that and call update cell with cell ID and the new value that we want to use for the cell.
That looks good.
Next thing we need to do, we need to make sure that we do not use the input piece of state anymore
input piece of state is used in two locations.
It's used inside this use effect function, both as a input to our bundler and as a dependency down
here as well.
We're also making use of input or we should anyway's where the initial value of our code editor.
So in all three locations, rather than taking a look at the input piece of states, we're going to
use these cells content property, which remember is the actual code that a user is typing into the
code editor.
So as an input to bundle right here will instead do sell, not content.
We'll update our dependency right here from input to sell content.
And then finally, as our initial value to our code editor, rather than doing that hard coded string,
I'm going to replace it with cell content.
Right now, the initial value of all of our different code cells is just empty string.
But eventually we're going to load up some existing cells into our application that will make sure that
if we ever fetch a list of cells from some outside API, the code editor will boot up and show the starting
code that we just fetch.
All right, so now we are not making use of this input piece of state anymore so we can remove that
local piece of state entirely.
It's going to delete that.
I will save the file.
Let's then go back over to the browser and do a quick test.
OK, so we now still have two code cells that are being created.
They both start off with no content whatsoever, which is why the code editors are appearing empty.
I should be able to type some stuff inside of here.
And then once again, in theory, we are updating some state inside of our reduc store.
Who knows if we actually are, we are, of course, it is working correctly, probably, but of course
we probably won't make sure that's actually the case at some point in time.
So let's just remember that.
OK, let's say that this is a good improvement, so we have refactored out a piece of states from code
cell input is now gone.
We are also communicating down the cell.
Let's take another pause right here and make some more updates in the next video.