So with me do a little bit of spring planning as far as my tabs and then let's start working, we're
going to go with source.
We're looking for pages more specifically match board, online and job.
And yes, this is going to be the case where I will speed this up a little bit.
And when I grabbed the read man, this is a little bit annoying.
Work always opens up the same file here.
So let me grab here, read me and I'm not going to take these ones, but I do want to grab the imports
because I really don't think there's any use for me to type them out.
So copy and paste again.
Form row or, you know, alert.
Now here's our context already know as well as the wrapper.
And again, just to emphasize something when we're talking about the profile.
Notice it's the same component.
Why?
Well, because it's literally the same thing.
Have form here.
I have form here, so I might as well just combine the styles in one place.
Now, as far as ajob, first what I want to do.
Is go with use context.
So use that context, we invoke it and then we want to pull out bunch of things that were here.
First, we want to get Charlotte.
That's going to be our bullion van.
We want to get the actual function, display alert, then we want to get the position, the company
and job location and yada yada yada.
So let's go here with I'm putting pretty much all the values we set up in the previous video.
Now, keep in mind when it comes to job type options and status options, of course, those are arrays
and they will come in handy in the next video when we'll set up the select.
So let's go here with job creation.
Then we also want to go with job type.
And let's also set up job type options options, mitzevich or have better formatting.
Then we want to go status.
And then lastly, let's go with the status status options now, if you named your state variables different
like then please make sure that everything is correct.
Now I'm not going to create the functions yet.
Let's not worry about it.
What I want to do right now is set up my return.
So let's go here with the rapper.
And you know what, before we go any further?
Actually, there's one thing missing and that is the is editing.
So scroll down over here.
I'm going to be using is editing.
So with me quickly set it up here in the read me.
So you have it for your own reference.
And then I'll also use it in my ad job, so I'll pass it on a top.
And then when it comes to rapper first, let's just start with the simple form.
Where we want to go with form element.
And there's going to be no action since we'll handle that on our own.
And then we want to go with class name and let's set up the form.
And I simply want to set up my heading three.
With that is that I mean, so let's go over here.
Let's say that we'll look for is editing value.
And then if it is true, then we'll say at a job.
And of course, eventually we'll provide the values to the state and in the process to display them.
For now, I just want to go with added jump or add drum.
It's not me.
Never get back.
And if everything is correct, once I refresh, I have --.
So now we just need to set up the alert as well as the inputs.
So right off 303, we're going to go here with show alert again, our Boolean value, and then we'll
use our alert component when we want to go with form center unless this world plays all our inputs.
So we're going to go here with Dev and then the class will be form center.
That's for the styling.
And then remember, we have the form or component and it's going to be looking for a type which is going
to be the text for the position that name will be positioned.
And it's very, very, very, very important that the names match.
Exactly.
And I know you're probably sick of hearing this, but trust me when it comes to a course, can I?
The most questions are just about simple bugs, where effectively instead of riding position, there's
a typo and the whole functionality goes bananas.
Now I'm not saying that in the condescending way.
Trust me, I meant those typos all the time.
But as I'm recording, I just try to emphasize the fact that, yes, we need to pay attention because
this is not going to be positioned in the state and not very, very important.
So even though you type here value, and then this will be equal to the actual state value.
Again, the whole functionality will go bananas because they don't match.
So make sure that you use the same name as you have here for the value and then we want to set up that
handle change.
So for the time being, let's simply set up a function that is just going to look for that event.
And more specifically, we want to grab the name over here and then devalue.
So let's scroll up a little bit.
And basically, it's come up with that function, handle job input, and I'm skipping a little bit of
head.
But eventually we will invoke the function that is coming from the state.
So this is just going to be a local one because in my opinion, it's just easier to work this way more
effectively in this function.
I'll grab the event object and then for time being, I'm just going to go name is equal to event dot
target name just so we can see whether or functionality works.
And then I also want to do the same thing with the value for value will be equal to event target and
then devalue.
And as far as the console.log, think I'm going to go this way where I'm going to go with log van,
we're looking for template string.
And here we want to access the name and set up the colon and also grab the value.
So this one, I'll add to all of them.
I'll start with my first one with possession.
So let's go here with on change.
And what we want to pass in is the handle job input that's close our former room.
Let me add here.
Actually, a comment, and I'll write or hear position then when we want to copy and paste two more
times.
So I think I'm being purged now, the second value will be the company, one company.
So again, please make sure that there are no tiny bugs where we want to go.
Here we have a company in both places.
So this is going to be the case where we're going to go to cursors and not just set up the company.
And the last one will be location.
So we're going to go over here, say location and what is the state value provider's job location?
Correct.
So we need to make sure that wherever we have the name, we go here with job location and then the same
goes for value.
So I mean, select let me delete and then we'll go with job location.
Let's save.
Let's go here and then notice something interesting where we right away have the value.
Why?
Well, because it's our state already.
Remember, that's what we getting back with a token.
That's what we said in a state.
And not only that, it is also in our local storage.
So that's why it was so crucial for us to send it back with our request, because that way I clearly
know that, OK, this is going to be a location for John.
So when he's adding more jobs, he will have his location.
Now, can you change it here?
Of course you can.
But by default, you have the user's location.
Now the last thing before we start tackling the button.
Remember, we have the label text correct, because I mean, you can leave it here like this where it
is, job location has one name, but it's probably better if we just set up two separate words.
So let's go here with the label text.
Remember, that was our prop that we set up in the component.
And let's just say here, job location and now you can see it in action.
So hopefully this is clear enough.
For example, why label text is so nifty.
All right.
So those are our three inputs.
And you know, before we deal with a submit button, why don't we just test them out where I want to
go and inspect?
I want to go to council, and it looks like over here I have big old dewji.
Hmm.
You provide a value prop to a farm field without on chain Schundler.
Hmm.
OK.
Let me double check.
I think I know where are the errors.
And again, this is just to showcase how easy it is to make those errors.
I mean, I would get quickly, quickly back to the form row.
And yes, of course.
So over here, the proper name is and I'll change my bet.
So let me go back to and jump.
And instead of on change, which we are setting up in the form row, let me select all these suckers
here.
And let's just say handle and change.
Let's say I won, and now we shouldn't get the error.
Yep.
Everything is correct.
And now, if we start typing in any of the fields, what you'll notice is the name in the state.
So that's the position.
And this is going to be the value now.
At the moment, we're not updating anything as far as the state.
So that's why, of course, you'll just see that first thing over here.
But eventually, yes, the moment will Typekit in the input will also automatically update everything
going to state and notice over here.
Same thing is with our job location.
All right.
So that's good.
So now we can go back to the read me and check out what else we need to do.
So and here we have the button container where we want to set up handle some button to do that.
Let's go right after the last formal.
I'll add two comments right away.
I'll say jump type.
This is where we'll have our select one.
And also, I'll go with a job and then status.
So right after these two guys said, we're going to go with our button container and then instead of
the button container first, let's set up that submit button.
So let's go with our button.
I will be submit, submit.
And then let's also add a little bit of glasses for styling began button block.
And then lastly, we want to go submit button.
Now I will also set up on Click, but we just add text here.
So submit and let's set up that function, I guess.
So right above or below handle in Punjab, where drop input.
So let me go with const and then handle submit.
And yes, we'll grab the event because right away, we want to prevent the default.
And once we prevent the default, what do we want to do?
Well, I guess let's check right away for those empty hours.
Now again, this is going to be the case where I will comment this out when we're making requests because
I do want to check whether we are getting the error from the server.
But once we're done, yes, there's going to be basically three checks in place.
We'll have one on the front and then we'll have one in the controller.
And yes, remember we also have the Mongoose one.
And as a result, and just make sure that we definitely always check for those empty values.
So let's say here, if there is no position.
So this is a state of our I mean, I can right away.
Is that correct?
And the same is going to be for the company.
And I also want to look for job location.
So we're going to go over here and say job creation.
Now I do want to make sure that this one is with the capital case.
And then if that is the case, let's go with this play alert.
Let's invoke it.
And let's right away over time, because what's going to happen over here will go with log online and
we'll go with create and job.
So if all three values are provided, then we're good to go.
Now your next question is probably OK, but I mean, what about the rest of them again?
Keep in mind that these two essentially are select browsers, so there's going to be some kind of I
remember we just set up in a state some kind of default value, and that's the case where we don't need
to worry about them.
There's always going to be some kind of value analysis that out where we want to go back to my project.
Now it's not going to work as far as us providing values here because again, notice we're not actually
updating the state yet, but at least we can try out whether our alert works.
And, you know, I think I forgot to add here.
So let me scroll back down and we want to go on and then click and then that one will be equal to the
handle, submit or handle submit function.
Let's navigate back.
And now let me finally test that out where I should see please provide home hours.
And if I do, that means that we have successfully set up of the main structure for our add job page.