1 00:00:00,510 --> 00:00:07,950 Before we start setting up create job functionality, I also want to add clear all of our functionality. 2 00:00:08,400 --> 00:00:12,060 And with this one, pretty much set it back to default. 3 00:00:13,000 --> 00:00:16,600 And how it's going to look like, well, let's take a look at our read over here. 4 00:00:17,050 --> 00:00:18,640 So keep on scrolling. 5 00:00:19,120 --> 00:00:20,970 Have over here where values. 6 00:00:21,280 --> 00:00:29,140 First, we set up the action for one set of clear values function and here notice how we are dispatching 7 00:00:29,140 --> 00:00:29,860 the same action. 8 00:00:30,100 --> 00:00:33,640 We pass it down to a value and then in the reducer. 9 00:00:34,090 --> 00:00:36,250 I'll just set up the temporary state. 10 00:00:36,670 --> 00:00:41,470 And this is where I'm looking for all my job values from the state. 11 00:00:41,830 --> 00:00:49,300 So position company, job location, job type and status and also why you see here this is editing and 12 00:00:49,300 --> 00:00:50,250 at a job ready. 13 00:00:50,620 --> 00:00:51,670 Well, let's think about it. 14 00:00:51,670 --> 00:00:58,150 If the user is trying to edit the job and then at some point he or she decides that they're not going 15 00:00:58,150 --> 00:00:58,630 to do that. 16 00:00:59,020 --> 00:01:04,959 It kind of makes sense that we remove the is editing and add a job idea as well. 17 00:01:05,290 --> 00:01:11,320 So when we're setting back a default, that's exactly what I mean, we all centrally set it back to 18 00:01:11,320 --> 00:01:12,520 our default state. 19 00:01:13,400 --> 00:01:18,650 And once I have this one in place, so the temporary state, I'm just going to go down to that state. 20 00:01:19,040 --> 00:01:25,250 So get back all the state fires and then I'm going to spread out the initial state as well, which effectively 21 00:01:25,250 --> 00:01:32,120 in turn is going to do what it's going to provide values for all of these properties in the actual state. 22 00:01:32,720 --> 00:01:34,070 Hopefully, that makes sense. 23 00:01:34,370 --> 00:01:41,870 And one where we have ajob, we'll grab the function clear values and right after the submit button, 24 00:01:42,290 --> 00:01:43,640 we want to create another button. 25 00:01:44,000 --> 00:01:51,110 This is going to be a clear button as far as styles and when it comes to on click, yes, we will invoke 26 00:01:51,110 --> 00:01:51,860 clear values. 27 00:01:52,400 --> 00:01:53,180 But one gotcha. 28 00:01:53,190 --> 00:01:57,590 We need to keep in mind that this button is still within the form. 29 00:01:57,860 --> 00:01:59,540 And essentially, that means two things. 30 00:02:00,020 --> 00:02:01,960 First, when will click this button? 31 00:02:01,990 --> 00:02:05,540 We need to make sure that we access the event object. 32 00:02:06,140 --> 00:02:08,330 And essentially, we prevent the default. 33 00:02:08,990 --> 00:02:13,850 That's the first thing we need to do, because otherwise you'll have the page refresh that first gotcha 34 00:02:14,150 --> 00:02:15,230 and a second gotcha. 35 00:02:15,230 --> 00:02:21,620 But you need to keep in mind is the fact that location for this button matters if you place this button 36 00:02:21,920 --> 00:02:23,330 before the submit button. 37 00:02:23,540 --> 00:02:28,880 Effectively, when you click on Return Key or enter key, however you want to call it, essentially 38 00:02:28,880 --> 00:02:31,970 you'll run unless one instead of the submit. 39 00:02:32,000 --> 00:02:38,090 Even though even though you know our AGM, this one has the handle submit. 40 00:02:38,390 --> 00:02:44,120 Yes, I know it's interesting, but that essentially is how it works, at least while I was testing. 41 00:02:44,450 --> 00:02:46,790 So let's start actually working on this one. 42 00:02:47,330 --> 00:02:50,900 So first of all, we want to go to our actions. 43 00:02:51,380 --> 00:02:59,720 Ron, let's right away turn around and let's say clear and underscore values when we want to set up 44 00:02:59,720 --> 00:03:03,860 the imports in both places where again, we're going to go to app context. 45 00:03:05,430 --> 00:03:10,680 And somewhere here, let's say clear values right away. 46 00:03:10,710 --> 00:03:12,810 Copy and paste in the reducers wall. 47 00:03:14,020 --> 00:03:17,620 So that's in place as far as the functionality in the app context. 48 00:03:18,250 --> 00:03:22,000 Well, it's going to be a function that shows this practice, this value. 49 00:03:22,450 --> 00:03:27,940 So in my case, I'm going to place it right after 30 handle change where I'm going to go to college, 50 00:03:28,150 --> 00:03:31,000 then clear and then values. 51 00:03:31,450 --> 00:03:36,610 And it's not going to be looking for anything, any parameters or anything like that when just say this 52 00:03:36,610 --> 00:03:41,230 patch and then let's bask in the object here, let's say type. 53 00:03:41,470 --> 00:03:44,280 And now we want to pass in the clear values one. 54 00:03:44,820 --> 00:03:48,610 Let's go here with clear values or not clear alert. 55 00:03:48,610 --> 00:03:48,970 Sorry. 56 00:03:49,510 --> 00:03:51,760 Clear and values function. 57 00:03:52,330 --> 00:03:55,480 And then I think I'm going to go to reduce our first. 58 00:03:56,650 --> 00:04:01,270 So let's navigate through the reducer gun rules, set up our condition. 59 00:04:01,660 --> 00:04:07,090 And yes, I will copy for the virus from the state because I think it's going to be much faster. 60 00:04:07,450 --> 00:04:09,460 So let me copy and paste this one. 61 00:04:09,940 --> 00:04:14,110 And instead of handle change, we will look for clear values. 62 00:04:14,410 --> 00:04:15,760 That's step number one. 63 00:04:16,250 --> 00:04:19,839 Then as far as the return of turnout, let's just leave the state as it is. 64 00:04:20,200 --> 00:04:27,670 And I want to set up a temporary one off concert, and I'll call this initial and then state that is 65 00:04:27,670 --> 00:04:28,540 equal to an object. 66 00:04:28,540 --> 00:04:30,340 And now let me quickly. 67 00:04:31,290 --> 00:04:35,970 Swing back to the context and what powers am I looking for? 68 00:04:36,000 --> 00:04:40,560 Well, everything that has to do with jobs apart from the Irish. 69 00:04:40,890 --> 00:04:41,850 I really don't need them. 70 00:04:42,210 --> 00:04:45,480 I don't need job types or the status ones. 71 00:04:45,900 --> 00:04:49,530 So let me just take them and remove them in the producer. 72 00:04:49,890 --> 00:04:51,300 So copy these ones again. 73 00:04:51,300 --> 00:04:55,560 The reason why we're using editing because I want everything to go back to the default. 74 00:04:55,890 --> 00:05:02,280 If for some reason the user wants to clear the values, so let's go to the producer that's going to 75 00:05:02,280 --> 00:05:09,960 be on initial state and then is editing stage at a job company as well as the ID state. 76 00:05:10,320 --> 00:05:12,210 Now what about job location? 77 00:05:12,660 --> 00:05:16,890 Is it equal to use their location or now we have that power in a state? 78 00:05:17,520 --> 00:05:23,760 So of course, the value is in the actual state, and what we're looking for is state and that user 79 00:05:23,760 --> 00:05:24,360 location. 80 00:05:24,840 --> 00:05:26,230 So we won't be changing that. 81 00:05:26,700 --> 00:05:29,510 That one still stays the same as it is. 82 00:05:29,520 --> 00:05:36,930 We remove the or we don't need the job type options as well as status options, and we just save it. 83 00:05:37,470 --> 00:05:43,380 But before we can move on to a add job, I also want to spread out this one. 84 00:05:43,390 --> 00:05:45,810 So I'll say here initial state. 85 00:05:46,110 --> 00:05:48,630 Can you do a property by property or here? 86 00:05:48,630 --> 00:05:48,960 Yes. 87 00:05:49,830 --> 00:05:57,240 But I just find it a little bit easier to read than we want to navigate to our ad and jump over here 88 00:05:57,240 --> 00:05:58,950 and we want to go with the clear one. 89 00:05:59,460 --> 00:06:04,710 And this is going to be the case where, yes, I will show you what happens if the positioning changes. 90 00:06:05,050 --> 00:06:08,010 So first, let's go here with clear and non values. 91 00:06:08,010 --> 00:06:08,970 That's what we're looking for. 92 00:06:09,270 --> 00:06:10,710 And then let's set up that button. 93 00:06:11,260 --> 00:06:12,420 Let's keep on scrolling. 94 00:06:12,420 --> 00:06:14,520 Let's keep on scrolling over here. 95 00:06:14,640 --> 00:06:15,530 So have the button. 96 00:06:15,540 --> 00:06:16,320 Okay, beautiful. 97 00:06:16,740 --> 00:06:21,750 Then let's go with our button element that's out of class names. 98 00:06:22,230 --> 00:06:23,010 So I'm going to go here. 99 00:06:23,010 --> 00:06:25,250 Began 10 block. 100 00:06:25,260 --> 00:06:27,000 I'm on the clear button as well. 101 00:06:27,500 --> 00:06:29,670 One, we want to set up some kind of text. 102 00:06:29,670 --> 00:06:31,180 In my case, that is going to be clear. 103 00:06:31,650 --> 00:06:37,380 And in this case, I'm going to go with on click and first, let's just test that out. 104 00:06:37,470 --> 00:06:40,290 What happens if we don't prevent default? 105 00:06:40,620 --> 00:06:43,510 So that's the first thing that I want to showcase. 106 00:06:43,530 --> 00:06:45,570 And essentially, let's just run the log. 107 00:06:46,810 --> 00:06:51,940 And here, let's say hello and say it and navigate to the browser. 108 00:06:52,270 --> 00:06:53,200 And let's try out. 109 00:06:53,410 --> 00:06:59,020 And notice the moment we'll click it will refresh the page and will see the halo for split-second. 110 00:06:59,770 --> 00:07:04,480 But effectively, since we are refreshing the page, it's going to be gone again. 111 00:07:04,480 --> 00:07:05,220 Why is that happening? 112 00:07:05,230 --> 00:07:06,730 Well, because the buttons in the form. 113 00:07:07,060 --> 00:07:08,410 So the moment you click it, yes. 114 00:07:08,740 --> 00:07:13,420 If you don't prevent the event, you'll be submitting the form, correct? 115 00:07:13,430 --> 00:07:18,790 So we'll go here with event first and then let's go with present and then default. 116 00:07:18,880 --> 00:07:20,020 So that's the first step. 117 00:07:20,470 --> 00:07:27,100 Now, the second thing that I want to showcase is this Yes, of course, we will run clear values. 118 00:07:27,490 --> 00:07:30,400 I mean, that's the entire point for this button. 119 00:07:30,880 --> 00:07:38,470 But let's first test that out the way it is, and then I'll showcase what happens if we do the opposite 120 00:07:38,470 --> 00:07:38,750 way. 121 00:07:38,830 --> 00:07:41,380 If we place this button in front of the other one. 122 00:07:41,710 --> 00:07:45,340 So let's go over here and let's say position something. 123 00:07:46,220 --> 00:07:49,400 And then I'm just going to copy and paste this, I was just search faster. 124 00:07:49,820 --> 00:07:52,190 So let me pass all of them here like so. 125 00:07:52,520 --> 00:07:56,260 And then once we clear, check it out now, the functionality works. 126 00:07:56,270 --> 00:07:57,260 Everything is beautiful. 127 00:07:57,650 --> 00:08:07,520 But if I'm going to go over here and let's say I'm going to move it above the submit button, and instead 128 00:08:07,520 --> 00:08:13,670 of clicking on the actual button, you'll need to press return or the anarchy. 129 00:08:14,000 --> 00:08:16,100 And now let me copy and paste the same values. 130 00:08:16,510 --> 00:08:18,230 And now notice something in again. 131 00:08:18,410 --> 00:08:20,120 What you're looking for is the anarchy. 132 00:08:20,600 --> 00:08:24,830 You're not clicking on the actual button, you're submitting the form and the moment you'll do that. 133 00:08:24,890 --> 00:08:29,170 Notice how we don't see anything in a console, but there's also no law. 134 00:08:29,780 --> 00:08:36,470 So essentially, if this is going to be sitting before to submit effectively, yes, we'll be running 135 00:08:36,470 --> 00:08:38,840 the clear one, but not the submit one. 136 00:08:39,140 --> 00:08:40,309 And that's not what I want. 137 00:08:40,309 --> 00:08:49,160 And therefore we'll go back and change it around where first we take a very clear one and then place 138 00:08:49,160 --> 00:08:50,870 it at the very end. 139 00:08:51,290 --> 00:08:57,230 And then the second thing is, let's copy those values again, and now we should see the create job 140 00:08:57,230 --> 00:08:58,270 one in a console. 141 00:08:58,280 --> 00:09:05,390 If I just press return and only if I want to clear everything, then I press the button and then the 142 00:09:05,390 --> 00:09:06,620 functionality is going to work.