1 00:00:00,420 --> 00:00:01,080 Nicely done. 2 00:00:01,740 --> 00:00:05,970 I think we are finally ready to tackle the big beast. 3 00:00:06,210 --> 00:00:07,110 What am I talking about? 4 00:00:07,530 --> 00:00:15,100 Well, we have everything in place to set up the functionality where when the visitor types, the GitHub 5 00:00:15,150 --> 00:00:18,000 user, he or she can click the search. 6 00:00:18,600 --> 00:00:25,020 And, of course, we can fetch the data about the user, including the repos and the followers and, 7 00:00:25,020 --> 00:00:26,090 of course, the split. 8 00:00:26,280 --> 00:00:29,610 So essentially, we'll finally make our app dynamic. 9 00:00:30,030 --> 00:00:34,980 Not what we're interested in is, for the time being, just one. 10 00:00:34,980 --> 00:00:38,340 You know, the one that I'm talking about is in the Read Me. 11 00:00:38,850 --> 00:00:42,180 Again, we're going to get back to get our API and all that. 12 00:00:42,750 --> 00:00:46,770 I'm going to close the sidebar and we're looking for our user. 13 00:00:47,400 --> 00:00:48,450 So let's copy that one. 14 00:00:49,110 --> 00:00:50,980 I will open up a new tab. 15 00:00:51,420 --> 00:00:52,230 Copy and paste. 16 00:00:52,620 --> 00:00:54,510 So that's the response that I'm getting. 17 00:00:54,990 --> 00:00:59,880 If my request is successful and also let's try it out right away. 18 00:01:00,240 --> 00:01:03,090 What is going to happen if we have some kind of our search here? 19 00:01:03,180 --> 00:01:04,590 I'm going to type a bunch of gibberish. 20 00:01:04,650 --> 00:01:07,800 Now, as a side note, if you don't want to waste your request, you don't have to do that. 21 00:01:08,220 --> 00:01:17,430 This is just a showcase that once we try to get some kind of user that clearly doesn't exist, probably 22 00:01:17,450 --> 00:01:21,540 would be very hard to imagine that someone would come up with that type of user name. 23 00:01:21,960 --> 00:01:24,570 Of course, we're going to get the error, essentially. 24 00:01:24,930 --> 00:01:26,100 We're not going to get the user. 25 00:01:26,580 --> 00:01:28,170 So those are two options. 26 00:01:28,830 --> 00:01:29,850 We set up the function. 27 00:01:30,240 --> 00:01:35,910 We hit the API and either we successfully get back the user or we don't. 28 00:01:36,440 --> 00:01:36,770 Correct. 29 00:01:37,170 --> 00:01:43,260 So now the only thing left to do is just to set up that function and just wire up that function to Iran 30 00:01:43,500 --> 00:01:45,780 every time we submit the form. 31 00:01:46,020 --> 00:01:51,120 So let's start extremely simply by navigating back to our context. 32 00:01:51,660 --> 00:01:53,820 And we're just gonna create that function. 33 00:01:54,240 --> 00:02:02,460 So I'm going to say here, concept and search, search, GitHub user, GitHub user. 34 00:02:02,810 --> 00:02:09,630 And then this function is just going to be looking for one thing or it's going to be async because we'll 35 00:02:09,630 --> 00:02:11,850 have two once in a while wait for something. 36 00:02:12,120 --> 00:02:18,510 So that's why it's gonna be a sync function and it's gonna be looking for the user that we will pass 37 00:02:18,600 --> 00:02:19,010 in. 38 00:02:19,540 --> 00:02:23,490 And then, of course, there's gonna be some functionality at the moment, not much. 39 00:02:23,550 --> 00:02:27,780 We're going to do simple console log where we'll say, all right. 40 00:02:28,500 --> 00:02:32,040 Show me the user that I will be searching for. 41 00:02:32,840 --> 00:02:40,380 And, of course, what we would want to do is pass this search, get Abuzer to our value, because, 42 00:02:40,890 --> 00:02:43,400 of course, we would want to use it in the search. 43 00:02:43,410 --> 00:02:43,790 Correct. 44 00:02:44,250 --> 00:02:46,800 So let's pass it down on line and research. 45 00:02:47,190 --> 00:02:49,860 Of course, we will restructure it. 46 00:02:50,250 --> 00:02:53,700 So search GitHub user. 47 00:02:54,120 --> 00:02:58,920 And now I would want to run this function if the user exists. 48 00:02:59,430 --> 00:03:01,050 Again, this is optional. 49 00:03:01,620 --> 00:03:06,360 If you want to remove whatever the visitor has typed out, you can do that. 50 00:03:06,420 --> 00:03:07,410 I'm not gonna do that. 51 00:03:07,440 --> 00:03:08,840 This is just the showcase. 52 00:03:08,880 --> 00:03:10,100 That, of course, is just possible. 53 00:03:10,530 --> 00:03:20,310 And here I am going to run my search GitHub user search user, and I'm going to pass in the user that 54 00:03:20,310 --> 00:03:23,790 I'm getting from the local state, so I'll save it. 55 00:03:24,830 --> 00:03:31,280 And of course, I'm going to now get to a bigger screen right now and I'm going to open up the console 56 00:03:31,850 --> 00:03:34,910 just so we can see that we're definitely passing data. 57 00:03:35,500 --> 00:03:39,920 And then if that is the case, then, of course, we can start setting up the functionality, because 58 00:03:39,920 --> 00:03:47,900 a lot of times I see that people start writing 10000 lines of code before even making sure that the 59 00:03:47,900 --> 00:03:49,070 functionality is going to work. 60 00:03:49,760 --> 00:03:51,020 Because if I see the user. 61 00:03:51,020 --> 00:03:51,440 Yes. 62 00:03:51,710 --> 00:03:57,170 And I know that I can do whatever I would like, but if it's not there, maybe I had a typo or something. 63 00:03:57,590 --> 00:04:01,400 And it's always easier to find that bug if you have less code. 64 00:04:01,610 --> 00:04:02,330 So let's try it out. 65 00:04:02,600 --> 00:04:07,260 I'm just going to go with user here type search and. 66 00:04:07,410 --> 00:04:07,620 Yep. 67 00:04:07,970 --> 00:04:09,110 I have two users. 68 00:04:09,410 --> 00:04:09,920 Beautiful. 69 00:04:10,550 --> 00:04:18,390 Now, once I have that design, of course, I can head back to my context and then in the context. 70 00:04:18,650 --> 00:04:20,060 Well, we'll set up the functionality. 71 00:04:20,090 --> 00:04:20,420 Correct. 72 00:04:21,050 --> 00:04:23,960 So what happens when we start searching? 73 00:04:24,650 --> 00:04:26,340 Well, eventually we'll toggle narrow. 74 00:04:26,540 --> 00:04:31,580 So I'm going to leave the common here, toggle error and I'll cover that a little bit later. 75 00:04:32,090 --> 00:04:34,010 Then we'll set loading. 76 00:04:34,340 --> 00:04:37,460 So another comment, something we're going to do a little bit later on. 77 00:04:37,860 --> 00:04:38,480 So loading. 78 00:04:38,520 --> 00:04:39,080 True. 79 00:04:39,800 --> 00:04:43,580 And we'll start by just waiting for our response. 80 00:04:44,150 --> 00:04:47,890 So now I want to use Axios to hit that Yoro. 81 00:04:48,830 --> 00:04:51,440 Remember in the read me, we had API GitHub. 82 00:04:51,830 --> 00:04:55,220 That was the root one that I'm looking for the users. 83 00:04:55,610 --> 00:04:59,030 And then whatever user is Pastan. 84 00:04:59,600 --> 00:05:01,300 So let's set that up in here. 85 00:05:01,310 --> 00:05:05,060 I'm going to have a concert, a response, and that is going to be equal to. 86 00:05:05,080 --> 00:05:05,450 Oh, wait. 87 00:05:05,930 --> 00:05:13,350 Since I'm using a zip code and I'm gonna go of course, with Axios and in the Axios it is by default 88 00:05:13,350 --> 00:05:15,860 to get requests or I don't need to do anything special. 89 00:05:16,460 --> 00:05:18,640 Then I'm looking for my route. 90 00:05:19,310 --> 00:05:26,900 You are all then forward slash users online, whatever user I passed in as an argument. 91 00:05:27,170 --> 00:05:28,070 So user. 92 00:05:28,820 --> 00:05:30,740 Now of course I have two options. 93 00:05:31,160 --> 00:05:34,910 I can do that then, or I can just catch it. 94 00:05:35,090 --> 00:05:40,970 So in my case, since I'm already waiting, I'm just going to take a look at what is my response and 95 00:05:40,970 --> 00:05:41,910 then I'm gonna deal with it. 96 00:05:42,270 --> 00:05:47,260 So essentially what I'm saying, there's gonna be no that Dennes I'm just gonna go with Cutch if there 97 00:05:47,260 --> 00:05:47,780 is an error. 98 00:05:48,380 --> 00:05:52,130 So error here and we're gonna cancel log there. 99 00:05:52,760 --> 00:05:53,570 So there is an error. 100 00:05:53,600 --> 00:05:55,260 Yes, we would like to cancel it. 101 00:05:56,060 --> 00:05:58,490 Now, what are the options for our response? 102 00:05:58,740 --> 00:05:59,820 Now let's take a look again. 103 00:06:00,370 --> 00:06:03,590 If you don't want to use your requests, just keep on watching. 104 00:06:03,590 --> 00:06:09,410 And then once I cover what are two options, which, by the way, we kind of already khadar in the browser, 105 00:06:09,830 --> 00:06:11,270 then of course, you can set up the code. 106 00:06:11,720 --> 00:06:15,750 So in here I'm going to say if response is true. 107 00:06:16,110 --> 00:06:17,390 So it's not going to be false. 108 00:06:17,850 --> 00:06:23,600 Then, of course, I would want to do something and that something is going to be set up user. 109 00:06:24,630 --> 00:06:32,430 And we're gonna with response and then data and of course, why don't we also console logged response 110 00:06:32,610 --> 00:06:37,080 just so we know when we have one condition and one the other one. 111 00:06:37,470 --> 00:06:42,420 So log online response and learn what is our other option? 112 00:06:42,480 --> 00:06:46,290 Well, that is going to be if, of course, we cannot find the refuser. 113 00:06:46,500 --> 00:06:46,860 Correct. 114 00:06:47,250 --> 00:06:49,800 So in this case, I would want to toggle that error. 115 00:06:50,240 --> 00:06:54,700 So I'm going to go here with toggle error and we'll pass in. 116 00:06:54,780 --> 00:06:55,260 True. 117 00:06:55,500 --> 00:06:56,880 So one shockers there. 118 00:06:57,330 --> 00:06:58,620 And what was my message? 119 00:06:58,710 --> 00:06:59,460 Well, I could go with. 120 00:06:59,550 --> 00:07:04,670 There is no user with that username. 121 00:07:05,250 --> 00:07:07,080 Something like that. 122 00:07:07,860 --> 00:07:14,080 And now, of course, let's try to set up our form where first I'm going to search for the user that 123 00:07:14,080 --> 00:07:14,820 doesn't exist. 124 00:07:15,270 --> 00:07:17,070 So let's go back to Brad. 125 00:07:17,100 --> 00:07:18,780 So, Brad, transversely. 126 00:07:19,350 --> 00:07:20,100 Let's see. 127 00:07:20,400 --> 00:07:23,010 And notice how already some data changed. 128 00:07:23,540 --> 00:07:27,450 And here I can see the response where I have the data. 129 00:07:27,990 --> 00:07:33,840 So the user information then one that a little green over here in the axios is in the data. 130 00:07:34,410 --> 00:07:38,970 That's why I'm asked here, said give up user and then response data. 131 00:07:39,750 --> 00:07:42,730 So remember, we had that function that controls it. 132 00:07:43,140 --> 00:07:45,750 So right away, past the user information. 133 00:07:46,320 --> 00:07:50,160 If, of course, the response makes sense. 134 00:07:50,250 --> 00:07:54,870 Meaning if our request was successful, what would be the case? 135 00:07:54,930 --> 00:07:57,030 If our success wasn't successful. 136 00:07:57,440 --> 00:08:00,990 Now we can probably just add zie and we're gonna get there. 137 00:08:01,140 --> 00:08:04,290 And of course, we have four or four in a console. 138 00:08:04,920 --> 00:08:05,280 Correct. 139 00:08:05,400 --> 00:08:07,110 Because we can still log the error. 140 00:08:07,410 --> 00:08:09,120 So forfour we cannot find a user. 141 00:08:09,600 --> 00:08:11,310 And then notice we have undefined. 142 00:08:12,000 --> 00:08:16,080 So if that is the case, of course, then we throw the error. 143 00:08:16,650 --> 00:08:20,470 Then we say, well, there is no user with that username. 144 00:08:21,180 --> 00:08:21,900 And remember. 145 00:08:22,810 --> 00:08:25,390 At the beginning, I said doggle error. 146 00:08:26,050 --> 00:08:28,780 So while I was doing that, well, imagine this scenario right now. 147 00:08:29,350 --> 00:08:32,420 So we search for the user, correct? 148 00:08:33,070 --> 00:08:37,630 Now, if I'm going to search for the user to actually does exists, I'm going to go back to Brad. 149 00:08:38,320 --> 00:08:41,950 You'll see that I still have my error because I didn't remove it. 150 00:08:42,640 --> 00:08:49,060 So that's why what I would want to do is every time I start searching for the user, I would want to 151 00:08:49,060 --> 00:08:52,690 make sure that if there is an error, I remove it. 152 00:08:53,230 --> 00:08:58,030 Now, if it's not there, it's not going to do any bad because I already have default of show, false 153 00:08:58,090 --> 00:08:58,660 of message. 154 00:08:59,020 --> 00:09:01,870 So essentially, I'm just sending this back to a default. 155 00:09:02,230 --> 00:09:03,520 So I'm going to uncommon this. 156 00:09:03,550 --> 00:09:09,460 And then remember when I was setting up my function, the toggle error function. 157 00:09:10,420 --> 00:09:16,780 Notice how I passed in the E6 defaults where if I don't pass in the show by default, is going to be 158 00:09:16,780 --> 00:09:17,170 false. 159 00:09:17,530 --> 00:09:21,010 If I don't pass in, the message by default is just going to be empty string. 160 00:09:21,530 --> 00:09:22,570 Now of course we can use it. 161 00:09:22,960 --> 00:09:28,240 That's why I'm just invoking because I already have some predefined defaults. 162 00:09:28,620 --> 00:09:30,140 So now of course, once I sell it. 163 00:09:30,670 --> 00:09:35,790 Notice that if someone search for a user doesn't exist, I'm going to go back to Brad Travis. 164 00:09:35,790 --> 00:09:36,820 See see. 165 00:09:37,540 --> 00:09:38,260 I search for it. 166 00:09:38,500 --> 00:09:41,320 Then I remove it online once I search. 167 00:09:41,920 --> 00:09:43,450 Now everything works. 168 00:09:43,540 --> 00:09:46,200 And I'm not displaying that there again. 169 00:09:46,630 --> 00:09:48,880 We have three things that we need to worry about. 170 00:09:49,300 --> 00:09:53,790 First, we have our Freda's request, meaning using the axios and all that. 171 00:09:53,800 --> 00:09:54,750 So rejects requests. 172 00:09:55,390 --> 00:09:58,000 And then we're looking for users. 173 00:09:58,030 --> 00:10:04,120 And then whoever we pass in from our search and then we have two options. 174 00:10:04,540 --> 00:10:09,700 Either we're gonna have pay success, meaning our request is going to be successful. 175 00:10:09,700 --> 00:10:11,710 So we're gonna get back some response. 176 00:10:12,150 --> 00:10:16,840 And the user data is in the response and data. 177 00:10:17,680 --> 00:10:19,690 And then the other option is, of course, undefined. 178 00:10:20,050 --> 00:10:24,010 So if the response is undefined, then we toggle error. 179 00:10:24,640 --> 00:10:26,740 Now, of course, there's more logic here. 180 00:10:26,800 --> 00:10:30,730 So let me add here, comma, more logic here. 181 00:10:31,090 --> 00:10:32,260 And I'm sorry I said comma. 182 00:10:32,710 --> 00:10:35,470 Let me add the comment where there's gonna be more logic. 183 00:10:35,740 --> 00:10:36,140 Don't worry. 184 00:10:36,160 --> 00:10:41,950 I purposely put this up in multiple videos because I would want everyone to be on the same bridge. 185 00:10:42,310 --> 00:10:43,480 So there's gonna be more logic. 186 00:10:43,510 --> 00:10:48,820 But as long as we have the user beautiful, we now use the set. 187 00:10:48,850 --> 00:10:52,720 Get Abuzer, our function that controls that user. 188 00:10:53,080 --> 00:10:58,840 And we can clearly already see that the moment I search for some user that does exist. 189 00:10:59,350 --> 00:11:02,860 For example, again, we can go maybe with Scott Dolinski. 190 00:11:03,500 --> 00:11:06,520 I believe his user name was like this. 191 00:11:06,910 --> 00:11:08,290 Notice we right away change them. 192 00:11:08,290 --> 00:11:10,150 Bower's now not all of them. 193 00:11:10,630 --> 00:11:12,280 Of course, we haven't worked yet. 194 00:11:12,310 --> 00:11:14,550 We, the followers, ordinary poles and all that. 195 00:11:15,010 --> 00:11:19,300 But we nicely saw how this information changed right away. 196 00:11:19,840 --> 00:11:20,890 And that's real important. 197 00:11:21,250 --> 00:11:22,360 So hopefully this makes sense. 198 00:11:22,450 --> 00:11:25,480 We are starting to move the right direction. 199 00:11:25,870 --> 00:11:31,480 So now we just need to add a little bit of tweaks with the loading and then we'll finally be able to 200 00:11:31,840 --> 00:11:36,250 finish it off by getting the followers as well as the REPOLISH.