1 00:00:00,390 --> 00:00:01,420 Not bad, not bad. 2 00:00:01,590 --> 00:00:08,700 We can get some default movies, meaning we have some kind of query that has the string and of course, 3 00:00:08,700 --> 00:00:14,790 we can fetch for those movies now because we would want to make are dynamic where we have the input 4 00:00:14,790 --> 00:00:15,150 form. 5 00:00:15,510 --> 00:00:20,370 And as we're typing, we're changing the value in the context. 6 00:00:20,610 --> 00:00:22,260 So we're changing the square eviler. 7 00:00:22,530 --> 00:00:27,380 And as we're changing the value, remember, we are querying for the movies. 8 00:00:27,420 --> 00:00:30,540 Correct, because we have our use of independent. 9 00:00:30,690 --> 00:00:31,010 All right. 10 00:00:31,350 --> 00:00:32,130 I have a query. 11 00:00:32,520 --> 00:00:38,010 So every time this will change, I'll fetch for new movies with the same end point. 12 00:00:38,340 --> 00:00:41,150 Just query, of course, is going to be different. 13 00:00:41,640 --> 00:00:45,810 So I'll change this back to my movie, my Batman movie. 14 00:00:46,230 --> 00:00:50,510 And of course, I would want to navigate to the search component. 15 00:00:51,000 --> 00:00:55,680 We open up the sidebar and we're looking for the search for the moment. 16 00:00:55,860 --> 00:01:02,530 We just have the hook imported U.S. global context, as well as the having to do with search form. 17 00:01:02,880 --> 00:01:06,030 Now, what I'm actually looking for from the global context. 18 00:01:06,150 --> 00:01:09,120 Well, in the context, I have query. 19 00:01:10,090 --> 00:01:16,600 And I would want to set that query to be my input value, then I also would want some query because 20 00:01:16,600 --> 00:01:20,150 as I'm typing, of course, I'm going to have my own change. 21 00:01:20,410 --> 00:01:22,550 So this is going to be controlled input. 22 00:01:22,700 --> 00:01:29,760 And then as I'm typing, of course, I'll set the value for the query equal to whenever I'm typing. 23 00:01:30,160 --> 00:01:37,450 And the last thing is going to be error, because you'll notice in complete application that I'm displaying 24 00:01:37,450 --> 00:01:43,510 errors over here because I just thought that it wouldn't look very good if I have to search form and 25 00:01:43,510 --> 00:01:46,980 then if I cannot find the movies, then I'm going to go back to this text. 26 00:01:47,440 --> 00:01:51,550 So I'm still displaying those old movies that were successful. 27 00:01:52,060 --> 00:01:56,920 But if there is an error, there's going to be right below the input. 28 00:01:57,400 --> 00:02:03,560 And this is going to be dynamic where we'll display exactly what comes back from the API. 29 00:02:04,330 --> 00:02:06,760 So now, of course, let's navigate through our search form. 30 00:02:07,210 --> 00:02:11,830 And once we have covered the basics, what we're looking for, we're going to go with query, we're 31 00:02:11,830 --> 00:02:15,310 going to go with that query and we're going to go with error. 32 00:02:15,670 --> 00:02:19,830 So those are the three things we're looking for, a service equal to my global context. 33 00:02:19,840 --> 00:02:21,220 Of course, I will invoke it. 34 00:02:21,550 --> 00:02:27,160 And where I have the heading to this will become my form, the class name here. 35 00:02:27,460 --> 00:02:33,140 And we're going to go with search ununiformed and all right away set up on submit. 36 00:02:33,640 --> 00:02:35,310 Now, why am I sitting this on? 37 00:02:35,350 --> 00:02:43,390 Submit is simply because if the user presses enter button, then of course I wouldn't want to refresh 38 00:02:43,390 --> 00:02:43,870 the page. 39 00:02:44,220 --> 00:02:51,130 That's why I will go on submit and then we'll have our error function and we'll be looking for event 40 00:02:51,130 --> 00:02:54,010 object and then event prevent default. 41 00:02:54,130 --> 00:02:58,480 We invoke it and that way we avoid that scenario again. 42 00:02:58,720 --> 00:03:01,830 I'm just skipping ahead because we have covered this already before. 43 00:03:02,290 --> 00:03:07,210 So I just want to wait in line function and I'm in good shape then. 44 00:03:08,160 --> 00:03:15,740 Instead of the forum we're going to go with heading to and there will have some kind of tax, so inside 45 00:03:15,740 --> 00:03:23,170 of the form, let's say here heading to online, as far as the tax, I'm going to go search online movies, 46 00:03:23,180 --> 00:03:26,300 movies like So Servet, there it is. 47 00:03:26,810 --> 00:03:31,150 And then right below it, we're going to go ahead and put it online. 48 00:03:31,160 --> 00:03:37,610 It's going to be a just text input and we're going to add a class name for styling and the name will 49 00:03:37,610 --> 00:03:38,960 be form input. 50 00:03:39,270 --> 00:03:44,860 So and then remember, I would want this input to be controlled input. 51 00:03:45,050 --> 00:03:46,100 So what do I need to do? 52 00:03:46,370 --> 00:03:52,640 I need to set up value and that one won't be equal to my state value, meaning the local state, whether 53 00:03:53,000 --> 00:03:55,180 it actually will be equal to McQuary. 54 00:03:55,550 --> 00:03:58,370 So state value that is coming from the context. 55 00:03:58,700 --> 00:04:02,240 So and then the second thing is the on change. 56 00:04:02,450 --> 00:04:07,130 So again, we go with our own change, we pass in our arrow function. 57 00:04:07,430 --> 00:04:14,540 And then remember, we had access to the event object and I'll right away call my secretary. 58 00:04:15,080 --> 00:04:17,080 So there's no function in between anymore. 59 00:04:17,270 --> 00:04:24,200 I just take the function that controls directly the state value and I say that query and I pass an event 60 00:04:24,560 --> 00:04:33,040 target and the value and once I save it, we should see the input and of course we have the text. 61 00:04:33,050 --> 00:04:38,990 So as I start typing, notice we're getting the movies, but we're not displaying the error. 62 00:04:39,350 --> 00:04:39,800 Correct. 63 00:04:40,220 --> 00:04:41,560 We just look for moreish. 64 00:04:41,870 --> 00:04:44,600 If we can get movies, of course we display great movies. 65 00:04:45,020 --> 00:04:48,740 If we cannot get the movies, we still display the old ones. 66 00:04:49,070 --> 00:04:51,030 So we're not changing the current. 67 00:04:51,050 --> 00:04:51,380 All right. 68 00:04:51,920 --> 00:04:56,480 So right below the input, I actually would want to also display the error. 69 00:04:56,840 --> 00:04:57,980 So I'm going to go with error. 70 00:04:58,160 --> 00:04:59,930 And remember, error was an object. 71 00:05:00,110 --> 00:05:00,560 Correct. 72 00:05:00,860 --> 00:05:07,700 So I only would want to display this error if the show property is true and if that is the case, then 73 00:05:07,700 --> 00:05:10,970 I would want to show the text that is coming back from the API. 74 00:05:11,420 --> 00:05:14,560 And in here I'm going to go with Def on line. 75 00:05:14,570 --> 00:05:23,660 The class name is Error and then instead of there, we're going to go with error and message like so. 76 00:05:24,020 --> 00:05:24,920 So we say it. 77 00:05:25,310 --> 00:05:27,620 And then again, by default we get bad memories. 78 00:05:27,860 --> 00:05:30,740 And in this case, I'm going to navigate to the bigger screen. 79 00:05:31,010 --> 00:05:32,300 So my Batman movie. 80 00:05:32,690 --> 00:05:37,150 And then once I start typing notes, this is the error. 81 00:05:37,520 --> 00:05:40,040 So now I have movie not found. 82 00:05:40,070 --> 00:05:46,910 However, as I keep on deleting the leading, eventually, of course, I will get my movies so that 83 00:05:46,910 --> 00:05:51,080 I remove the error and I just display all the movies again. 84 00:05:51,260 --> 00:05:58,550 We keep on deleting now we have different errors, but if I go with a different course result, there 85 00:05:58,580 --> 00:06:07,810 is now I have the movies, so that should be set up for our input for research form as well as our movies 86 00:06:07,820 --> 00:06:08,220 component. 87 00:06:08,540 --> 00:06:14,230 So now of course, we can start dealing with this one with a single movie component. 88 00:06:14,600 --> 00:06:19,580 Now, before we go any further, you don't have the code along right now, but I'm going to show you 89 00:06:19,580 --> 00:06:26,990 what kind of error you might get at some point in your application, as well as my complete one. 90 00:06:27,290 --> 00:06:31,250 You see, I'm just getting thousand requests per day. 91 00:06:31,790 --> 00:06:33,020 I think that was the limit. 92 00:06:33,320 --> 00:06:36,320 And I didn't sign up for the page down or nothing like that. 93 00:06:36,590 --> 00:06:43,610 So when you go to complete application once in a while, you might see that, well, there's no more 94 00:06:43,640 --> 00:06:44,260 requests. 95 00:06:44,660 --> 00:06:47,540 So what I'm going to do right now is I'm going to grab my key. 96 00:06:47,660 --> 00:06:51,290 My old key for sure, will have no more requests. 97 00:06:51,500 --> 00:06:53,030 Again, you don't need to do this. 98 00:06:53,270 --> 00:06:55,670 I'm just showing you what kind of error you're going to get. 99 00:06:56,030 --> 00:07:04,490 When I get back to my project, I have a envy and I'm just going to paste this value instead. 100 00:07:04,490 --> 00:07:11,990 Again, I do need to restart the server and we're going to go with NPM and and start like so. 101 00:07:12,530 --> 00:07:21,110 And once we open up our dev server, there should be an error that there's no more request left. 102 00:07:21,470 --> 00:07:28,220 OK, so hopefully their server spins up somewhat fast and then once we refresh the application, we'll 103 00:07:28,220 --> 00:07:29,810 see that this is going to be the case. 104 00:07:30,050 --> 00:07:37,210 If you have reached the limit again, just to give you an idea, if in your application you get this 105 00:07:37,220 --> 00:07:43,540 response or if you navigate to my complete one and you see that result as well, because, of course, 106 00:07:43,600 --> 00:07:46,070 the complete application is online. 107 00:07:46,460 --> 00:07:49,670 So a lot of students go there and check out the application. 108 00:07:49,880 --> 00:07:53,390 And of course, in the process, my requests are being used. 109 00:07:53,780 --> 00:07:57,590 So I'll stop the video next video, start dealing with a single movie. 110 00:07:57,710 --> 00:08:02,390 Of course, I'll switch back to my current one so we can make successful request. 111 00:08:02,660 --> 00:08:07,610 But hopefully it is clear that, yes, there's also going to be an error that you. 112 00:08:07,630 --> 00:08:13,540 We have reached the limit as far as your requests, because you get, I believe, a thousand requests 113 00:08:13,540 --> 00:08:16,180 per day when you sign up for the free one. 114 00:08:16,570 --> 00:08:21,130 If you go with and I'm not aware how many they give you, but it is obviously more.