1 00:00:00,410 --> 00:00:05,060 And before we set up all the jobs page, let's quickly recall the request we're going to be working 2 00:00:05,060 --> 00:00:05,520 with. 3 00:00:05,540 --> 00:00:08,380 So the URL is going to be forward slash jobs. 4 00:00:08,390 --> 00:00:09,860 It's going to be a get request. 5 00:00:09,860 --> 00:00:12,740 So we're not going to send any data to the server. 6 00:00:12,830 --> 00:00:14,720 And if we're successful. 7 00:00:15,220 --> 00:00:19,930 We're going to get back the object with the jobs property, which is going to be an array. 8 00:00:20,110 --> 00:00:25,630 And effectively in that array, we'll see all of the jobs that belong to the specific user. 9 00:00:25,660 --> 00:00:31,540 Now, if there's some kind of error, then of course, we're going to get back the error response. 10 00:00:31,810 --> 00:00:32,290 All right. 11 00:00:32,290 --> 00:00:37,660 And up next, let's work on all jobs functionality and let's start with the structure. 12 00:00:37,690 --> 00:00:42,980 So essentially, we first want to set up the components we're going to use. 13 00:00:43,000 --> 00:00:50,800 And also, we want to grab the data in the loader and then we'll set up the context in here and then 14 00:00:50,800 --> 00:00:53,480 we'll start rendering the jobs. 15 00:00:53,500 --> 00:00:56,590 And for starters, we want to create two more components. 16 00:00:56,590 --> 00:01:03,130 So we're looking for source components and one is going to be a jobs container. 17 00:01:03,130 --> 00:01:05,590 And second one is going to be the search container. 18 00:01:05,610 --> 00:01:09,830 So I'll show you in a second how they're going to look like in the complete project. 19 00:01:09,850 --> 00:01:12,880 For now, let's just go with Jobs container. 20 00:01:13,420 --> 00:01:16,340 And I think I'm going to go here with heading to. 21 00:01:17,360 --> 00:01:20,140 On the same deal here with the search container. 22 00:01:21,420 --> 00:01:24,330 We want to make sure that we're exporting them right away. 23 00:01:25,040 --> 00:01:29,330 So let's right away navigate to index. 24 00:01:29,330 --> 00:01:31,970 We want to copy and paste. 25 00:01:31,970 --> 00:01:34,100 First one is going to be the jobs. 26 00:01:35,180 --> 00:01:35,960 Container. 27 00:01:37,880 --> 00:01:40,330 And then the second one will be that search one. 28 00:01:42,520 --> 00:01:43,300 Container. 29 00:01:45,030 --> 00:01:51,180 And essentially, if you take a look at the complete application, you'll notice that in all jobs here, 30 00:01:51,180 --> 00:01:52,500 I have the search form. 31 00:01:52,500 --> 00:01:55,020 So that's going to be my search container. 32 00:01:55,020 --> 00:01:57,990 And then I also display all of the jobs. 33 00:01:57,990 --> 00:02:01,710 And that is going to happen in the jobs container. 34 00:02:01,740 --> 00:02:03,930 That's why we have those two components. 35 00:02:04,050 --> 00:02:06,900 After that, I want to take a look at the Readme. 36 00:02:06,930 --> 00:02:14,520 And yes, essentially, again, I'll grab all of the imports since I don't see the point of creating 37 00:02:14,520 --> 00:02:15,770 it together. 38 00:02:15,780 --> 00:02:18,420 So now we want to navigate to the pages. 39 00:02:18,450 --> 00:02:21,210 We're looking for all jobs page. 40 00:02:21,210 --> 00:02:23,460 Let's set up the imports first. 41 00:02:24,140 --> 00:02:26,020 And I guess let's do the same thing. 42 00:02:26,030 --> 00:02:30,550 Let's set up the loader, Let's import it in the app. 43 00:02:30,560 --> 00:02:36,830 JS Set it equal to a loader property and then we'll add rest of the functionality. 44 00:02:36,830 --> 00:02:44,750 So export const loader and it's going to be equal to async since we'll make a request back to our server. 45 00:02:45,020 --> 00:02:48,740 And essentially in here let's just return null. 46 00:02:49,460 --> 00:02:52,250 Just so we don't get some weird bugs. 47 00:02:52,550 --> 00:02:54,880 Then we want to navigate to App.jsx. 48 00:02:55,610 --> 00:02:58,400 And again, we're looking for the loader. 49 00:02:58,550 --> 00:02:59,300 So you know what? 50 00:02:59,300 --> 00:03:03,140 Let me copy this one so I don't have to change that many things around. 51 00:03:03,290 --> 00:03:06,560 And we're looking for all jobs. 52 00:03:06,560 --> 00:03:09,080 Loader I guess let's call it that. 53 00:03:09,080 --> 00:03:11,840 So all jobs and loader. 54 00:03:13,150 --> 00:03:16,690 And of course, it's coming from the old jobs page now. 55 00:03:17,530 --> 00:03:19,660 So let's find it over here then. 56 00:03:19,660 --> 00:03:20,740 Let's keep on scrolling. 57 00:03:20,740 --> 00:03:23,170 And we're looking for our route. 58 00:03:23,350 --> 00:03:31,750 So over here we want to go with Loader and we want to set it equal to our all jobs and loader. 59 00:03:31,840 --> 00:03:32,710 Okay, good. 60 00:03:32,740 --> 00:03:34,910 And now let's set up the functionality. 61 00:03:34,930 --> 00:03:37,810 So in the loader, what is the first thing that I want to do? 62 00:03:37,990 --> 00:03:43,600 Well, I want to go with my try and catch since I'll have some asynchronous functionality. 63 00:03:43,600 --> 00:03:48,790 And then remember, we're getting back an object and in there we'll have a data property. 64 00:03:48,940 --> 00:03:53,440 And in that data property we'll have an array of jobs. 65 00:03:53,440 --> 00:04:02,470 So let's start over here by grabbing the data, then await, then custom fetch dot get and remember 66 00:04:02,470 --> 00:04:03,370 the URL. 67 00:04:03,370 --> 00:04:05,230 In this case it is jobs. 68 00:04:05,260 --> 00:04:09,940 Now I'll right away return an object with the data property. 69 00:04:09,940 --> 00:04:13,720 And the reason for that is because eventually there's going to be more logic. 70 00:04:13,720 --> 00:04:21,740 So essentially we will add our search values to the params and then we'll destructure them back in the 71 00:04:21,740 --> 00:04:22,400 loader. 72 00:04:22,490 --> 00:04:24,710 And if this sounds funky, don't worry. 73 00:04:25,280 --> 00:04:27,000 Of course, eventually we'll get there. 74 00:04:27,020 --> 00:04:28,100 I'm just telling you that. 75 00:04:28,100 --> 00:04:32,330 Yes, of course you can go here with data, but since I know that I'm going to be returning an object 76 00:04:32,330 --> 00:04:36,200 with more values, I'll right away set it up over here. 77 00:04:36,350 --> 00:04:40,820 And yes, at the moment, I fully understand technically this is an overkill. 78 00:04:41,060 --> 00:04:43,130 And then we want to go with that toast. 79 00:04:43,130 --> 00:04:46,760 So let's set up toast error. 80 00:04:46,760 --> 00:04:50,750 So if there's some kind of error, we also want to display that. 81 00:04:50,750 --> 00:04:53,510 So let's go with error then. 82 00:04:53,510 --> 00:04:55,850 Question mark, then Dot. 83 00:04:56,650 --> 00:04:58,570 Response dot or I'm sorry. 84 00:04:58,590 --> 00:05:00,930 Question mark, Dot data. 85 00:05:00,960 --> 00:05:04,070 Question mark, dot and then message. 86 00:05:04,080 --> 00:05:08,760 And then, of course, we want to return the error, if there is one. 87 00:05:09,520 --> 00:05:12,640 Then let's remove that null so we don't need that. 88 00:05:12,640 --> 00:05:16,780 And then in all jobs, how we can access this data? 89 00:05:16,960 --> 00:05:20,290 Well, we have this use loader data, correct our hook. 90 00:05:20,410 --> 00:05:21,760 So let's try it out. 91 00:05:21,760 --> 00:05:23,650 I'm going to go with const data. 92 00:05:24,650 --> 00:05:28,020 And we'll set it equal to use loader data. 93 00:05:28,040 --> 00:05:29,360 We are going to invoke it. 94 00:05:29,360 --> 00:05:32,270 And then I want to set up both of those components. 95 00:05:32,320 --> 00:05:36,120 The jobs container as well as the search container. 96 00:05:36,140 --> 00:05:42,530 Now, since I have two components and I want to essentially have one return, I'm going to go with React 97 00:05:42,530 --> 00:05:46,040 Fragment and we're going to set up the search container. 98 00:05:46,070 --> 00:05:51,110 And as I note, we're going to set up this component pretty much towards the end of the project. 99 00:05:51,110 --> 00:05:54,630 And then we also want to go with Jobs Container. 100 00:05:54,650 --> 00:05:57,590 And now let's take a look at our project again. 101 00:05:57,590 --> 00:05:59,090 Let me log in one more time. 102 00:06:00,070 --> 00:06:01,300 Let's submit over here. 103 00:06:01,300 --> 00:06:03,060 We're looking for all jobs. 104 00:06:03,070 --> 00:06:05,620 Like I said, we're just going to have some headings. 105 00:06:05,620 --> 00:06:07,000 That's not what I'm interested. 106 00:06:07,000 --> 00:06:10,540 I want to go to inspect, then console and check it out. 107 00:06:10,540 --> 00:06:11,170 So. 108 00:06:12,120 --> 00:06:13,830 Theta is going to be an object. 109 00:06:13,830 --> 00:06:17,310 And in there I'll have the property of jobs. 110 00:06:17,310 --> 00:06:21,090 And jobs is actually an array of my jobs. 111 00:06:21,090 --> 00:06:28,110 And then each job is represented with these properties and with this in place now we can move on to 112 00:06:28,110 --> 00:06:29,310 the next step.