Awesome.
So now let's start setting up the all jobs page.
And the first thing that we want to do.
Is to create four components now, the first year the search container and jobs container will be exported
because we will display them in all jobs.
But when it comes to a single job.
So what is going to be of this item over here and why we need to remove this gibberish again?
This is going to be that specific job component and also have that job info, which is going to be this
sucker over here.
Notice we have this icon and text.
Then I just decided that it's going to be better if it's a separate component.
But when it comes to a search set up, this is going to be in a separate component.
And then when it comes to all the jobs, now it's going to be in the another component.
Now, once we have all of that in place, the exports and everything.
We're going to go over here with the jobs container and search container, so that is in the jobs page
and then I'm just going to use the fragment and display both of them.
And like I said, initially, we'll just work on displaying the jobs.
So that is still coming up.
Factory, there's just going to be some kind of dummy value as far as the component, for example,
search container and not in the jobs container.
We want to get use app context.
Here's a fact.
Because we will set up logic in here.
Remember, get jobs, then we want to get loading job and rapper.
And if you're wondering, well, why we're not setting the loading for the entire page?
Well, remember we will have search.
Correct.
And as you're typing here, I find a little bit annoying if the moment we are in the middle of the request
round, essentially everything is hidden.
And we have that spinner again.
I've noticed that as I'm setting up the courses, people agree with me.
So therefore, in this case, we separate it to where loading is just going to be over here, where
we have the jobs.
So it's that way when I'm typing.
It's not annoying.
We're not hiring the search one.
Hopefully, that makes sense.
And then I have the wrapper, which is the jobs container, and I'm going to come back to this one as
far as logic.
Why don't we start by actually setting up those components?
So let's navigate to our components.
And let's create all four of them.
So, first of all, we're going to go with search container.
And like I said, we'll start with a dummy code.
So let's create that component.
And here I'm just going to write search component, but I think just search stands out a little bit.
We're going to go with search.
And component component or here are separate.
And I think I'm going to create them and then we'll decide which one we are importing, where then we
want to go with jobs container, pretty much same spiel.
We're going to go with our container, meaning our component then will change this thing around to adding
to the worry will set up everything in a second.
So technically it doesn't really matter.
We're just going to go with jobs container that we want to go with single job.
So let's set it up over here.
The job jobs again, this is going to be the case here where I'm going to go with one job component,
then I'll just go with single another job and let's save this one.
And then I also want to do the same thing with a job info.
So let's go with job info, dress and an underscore.
And again, we're creating the component again.
Go with heading to you.
And when you think it would be nice if there would be actual snippet 40 tag that you're also getting
because at the moment we're just getting this just as a quick setup.
Yeah.
What we can do here, we can go with job info.
All right.
Let's save this one.
And then in the index, here's what I want to do.
I want to grab the search one.
So search and I'm looking for the container first, and I want to do the same thing with a jobs container.
Now why both of these runs?
Well, because those ones will be displayed in the page.
So again, I may do a bit of acrobatics.
What I'm going to add to my export, and I think just to stay consistent, I'm going to add it to that
again.
There's no really need but whatever.
I'm just OCD that way.
OK, so we set up such container drops, containers beautiful.
Then we want to navigate to the pages, looking more specifically to the dashboard correct than all
jobs.
And then let's import both of them.
So we're going to go over here and we're going to look for our components.
So let's go to content and then jobs container.
And then the second one will be search container search container.
Now that is coming from.
And as a sign up, that's what happens when you work with.
Common areas are constantly instead of import, keep using cost.
So let me go here with from and learn more specifically.
We're going to levels up in this case, and we want to look for two components.
One, I'm like, I said, I'm just going to go with fragment in this case.
So where's that?
There's going to be no data of nothing like that.
I'm not sure we want to go with both.
We want to start with our search container.
Let's close it and then we want to do the same thing.
We have a jobs container.
So let's set this one up, and let's right away double check what we have.
And if you can see search component and jobs container, that means that everything is correct and now
we can start working on the jobs container.