All language subtitles for 105 Tabs - Fetch Jobs.en_US

OK, and in order to kick things off, we're going to navigate back to our people now.

In this case, we're looking for project number six.

So the tabs and we're going to have to stop the server first, so I'll stop the server.

By the way, if you don't want to do two times today, you can also just type CD.

And unfortunately, that is going to get you back to the road.

So once you're on the road.

Now, of course, we're going to go online.

We're looking for the types.

And more specifically, we're looking for a setup once you're here than we can run NPM install online

right away and and start as a quick side note, if you want to see this particular project and action

navigate to read me in a setup or final, whichever directory you're working in and just grab there

you are all.

And essentially, you'll navigate to our Gadsby portfolio project where if you keep on scrolling notice,

we're successfully using this application.

This is just a showcase that when we work on our project, it doesn't mean that they're just theory.

You can use them in practice in this case or we're using strappy and Gadsby.

But since, of course, the functionality is react and JavaScript, we can use it in this project as

well.

So hopefully that makes sense.

And now, of course, I'm going to navigate back to my setup, Morgan, for the source and learn more

specifically, I'm looking for the app.

Just like I said, in order to make this interesting, I set up the API where we're refreshing jobs

just so we can make it as interesting.

But remember that you definitely can do it with the local data as well.

If you want to check out the API, just grab the URL, copy and paste and you'll notice that again,

we have a list of beautiful items, meaning they are not extremely nested.

It has just one level deep where I have the object.

And then of course, each object has the properties of the order and then of course the title and dates

and users.

So this is going to be an array of items that we display as far as well what we were doing on a job.

And we'll simply start by setting up our fetch functionality.

And then also probably we can the loading just in case.

So let's do it this way.

We have to project and I'm going to start by setting up some kind of state values.

So we're going to go here with loading and then set loading.

And that is equal to my years state and I'm looking for true.

So by default, loading will be true.

Then I would want to have the list of jobs that we're going to go with const jobs and then set jobs

as well.

Again, that is used state by default.

It's going to be an empty array.

And lastly, there's going to be a value property and you'll see why we need it for the time being.

Just add one.

So we go with value set value that is equal to, of course, the use state.

And then since I have theret and arrays are zero and I'll just pass in the zero, that just means that

I'm looking for that first item, then I'm going to repeat something that we have done already quite

a few times.

Let's come up with that function, Frege Jobs, just to make sure that we haven't forgotten how to use

it.

So we go with a sink, of course, and I'm going to use the traditional built in API.

So we go with CONSED and then the response is equal to await and then, of course, fetch.

Now I'm passing in the URL, the URL for the API and I would want to turn it into the JSON.

So I'm going to call this new jobs and that is equal to a wait on line response response and Jessan.

So that's the method we need to run.

And there's two things that I would want to do.

First, I would want to set jobs equal to my new jobs.

So the array that I'm getting from the API.

So instead of the empty array, of course, it's going to be an array of jobs.

And the second thing that loading to force.

So some jobs.

And let's pass in new jobs and then, of course, like I said, set loading, and that should be false.

Now, what is missing is, of course, the USA fact.

So essentially, when I would want to run this show, I'm going to go here with years of fact and then

I have my callback function and in here I'll just run it once of the app.

And so the initial ORENDER and we're going to go fetch and of course we're looking for jobs.

We invoke the function and of course, we would want to set up some basic returns as well.

So we're going to go here with a loading condition.

So if loading, then we're going to display one thing.

If not now, then we'll just display our jobs for the time being.

The second one, the default one will be jobs more here.

But then if we have loading so loading as true, then as far as the return.

We go with a section online in that section, we're going to add a hitting one with a text of lowering

loading here that online in here where we have the section.

Let's also add class names and we're going to have a section and a loading glasses.

So now what you'll notice is loading.

So while we're loading, of course, that's when we display this return.

However, once we get the jobs, then we just have this having two of jobs now in order to see whether

we successfully fetch the jobs, which we should, but just to double check above the if condition.

I'm going to go with counsel, OK, or, you know, why don't we just use the reactive tools?

My bad.

We don't need to control like anything.

Just head back.

I can open this up in the bigger browser window.

So localhost three thousand and I'm looking for inspect more specifically components.

And then in the app notice, of course, loading right now is false.

And the state has three values, so if I refresh, I'll see that state is an empty threat first and

then I successfully the list of jobs from my API.