And before we set up all the jobs page, let's quickly recall the request we're going to be working
with.
So the URL is going to be forward slash jobs.
It's going to be a get request.
So we're not going to send any data to the server.
And if we're successful.
We're going to get back the object with the jobs property, which is going to be an array.
And effectively in that array, we'll see all of the jobs that belong to the specific user.
Now, if there's some kind of error, then of course, we're going to get back the error response.
All right.
And up next, let's work on all jobs functionality and let's start with the structure.
So essentially, we first want to set up the components we're going to use.
And also, we want to grab the data in the loader and then we'll set up the context in here and then
we'll start rendering the jobs.
And for starters, we want to create two more components.
So we're looking for source components and one is going to be a jobs container.
And second one is going to be the search container.
So I'll show you in a second how they're going to look like in the complete project.
For now, let's just go with Jobs container.
And I think I'm going to go here with heading to.
On the same deal here with the search container.
We want to make sure that we're exporting them right away.
So let's right away navigate to index.
We want to copy and paste.
First one is going to be the jobs.
Container.
And then the second one will be that search one.
Container.
And essentially, if you take a look at the complete application, you'll notice that in all jobs here,
I have the search form.
So that's going to be my search container.
And then I also display all of the jobs.
And that is going to happen in the jobs container.
That's why we have those two components.
After that, I want to take a look at the Readme.
And yes, essentially, again, I'll grab all of the imports since I don't see the point of creating
it together.
So now we want to navigate to the pages.
We're looking for all jobs page.
Let's set up the imports first.
And I guess let's do the same thing.
Let's set up the loader, Let's import it in the app.
JS Set it equal to a loader property and then we'll add rest of the functionality.
So export const loader and it's going to be equal to async since we'll make a request back to our server.
And essentially in here let's just return null.
Just so we don't get some weird bugs.
Then we want to navigate to App.jsx.
And again, we're looking for the loader.
So you know what?
Let me copy this one so I don't have to change that many things around.
And we're looking for all jobs.
Loader I guess let's call it that.
So all jobs and loader.
And of course, it's coming from the old jobs page now.
So let's find it over here then.
Let's keep on scrolling.
And we're looking for our route.
So over here we want to go with Loader and we want to set it equal to our all jobs and loader.
Okay, good.
And now let's set up the functionality.
So in the loader, what is the first thing that I want to do?
Well, I want to go with my try and catch since I'll have some asynchronous functionality.
And then remember, we're getting back an object and in there we'll have a data property.
And in that data property we'll have an array of jobs.
So let's start over here by grabbing the data, then await, then custom fetch dot get and remember
the URL.
In this case it is jobs.
Now I'll right away return an object with the data property.
And the reason for that is because eventually there's going to be more logic.
So essentially we will add our search values to the params and then we'll destructure them back in the
loader.
And if this sounds funky, don't worry.
Of course, eventually we'll get there.
I'm just telling you that.
Yes, of course you can go here with data, but since I know that I'm going to be returning an object
with more values, I'll right away set it up over here.
And yes, at the moment, I fully understand technically this is an overkill.
And then we want to go with that toast.
So let's set up toast error.
So if there's some kind of error, we also want to display that.
So let's go with error then.
Question mark, then Dot.
Response dot or I'm sorry.
Question mark, Dot data.
Question mark, dot and then message.
And then, of course, we want to return the error, if there is one.
Then let's remove that null so we don't need that.
And then in all jobs, how we can access this data?
Well, we have this use loader data, correct our hook.
So let's try it out.
I'm going to go with const data.
And we'll set it equal to use loader data.
We are going to invoke it.
And then I want to set up both of those components.
The jobs container as well as the search container.
Now, since I have two components and I want to essentially have one return, I'm going to go with React
Fragment and we're going to set up the search container.
And as I note, we're going to set up this component pretty much towards the end of the project.
And then we also want to go with Jobs Container.
And now let's take a look at our project again.
Let me log in one more time.
Let's submit over here.
We're looking for all jobs.
Like I said, we're just going to have some headings.
That's not what I'm interested.
I want to go to inspect, then console and check it out.
So.
Theta is going to be an object.
And in there I'll have the property of jobs.
And jobs is actually an array of my jobs.
And then each job is represented with these properties and with this in place now we can move on to
the next step.