1 00:00:00,170 --> 00:00:00,590 All right. 2 00:00:00,590 --> 00:00:04,720 And up next, let's start working on the Add job functionality. 3 00:00:04,730 --> 00:00:09,050 And essentially, it's just going to be a form with few inputs. 4 00:00:09,050 --> 00:00:11,740 Once we provide the inputs, we can submit. 5 00:00:11,750 --> 00:00:18,110 And of course, we will make a request back to our server and create a job. 6 00:00:18,140 --> 00:00:20,450 First, let me navigate back to the project. 7 00:00:20,450 --> 00:00:27,110 We are looking for the Readme and this is the case where I will copy and paste from the Readme the imports. 8 00:00:27,110 --> 00:00:30,740 I really don't see the point of setting it together line by line. 9 00:00:30,770 --> 00:00:36,140 Now of course I will explain what the imports are doing as we start working on the functionality. 10 00:00:36,140 --> 00:00:44,990 So let me take all of this code then I want to navigate to my page more specifically the Add job page. 11 00:00:44,990 --> 00:00:47,210 So at the moment we have no imports. 12 00:00:47,210 --> 00:00:49,130 Let's set it up over here. 13 00:00:49,280 --> 00:00:52,070 And essentially we're looking for form row. 14 00:00:52,070 --> 00:00:58,010 So remember this is where we have the div with the input as well as the label. 15 00:00:58,040 --> 00:01:00,960 Then this is the wrapper and as a side note. 16 00:01:01,730 --> 00:01:08,330 If you take a look at the project, you'll notice that there are quite a few pages that use the form 17 00:01:08,330 --> 00:01:09,390 with the inputs. 18 00:01:09,410 --> 00:01:13,400 And essentially I just combined the layout in one page. 19 00:01:13,400 --> 00:01:18,980 So this is going to be the case where again, we'll set up this wrapper and then we'll reuse it in multiple 20 00:01:18,980 --> 00:01:19,730 places. 21 00:01:19,910 --> 00:01:26,480 Then we have this use outlet context and with the help of this hook, we'll actually access the user 22 00:01:26,480 --> 00:01:29,840 value which we provided here in the outlet. 23 00:01:29,930 --> 00:01:34,760 More specifically, in the context and as far as the value we're going to be looking for the user. 24 00:01:34,880 --> 00:01:39,590 Then we have job status and job type, and this is coming from the constants. 25 00:01:39,590 --> 00:01:46,580 So when we were setting up our job model in the process, we created those constants and we also used 26 00:01:46,580 --> 00:01:48,230 them in the validation. 27 00:01:48,410 --> 00:01:53,780 And this is the case where we'll also set them up on the front end, because if you take a look at our 28 00:01:53,780 --> 00:02:00,350 logic, essentially when it comes to job status and job type notice, it's going to be a select input 29 00:02:00,380 --> 00:02:02,490 with predefined values. 30 00:02:02,490 --> 00:02:07,770 And since we already have those values in the utils, well, we can nicely reuse it. 31 00:02:07,980 --> 00:02:13,230 Then we have form component which will allow us to use the action. 32 00:02:13,410 --> 00:02:15,270 Also use navigation. 33 00:02:15,980 --> 00:02:21,980 Because we want to check the state more specifically the submitting state, and also a redirect, because 34 00:02:21,980 --> 00:02:26,900 once we submit the form, we want to navigate away to a get all jobs page. 35 00:02:26,990 --> 00:02:30,720 Also a nice toast and a custom fetch. 36 00:02:30,740 --> 00:02:35,210 Now, as far as the functionality, first let's start by grabbing this user. 37 00:02:35,240 --> 00:02:36,660 Again, how do I know that it's there? 38 00:02:36,680 --> 00:02:43,430 Well, because we passed it a few videos ago and in order to access it, we simply want to use use outlet 39 00:02:43,430 --> 00:02:44,150 context. 40 00:02:44,180 --> 00:02:49,220 And I know that I already mentioned this before, but please keep in mind what's really, really, really, 41 00:02:49,220 --> 00:02:50,360 really nifty. 42 00:02:50,600 --> 00:02:52,880 We just need to use this context. 43 00:02:52,880 --> 00:02:57,060 Prop on the outlet, provide the value and we're good to go. 44 00:02:57,080 --> 00:03:01,130 So we don't have to set up a separate context. 45 00:03:01,160 --> 00:03:02,540 This is provided. 46 00:03:03,060 --> 00:03:08,520 By default in React Router six, the latest version more precise. 47 00:03:08,760 --> 00:03:11,800 And then let's set up the navigation. 48 00:03:11,820 --> 00:03:16,080 So we're looking for navigation that is equal to use navigation. 49 00:03:16,080 --> 00:03:22,050 So again, I'm just checking for that state and I want to nicely grab the is submitting. 50 00:03:23,140 --> 00:03:30,160 Basically I'll set up the value and that is going to be equal to navigation state and whether it's equal 51 00:03:30,160 --> 00:03:31,810 to submitting. 52 00:03:32,290 --> 00:03:37,210 And as far as the return, let's wrap everything in our wrapper. 53 00:03:38,010 --> 00:03:39,510 So that's the first step. 54 00:03:39,540 --> 00:03:41,790 Then we want to create the form. 55 00:03:41,820 --> 00:03:44,370 The method is going to be post, correct. 56 00:03:44,400 --> 00:03:48,600 We're going to be creating a resource on the server, more specifically a job. 57 00:03:48,720 --> 00:03:51,930 As far as the class name, I'm going to go here with form. 58 00:03:52,970 --> 00:03:57,440 Then instead of the form, Let's start by setting up some kind of title. 59 00:03:57,470 --> 00:04:00,140 So heading for class name will be form. 60 00:04:01,070 --> 00:04:02,390 Title on here. 61 00:04:02,390 --> 00:04:09,350 Basically, I'm just going to go with ad job, but we want to set up a Div with a class of form center. 62 00:04:09,620 --> 00:04:17,899 And in here for now, let's set up three form rows for position, company and job location. 63 00:04:18,620 --> 00:04:20,300 As well as the submit button. 64 00:04:20,300 --> 00:04:26,210 And then in the following video, we'll set up the first select and then we'll create another component 65 00:04:26,210 --> 00:04:28,370 which is going to be very similar to Form Row. 66 00:04:28,400 --> 00:04:32,070 It's just going to be for the select input. 67 00:04:32,090 --> 00:04:36,380 So let's start, I guess by just grabbing the form row. 68 00:04:36,410 --> 00:04:37,400 That's my component. 69 00:04:37,400 --> 00:04:41,210 And then remember, we just need to set up some kind of values. 70 00:04:41,210 --> 00:04:45,410 And if you want, of course you can also provide here a default value. 71 00:04:45,410 --> 00:04:48,260 But I think I'm just going to type it in the browser. 72 00:04:48,260 --> 00:04:51,410 And the most important part of course, is the name. 73 00:04:51,410 --> 00:04:57,650 So make sure that you provide the name here and provide the value of position because remember, that's 74 00:04:57,650 --> 00:04:59,240 what the server is looking for. 75 00:04:59,240 --> 00:05:04,430 So default value, this is totally up to you if you want to save on typing, of course. 76 00:05:05,090 --> 00:05:06,350 You can do it here as well. 77 00:05:06,350 --> 00:05:11,090 But in my case, I'm just going to skip it and then the next one is going to be company. 78 00:05:12,320 --> 00:05:15,050 And then last one is the job location. 79 00:05:15,050 --> 00:05:16,180 And here's the kicker. 80 00:05:16,190 --> 00:05:21,320 I want to use the user's location because it kind of makes sense. 81 00:05:21,350 --> 00:05:27,500 If the user has applied for the job, most likely that job is in the area. 82 00:05:27,530 --> 00:05:29,230 Now, of course, we can change this around. 83 00:05:29,240 --> 00:05:31,280 This is just going to be a default value. 84 00:05:31,460 --> 00:05:36,350 So, for example, if the job is in the neighboring city, then you can always type it. 85 00:05:36,350 --> 00:05:41,700 But in my opinion, it just saves a little bit of time for the user. 86 00:05:41,720 --> 00:05:43,850 So let's go over here with form row. 87 00:05:43,880 --> 00:05:45,890 Type is also going to be. 88 00:05:46,570 --> 00:05:48,850 Text over here and then. 89 00:05:49,450 --> 00:05:54,460 Since I have here a job location, I'll set up the label text. 90 00:05:55,990 --> 00:05:57,340 So job location. 91 00:05:57,340 --> 00:05:59,470 Then we have the actual name. 92 00:05:59,500 --> 00:06:02,230 Make sure this is camel case. 93 00:06:02,530 --> 00:06:04,180 So job, location. 94 00:06:04,180 --> 00:06:08,560 And then like I said, as far as the default value, I'll actually. 95 00:06:09,380 --> 00:06:12,470 Go with user and then location. 96 00:06:12,470 --> 00:06:15,030 So I'll use users location. 97 00:06:15,050 --> 00:06:19,970 Then still within this div we want to set up the submit button. 98 00:06:19,970 --> 00:06:22,460 So here we're going to go with button. 99 00:06:22,670 --> 00:06:33,260 Then type is going to be equal to submit, then class name, BTN, BTN hyphen block and then form BTN. 100 00:06:33,260 --> 00:06:38,750 So another class and basically we want to disable it if we are submitting. 101 00:06:38,750 --> 00:06:43,640 So let's go here with disabled and let's set it equal to our variable. 102 00:06:43,640 --> 00:06:50,450 So is submitting just like we had the functionality in the login as well as the register. 103 00:06:50,660 --> 00:06:51,740 And guess what? 104 00:06:52,530 --> 00:06:57,820 I also want to control the text inside of the button with the help of this variable. 105 00:06:57,840 --> 00:06:59,670 So let's set up over here. 106 00:07:00,450 --> 00:07:04,230 Our ternary operator and I'm just going to say submitting. 107 00:07:05,580 --> 00:07:07,350 And submit. 108 00:07:07,620 --> 00:07:09,960 So let's see what we've got. 109 00:07:10,260 --> 00:07:11,910 Going to navigate to the browser. 110 00:07:11,940 --> 00:07:12,990 This is all jobs. 111 00:07:12,990 --> 00:07:15,600 So this is where we're going to navigate after that. 112 00:07:15,600 --> 00:07:22,290 And when we take a look at the Add job at this point, we should have the position company as well as 113 00:07:22,290 --> 00:07:23,430 the job location. 114 00:07:23,430 --> 00:07:26,780 And since for John I have here Earth. 115 00:07:26,790 --> 00:07:29,550 That's why of course, we're using that value. 116 00:07:29,550 --> 00:07:33,780 And with this in place we can set up the select input.