All right.
And before we start working on a test user, actually notice that I need to refactor the application
a little bit.
So if we take a look at the Add job at a job profile and there's some other pages as well, we keep
using this use navigation and then we check for submitting.
And of course then we have the return.
In the JSX where we have the button and then we disable it and also display the text depending on whether
we're submitting or not.
And essentially everything is awesome, but I can just set it up in a separate component and then each
and every time I need to use it, grab the component instead.
So instead of just repeating the same steps each and every time, now there is one.
Gotcha.
Notice how in some pages we have this extra class of form button.
But then for example, in the login one we don't have that.
So when we set up the component, we'll have to keep that in mind.
And in my case, I'll just add it based on the prop.
So let's start working on that.
I'm going to go with components and in my case I'm going to call this submit BTN.
But of course this is totally optional, so submit BTN.
That's my component.
JSX First stars.
Let me just set up a basic return, so I'm going to go here with some kind of heading one or something
along those lines.
And then again, it doesn't really matter which page you use to grab all of the values.
Just keep in mind that again, you'll have to take care of that form BTN class.
So I guess in my case I'm just going to grab it from Add job.
So for starters, I want to grab this button, so let's cut it out.
Then let's navigate back over here.
Copy and paste.
So from this component, we are returning the button.
And as far as this form BTN class, I'm going to use prop for that, so I'm going to go with form BTN
and if it's present then I want to add the class and therefore we'll have to refactor this one a little
bit.
So for starters, let's cut it out.
Let's set up the curlies.
We're going to go here with the template string.
Let's remove the quotation marks over here.
And then as far as the form BTN, let's set up the condition.
Let's say if the form BTN.
Prop is present, then we want to use the form button.
So let's cut it out.
Let's set up the quotation mark over here and let's paste it.
Now, of course, we also want to set up the logic correct.
So let's go back to add Job.
And we're looking for these two things, so we want to cut them out.
And then again, back in submit button, set it up.
And of course, we need to set up the import for use.
Navigation and that is coming from React Router Dom.
Then we want to go to index and we want to export.
So let's copy and paste.
Let's select the last one and let's just right over here submit BTN.
Let's save it.
And then let's one by one add it to all of the pages where we use the button.
And again, we're looking for register login, add job edit job as well as the profile.
So let me right away guess go to add job and we're not going to use use navigation.
We just want to grab the submit one, submit BTN and then right after the last one we just want to go
with Submit BTN.
Remember, in this case we do need to provide the form BTN prop.
And what's really cool since this prop is essentially the boolean, we don't need to provide the value.
So if it's present then automatically the class gets added.
If not, then we don't add the class.
So let's keep on moving.
Not the admin, not all jobs, not delete job we're looking for edit job and again, step by step.
First we want to remove the use navigation.
Then we want to import the submit button.
Let's keep on moving in here.
We're not going to use these two lines of code.
And then when it comes to button, basically.
We want to go with submit one.
So submit again.
We want to provide the prop in this case.
Let's close it.
Then we have profile one.
So this also has the.
Prop.
You know what?
I think in this case I can just copy again, we want to remove this line of code.
Set it up over here.
Then we want to remove.
These two.
And then we're not going to import use navigation, but we do want to wrap the submit button.
And then we have a login one and register.
So login one over here.
In this case, we don't need to provide.
Of course the form BTN.
Now don't do that for the explore the app.
This is going to be for test user.
So in this case let's go with submit BTN and we simply want to provide the component.
Again, we can remove these lines of code and we don't need the navigation.
Let's save that.
And then lastly, we have the register one.
Same deal.
We're not looking for use navigation.
We want to grab the submit one.
Submit BTN.
And let's keep on moving.
We can nicely remove these two lines of code.
And then as far as the button we're going to go with Submit BTN, let's close it and I'm not going to
test each and every page, but I do want to, for example, go to a login one and if I can successfully
log in as John, then of course we're in good shape and with this in place we can start working on the
test user functionality.