All right.
And once we know how we can work with mom and Jess now, it's complete the component of the job component
and will start somewhat interesting where in the app context, actually we want to set up the placeholder
function effectively.
There's not going to be much logic.
We'll just look for the idea and then we'll console.log it with the function name.
Basically, what the function is doing and the reason why I want to do that is because again.
I prefer setting up those placeholder functions because I know that in a few videos, we will attach
that functionality.
So in the job component, won't be able to delete and edit the jump, and we might as well do that right
now so I can get those placeholder functions.
Complete the entire component.
And the only thing I need to do is go back to app context and add the functionality.
And for both of them effectively, they'll be looking for no I.D. for the job.
And yes, in the process, I'll show you where we can get them the first, where we want to do this,
navigate to app context and then right after get jobs, let's set up those two placeholders.
One is going to be four set at a job.
So that's not at a job.
At a job will be a fresh request.
So set at a job is just going to grab the ID of the job and then update all the values that we have
in the state.
And don't worry.
Like I said, we spent an entire video on that.
So for time being, we just want to go, set, edit and job.
We're going to be looking for that.
And as far as the log might just go here and I'm going to go with my template string, let's set.
Added Joe and then Colin, and now it's look forward already so that we clearly know whether I'm running
the correct function now, copy and paste, and this one will be the lead job.
So grimwood over here.
The lead job I'm on the same is going to be in the console.log sort of elite job and then I'm looking
for daddy.
Now we do want to pass them down.
Correct.
So set added job and the lead job as well.
So delete.
And for some reason, I'm giving your suggestion.
Now I have my daily jump.
And now let's take a look at trade me.
So we're pretty much done setting up our placeholders and I'm next in the job.
Yes.
Here's what I want to import.
I want to look for these three icons that are coming from reactor icons.
More specifically, font awesome.
And yes, I don't want to type them out.
So therefore I'll grab them right from the read me.
Then we'll look for a link and I'll show it in a second.
Why one link?
Then use that context?
Why?
Well, because I want to grab these two placeholder functions that I just set up, as well as the styling.
That's why we have the wrapper and then we have the job info.
So I want to discuss the link and job info, and then we'll start working on the component.
Now, as far as the link notes with the added functionality, not only when we will click the edit button,
we will set which item we want to add.
It basically will set the state values and therefore automatically in the ajob.
We'll display them in those inputs.
But also, we want to navigate there and that's why this edit button actually is going to be a React
router downlink.
So once we click notice, navigate to our job and all the values already pre-filled coming from the
job that we want to.
Hopefully this makes sense.
That's why we were setting up that global state.
So I just grabbed daddy and I navigate to the ad job page, which turns into at a job page and I get
all the values directly from the state.
So that is as far as the added.
Now why do we want to have a separate component, the job in full?
Well, because take a look at these ones.
So in here, how the icon I have next, I'm technically yes, we can set it up right there in the job
component, but I just thought that makes it a little bit more sense if we set this up in separate components.
And as a quick set out, we'll actually split the job component into videos.
And when it comes to the job info, we'll work on that one in the next one.
So let's navigate back and grab my imports.
Because there's no point you retype them one by one, they're going to let me select them with me copy.
I'm going to go to job now.
I did not include the moment because my assumption is that you did follow along with previous video,
and therefore you should already have it now.
We'll leave this code as it is, meaning we already have format of date.
So we're good to go.
But the first thing that I want to do is pull out all the hours.
So not only the company and created that I want to get the underscore idea.
I want to get the position and rest of them.
And again, if you need to double check where that, please go to state, look for jobs and then more
specifically, each object and you'll see the properties order.
So I'm going to go with it.
Then I'm looking for a position here of that.
I want to get the company, which I already have when we want to look for a job location.
Also, we want to go with a job type created out.
And then lastly, we have the status for a job.
We pull out all of ours, and then, like I said, the date will stay exactly like it is.
But I do want to grab those two placeholder functions we just set up and where is it coming from?
It's coming from the context, correct?
So we're going to go sit at it and a job.
The first one and the lead job, and both of them are coming from huge context, and we're just invoke
it now as far as the return.
Well, let's take a look.
So how the various other functions have the functionality to format the date and for the time being,
like I said, we're not going to focus on the center, on the content center.
So that is coming up notice over here.
There's going to be a content center where the job info component, which we're going to set up in next
video.
So for the time being, I just want to create the header and line inside of the content will place a
footer with our two buttons and one of them is going to be like a manual focus on this one later.
So let's go back to the job.
Yes.
First, we want to get some styling correct.
So let's go here with the wrapper.
Then more and more of these 200 fires, we're not going to need them.
And let's start first by setting up the main icon.
Now what is the mania in Congress one over here and essentially the way I'll set it up?
There's some kind of styling, and I'll just grab the first character of the company string.
So let's go with the main and let's call this icon.
And then inside of it, we're going to go with company company Dot and then character at.
Like, so let's pass in the zero and then I'll set up the rest of them, meaning whatever I have in
the header and then I'll show you in the browser and I'll sign up actually forgot to add a header.
So first we want to get the header and then inside of the header, we'll have all the data.
So first one is the icon and right next to it will have a div with following things.
First, I want to have a hang fire with a position again that is coming from my props.
And then we want to go with company.
No company is going to be sitting here in the paragraph.
So let's say here's a company now, let's save it.
And once I navigate through the browser.
Well, this is what we should see.
And then we'll use the first letter of the company.
And here is the role in heading five.
And then as far as the company is going to be a paragraph so not scheduled for later.
Well, then we want to go with Dave with a class of content.
And then inside of it, we're going to place a comment here, so content and not center later.
So this one will add later and now let's go with water and they're all set up our actions.
So let's set up the four element.
And then there's going to be a there with a actions glass and two buttons.
So the first one will be set at a jump.
But this is going to be the lynk1.
And since we're importing link component from the reactor Rotterdam, we can do over here or we can
go with Link.
Correct.
Van, we'll set up where we want to navigate in the second for time being, let just go to class name
and then beaten.
An added burden, so this is just for styling.
Now, instead of dealing, what do we want to pass in?
Well, I just say it, so that's the first button.
Now second one will go with button element.
Then we want to set up type, which is going to be equal to a button.
After that, we want to set up some classes.
So let's say here, class name, I'm looking for button and then delete button.
And eventually there's going to be also the on click one number for us.
Set up the on click.
We'll just go here and let's say delete.
And now, which function do I want to run when I click on edit button?
Well, this one.
Now, the one thing, though, we need to remember that in the Arab context, what are we looking in
the function we're looking for daddy now, where is that sitting sitting over here?
That's our idea.
And we also need to keep in mind that we'll have to use that Arab function since now we're passing arguments
and therefore we don't want to invoke it.
There are none.
We want to invoke it when we actually click.
So let's go here with and click online.
Like I said, who passed in our Arab function?
And then let's just go delete.
And I'm looking for the lead job.
And as far as what do I want a person want to pass in the underscore, are they now?
Quick suggestion.
If you want to give it an alias here, you can definitely do so.
Basically, it's going to look something like this where you can just pass in there.
But in my case, I'm not going to do that.
But yes, that is definitely an option.
So that should do it for our daily job.
Now what about the other job?
Well, first of all, it is a link, correct?
So where do we want to navigate?
Well, it's going to prop.
And what is the page matters ad and then hyphen job?
Now another thing that we want to do, we want to have this on click.
The function, though, is going to be different.
I grew up in paste and that instead of the lead job, when are we going to pass and we're here, we'll
say set, edit and job.
And once we navigate to the big screen right now, this is what we should see.
So that is going to be our header and then we have the footer.
And then I'm more interested in what is happening in the console and whether we can navigate to the
add job page.
So let's take a look at the console.
And then once I click on Edit, Yup, Master, here the jump.
And then that is going to be that unique.
So I know that functionality works online when it comes to edit, let's click and check it out.
So first of all, notice we end up in our job, which is just awesome.
We just need to add the functionality and also we have the console work.
So with this, we're done with the main structure when it comes to our job component.
So now we just need to add that extra info here in between the header and for.