1 00:00:00,120 --> 00:00:03,330 OK, so now let's create our global context. 2 00:00:03,540 --> 00:00:06,600 So we'll create that inside the context folder. 3 00:00:07,140 --> 00:00:15,360 So for that, let's go to the source folder or the US actually folder and create a winner inside this 4 00:00:16,110 --> 00:00:16,580 folder. 5 00:00:16,650 --> 00:00:19,770 So let me create a folder named as contacts. 6 00:00:20,780 --> 00:00:33,810 And next and inside the context, I will create the file that will be delayed for context it context 7 00:00:33,980 --> 00:00:36,730 providers or yes. 8 00:00:36,890 --> 00:00:37,250 OK. 9 00:00:37,770 --> 00:00:39,560 And inside of this file. 10 00:00:40,040 --> 00:00:46,910 So let me get the boilerplate quote so that will be controlled should be and this search and odyssey. 11 00:00:47,960 --> 00:00:49,070 So insert this. 12 00:00:49,070 --> 00:00:52,550 I have already important react with the help of this extension. 13 00:00:53,000 --> 00:00:58,370 So inside of that, I will import also a few more things. 14 00:00:58,370 --> 00:01:01,880 So that would be create context and use context. 15 00:01:02,910 --> 00:01:11,640 Use context, and next, we'll be using the used to talk who used it will be important all of this. 16 00:01:11,660 --> 00:01:19,190 I have like imported in advance so that we don't get any errors at the time of using them. 17 00:01:19,700 --> 00:01:24,410 So, OK, and we will define our context here. 18 00:01:26,570 --> 00:01:33,040 So that will be concert and did context. 19 00:01:35,890 --> 00:01:46,940 For context, and this is equal to the create context and and this so now we have definitely we have 20 00:01:47,450 --> 00:01:48,620 created our context. 21 00:01:48,920 --> 00:01:54,920 And now we will go to the website from where we will be grabbing our EPA. 22 00:01:55,460 --> 00:02:01,010 So let's go to the browser and go to the website of Rapid EPA. 23 00:02:01,520 --> 00:02:04,330 So from there, we will be getting all the EPA. 24 00:02:04,340 --> 00:02:11,540 So that is the website that EPA dot com, if you come and you will be delighted to hear and know what 25 00:02:11,540 --> 00:02:18,920 you will do is for first of all, you need to log in to this website to get the EPA and get the EPA 26 00:02:18,920 --> 00:02:22,280 keys and then use them in your own application. 27 00:02:22,520 --> 00:02:25,460 So after you log in, you can log in with Google. 28 00:02:25,460 --> 00:02:26,090 I have done this. 29 00:02:26,300 --> 00:02:32,150 So after you log in with Google, what you need to do is you need to search your the Google search API, 30 00:02:32,150 --> 00:02:33,890 so you need to just write Google Search. 31 00:02:34,280 --> 00:02:35,630 And the second one here. 32 00:02:35,900 --> 00:02:44,480 So this is why the API geek so this you need to see and this will be loading your API playground. 33 00:02:45,050 --> 00:02:48,210 And this this is the BI API. 34 00:02:49,040 --> 00:02:53,060 So this API will be making use in our project. 35 00:02:53,390 --> 00:02:57,860 So let it load, let the playground load and the. 36 00:02:59,680 --> 00:03:07,360 So now it's loaded and we get the testing link, so from here you can test the API endpoint. 37 00:03:07,600 --> 00:03:08,730 So I've already done that. 38 00:03:08,740 --> 00:03:13,090 That's why I will not see some steps which you might see. 39 00:03:13,240 --> 00:03:18,790 So once you click on this to test and point, it would be redirect to a page where it would be the pricing 40 00:03:18,790 --> 00:03:20,890 section like zero dollars, two dollars. 41 00:03:20,920 --> 00:03:25,000 So you just choose these $0 one, $0 that is the free one. 42 00:03:25,000 --> 00:03:29,770 And you get, I think, around 500 request by a month in that. 43 00:03:30,160 --> 00:03:32,380 So that is OK for testing purposes. 44 00:03:32,740 --> 00:03:40,060 And after that, you need to come here and see you have the API keys who just copy it and pasted somewhere. 45 00:03:40,390 --> 00:03:44,370 And then you have the you are clear. 46 00:03:44,500 --> 00:03:46,540 So this you are told we need to copy. 47 00:03:46,870 --> 00:03:53,530 So I will copy it to till v one, because after this part, the search part will be dynamic. 48 00:03:53,950 --> 00:04:00,850 So we don't want to start telling you, all right, well, we'll just copy it from this tool we want. 49 00:04:01,330 --> 00:04:08,110 So Bill, we want, we will copy it and then we will go back to our idea that this device could. 50 00:04:09,190 --> 00:04:15,640 After coming here, what we will do is we will create a variable which will be known as a base you ordered 51 00:04:16,060 --> 00:04:18,690 and we will be calling it base. 52 00:04:18,970 --> 00:04:24,530 You are real and we will be storing are you are inside this. 53 00:04:24,530 --> 00:04:29,440 So this is the you are in basically and this we are going to store here. 54 00:04:30,100 --> 00:04:31,120 OK, next. 55 00:04:31,120 --> 00:04:35,800 Inside the function, we will be passing some props inside the function. 56 00:04:35,800 --> 00:04:38,410 So that is an object, basically. 57 00:04:38,410 --> 00:04:41,530 So the function is the way it's getting. 58 00:04:41,530 --> 00:04:41,740 Yeah. 59 00:04:42,460 --> 00:04:46,190 So the function is state context border. 60 00:04:46,270 --> 00:04:52,660 Inside this will pass the prop, which will be children, so children will be the prop, which we are 61 00:04:52,660 --> 00:04:54,520 going to pass inside it. 62 00:04:54,530 --> 00:04:58,930 And now what we'll do is we will create some hooks. 63 00:04:59,230 --> 00:05:04,990 So the first one would be the results and we will call it results. 64 00:05:05,590 --> 00:05:12,480 And that will be a function which is responsible for altering or changing this particular variable. 65 00:05:12,550 --> 00:05:18,550 So after results, we will write search results and. 66 00:05:20,470 --> 00:05:27,880 Senators also will be responsible for changing the results, and you will vote the you state and inside 67 00:05:27,880 --> 00:05:28,420 of this. 68 00:05:28,780 --> 00:05:30,310 We will give an empty. 69 00:05:30,730 --> 00:05:38,590 OK, so after this, what we'll do is we'll set another hook and that will be for the loading part. 70 00:05:38,690 --> 00:05:41,880 So Konst said this that would be the loading. 71 00:05:42,160 --> 00:05:45,730 And then we will have the Senate loading. 72 00:05:46,510 --> 00:05:48,580 So said Loading. 73 00:05:49,060 --> 00:05:52,060 And this is a call to again use state. 74 00:05:52,750 --> 00:05:56,820 And inside of this, there will be the initial value for this loading. 75 00:05:56,830 --> 00:06:02,320 So this is a Boolean, so will give the value as false for this. 76 00:06:02,320 --> 00:06:03,150 So this is the. 77 00:06:04,120 --> 00:06:04,930 And the beginning. 78 00:06:04,930 --> 00:06:05,710 It'll be false. 79 00:06:05,710 --> 00:06:09,900 And next we'll be having the another hook. 80 00:06:10,210 --> 00:06:12,970 So that will be these search term. 81 00:06:13,180 --> 00:06:16,960 So here it will be the search. 82 00:06:18,190 --> 00:06:23,320 Term and then the function responsible for making changes inside this variable. 83 00:06:23,770 --> 00:06:27,610 So after these search term, we will have the SEC. 84 00:06:29,270 --> 00:06:31,930 Search, search, search. 85 00:06:32,870 --> 00:06:33,130 Yeah. 86 00:06:33,830 --> 00:06:41,060 So we will give the initial value for it now, this is a spring basically so used to it, and we will 87 00:06:41,060 --> 00:06:44,420 give an empty string as the initial value for this. 88 00:06:44,840 --> 00:06:46,190 Now see you one thing. 89 00:06:46,940 --> 00:06:49,850 How do we know what is the data? 90 00:06:49,850 --> 00:06:51,950 What type of this particular variable? 91 00:06:52,280 --> 00:06:56,620 How do we know that this is a string or a Boolean or an area or an object? 92 00:06:56,630 --> 00:07:03,490 How do we know who thought and knew which we give inside those used to aid whatever the value was? 93 00:07:03,490 --> 00:07:07,850 You pass here so that values use basically the initial value, right? 94 00:07:08,510 --> 00:07:11,780 We are calling it the initial value for this variable. 95 00:07:12,320 --> 00:07:20,720 But as like along with the initial retrieval, what does it and imply is that whatever is the type of 96 00:07:20,720 --> 00:07:28,940 this variable initial value, that is the type of this variable, for example, here we have given it 97 00:07:28,940 --> 00:07:33,860 as an empty area with that simply means that result is an empty array. 98 00:07:34,400 --> 00:07:42,500 We have given the value as false, and this simply means that this loading variable is a boolean type 99 00:07:42,710 --> 00:07:45,050 that we have given is an empty string. 100 00:07:45,050 --> 00:07:47,810 So that simply means that search term is an empty string. 101 00:07:48,410 --> 00:07:57,950 That is what we actually do in order to, like, define the children who now are coming back. 102 00:07:58,640 --> 00:08:01,980 So now what we will have is we'll have another constant. 103 00:08:01,980 --> 00:08:06,570 So that will be the exact results for getting the desired results. 104 00:08:06,740 --> 00:08:10,820 And so this is basically async functions. 105 00:08:10,880 --> 00:08:18,610 So async and this will be, you are told as an argument this is be getting as you are. 106 00:08:19,160 --> 00:08:26,890 And what it will be returning is that asset loading, certain loading and start loading will be the 107 00:08:26,900 --> 00:08:27,320 true. 108 00:08:28,520 --> 00:08:34,220 And next, we'll be having the cast and the series is equal to dessert, basically. 109 00:08:34,550 --> 00:08:38,300 And from here, we'll be getting fetching data. 110 00:08:38,310 --> 00:08:40,490 So here we will use the R word function. 111 00:08:40,940 --> 00:08:42,530 You're thinking of it basically. 112 00:08:42,800 --> 00:08:43,220 There it is. 113 00:08:43,400 --> 00:08:46,460 Obviously, there will be a vote and then we'll fetch. 114 00:08:46,910 --> 00:08:50,330 And so the Fed will have a Bektic. 115 00:08:50,960 --> 00:08:53,960 We'll have this our dollar symbol. 116 00:08:53,960 --> 00:08:58,100 And inside of this, there will be a sort of a base for you all. 117 00:08:58,790 --> 00:09:05,630 And next, we will have another dollar symbol and insert of this will be have an equal. 118 00:09:07,000 --> 00:09:09,610 So after this, we will give. 119 00:09:11,360 --> 00:09:19,280 Bulma and inside of this, there will be another currently basis and here that will be the headers. 120 00:09:19,610 --> 00:09:25,760 So headers, yeah, the headers and inside of this, that is an object, basically. 121 00:09:26,120 --> 00:09:31,850 And the first element here is the extra rapid API horse. 122 00:09:31,910 --> 00:09:36,140 You can copy it from here, basically. 123 00:09:36,590 --> 00:09:42,650 And this this thing right here, it's a rapid EPA host and rapid API key. 124 00:09:43,160 --> 00:09:47,780 So both the things you can just go hard and copy it. 125 00:09:48,080 --> 00:09:49,550 So I will copy this. 126 00:09:52,790 --> 00:09:56,120 Next to come here, and we will post this here. 127 00:09:57,210 --> 00:09:59,350 But just to make things harder. 128 00:09:59,910 --> 00:10:06,140 That is the API host and that a rapid FBA keep well, this is the key which I'm using. 129 00:10:06,150 --> 00:10:11,280 Don't use the scheme, generate your own key and then be stored here because I will be delivering this 130 00:10:11,280 --> 00:10:12,690 key after this project. 131 00:10:13,080 --> 00:10:15,630 So gender their own key and then use it. 132 00:10:16,080 --> 00:10:20,580 So next, we will be having another constant after this. 133 00:10:21,150 --> 00:10:22,670 So that will be the data. 134 00:10:22,710 --> 00:10:30,570 So of course, data is equal to all of it and then start going. 135 00:10:31,820 --> 00:10:34,460 And this is basically draining the data. 136 00:10:34,820 --> 00:10:43,130 And the next we will said that Israel's sacked results to what they've done. 137 00:10:44,840 --> 00:10:52,130 And we will have this settled in two falls like no other data has been fetched, and we don't need to 138 00:10:52,130 --> 00:10:59,710 like like keep on drooling spinner, after all, we have finished. 139 00:10:59,720 --> 00:11:01,220 Loading So why do you need that? 140 00:11:01,350 --> 00:11:04,460 OK, so that means that we will stop downloading. 141 00:11:05,300 --> 00:11:08,540 The next will come to return and insert the return. 142 00:11:08,540 --> 00:11:19,310 We will not have any kind of device will delete this dev and therein provide the fantasies and insert 143 00:11:19,310 --> 00:11:19,580 this. 144 00:11:19,580 --> 00:11:22,190 That will be the text providers. 145 00:11:22,190 --> 00:11:27,090 So that will be the context dart provider. 146 00:11:27,800 --> 00:11:28,280 OK. 147 00:11:28,400 --> 00:11:35,810 So it gave me, although it was intact, not inside this provider, there would be new values so that 148 00:11:36,020 --> 00:11:39,020 the value and this will be an object, basically. 149 00:11:39,530 --> 00:11:42,980 And here there will be the first thing is to get results. 150 00:11:44,690 --> 00:11:50,270 And the second will be the results, and it will be the third St.. 151 00:11:52,140 --> 00:11:54,180 For will be this third search term. 152 00:11:55,540 --> 00:11:58,340 And next will be loading. 153 00:11:58,990 --> 00:12:05,080 So these variables or functions, whatever they are, they're inside this value. 154 00:12:06,250 --> 00:12:06,640 So. 155 00:12:07,760 --> 00:12:16,490 The that thing is now set to blow like these things are now global and they can be used anywhere inside 156 00:12:16,490 --> 00:12:20,210 any component where we will improve the student text provider. 157 00:12:20,720 --> 00:12:24,250 So that is a really good use of the global context. 158 00:12:24,260 --> 00:12:30,950 Basically, all we can do the same thing using Redux also like Redux, is also state management, the 159 00:12:30,950 --> 00:12:32,940 library for React, basically. 160 00:12:33,560 --> 00:12:35,690 And we can use Redux also. 161 00:12:35,690 --> 00:12:45,440 But if we're like we are making use of the native concept, that is that is more but like, I think 162 00:12:45,800 --> 00:12:48,020 that is more efficient than rapid. 163 00:12:48,560 --> 00:12:51,080 So next inside this, we will pass these children. 164 00:12:52,520 --> 00:13:05,000 So children and this will be and after that, don't forget to export the corn stand here, so and sport 165 00:13:05,000 --> 00:13:10,190 we want, we can just export this from here only like the berries are functional. 166 00:13:11,420 --> 00:13:21,800 Yeah, this function, we can export it in line also if we want, so we can just try it like this export 167 00:13:22,550 --> 00:13:24,860 and function. 168 00:13:25,040 --> 00:13:27,260 Basically, there's no problem with that. 169 00:13:27,740 --> 00:13:33,070 And now we will export the two functions one by one. 170 00:13:33,080 --> 00:13:34,310 So here we will. 171 00:13:34,310 --> 00:13:39,140 Right export concept and use state context. 172 00:13:40,150 --> 00:13:43,090 And that will be equal to a function. 173 00:13:43,720 --> 00:13:46,420 And this is the U.S. 174 00:13:47,110 --> 00:13:48,010 Context. 175 00:13:49,820 --> 00:13:54,860 Use context and insert this that will be this state context. 176 00:13:55,130 --> 00:13:56,240 Cool, cool, cool, cool, cool. 177 00:13:56,540 --> 00:13:56,810 Yeah. 178 00:13:57,470 --> 00:14:06,710 So this is basically the idea of the whole thing, and we already exported this oil and now state context 179 00:14:06,830 --> 00:14:12,890 provider is completed, and now we are ready to use all of the values and other components. 180 00:14:13,610 --> 00:14:18,830 So next, we'll be building the results component and we'll be making use of all the components inside 181 00:14:18,830 --> 00:14:21,050 the deserts we'll see in the next video.