Now that we've got some initial stream loaded to show inside of these inputs of the title and description
Remember we want to show the current title and description side there.
We can now start to think about putting together the actual edit stream form now before we do I want
to point out something kind of interesting here.
I want to look at the mockup for create stream an edit stream at the same time.
When you look at these two mockups you start to kind of get the sense that these are really really similar
like just two forms.
Visually are just about identical.
There's just a couple of very small differences between the two.
First off you'll notice that this one over here has a header of create a stream.
The other one has added a stream.
The next big difference is that between the two that create streamed does not have an initial title
whereas edit stream is going to put the current title into the input so that a user can change it in
some fashion and then find the same thing with description as well.
So with the create form description starts out as empty with edit.
We have the current description inside there so that the user can change it and there's one other difference
between these two forms.
That's not quite visible inside these mockups.
And the other difference is essentially what action creator gets called when the user presses that submit
button.
In the case of creating a stream.
So this form over here that we already put together we would probably want to call our action creator
of create stream that's the one we already put together.
We already did a lot of work on this action creator right here.
So we probably want to call that action creator with the Create stream form and with edits stream.
I bet you could probably guess we probably want to call the edit stream action creator.
So there's really just three big differences between these two forms.
The header whether or not these inputs have some initial value inside them and what action creator gets
called when the user clicks on the submit button.
So it seems to me like this might be a fantastic opportunity to try to get some code reuse inside of
our project.
We've spoken a lot about techniques for code reuse throughout this course and I've certainly said many
times like oh yeah we could enhance reusability of this component by doing X Y Z but we really have
never reuse any of the components that we've put together.
So this is a case where we are going to be able to reuse a component between these two forms.
So let me tell you exactly how we're going to do that.
All right.
Where is my diagram.
Here it is.
OK.
So here's the idea.
We're going to create a total of three components between those two pages.
We're going to have a stream create a stream edit and stream form.
Now the bulk of work like the vast majority of showing those text inputs handling changes wiring up
to redux form all that kind of stuff is all going to be done inside of this new stream form component
that we've not yet put together.
So all the logic that hooks up to redux form all the logic that renders text inputs all the logic that
submits the form and handles the mission appropriately.
We're going to place inside a stream form we're going to refactor our current stream create component
and we're also going to make some changes to stream at it.
We've only got some like you know a little boiler plate and there right now here's stream at it as it
stands.
So we're going to refactor both these components.
They're going to show internally the stream form.
And the only thing that we're going to really do between all these components we're going to make sure
that stream create passes down a on submit callback to stream form so that stream form knows what to
do.
Anytime the users time it's the form.
So essentially stream create is just going to slightly customize the form in addition stream edit is
going to pass down an on submit callback as well.
So any time someone submits the stream form it's going to call the Submit callback that is passed down
from stream at it.
The other little thing in here as well because stream edits form needs to have some initial values inside
there.
Right we want to show the initial Where is my mockups There we go we want to show the initial title
and description side of your we need to make sure that the stream edit component also passes down some
initial values to show inside of those little text and puts as well.
All right so that's that's the idea here.
That's what we're going to do.
We're going to kind of abstract out all the form logic to stream form that's going to contain everything
with redux form and then we're going to significantly cut down on the amount of code and stream create
We're going to have very little code inside of stream at it as well to just pass down some on Samit
and in the case of stream at some initial values as well.
So let's get to it.
Let's flip back over to our code editor.
All right.
So Bacharach you are going to find my stream's directory and I'm going to make a new file called stream
form.
And the idea here is that we're going to have a form that can be reused between both components.
Now to get started I'm going to open up stream create.
So your stream create right here stream create already has a tremendous amount of logic inside of it
for showing the form and the air messaging and all that kind of stuff.
So essentially want to take all the logic inside of stream create and refactor it to make sure that
this thing does not attempt to call any distinct action creator when it gets submitted.
Instead it should call some callback that gets passed down from a parent component.
So inside a string create I'm going to select everything inside of your I'm going to copy it and then
I'm going to open up the new stream form file that we just created and I'm going to paste stream create
inside there.
So now inside stream form I have everything from string create.
Now the first thing we're going to do inside of here is refactor the class name.
So I going to change the name to stream form.
I'm going to make sure that I change the name down inside of my export default statements down here
as well.
So here's where we did the initial reform wrapped and I passed in string create right here.
We're going to make sure we refactor that to be stream form as well.
Next up stream form does not need to call any action creator.
It's going to be a parent component that calls some action creator.
So we don't need to pass and create stream at all.
And now once we do that you'll notice that we don't have anything else that we're using the connect
function for.
So we don't actually need the connect function here at all anymore so we can delete that entire export
default.
And now we can go back to having a single export default or a single wrapped component right here.
So rather than assigning the result of redux form to form wrapped I'll just say export default redux
form next up we can change the name of the form because it's now going to be generalized between all
these different pages that are trying to use the form.
So change the name to stream form.
That's not really required but you know what the heck let's do it anyway.
All right.
Now the last thing I think we need to do is going to be on submit right here.
So remember we don't want to have stream form decide how to handle this mission anymore.
Instead a stream form should attempt to call a callback passed down from props from some parent component
so on Summit right here rather than calling create stream.
I'll call this Scott prop's dot on submit.
So we're now going to expect the parent component to pass down a callback called on submit.
And that thing is going to be called with whatever values are coming out of our form.
All right.
I'm going to do a quick pass in here.
I don't really see anything else.
I think the only other little cleanup we could do would be to remove the import or connect right here
and the import for the action creator create stream as well.
And I think that's just about it.
So we now have a generalized stream form component.
Now at present the one thing I want to point out here is we are not handling this kind of initial values
thing in the case of stream.
It will talk about exactly what's going on with that in just a moment.
So right now let's just focus on getting stream create with on Samit working with the stream form.
All right so I'm going to save stream form.
We're going to take a pause right here and when we come back the next section we're going to do a huge
refactor to stream create and make sure that it uses stream form and just passes down some appropriate
callback function to be called.
And any time the form gets submitted so quick pauses I'll see you in just a minute.