All right.
And up next, let's work on the job component.
And the first thing we want to do is to install the JS library, which is going to allow us format the
date.
You see, we nicely get back from Mongo Createdat.
But if you take a look at the value which by the way will log in a second, you'll see that it's not
particularly user friendly and therefore we'll use the de JS library.
And since the format we want to set up is a bit more advanced, we'll also need to do a little bit more
work where not only we're importing from JS after we have installed, but also we want to grab the advanced
format and then extend it.
Again, there's some default format they provide right out of the box.
But since our is going to be a bit more custom, that's why we need to add this extra logic.
And you know what?
Let's also set up a job component, because if you take a look at the complete project, you'll notice
this repeating pattern where we provide the icon as well as the text.
And I just thought that it makes sense to set up a separate component for that.
So for starters, let's go to components and let's create one more.
And in this case it's going to be called job info.
JS six.
Now as far as the return, I'm just going to go with some small heading over here, let's say heading
four and then yes, I'll pretty much right away grab all of these imports.
It's just going to be easier to set up everything.
Let's navigate back to the job and let's go line by line.
So we're grabbing here.
Three icons from the font awesome library.
Then we also want to grab the link and the form.
And you know what?
We can probably combine them over here.
Now, of course, in your Readme, everything should be correct.
Let me actually fix it right now before I forget.
So again, we already have the link one, so we don't need a separate import for the form.
Also, we have over here the wrapper.
This is coming from wrappers and we are more specifically looking for job and then job info.
The component we just created and then import for the JS and like I said, advanced format and we want
to extend.
So they extend and then pass in the advanced format.
Then remember when we're iterating over, we're passing all of the properties, correct?
So now let's destructure them one by one.
So first we're going to start with position ID, then company.
Then we want to go with job location after that job type.
Then we want to go with created at.
And lastly, we're going to go with job status.
Let's start by logging the createdat just so we're on the same page.
So Createdat.
Yes, it's awesome that we can get this value, but like I said, it's not going to be particularly
user friendly.
Notice we'll have this value over here and therefore we'll right away use our library.
So we'll create a new variable and I'm going to go with const date is equal to day.
So that's my import we want to pass here the createdat.
So the value coming from mongo and then format and then we just need to come up with the value and in
my case I'm going to go with this one.
So I'm going to go with month day and then the year.
If you want to find out more options, please reference the docs, of course.
And then here, let's go with wrapper.
So this is what we're returning inside of it.
We're going to go with Header and then let's set up a div with the main icon.
So what are we talking about over here?
Well, this one.
So essentially I'll just use the first character and I believe we're going to use the company for that.
So let's go with Main Icon.
Run as far as the value.
Let's go with company and then character at.
Remember, it's a string and I just want to grab the first character and therefore I just run this method.
Then we want to set up the info.
So this will be for position on the company.
So info div and then inside of it let's set up a heading five with position.
And then also let's set up the company.
So we're going to have a paragraph here.
And we'll set it equal to a company.
Then we have a content and content center.
So yes, the structure is going to be quite nested.
So first one is the header.
And you know what?
In this case we will switch back to.
The browser because I want to make sure that everything is correct.
And again, this is going to be our header where we have that first character as well as the position
and company, and now we want to work on the content.
So let's navigate back.
We're looking for another div, we're going to add the class of content and then.
The content center.
And here, let's set up that job info, three instances of that job info component.
And for now, let's just pass them in.
So first I'm going to pass in the icon and second is going to be the actual data.
So for starters, we're going to go with job and location.
Let me close it here.
Again, we're not going to render anything since we don't have the logic and job info, but I want to
nicely set it up.
And then of course, at the end of this video, we'll actually work on this component as well.
So we're looking for this icon and then let's copy and paste and we just want to change some values.
So the second one is going to be our date.
And then the third value will be a job type.
And as far as the icon in this case, we're going to go with the calendar one.
And then the last one over here is going to be a briefcase again in the browser.
It's just going to be that heading four or whatever we're passing in.
We still need to destructure these props, of course.
And then at the very end, inside of this div, the content center, there's going to be another one.
So essentially I'm going to go with a div.
And here I'm going to have some dynamic classes.
So first, let me set up the logic and then I'll show you what I'm talking about.
So for starters, we want to go here with the curlies.
Then we're going to go with the template string.
So this will be a generic class, which is going to get added to all of them.
And I'll also pass here the job status value.
And lastly, let's close it and let's actually render the job status.
That is over here.
And essentially the idea is following.
So there's a generic class for all of the badges, which just adds the main styles for those badges.
But then when it comes to a background color as well as the color, this is going to be dynamic.
So if the job is pending, we're going to have one color.
If it's declined, then it's going to be another one.
And if I believe what was the third one, I already forgot.
Let me take a look at the utils constants.
If it's interview, then of course it's going to be a different value.
Now, where are we getting those values from?
Well, if we take a look at the index CSS, check it out.
So these are all the classes we're going to use.
Again, the main one over here, the status one is just going to add the general style.
So if let's say I'm going to remove this job status, you'll notice that.
Basically it's going to look something like this.
And then if we add that dynamic one, that's where we add those values.
So essentially, if I'm going to remove this value and instead of hard coding, I'm going to go here,
for example, with.
Interview, you'll notice different styles.
So if we go here with declined and of course it's going to look even more different.
But since job status is dynamic, essentially it's our variable with those three potential values.
That's why we pass it over here.
Hopefully that is clear.
And then at the very end still within this content div, but outside of the content center, we want
to set up a footer element and we'll add here a class name of actions.
So class name actions and let's set up two things.
We're going to have a link.
Back to the edit page and also a form with delete button.
Now there's going to be no logic, so essentially we're just setting it up so the job component is complete,
but we'll work on these things a little bit later.
So for starters, let's get a link again.
Nothing is going to happen.
We're not going to navigate anywhere.
We haven't set up any of this logic yet and therefore we're just going to go with button edit, BTN
And then as far as the value, we will write over here.
Edit And the second thing is going to be our form.
So we're going to go with form inside of the form.
It's simply going to be a button.
And more specifically, we're looking for submit button.
Then let's add some classes here.
So class name BTN.
Delete BTN.
And as far as the value, we're going to go over here with delete.
So you should see these two buttons over here.
And I guess at the very end, let's work on that job info.
Remember.
Essentially we're passing these two props over here.
So now let's just navigate here.
We want to grab the wrapper.
Basically, we want to grab the styles.
And in order to do that, we are just looking for wrapper, more specifically, job info.
And then when it comes to return, let's just set up the wrapper.
We have two props here.
First one is the icon.
Second one is the text.
And then inside of this job info, we want to set up the span.
We want to add a class name, job hyphen, icon.
And then, of course, we want to render it on the same deal is going to be for text.
We just want to change some values here.
So instead of job icon, we're going to go with text.
And then same deal over here.
And with this in place.
Our job component is complete.
And up next, we can work on the optional CSS.