All right.
Before we set up a job page, let's also quickly recall the request we're going to be working with.
So the URL is going to be forward slash jobs.
The method is going to be post.
And as far as the data in the body, this is what we're going to send the company position, job status,
job type, as well as the job location.
And if we're successful, we're going to get back the object and in there there's going to be a job
property with all of these values.
Now, on the front end, we're actually going to navigate away to our jobs page.
So technically, we're only looking for the success response.
Basically, if there is no error, we are good to go.
Now, of course, if there's some kind of error, we're going to get back the error response.
And in that case, we're going to display the error to the user.
All right.
And up next, let's work on create job functionality effectively.
We want to set up an action where we send the data from our inputs to our server.
And this is an extremely good use case for the challenge because at the end of the day, the functionality
is going to be extremely similar to the login as well as the register.
So I highly encourage you to stop the video, try to set up the entire functionality yourself.
Basically we want to grab the form data, we want to send a post request.
Remember, you just need to double check the URLs and also if you're successful, display some kind
of post, navigate to all jobs page and also if there is an error, display a toast with the error message.
Let's get cracking.
I'm going to go right away with export, const and action.
And before I forget, I'll actually set it up in app JS.
So for now let me.
The structure, the request.
Over here and let me just return null.
And then let's navigate to pum pum pum pum pum App.jsx over here.
Let's copy and paste.
Guess it's not going to be a loader.
It's going to be an action.
It's not a dashboard loader.
I'm going to go with Add job action.
And then, okay, for some reason this was all uppercase.
And then we're looking for the Add job page.
So pages forward, slash and then add job.
Let's scroll down.
Let's look for our Add job.
It's over here somewhere.
Yep, of course it's the index one.
That's why it was hard for me to find it.
So let's go with action.
And that will be equal to add job action.
And let's just add a comma over here.
With this in place now, let's navigate back to add job.
First we want to grab the form data.
Correct.
So form data is equal to.
The await.
Then request form data.
Let's invoke that and then we want to turn this into an object.
So we're going to go with const.
Data is equal to object dot from entries and we want to provide the form data.
Well, then we're going to go with try and catch.
And essentially we'll move this null up.
Eventually there's going to be a redirect, but not for now.
So let's go over here with Await.
We're looking for custom fetch.
Then it's going to be a post request.
And remember, we already pointing to localhost 5100.
Then the base URL is API version one.
And then remember, in order to create a job, we needed to make a post request to forward slash jobs.
And the second value is going to be our data, basically our object with input values.
And if everything is correct, for now, we're going to set up a post.
Then we'll provide the success option and we'll say job added successfully.
And if we have an error, we want to go post error and then look for message and also return the error.
And you know what?
In order to.
Make this a little bit faster.
I'm just going to copy and paste from the login.
Now let's try it out.
I'm going to navigate to the browser and let me right away open up the dev tools.
Specifically, I'm going to look for network over here and again, in order to speed this up, I already
clicked on the fetch one, so that way I'll right away be able to see my request.
As far as the position I'm going to go with front end.
And then.
Let's go with coding addict.
Let's send a request.
Notice two things are happening.
Basically, we create the job, correct?
So jobs URL, and then we have 201.
And we were successful.
And yes, we'll also have here this current user.
Basically the reason why it's happening.
Well, because the dashboard layout is apparent for all of these routes over here.
And since in the loader there, we're grabbing the current user pretty much every time we'll do something
with the pages, we will refetch that user.
Now eventually we will set up a cache with React query, but let's not worry about it right now.
Just don't be surprised if you keep seeing this current user request.
Yes, that's going to be the case.
And remember, if for example, something goes wrong with the cookie or the JWT will automatically log
out this user, since that's our setup in the loader.
Now, let's also take a look at the payload.
So essentially, I'm sending all of these values nicely over here and this is going to be my response.
So we're sending back the job.
But like I said, we're not using it anywhere here on the front end.
If we're successful, then essentially we're just going to display the toast and eventually we'll navigate
away from the page.
Now, there is one thing that I want to showcase, though, and that is the pending class.
And I guess in order to showcase that, I need to do two things.
First of all, I'll make this 3G slow and also I want to go to a elements.
And more specifically, I want to look for this ad job one over here.
And notice something interesting over here.
The moment I will click on Submit, I'll have different background color.
Why?
Because by default.
On an Eyeblink we get this pending class as well.
And if you take a look at the index CSS, so basically our global CSS, you'll find over here this pending
class.
That's why you see the background there.
Now we will use these classes later in order to set up the badges for the job.
So that's why I don't want to remove it.
I just want to explain that, yes, we're getting that pending class on the nav link and since I already
have some styles for that pending class, that's why you see that background.
Now, in order to fix that, we need to add some logic in the wrapper.
So let's look for assets and wrappers.
And we're looking for big sidebar and let's keep on scrolling.
Remember the active class right after it, we're going to go with Dot.
And we're looking for pending.
And in here I just want to change the background.
So I'm just going to go with Var and then I'm going to go with background color variable.
So now let's navigate back to our browser.
I actually want to go back to a normal speed.
Then let's refresh.
And essentially we want to again, provide some value.
Front end and then coding addict.
And you'll notice that we're going to get a different background color.
So hopefully it's clear how the nav link adds the class and why we had a different background.
And the last thing that I want to do in this video is to navigate programmatically away from the Add
job to all jobs.
So if we're successful, instead of returning null, we already have the redirect in place.
So now we just need to say, where do we want to navigate?
And I'm just going to go with all jobs.
So once I add the job, we're going to nicely navigate to all jobs.
Page since this is where we're going to make a request to get all the jobs back from the database.