And as far as the jobs container, here's what we want to do.
Like I said, we want to get the user app context since we're going to be getting all of these things
from the state.
So get jobs function, which will invoke the moment the jobs container is rendered.
And yes, eventually we'll add more things here.
Once we set up these search, but not for now at the moment, is just going to be on the initial render
when we go.
Jobs is loading page and total jobs again page.
We technically won't use right now, but I write we want to set it up and then I have the loading,
which will create in a second.
So this is going to be a separate component when we have job.
Which effectively will be that component that displays that single jump.
And yes, there is also a rapper 40 jobs container.
And before we go any further, I've just set up the loading.
Otherwise once I copy and paste the imports, the whole thing is going to go bananas.
So let me go to components, then I want to go with loading jobs.
And here.
We're not going to get any rappers.
And we're also not going to export.
So this is going to stay local and the way we'll set it up was, say Loading.
So that's going to be my component.
And eventually, I will look for a prop for the center and you'll see in the second one.
But for the time being, let's just go here with a return.
Let's turn a there.
So I'm going to go here with there.
And if you take a look at the CSIS, the global sources, you'll find loading and unloading center now
for hour.
I just want to showcase the loading one and then I'll showcase why do we want to grab the problem?
So let's just set it up here as a class name.
So class and the name and for time being.
We're just going to go with loading and you'll see that effectively with the help of SS, we just have
the loading spinner.
Well, then let's go with our export, then default, and we're looking for the loading.
And now I can go back to the read me in, like I said, in order to speed that up.
Oh, but it was going to go with my imports or copy them and not in the jobs container.
Let's set everything up.
Let's say it mean hopefully nothing is going to break and we'll get to go so well is in place now.
Grab those things from the state.
In this case, we're talking about get jobs.
That's the function of jobs that is loading one page and then total jobs.
Sir, how many jobs we have total now, all of that is coming with use and context.
OK, awesome.
And then let's right away set up the use effect.
So in this case, I'm going to say once of the component, meaning the jobs component renders, here's
what I want to do.
Want to go and get jobs.
And then let's invoke it now.
If you want, we can test that out.
But for the time being, I just want to showcase how the lowering is going to work effectively.
Once you invoke this one, yes, you'll again see those updates in the state.
So for now, let's just go here with diff.
Eventually, we'll set up the wrapper.
Don't worry, but let's just add here right now the loading loading.
That's my component.
And what you'll notice as I get jobs is not a function.
And yes, of course, because I wasn't particularly great in the previous videos and I didn't export
that.
My apologies.
Let's go back to context and we're going to go over here with get jobs and we want to pass in the function.
And you know what, I'll actually update or read me as well, just so you don't make that mistake.
So let me go to get jobs and have the use effect.
Let me add here that value.
And let's say that will pass in the get jobs.
So however, when you are looking at your enemy, you're sure now that you need to pass in the good
jobs to invoke it, OK?
And now notice.
So that's going to be my loading spinner.
Now, the thing is, I actually want it in the center more.
Once I actually search for something, I want it in the center.
And the way we can do that, I can just add an extra glass.
Now I don't want always a loading spinner to be in the center and therefore will set it up as a prop.
I'll say that if the prop exists, awesome allowed the class.
If not, that will just display the default one.
So let's go back to loading.
Let's check for the center prop.
And now, instead of just loading, let's set up our usual turning operator.
So if the center is true, then we want to go with loading.
Believe that was the name of the class.
If it is loading online, we want to go with loading.
Again, if you want to take a look at CIUSSS, please go to the emergency, assess the global one.
And that is going to be loading if the center is false.
Now, if we go back, it should be in center.
And since it is now I can navigate back to my jobs container and now we can start setting up some kind
of functionality.
And the first thing that I want to check is whether we are loading.
So in the complete application, you'll notice that we only display this one if we're loading and then
I'm not displaying the jobs, correct?
So let's come up with our first condition.
Let's see if we are loading.
What do we want to do?
Well, we want our turn.
We want to return.
Loading.
And then let's use that center one.
So center or here and then let's close it.
So this is only if we're launching.
So now, of course, I can remove it from my straight up return.
And then also, I have if I want to check if the length is zero, meaning if there are no jobs again,
this is not going to be an error.
It's perfectly fine to have an empty array.
That doesn't mean that there's something wrong with our request.
And why do I want to display all here?
Well, I'm just going to go with no jobs to display as far as the text.
Now I do want to wrap it in my wrapper as far as the styling is concerned.
So let's just set up our check first.
So if jobs and the length, if it is equal to zero, what do we want to do?
Well, let's go with return van and let's set up the wrapper here and then inside of the wrapper, we're
going to go with heading to you and whatever text you want to go with.
My gosh, I'm going to go with no jobs too and display.
That's not to say that one.
And if you're interested, how is this going to look like?
Well, we can do a little bit of trickery where I don't want to go back to the server and send back
an empty array and then come back and simply just remember how many jobs I have total, which I think
in my case was three or four.
So it major just changes around two three.
And you'll notice that the moment we have no jobs and.
So that is going to look like eventually when we set up the search functionality because it's perfectly
fine to return an empty array.
And as far as the main return.
So if we're not loading and if jobs length is effectively bigger than zero, then we're going to go
with our wrapper.
And first, I want to display the heading five and in here, let's just display the total jobs and that
is going to be the amount of jobs that we have.
And remember, we can have also one job.
So let me set up one more condition where I'm going to say you have jobs.
Length is bigger than one.
And then I want to add the ask there.
So let me go and operator and I'm just going to add ash over here and what you'll notice if we have,
for example, only one job done is going to say one job found now in our case, we have three.
So we should see jobs now since I have set up techs to be capitalized.
That's why you said in such a way, once you say notice.
Now we have three jobs found, and now let's just iterate over those jobs.
So right after the heading, five set up a jobs there, so there was a class of jobs.
Then let's iterate over the same map and now I'll reference each job a job parameter.
And then as far as the return, we're going to go with the job component.
And we just set it up and then remember, we have the key.
And let's all remember what we have in the array, so array has what it has object and each object represents
what represents that job, correct?
I noticed over here I have the idea so I can just grab that one and pass it as the unique one.
So let's just go here with jump underscore and then ID.
And that since I want to pass all of these properties, it companies positions and all of them into
that job component.
I'm just going to go with dot dot dot and then I'll spread out the job.
That essentially is my preferred way of passing the props.
And then eventually we'll check for a number of pages and display the pagination buttons.
So therefore, if you're looking at the complete one, if you don't have enough jobs, you won't see
the product mentioned here on the bottom.
But that is still coming up.
So for now, let me just add a comment here.
Pagination.
And buttons like so let's say that I want and when it comes to every single job, I just want to showcase
what we're getting back.
So let me now get you a job components or jobs?
Yes.
And then in here, since I know that I'm getting the entire object, essentially I'm just spreading
out the properties.
I'm going to look for a company one.
And let's turn this around to earning five, maybe so five and what's around there, not company name.
So that way, we'll for sure know that everything is correct.
So let's go here with company.
And then once I navigate to my application, I'll notice that we have three jobs found and have Google,
Hulu and something.
Now if you don't believe me, you can go to a reactor tools and learn more specifically, you're looking
for two jobs and you'll see that we have the array and then each item is an object.
And where I'm getting this company, we're here.
So this one is goggles and we have something and also have four.
And while we're still here, why don't we test it out?
Why don't we add a new job?
So let me go to and jump when we want to go with intern, maybe company will be Apple.
And as far as the location, I think I'm going to leave Mexico for now.
Let's submit.
So we added the job to our database.
And now if I navigate all jobs now, I'm going to have four of them.
And the last one will be Apple.
And with this in place now, we can start focusing on the single job component.