Before we start setting up create job functionality, I also want to add clear all of our functionality.
And with this one, pretty much set it back to default.
And how it's going to look like, well, let's take a look at our read over here.
So keep on scrolling.
Have over here where values.
First, we set up the action for one set of clear values function and here notice how we are dispatching
the same action.
We pass it down to a value and then in the reducer.
I'll just set up the temporary state.
And this is where I'm looking for all my job values from the state.
So position company, job location, job type and status and also why you see here this is editing and
at a job ready.
Well, let's think about it.
If the user is trying to edit the job and then at some point he or she decides that they're not going
to do that.
It kind of makes sense that we remove the is editing and add a job idea as well.
So when we're setting back a default, that's exactly what I mean, we all centrally set it back to
our default state.
And once I have this one in place, so the temporary state, I'm just going to go down to that state.
So get back all the state fires and then I'm going to spread out the initial state as well, which effectively
in turn is going to do what it's going to provide values for all of these properties in the actual state.
Hopefully, that makes sense.
And one where we have ajob, we'll grab the function clear values and right after the submit button,
we want to create another button.
This is going to be a clear button as far as styles and when it comes to on click, yes, we will invoke
clear values.
But one gotcha.
We need to keep in mind that this button is still within the form.
And essentially, that means two things.
First, when will click this button?
We need to make sure that we access the event object.
And essentially, we prevent the default.
That's the first thing we need to do, because otherwise you'll have the page refresh that first gotcha
and a second gotcha.
But you need to keep in mind is the fact that location for this button matters if you place this button
before the submit button.
Effectively, when you click on Return Key or enter key, however you want to call it, essentially
you'll run unless one instead of the submit.
Even though even though you know our AGM, this one has the handle submit.
Yes, I know it's interesting, but that essentially is how it works, at least while I was testing.
So let's start actually working on this one.
So first of all, we want to go to our actions.
Ron, let's right away turn around and let's say clear and underscore values when we want to set up
the imports in both places where again, we're going to go to app context.
And somewhere here, let's say clear values right away.
Copy and paste in the reducers wall.
So that's in place as far as the functionality in the app context.
Well, it's going to be a function that shows this practice, this value.
So in my case, I'm going to place it right after 30 handle change where I'm going to go to college,
then clear and then values.
And it's not going to be looking for anything, any parameters or anything like that when just say this
patch and then let's bask in the object here, let's say type.
And now we want to pass in the clear values one.
Let's go here with clear values or not clear alert.
Sorry.
Clear and values function.
And then I think I'm going to go to reduce our first.
So let's navigate through the reducer gun rules, set up our condition.
And yes, I will copy for the virus from the state because I think it's going to be much faster.
So let me copy and paste this one.
And instead of handle change, we will look for clear values.
That's step number one.
Then as far as the return of turnout, let's just leave the state as it is.
And I want to set up a temporary one off concert, and I'll call this initial and then state that is
equal to an object.
And now let me quickly.
Swing back to the context and what powers am I looking for?
Well, everything that has to do with jobs apart from the Irish.
I really don't need them.
I don't need job types or the status ones.
So let me just take them and remove them in the producer.
So copy these ones again.
The reason why we're using editing because I want everything to go back to the default.
If for some reason the user wants to clear the values, so let's go to the producer that's going to
be on initial state and then is editing stage at a job company as well as the ID state.
Now what about job location?
Is it equal to use their location or now we have that power in a state?
So of course, the value is in the actual state, and what we're looking for is state and that user
location.
So we won't be changing that.
That one still stays the same as it is.
We remove the or we don't need the job type options as well as status options, and we just save it.
But before we can move on to a add job, I also want to spread out this one.
So I'll say here initial state.
Can you do a property by property or here?
Yes.
But I just find it a little bit easier to read than we want to navigate to our ad and jump over here
and we want to go with the clear one.
And this is going to be the case where, yes, I will show you what happens if the positioning changes.
So first, let's go here with clear and non values.
That's what we're looking for.
And then let's set up that button.
Let's keep on scrolling.
Let's keep on scrolling over here.
So have the button.
Okay, beautiful.
Then let's go with our button element that's out of class names.
So I'm going to go here.
Began 10 block.
I'm on the clear button as well.
One, we want to set up some kind of text.
In my case, that is going to be clear.
And in this case, I'm going to go with on click and first, let's just test that out.
What happens if we don't prevent default?
So that's the first thing that I want to showcase.
And essentially, let's just run the log.
And here, let's say hello and say it and navigate to the browser.
And let's try out.
And notice the moment we'll click it will refresh the page and will see the halo for split-second.
But effectively, since we are refreshing the page, it's going to be gone again.
Why is that happening?
Well, because the buttons in the form.
So the moment you click it, yes.
If you don't prevent the event, you'll be submitting the form, correct?
So we'll go here with event first and then let's go with present and then default.
So that's the first step.
Now, the second thing that I want to showcase is this Yes, of course, we will run clear values.
I mean, that's the entire point for this button.
But let's first test that out the way it is, and then I'll showcase what happens if we do the opposite
way.
If we place this button in front of the other one.
So let's go over here and let's say position something.
And then I'm just going to copy and paste this, I was just search faster.
So let me pass all of them here like so.
And then once we clear, check it out now, the functionality works.
Everything is beautiful.
But if I'm going to go over here and let's say I'm going to move it above the submit button, and instead
of clicking on the actual button, you'll need to press return or the anarchy.
And now let me copy and paste the same values.
And now notice something in again.
What you're looking for is the anarchy.
You're not clicking on the actual button, you're submitting the form and the moment you'll do that.
Notice how we don't see anything in a console, but there's also no law.
So essentially, if this is going to be sitting before to submit effectively, yes, we'll be running
the clear one, but not the submit one.
And that's not what I want.
And therefore we'll go back and change it around where first we take a very clear one and then place
it at the very end.
And then the second thing is, let's copy those values again, and now we should see the create job
one in a console.
If I just press return and only if I want to clear everything, then I press the button and then the
functionality is going to work.