1 00:00:00,330 --> 00:00:07,330 OK, and in order to kick things off, we're going to navigate back to our people now. 2 00:00:07,350 --> 00:00:09,720 In this case, we're looking for project number six. 3 00:00:09,760 --> 00:00:15,870 So the tabs and we're going to have to stop the server first, so I'll stop the server. 4 00:00:15,900 --> 00:00:20,650 By the way, if you don't want to do two times today, you can also just type CD. 5 00:00:21,160 --> 00:00:25,710 And unfortunately, that is going to get you back to the road. 6 00:00:26,040 --> 00:00:27,300 So once you're on the road. 7 00:00:27,480 --> 00:00:30,590 Now, of course, we're going to go online. 8 00:00:30,600 --> 00:00:32,010 We're looking for the types. 9 00:00:32,010 --> 00:00:40,620 And more specifically, we're looking for a setup once you're here than we can run NPM install online 10 00:00:40,620 --> 00:00:50,130 right away and and start as a quick side note, if you want to see this particular project and action 11 00:00:50,850 --> 00:00:58,540 navigate to read me in a setup or final, whichever directory you're working in and just grab there 12 00:00:58,770 --> 00:00:59,570 you are all. 13 00:01:00,470 --> 00:01:08,790 And essentially, you'll navigate to our Gadsby portfolio project where if you keep on scrolling notice, 14 00:01:09,140 --> 00:01:12,920 we're successfully using this application. 15 00:01:13,190 --> 00:01:20,390 This is just a showcase that when we work on our project, it doesn't mean that they're just theory. 16 00:01:20,660 --> 00:01:25,970 You can use them in practice in this case or we're using strappy and Gadsby. 17 00:01:26,480 --> 00:01:33,200 But since, of course, the functionality is react and JavaScript, we can use it in this project as 18 00:01:33,200 --> 00:01:33,460 well. 19 00:01:33,980 --> 00:01:36,410 So hopefully that makes sense. 20 00:01:36,800 --> 00:01:43,520 And now, of course, I'm going to navigate back to my setup, Morgan, for the source and learn more 21 00:01:43,520 --> 00:01:45,500 specifically, I'm looking for the app. 22 00:01:45,500 --> 00:01:53,570 Just like I said, in order to make this interesting, I set up the API where we're refreshing jobs 23 00:01:53,870 --> 00:01:55,520 just so we can make it as interesting. 24 00:01:55,760 --> 00:01:59,800 But remember that you definitely can do it with the local data as well. 25 00:02:00,050 --> 00:02:05,600 If you want to check out the API, just grab the URL, copy and paste and you'll notice that again, 26 00:02:05,600 --> 00:02:12,470 we have a list of beautiful items, meaning they are not extremely nested. 27 00:02:12,710 --> 00:02:15,680 It has just one level deep where I have the object. 28 00:02:15,980 --> 00:02:24,020 And then of course, each object has the properties of the order and then of course the title and dates 29 00:02:24,020 --> 00:02:24,990 and users. 30 00:02:25,220 --> 00:02:33,740 So this is going to be an array of items that we display as far as well what we were doing on a job. 31 00:02:34,100 --> 00:02:38,660 And we'll simply start by setting up our fetch functionality. 32 00:02:39,850 --> 00:02:44,980 And then also probably we can the loading just in case. 33 00:02:45,550 --> 00:02:47,050 So let's do it this way. 34 00:02:47,110 --> 00:02:53,890 We have to project and I'm going to start by setting up some kind of state values. 35 00:02:54,250 --> 00:02:58,630 So we're going to go here with loading and then set loading. 36 00:02:59,200 --> 00:03:04,530 And that is equal to my years state and I'm looking for true. 37 00:03:04,780 --> 00:03:06,570 So by default, loading will be true. 38 00:03:07,000 --> 00:03:14,050 Then I would want to have the list of jobs that we're going to go with const jobs and then set jobs 39 00:03:14,050 --> 00:03:14,440 as well. 40 00:03:14,740 --> 00:03:16,840 Again, that is used state by default. 41 00:03:16,840 --> 00:03:18,620 It's going to be an empty array. 42 00:03:19,090 --> 00:03:25,200 And lastly, there's going to be a value property and you'll see why we need it for the time being. 43 00:03:25,210 --> 00:03:26,060 Just add one. 44 00:03:26,410 --> 00:03:34,570 So we go with value set value that is equal to, of course, the use state. 45 00:03:34,790 --> 00:03:41,830 And then since I have theret and arrays are zero and I'll just pass in the zero, that just means that 46 00:03:41,950 --> 00:03:48,010 I'm looking for that first item, then I'm going to repeat something that we have done already quite 47 00:03:48,010 --> 00:03:48,550 a few times. 48 00:03:49,620 --> 00:03:56,160 Let's come up with that function, Frege Jobs, just to make sure that we haven't forgotten how to use 49 00:03:56,160 --> 00:03:56,300 it. 50 00:03:56,610 --> 00:04:03,330 So we go with a sink, of course, and I'm going to use the traditional built in API. 51 00:04:03,330 --> 00:04:09,950 So we go with CONSED and then the response is equal to await and then, of course, fetch. 52 00:04:09,960 --> 00:04:17,280 Now I'm passing in the URL, the URL for the API and I would want to turn it into the JSON. 53 00:04:17,280 --> 00:04:26,700 So I'm going to call this new jobs and that is equal to a wait on line response response and Jessan. 54 00:04:27,120 --> 00:04:28,850 So that's the method we need to run. 55 00:04:29,130 --> 00:04:31,400 And there's two things that I would want to do. 56 00:04:31,410 --> 00:04:37,590 First, I would want to set jobs equal to my new jobs. 57 00:04:37,920 --> 00:04:40,710 So the array that I'm getting from the API. 58 00:04:40,980 --> 00:04:44,430 So instead of the empty array, of course, it's going to be an array of jobs. 59 00:04:44,760 --> 00:04:47,550 And the second thing that loading to force. 60 00:04:47,610 --> 00:04:48,750 So some jobs. 61 00:04:49,950 --> 00:04:57,330 And let's pass in new jobs and then, of course, like I said, set loading, and that should be false. 62 00:04:57,660 --> 00:04:59,970 Now, what is missing is, of course, the USA fact. 63 00:05:00,460 --> 00:05:07,230 So essentially, when I would want to run this show, I'm going to go here with years of fact and then 64 00:05:07,230 --> 00:05:12,900 I have my callback function and in here I'll just run it once of the app. 65 00:05:12,910 --> 00:05:20,100 And so the initial ORENDER and we're going to go fetch and of course we're looking for jobs. 66 00:05:20,100 --> 00:05:27,620 We invoke the function and of course, we would want to set up some basic returns as well. 67 00:05:28,140 --> 00:05:31,380 So we're going to go here with a loading condition. 68 00:05:31,680 --> 00:05:34,890 So if loading, then we're going to display one thing. 69 00:05:35,130 --> 00:05:39,810 If not now, then we'll just display our jobs for the time being. 70 00:05:39,810 --> 00:05:44,040 The second one, the default one will be jobs more here. 71 00:05:44,250 --> 00:05:49,350 But then if we have loading so loading as true, then as far as the return. 72 00:05:50,530 --> 00:06:01,350 We go with a section online in that section, we're going to add a hitting one with a text of lowering 73 00:06:01,490 --> 00:06:06,130 loading here that online in here where we have the section. 74 00:06:06,400 --> 00:06:13,370 Let's also add class names and we're going to have a section and a loading glasses. 75 00:06:13,770 --> 00:06:15,730 So now what you'll notice is loading. 76 00:06:16,120 --> 00:06:20,340 So while we're loading, of course, that's when we display this return. 77 00:06:20,560 --> 00:06:28,480 However, once we get the jobs, then we just have this having two of jobs now in order to see whether 78 00:06:28,480 --> 00:06:36,160 we successfully fetch the jobs, which we should, but just to double check above the if condition. 79 00:06:37,600 --> 00:06:42,730 I'm going to go with counsel, OK, or, you know, why don't we just use the reactive tools? 80 00:06:42,760 --> 00:06:43,230 My bad. 81 00:06:43,770 --> 00:06:45,250 We don't need to control like anything. 82 00:06:45,430 --> 00:06:46,630 Just head back. 83 00:06:47,150 --> 00:06:50,210 I can open this up in the bigger browser window. 84 00:06:50,560 --> 00:06:58,240 So localhost three thousand and I'm looking for inspect more specifically components. 85 00:06:58,600 --> 00:07:02,530 And then in the app notice, of course, loading right now is false. 86 00:07:03,520 --> 00:07:11,470 And the state has three values, so if I refresh, I'll see that state is an empty threat first and 87 00:07:11,470 --> 00:07:17,200 then I successfully the list of jobs from my API.