In the last video we created a new stream form component that's going to be used between stream create
and stream at it.
So we're not going to go back over to string create string create now needs to show an instance of stream
form pass down on submit and do basically nothing else.
So it's going to be a very straightforward component moving forward.
So I'm going to open up my stream create file please.
Triple check please make sure you are inside of stream create make sure you are not making changes to
stream form stream form is fine as is now inside of here.
We're going to do a tremendous amount of cleanup so we'll go through this step by step.
But please do try to watch somewhat closely because we're going to be doing a lot of little refactoring
inside of here.
All right.
So first off this stream create is no longer going to be showing a form.
So we don't need a field or redux form anymore so I'm gonna delete that import.
We do want connect and we do want create stream because eventually stream create is going to need to
call an action Creator in an in an attempt to create this new strain.
We also need to import the stream form component that was just created.
So I will import stream form from stream form then inside of your we dont need to render an air any
more.
So I can delete that we don't need to render any inputs any more so I can delete that but we do need
to have some on Samit callback like the one you see right here.
Now this doesnt have to be called on Samit per se.
We could bring him this.
Anything we want.
Remember we're just going to pass it down as a prop named on Samit.
I think that leaving it cool or calling it on Samit right here is fine.
However some is going to leave it as is now inside of my render method.
We're not going to show a form anymore.
We're not showing any fields anymore and we also don't need to show any buttons anymore.
So the entire render method can be removed to all the geas x inside there and then we will replace that
with just enough to show the form and a header at the top because remember the Create stream.
Or mean the stream form component does not actually show a header.
So inside of my render method I'm going to place a div in place how about a h three.
Let's do an H3 I think that's reasonable and I'll say create a stream and then after that we can place
our stream form component and pass an on submit.
And that's going to be this dot on submit like so we fix that up.
There we go.
So now stream create is going to add in a little bit of GSX of its own.
It's also going to show the appropriate form and pass down the callback to be called any time that the
form gets submitted.
Now we're not done just yet.
Little bit more clean up and side of stream create.
So we don't need a Validate function inside of your anymore.
The validation is being handled by our form.
So I'm going to delete the validate.
We also are not doing any wrapping with redux form anymore so we can delete all that and we're left
with just our export default statement right here.
We don't need a form wrapped anymore because we don't have that kind of like two stage wrapping process.
Instead I'm going to pass in that stream create like the.
All right so that is it for the reactor.
Now I got to ask you please please please take a look at your screen create and make sure it looks very
similar to mine.
So we've got the four import statements we've got on Samit we've got the render method and then we've
got export default.
We did a big refactor here so I just want to make sure that you did not miss any of those steps because
if you miss a step here yeah you're probably going to see the air pretty quickly as you might guess.
All right so once you're happy with what you have we will save this file will flip backwards the browser
interface.
Just gonna make sure we don't see any error messages so no errors around syntax or anything like that
so I think I'm in a good spot.
So now the next thing I want to do is test out the stream creation form because we've not yet done anything
for the edit side.
So I going to go back to my list of streams by clicking on my logo up here and I'll navigate to my Create
stream form.
I still see the form as I saw it before and it looks fantastic.
So now I should be able to enter in some title here.
Let's say me streaming component reuse because that's kind of what we're doing here.
Watch me refactor some components.
I'm going to open up my network tab just to make sure I see the requests go through.
I remember after we successfully create the stream we will get automatically navigated back to the streamlets
component.
So I click on submit.
I see the post request for creating the new stream.
It looks like it was successful.
And now on my stream list I see the new stream that I just created.
Awesome.
So that's pretty much it for the stream create side of things.
We've now got a component that uses this reusable form.
So now we can pivot our attention back over to stream edit.
We're going to do essentially the same exact thing we just did.
There's just going to be one tiny difference here in the fact that we need to make sure that stream
edits form is going to show the title and description of the current stream.
So let's take a quick pause and we'll start working on stream edit in the next video.