1 00:00:00,050 --> 00:00:00,350 All right. 2 00:00:00,350 --> 00:00:08,060 And once we're familiar with the default behavior of HTML forms, now let's see how we can access those 3 00:00:08,060 --> 00:00:12,710 values in the loader and attach it to our request. 4 00:00:12,890 --> 00:00:22,430 And as a result, since we already have the server logic in place, we'll get back jobs based on whatever 5 00:00:22,430 --> 00:00:23,900 the values are in the form. 6 00:00:23,900 --> 00:00:29,060 So essentially we'll be able to filter the jobs that we're getting back. 7 00:00:29,180 --> 00:00:33,140 So for starters, let's navigate to all jobs then. 8 00:00:33,140 --> 00:00:39,710 Remember, when it comes to action as well as the loader, we have access to the giant object and in 9 00:00:39,710 --> 00:00:42,500 there we actually have the request. 10 00:00:42,770 --> 00:00:46,580 Now in the request there is a URL property. 11 00:00:46,580 --> 00:00:47,390 So. 12 00:00:48,000 --> 00:00:49,140 If you want, you can log it. 13 00:00:49,140 --> 00:00:57,600 But I can tell you right away that the property is there and we'll actually use the new URL constructor 14 00:00:57,600 --> 00:01:00,030 in order to grab all of those values. 15 00:01:00,210 --> 00:01:05,160 So basically we'll write a one liner and if you're interested. 16 00:01:05,780 --> 00:01:07,850 There are more details in the Readme. 17 00:01:07,940 --> 00:01:10,430 Essentially, the code is going to look like this. 18 00:01:10,460 --> 00:01:13,640 I'm going to create right now a params object. 19 00:01:13,910 --> 00:01:21,650 So essentially I want to gather all of the query params and first I'll run object from entries. 20 00:01:21,650 --> 00:01:25,700 Remember that essentially turns it into an object. 21 00:01:25,730 --> 00:01:27,800 I want to spread out new URLs. 22 00:01:27,800 --> 00:01:30,310 So this is going to be the constructor. 23 00:01:30,320 --> 00:01:40,100 I'll pass here the request url and then the new URL constructor has search params and then dot entries. 24 00:01:40,100 --> 00:01:46,340 So this one line of code turns all of the query params into an object. 25 00:01:46,340 --> 00:01:47,300 So let me. 26 00:01:47,930 --> 00:01:48,920 First showcase. 27 00:01:48,980 --> 00:01:50,740 Guess the request URL. 28 00:01:50,750 --> 00:01:53,870 So let me log two things over here. 29 00:01:53,870 --> 00:02:01,700 So back in the all jobs, first of all, let's look for request URL, then let's set up the logic and 30 00:02:01,700 --> 00:02:07,250 I also want to log those params since I think it's going to be super useful. 31 00:02:07,250 --> 00:02:09,320 So let's go here with params. 32 00:02:09,470 --> 00:02:18,320 Again, we start with object dot and then from entries just like we did with form data in here we want 33 00:02:18,320 --> 00:02:25,220 to create the array, we want to spread out new URL, then we pass in the req. 34 00:02:26,030 --> 00:02:28,550 Or I'm sorry, it's request URL. 35 00:02:28,850 --> 00:02:29,540 My bad. 36 00:02:29,570 --> 00:02:37,670 Then it has a property of search params and then it also has the entries method. 37 00:02:37,700 --> 00:02:39,230 So let's save it here. 38 00:02:39,230 --> 00:02:41,570 And now let's log the params. 39 00:02:42,360 --> 00:02:43,890 So we have two things. 40 00:02:43,920 --> 00:02:45,630 Let's navigate to the browser. 41 00:02:45,660 --> 00:02:48,000 Let's refresh for now. 42 00:02:48,000 --> 00:02:51,480 Again, we're not passing any query parameters. 43 00:02:51,510 --> 00:02:53,010 That's totally fine. 44 00:02:53,100 --> 00:02:55,680 Let's take a look at the console and we'll see two things. 45 00:02:55,680 --> 00:02:57,060 We'll see the URL. 46 00:02:57,090 --> 00:03:03,810 And again, at the moment there are no query parameters, but eventually they're going to be over here. 47 00:03:03,810 --> 00:03:05,580 And also we have this object. 48 00:03:05,580 --> 00:03:08,730 So at the moment our params is this object. 49 00:03:08,730 --> 00:03:11,220 So now let's actually submit the form. 50 00:03:11,220 --> 00:03:17,370 And remember at that point we make the request back to the same URL, but in this case we're attaching 51 00:03:17,370 --> 00:03:20,550 the form input values to our URL. 52 00:03:20,550 --> 00:03:23,460 So let's submit and check it out. 53 00:03:23,490 --> 00:03:32,370 Now, essentially I have way longer URL correct because now of course we're adding the params and take 54 00:03:32,370 --> 00:03:34,140 a look at our params object. 55 00:03:34,770 --> 00:03:39,600 It also has right of way all of the properties as well as the values. 56 00:03:39,630 --> 00:03:48,090 Now, what's also super, super cool with Axios, we can directly pass this object when we make the 57 00:03:48,090 --> 00:03:52,470 request and it will automatically set up everything for us. 58 00:03:52,500 --> 00:03:54,000 What am I talking about? 59 00:03:54,030 --> 00:03:57,330 Well, we can pass here the options object. 60 00:03:57,330 --> 00:03:58,560 And guess what? 61 00:03:58,590 --> 00:04:01,520 The property we're looking for is params. 62 00:04:01,530 --> 00:04:03,960 And again, you can hard code in here. 63 00:04:03,990 --> 00:04:11,130 You can say, Hey, listen, this is going to be my prom and this is going to be the value, or we can 64 00:04:11,130 --> 00:04:15,360 simply just set it equal to our params object. 65 00:04:15,360 --> 00:04:23,490 Basically we right away pass the same values to the Axios and what's super, super awesome When we make 66 00:04:23,490 --> 00:04:28,680 the request we'll actually take those query params along for a ride. 67 00:04:28,680 --> 00:04:32,280 And once we have this logic in place, now let's navigate back to the browser. 68 00:04:32,280 --> 00:04:38,890 I'll start everything from scratch, so I'm going to go to add job then back to all jobs. 69 00:04:38,890 --> 00:04:43,690 So at the moment again we don't have any query params, but take a look. 70 00:04:43,690 --> 00:04:49,780 Once I make this request and in this case I'm going to go for example with pending notice. 71 00:04:49,780 --> 00:04:54,040 I right away get only the jobs where the value is pending. 72 00:04:54,040 --> 00:04:54,460 Why? 73 00:04:54,460 --> 00:05:01,510 Well, because again we pass those query params now we grab them in our loader and you can probably 74 00:05:01,510 --> 00:05:06,220 already guess that if I take a look at the network tab and in this case, let me. 75 00:05:06,930 --> 00:05:08,430 Adhere full time as well. 76 00:05:08,430 --> 00:05:15,300 Now these values are going for a ride, so they're going to a server and essentially from the server 77 00:05:15,300 --> 00:05:20,250 we're getting this response where only the jobs with this job status and job type are returned. 78 00:05:20,250 --> 00:05:25,350 And therefore, if we take a look at our response in the browser, this is what we see. 79 00:05:25,350 --> 00:05:28,350 So this is how we can nicely access. 80 00:05:29,280 --> 00:05:33,980 And pass the values, the query parameter values to the Axios. 81 00:05:33,990 --> 00:05:41,520 And as a result, we make the request and we get very specific jobs where the values match whatever 82 00:05:41,520 --> 00:05:43,620 the user is searching for.