1 00:00:00,050 --> 00:00:00,430 All right. 2 00:00:00,440 --> 00:00:07,760 And up next, let's remove the temporary submit button and let's add a functionality where every time 3 00:00:07,760 --> 00:00:12,450 we change something in the input, we actually make a new request. 4 00:00:12,470 --> 00:00:18,770 So technically, you can say that we will make these inputs controlled inputs. 5 00:00:18,890 --> 00:00:23,560 And before we do that, let's quickly discuss why we have this link over here. 6 00:00:23,690 --> 00:00:26,810 So first of all, let's navigate back to not all jobs. 7 00:00:26,810 --> 00:00:31,910 Sorry, we're looking for search container, I believe over here. 8 00:00:31,910 --> 00:00:36,920 And remember, I mentioned that I'll talk about it later and later is now. 9 00:00:37,130 --> 00:00:39,720 So why do we have this link? 10 00:00:39,740 --> 00:00:41,130 Well, let's take a look. 11 00:00:41,150 --> 00:00:45,410 We have over here dashboard, then forward slash all jobs. 12 00:00:45,440 --> 00:00:48,590 Now do you see any query params over here? 13 00:00:49,100 --> 00:00:50,070 No. 14 00:00:50,090 --> 00:00:57,200 So what we're doing with this link, once we navigate back to all jobs, essentially we just clear out 15 00:00:57,200 --> 00:01:05,260 those query parameters and as a result, now we're not taking them for a ride when we make a request 16 00:01:05,269 --> 00:01:10,390 and as a result, we get back pretty much all of the jobs. 17 00:01:10,400 --> 00:01:11,960 So let's try it out. 18 00:01:11,990 --> 00:01:13,850 Now, of course, at the moment. 19 00:01:14,740 --> 00:01:17,250 These values are not going to change in the input. 20 00:01:17,260 --> 00:01:19,090 Again, this is something that's coming up. 21 00:01:19,090 --> 00:01:21,370 Please don't focus on these inputs right now. 22 00:01:21,370 --> 00:01:23,830 I want you to focus here on this URL. 23 00:01:23,860 --> 00:01:25,090 So check it out. 24 00:01:25,090 --> 00:01:26,170 I click on a link. 25 00:01:26,170 --> 00:01:30,310 Notice we navigate back, but we don't have any query params. 26 00:01:30,310 --> 00:01:37,630 And as a result, of course when we make the request, our Axios request we don't have those params 27 00:01:37,630 --> 00:01:38,260 as well. 28 00:01:38,830 --> 00:01:41,940 Let me just make sure that we're all on the same page. 29 00:01:41,950 --> 00:01:44,830 So again, I'm going to go with, for example, interview. 30 00:01:44,860 --> 00:01:45,880 I'll submit. 31 00:01:45,880 --> 00:01:48,850 So notice this is my URL. 32 00:01:48,950 --> 00:01:52,330 Essentially, this is what I'm requesting from the server. 33 00:01:52,330 --> 00:01:53,470 And now check it out. 34 00:01:53,470 --> 00:01:56,740 I make this request and now I only have the jobs. 35 00:01:56,740 --> 00:02:00,910 So of course as a result I get back all of the jobs. 36 00:02:00,940 --> 00:02:09,100 Hopefully that is clear and hopefully I clearly explained why we have over here this URL. 37 00:02:09,190 --> 00:02:09,789 Okay. 38 00:02:09,940 --> 00:02:18,400 Up next Now let's see how we can trigger the form submission every time we change something in the input. 39 00:02:18,400 --> 00:02:20,860 And what's really cool about the. 40 00:02:21,660 --> 00:02:23,040 React Router dom. 41 00:02:23,880 --> 00:02:30,540 We simply need to use this use submit and we need to add onchange on the input. 42 00:02:30,570 --> 00:02:34,590 Now, please keep in mind that of course we have form, row and form select. 43 00:02:34,590 --> 00:02:40,530 So first we'll need to attach the onchange on both of these components and then of course we'll need 44 00:02:40,530 --> 00:02:44,850 to swing back and add it to the component itself. 45 00:02:44,850 --> 00:02:53,610 So if I'm going to go over here to a form row and if I'll say on change and set it equal to a function 46 00:02:53,610 --> 00:02:55,710 just like we normally do in React. 47 00:02:55,710 --> 00:02:58,380 So again, there's nothing really. 48 00:02:59,030 --> 00:03:00,780 Unique about the syntax. 49 00:03:00,800 --> 00:03:08,870 What's unique is the fact that we can use that submit and we just need to pass in the current form. 50 00:03:08,880 --> 00:03:10,660 So what am I talking about over here? 51 00:03:10,670 --> 00:03:16,400 Again, this is pretty typical functionality where we go with Onchange and then we have over here this 52 00:03:16,400 --> 00:03:17,210 callback function. 53 00:03:17,210 --> 00:03:17,930 Correct. 54 00:03:17,930 --> 00:03:22,550 And before we set up this onchange in both of the components because of course at the moment it's not 55 00:03:22,550 --> 00:03:28,790 going to work regardless since it's not going to get invoked in any of those components. 56 00:03:28,790 --> 00:03:35,630 We want to go here with const submit is equal to use submit. 57 00:03:35,630 --> 00:03:42,050 So we invoke the hook, the use submit hook, and then in here in the onchange, remember we always 58 00:03:42,050 --> 00:03:49,640 have access to the current event and we just want to invoke submit and the functionality is following 59 00:03:49,850 --> 00:03:52,040 e then current. 60 00:03:52,880 --> 00:03:53,570 Target. 61 00:03:53,570 --> 00:03:55,430 And then we pass in the form. 62 00:03:55,430 --> 00:03:58,010 That's what the React router expects. 63 00:03:58,250 --> 00:04:02,280 Again, at the moment nothing is going to happen for very simple reason. 64 00:04:02,300 --> 00:04:06,950 We first need to navigate back to both of the components. 65 00:04:07,520 --> 00:04:11,720 So we're looking for for Mauro and for Mauro Select. 66 00:04:11,810 --> 00:04:17,920 And we want to add this as a prop since our actual input is sitting over here. 67 00:04:17,930 --> 00:04:26,240 So we want to go with Onchange is equal to Onchange since the value will pass in as a prop and the same 68 00:04:26,240 --> 00:04:29,510 deal is going to be in the form row select. 69 00:04:29,540 --> 00:04:31,070 So let's add a comma. 70 00:04:31,790 --> 00:04:33,200 Let's go with On Change. 71 00:04:33,290 --> 00:04:36,410 And then in here where I have the select. 72 00:04:36,500 --> 00:04:37,910 I also want to add it. 73 00:04:39,090 --> 00:04:41,190 Let's set it equal to on change. 74 00:04:41,200 --> 00:04:46,290 And now let's navigate back to our search container. 75 00:04:46,470 --> 00:04:52,020 And pretty much we just want to copy and paste and set it up on all of them. 76 00:04:52,730 --> 00:04:53,660 And you know what? 77 00:04:54,050 --> 00:04:58,310 Just so you don't think that I'm messing with you, I'll actually remove the submit button. 78 00:04:58,310 --> 00:05:01,940 Just so you don't think that there's some dark magic involved. 79 00:05:01,970 --> 00:05:03,410 So let me take this on change. 80 00:05:03,410 --> 00:05:06,710 And again, one by one, let's add it to form a row select. 81 00:05:06,710 --> 00:05:12,380 And yes, eventually at the end of this video, I will also change these default values because you'll 82 00:05:12,380 --> 00:05:14,200 see that there's a gotcha here. 83 00:05:14,210 --> 00:05:20,480 So on change for the job status on change is also going to be form row. 84 00:05:22,050 --> 00:05:26,560 Also for job type and then lastly for the sort as well. 85 00:05:26,580 --> 00:05:30,450 So now let's navigate back to the browser and let's test it out. 86 00:05:30,480 --> 00:05:37,410 So essentially I'm going to go here with pending and notice right away without me clicking on submit. 87 00:05:37,410 --> 00:05:44,130 Since there is no submit button, we make the request and I only get the jobs where the value is pending. 88 00:05:44,130 --> 00:05:48,470 Now also we can do of course the same with part time over here. 89 00:05:48,480 --> 00:05:50,190 So now the value is part time. 90 00:05:50,190 --> 00:05:53,520 And let's also test out our search. 91 00:05:53,520 --> 00:06:01,530 So in my case, I'm going to go with the B, So now I'm only looking for the jobs where there is B in 92 00:06:01,530 --> 00:06:04,200 the company value or the position. 93 00:06:04,200 --> 00:06:06,420 And lastly, here's what we want to do. 94 00:06:07,070 --> 00:06:15,500 We want to go to all jobs and essentially I want to pass down those params back to our component because 95 00:06:15,500 --> 00:06:19,190 I want to set those values as my default value. 96 00:06:19,310 --> 00:06:20,960 So how is that going to look like? 97 00:06:20,960 --> 00:06:25,280 Remember I said that eventually we will pass more things. 98 00:06:25,280 --> 00:06:30,770 That's why I'm setting this up as an object and essentially this is what we want to do right now. 99 00:06:30,770 --> 00:06:38,150 So in here I'm going to create a new property, I'll call it search values, and I'm going to spread 100 00:06:38,150 --> 00:06:39,440 out the params. 101 00:06:39,590 --> 00:06:41,780 Then let's keep on moving. 102 00:06:41,780 --> 00:06:48,980 We have this use loader data, so let's go here with search values and let's also access it. 103 00:06:49,190 --> 00:06:52,640 And then at the very end we also want to provide it. 104 00:06:52,640 --> 00:06:58,580 So we're going to go here with search values and now back in the search container. 105 00:06:59,320 --> 00:07:03,160 Of course we have the use all jobs context. 106 00:07:03,160 --> 00:07:06,700 So in my case, I'm going to do that above the submit. 107 00:07:06,730 --> 00:07:10,810 We're going to go over here with search values. 108 00:07:10,930 --> 00:07:14,530 Let's set it equal to use all jobs context. 109 00:07:14,530 --> 00:07:19,720 And you know, before we destructure, let me just see whether everything is correct. 110 00:07:19,720 --> 00:07:24,790 So now let's navigate back to the browser and I want to start from the scratch since I want to showcase 111 00:07:24,790 --> 00:07:25,360 something. 112 00:07:25,360 --> 00:07:29,860 So I'm going to go to add job, then back to all jobs. 113 00:07:29,860 --> 00:07:32,650 And now notice I make the request. 114 00:07:33,700 --> 00:07:38,200 So the value over here is going to be pending and I'm getting the correct jobs. 115 00:07:38,200 --> 00:07:39,850 So all of this is correct. 116 00:07:39,880 --> 00:07:46,360 However, once I refresh notice how job status is going to go back to all. 117 00:07:46,390 --> 00:07:47,140 Why? 118 00:07:47,170 --> 00:07:49,930 Well, because that's our default value. 119 00:07:49,960 --> 00:07:50,530 Correct. 120 00:07:50,560 --> 00:07:56,950 Even though in here I can nicely see that the actual value is pending and that's why we're going to 121 00:07:56,950 --> 00:07:57,850 navigate back. 122 00:07:57,850 --> 00:08:00,580 We can clearly see that we can access those values. 123 00:08:00,580 --> 00:08:06,400 And more specifically, we're looking for search job status. 124 00:08:07,220 --> 00:08:09,710 Then we also want to access job type. 125 00:08:10,390 --> 00:08:15,010 Also we want to look for sort and all of those are located in the search values. 126 00:08:15,190 --> 00:08:22,690 Then let's scroll down and instead of this hardcoded default value, I'll set this one equal to search. 127 00:08:22,810 --> 00:08:30,000 Then this one will be equal to job status and pretty much do the same thing for us to them. 128 00:08:30,010 --> 00:08:31,780 So let's keep on moving. 129 00:08:31,930 --> 00:08:36,340 When we have the default value, now we're going to go with job type. 130 00:08:36,340 --> 00:08:40,120 And then lastly, we also have a sort over here. 131 00:08:40,510 --> 00:08:43,990 Now let's navigate back to the browser and check it out. 132 00:08:43,990 --> 00:08:50,740 So if I go again with my famous pending, I'll get the pending jobs and if I refresh, notice how I 133 00:08:50,770 --> 00:08:54,210 nicely use the same value over here. 134 00:08:54,220 --> 00:09:01,300 So essentially we're just persisting this value between the page refreshes and with this in place, 135 00:09:01,300 --> 00:09:03,400 we can move on to the next step.