In the last video we realized that our create and edit screens are showing basically the exact same
form.
So in this video we're going to try to extract a lot of the form logic that we already wrote in to create
into some separate reusable component.
We can then use this component inside of both create and edit to show the same form.
The only key thing there is that we need to make sure that the form can behave slightly differently
whenever it's displayed in either create or edit.
So let's get to it.
I'll flip back over to my editor inside my source directory.
I'm going to make a new folder called components and then inside there I'll make a new file called blog
post form dot J.S. okay.
So inside of here quick little bit of boilerplate so I'll do my import react from react.
I'll get my view text and style sheet from React Native I'll do my blog post form in fright right now
I'm not gonna worry about putting a return statement inside of here because we're gonna copy paste some
stuff in very quickly.
Then create my style sheet so counts styles is style sheet V8 and an export default blog post FORM OKAY
SO inside this thing without a doubt we want to show to labels in two text inputs no two ways about
it but like I said we definitely wanna make sure we have the ability to somehow customize this blog
post form.
So what exactly do we want to customize.
What's gonna think it over all right.
So we're gonna show our blog post form inside of both the create screen and edit screen.
I think there are probably three distinct things that we're going to want to customize about the blog
post form.
First off we need to somehow customize what happens whenever a user submits the form.
In the case of create we need to call a very specific action function from our context to create a new
comment.
In the case of edit we're going to eventually create a another new action function just like the other
two we already have to edit an existing post.
So between create and edits we need to essentially call a different function.
Whenever a user submits the form or taps that button that says you know save at the very bottom right
there.
The other thing that's gonna change slightly is that inside of our create form we probably want to have
some initial form values of empty string.
So in other words don't show any initial content inside of our form but inside of edits we definitely
want to customize those initial form values we want to pass in the current title and content of the
blog post that the user is trying to edit.
And then finally there might be a couple of other things we want to customize as well like the labels
above each those text inputs.
I'm not going to worry about customizing that this time around even though they technically are shown
differently on this form right here.
I'm just gonna say like enter title and enter content on both the different editions of the form but
we could very easily use some props to customize exactly what labels show up inside a blog post form
if you want to change that stuff out.
I'll leave it up to you to do so.
OK so we just need to make sure that we show the exact same form that we currently have inside of create.
But we're just gonna make sure that we can customize these very specific things so to add in some code
to blog post form.
I'm going to first go back to my create screen.
Here it is right here.
And I'm going to cut all this J A SEX RIGHT HERE.
SO THIS ENTIRE return statement out of create screen I'm going to cut the entire thing.
That entire return statement.
So that's what's left.
What's left inside of here.
Then go over to my blog post form and paste it inside of here now right away.
We're referring to a couple of different variables that don't exist inside a blog post form.
So let's add in a couple of imports to make sure that we don't have any missing variables.
First off inside of here we are clearly referencing text input.
We also have a button down at the bottom so I to make sure that I import both text input and button
from react native.
Next up inside of here we're referring to a lot of styles that don't actually exist such as label and
input.
So I'm gonna make sure that I go back over to create screen.
I'm gonna find my styles object right here.
Now I'm just gonna cut the entire body of that object so just input in label I'll cut all that out go
back over to blog post form I'll go down to my styles object at the bottom and then paste all that stuff
inside there.
Now blog post form has a style for input and label.
Just one other thing that we need to really copy paste over here.
Back inside of create screen I'm going to go over there once again inside of a year we initialize those
two state variables we still need some state variables in cyber blog post form because remember we still
need to tell those text inputs what their values are.
We do need to customize those initial starting values that we're passing in but we'll take care of that
in a moment.
Right now let's just take those two state declarations cut them and then paste them at the top of a
blog post form now inside of here.
We're now calling you state.
So let's make sure that we also import use state from react.
So that's definitely a good start.
There's just one less thing inside of here.
If you go down to our button here's the button right here.
We're still calling at a blog post directly.
I'm just just going to delete that entire column right now.
We'll eventually come back and add in some actual implementation for whatever user taps on that button.
We can either leave behind an empty arrow function like so or just delete the entire prop altogether
until we figure out exactly what we want to do and the user taps on that button finally as I'm looking
at that button.
I'm noticing that it says add blog post.
Well we want to use this forum on both adding a blog post and editing some is going to change the title
to like save blog post which is kind of a neutral title that would work on either different screen OK
so now our blog post form isn't a pretty good spot.
Let's now import this into both create screen and edit screen and show this component once it's visible
on both different screens.
We'll start to worry about how we're going to customize it so back inside of create screen at the top.
I will import blog post form from up one directory components blog post form and inside of the body
of create screen.
I'll add in a return statement for blog post form while we are still inside of create screen by the
way.
We've got a ton of unused imports inside of here now.
So let's just do a little bit of cleanup.
I will delete view text and text input because we're not making use of those.
I'll also delete the button because we're not using that as well.
We're also technically not actually using our style sheet but I'll just leave that around for right
now.
And then finally we're also not making use of our use state anymore.
So going to delete that to OK.
Let's save create screen and then we will also go over to our edit screen and show blog post form inside
there to go inside of edit screen at the top.
I will import blog post form from up one directory components blog post form and now very similar to
our create screen.
This edit screen doesn't need to make use or create any state variables anymore because it's going to
be our form component that's going to be responsible for the current state of the form.
So going to delete those two initialization of titling content and then inside of our J.S. sex block
right here I'm going to delete all the j a sex that we're currently returning and instead I'll show
an instance of log post form and then finally we can clean up a couple of the unused imports inside
of here as well.
So I will delete view and text and the text input and also delete you state.
All right so that should be it.
It's now create screen and edit screen are both 100 percent delegating out to blog post form.
We still have to customize our blog post form and make sure that we've got the ability to customize
what it does when a user submits it and the initial formality is all that kind of good stuff but at
least we're showing the blog post form inside about those screens.
It's now that we've saved all these different files.
Make sure you save as well.
I'll flip back over and do a quick test here.
The form will not really do anything right now.
We just want to make sure that it's visible on both these different screens.
So I'll first test out the edit so I'll tap on the existing post tap on Edit There's the edit form.
Very good.
Now if I go back to my main screen and top on the ADD button I can still see the form as well.
Very good.
OK.
So we've now extracted a bunch of logic into our blog was born component.
We'll now take a quick pause when we come back the next video.
We'll make sure that we pass in a ton of different props into this thing to customize exactly what it
does whenever a user submits the form and also customize the initial values for the form as well so
quick pausing I'll see you in just a minute.