1 00:00:00,840 --> 00:00:06,540 All right guys Dumela we have our UI set up at least the initial H Well we're going to start to work 2 00:00:06,540 --> 00:00:11,850 on the javascript so this input here is going to have an event listener and it's going to listen for 3 00:00:11,850 --> 00:00:12,830 a key up event. 4 00:00:12,840 --> 00:00:21,480 So let's go to our J.S. file which is basically our entry point and let's go ahead and say search and 5 00:00:21,500 --> 00:00:27,920 put and we're going to create a variable here I'm going to call it search user and we're going to send 6 00:00:27,920 --> 00:00:39,360 it to the document Daut get element by id and has an idea of search use or I'm pretty sure. 7 00:00:39,360 --> 00:00:40,700 Let me just double check that. 8 00:00:40,710 --> 00:00:48,330 Yeah right here search user and we want to then add an event listener so want to go down here to say 9 00:00:48,330 --> 00:00:58,200 search and put ventless sooner and we'll do that by taking that variable of search user and then just 10 00:00:58,200 --> 00:01:04,240 creating an event listener and then we're going to say we're going to listen for a key up. 11 00:01:04,980 --> 00:01:12,420 OK I'll just put an arrow function here and that will take in the event parameter and then we need to 12 00:01:12,420 --> 00:01:14,040 decide what we want to do here. 13 00:01:14,040 --> 00:01:17,950 So first of all we want to get the text that is being typed in. 14 00:01:18,000 --> 00:01:29,070 So it's a get input text you know create a variable for that we'll call it or text and send it to the 15 00:01:29,070 --> 00:01:33,400 event object target and then the value. 16 00:01:33,450 --> 00:01:36,240 OK so whatever value is being typed in. 17 00:01:36,570 --> 00:01:39,290 All right we want to make sure that it's not blank. 18 00:01:39,300 --> 00:01:40,770 So let's say if 19 00:01:43,630 --> 00:01:50,990 user text is not equal to nothing then we want to continue on here 20 00:01:54,130 --> 00:01:59,070 and we want to then make an HTP call to get hub. 21 00:01:59,260 --> 00:02:02,690 Now this is going to be done through our get hub J S file. 22 00:02:02,710 --> 00:02:09,610 So for now let's just go ahead and console dot log and make sure that we can actually get the user text 23 00:02:11,830 --> 00:02:17,050 so go ahead and do that and we'll hit afterwhile over here to open up our console and start to type 24 00:02:17,050 --> 00:02:19,070 and you can see that it's logging what we type. 25 00:02:19,060 --> 00:02:21,140 So so far so good. 26 00:02:21,190 --> 00:02:23,280 So we'll save that we'll go over to get her. 27 00:02:23,400 --> 00:02:26,410 Yes and we're going to create a class here. 28 00:02:26,410 --> 00:02:28,330 We're going to use E-6 classes 29 00:02:31,310 --> 00:02:36,140 and we're going to have a constructor. 30 00:02:36,640 --> 00:02:41,170 Now remember I said if you need if you're making I think it's a hundred or more requests per hour you're 31 00:02:41,170 --> 00:02:44,470 going to need your API key in your secret. 32 00:02:44,470 --> 00:02:50,650 So we're going to go over here we're going to first grab the client id and I'm going to add that as 33 00:02:50,680 --> 00:02:58,340 a property here so this client underscore I d e calls and then we're going to put in that number yours 34 00:02:58,360 --> 00:03:01,880 should be different and then same with the client secret 35 00:03:04,520 --> 00:03:12,550 I would say this dog decline and underscore seeker it feels that to that number. 36 00:03:12,950 --> 00:03:22,070 OK so now that we've done that let's go under the constructor and we're going to create a get use or 37 00:03:22,070 --> 00:03:30,260 method and this is going to be similar to the easy sheepy version 3 that we created where we use promises 38 00:03:30,260 --> 00:03:32,210 with a sync away. 39 00:03:32,390 --> 00:03:39,310 So we're going to create in a synchronous function by saying async and call it get user 40 00:03:42,800 --> 00:03:52,110 and then move pass in here a user and let's say Conte's profile response. 41 00:03:52,130 --> 00:03:56,660 Now we're actually going to be getting to we're going to be making two requests within this function 42 00:03:56,660 --> 00:04:02,300 one is going to be to get the user itself one is going to be to get the repots of the user. 43 00:04:02,300 --> 00:04:05,630 There's two different you are Elle's with this API that we need. 44 00:04:05,630 --> 00:04:16,040 So one is going to be API Daut get hub dot com slash users I'm sorry users slash and then whatever the 45 00:04:16,040 --> 00:04:21,980 user name in this case I'll just put mine and it will give us all this info and then we also want to 46 00:04:21,980 --> 00:04:27,620 make one for the repots which should be the same you are elements slash repo's and that will give you 47 00:04:27,620 --> 00:04:30,300 a list of all their repositories. 48 00:04:30,300 --> 00:04:32,300 OK so this is going to work a little different. 49 00:04:32,300 --> 00:04:37,500 That's why I'm calling this profile response not just response because we're going to have two different. 50 00:04:37,540 --> 00:04:43,310 We'll have probe file response in repo response but we're going to work with the profile first so let's 51 00:04:43,310 --> 00:04:45,470 get this to a weight fetch 52 00:04:48,830 --> 00:04:53,260 and then we want to pass in here the you are going use back ticks. 53 00:04:53,270 --> 00:04:59,570 And we actually want this URL here except we want to change. 54 00:04:59,690 --> 00:05:05,150 Brad Travers see unless you always want to get the same user which of course you don't want to change 55 00:05:05,150 --> 00:05:11,000 that to the user variable or the user parameter that's being passed in. 56 00:05:11,360 --> 00:05:15,980 OK now we're also going to have to add on the client id and coin's secret. 57 00:05:15,980 --> 00:05:26,630 So right after user let's put a question mark to add a query string here of client underscore ID and 58 00:05:26,630 --> 00:05:38,250 we'll set that equal to template literal which will be this dog Client ID. 59 00:05:38,820 --> 00:05:41,960 Ok so yeah that should work. 60 00:05:42,400 --> 00:05:47,560 And then we're going to do an ampersand here because we want another query string and that's going to 61 00:05:47,560 --> 00:05:58,980 be client secret and we're going to set that equal to the template literal of this Daut Quine's secret 62 00:06:00,700 --> 00:06:01,050 cry. 63 00:06:01,170 --> 00:06:03,360 So that's our fetch you are l. 64 00:06:03,690 --> 00:06:09,840 And then we're going to go down below here and we're going to stay current and we want to get the profile 65 00:06:09,840 --> 00:06:19,690 data and we'll set this to a wait and then profile response and then dot Jason. 66 00:06:19,910 --> 00:06:26,220 That will give us the juice and data and then we simply want to return that. 67 00:06:26,940 --> 00:06:27,220 All right. 68 00:06:27,220 --> 00:06:30,150 Now I'm not going to return just the profile data. 69 00:06:30,220 --> 00:06:34,900 I'm going to return an object because again we're also going to be returning the Repos from here as 70 00:06:34,900 --> 00:06:35,460 well. 71 00:06:35,620 --> 00:06:41,920 And this is what's great about promises and using a sink away as opposed to callbacks if we use callbacks 72 00:06:41,920 --> 00:06:49,660 we would have to have one callback get the response and then have another one with the with the repo 73 00:06:49,690 --> 00:06:50,710 getting the repo's. 74 00:06:50,710 --> 00:06:56,310 So this is it allows us to format asynchronous operations really nicely. 75 00:06:56,350 --> 00:07:02,620 So let's zoom back profile and we'll set this to profile data. 76 00:07:03,030 --> 00:07:03,780 Okay. 77 00:07:03,910 --> 00:07:10,330 Actually we'll just call this profile and then iOS 6 Plus you can actually if you're going to do this. 78 00:07:10,330 --> 00:07:14,110 So both of these are going to be the same profile profile. 79 00:07:14,110 --> 00:07:17,420 You can actually get rid of this one and just do that. 80 00:07:17,650 --> 00:07:18,920 OK and overturn this. 81 00:07:18,920 --> 00:07:22,380 It's the same as saying profile colon profile. 82 00:07:22,420 --> 00:07:28,210 So let's go ahead and save that and then we'll go back to our app Jay. 83 00:07:28,210 --> 00:07:29,490 Yes. 84 00:07:29,890 --> 00:07:33,940 And now this is where we actually want to call that function we just created. 85 00:07:33,940 --> 00:07:35,940 Let's go to index each symbol first. 86 00:07:35,950 --> 00:07:40,940 I just wanted to make sure that we have our Get have J.S. and all that stuff which we do. 87 00:07:40,960 --> 00:07:42,880 So it should we should have no problem. 88 00:07:42,880 --> 00:07:48,050 So let's say make HTP call. 89 00:07:48,700 --> 00:08:03,340 So say let's say Get her dot get use or we're going to pass in that user text from the form and that's 90 00:08:03,340 --> 00:08:04,840 going to return a promise. 91 00:08:04,840 --> 00:08:13,000 So we'll say then and that will give us the data and then we'll set an arrow function here. 92 00:08:13,060 --> 00:08:15,160 And what do we want to do now. 93 00:08:15,580 --> 00:08:20,470 We want to actually know what we'll do is we'll Konsole log 94 00:08:23,830 --> 00:08:26,110 console log data. 95 00:08:26,380 --> 00:08:32,160 So go back to our application let's put in the BE HERE get help is not defined. 96 00:08:32,200 --> 00:08:34,850 And the reason for that is we didn't instantiate it. 97 00:08:34,960 --> 00:08:37,430 OK so get job is actually a class. 98 00:08:37,570 --> 00:08:41,590 So we have to go up here and we have to initialize are instantiated. 99 00:08:41,590 --> 00:08:54,100 So let's say a net good hub by saying Konst get hub equals new get hub. 100 00:08:54,200 --> 00:08:54,540 All right. 101 00:08:54,540 --> 00:08:58,300 So it's just instantiating this class right here. 102 00:08:58,540 --> 00:08:59,760 So save that 103 00:09:03,810 --> 00:09:06,400 and see conc get higher because you get 104 00:09:10,370 --> 00:09:17,150 missing here so we haven't included here is this saved is saved. 105 00:09:23,900 --> 00:09:27,290 Oh I have a uppercase a trade here. 106 00:09:27,560 --> 00:09:29,000 Let's change that. 107 00:09:29,000 --> 00:09:29,490 There we go. 108 00:09:29,490 --> 00:09:31,290 Snel that era is gone. 109 00:09:31,370 --> 00:09:39,140 And let's go ahead and add a B and we get a response notice that we get an object with profile. 110 00:09:39,140 --> 00:09:41,610 Now this is coming from right here. 111 00:09:41,610 --> 00:09:49,460 We're returning profile with our response or Jason response which has all of the data for the user with 112 00:09:49,460 --> 00:09:52,510 the user name or the log in of B. 113 00:09:52,970 --> 00:09:58,810 And then every time I type and see if we go down here now we have one further the B our user. 114 00:09:58,940 --> 00:10:03,430 So we're getting the data from get help which is exactly what we want to be doing. 115 00:10:04,010 --> 00:10:06,690 Now when we reach a user that doesn't exist. 116 00:10:06,690 --> 00:10:10,470 So it's a brad t r. 117 00:10:10,510 --> 00:10:10,840 Yeah. 118 00:10:10,850 --> 00:10:11,330 Here we go. 119 00:10:11,330 --> 00:10:15,170 So this user doesn't exist so let's look at what we have in profile. 120 00:10:15,170 --> 00:10:18,300 We have a message that says not found. 121 00:10:18,500 --> 00:10:23,690 So that's what I'm going to actually search for to see if there's an actual user with this. 122 00:10:23,690 --> 00:10:28,000 Whatever is currently in this in the input box. 123 00:10:28,010 --> 00:10:35,400 All right so we're going to go back to J.S. and then let's do an if statement here. 124 00:10:39,060 --> 00:10:54,280 Will be an if else so we're going to say if data Daut profile Daut message is equal to not found which 125 00:10:54,280 --> 00:10:59,010 we just saw that that's what it returns then we want to show an alert 126 00:11:01,920 --> 00:11:04,650 that says the users not found OK. 127 00:11:04,710 --> 00:11:10,400 Now this is going to happen in our UIGEA file in the UI library which we haven't created yet. 128 00:11:10,590 --> 00:11:14,320 But I'm just I'm just putting the conditional here for now. 129 00:11:14,490 --> 00:11:22,390 Other than that then we want to show the profile OK which will also happen through the UI. 130 00:11:22,540 --> 00:11:25,270 Yes the UI class. 131 00:11:25,380 --> 00:11:29,430 So we're going to go ahead and stop here. 132 00:11:29,640 --> 00:11:30,840 Oh actually one more thing. 133 00:11:30,840 --> 00:11:38,610 This if statement were saying if there's nothing in here we also want to put on an else to that. 134 00:11:38,880 --> 00:11:45,720 OK so if that's true then we want to clear the profile because if we're typing something in here we're 135 00:11:45,720 --> 00:11:51,510 getting a profile if we go back and make it empty I want everything I want the profile to disappear 136 00:11:51,780 --> 00:11:54,340 and that'll happen through the UI as well. 137 00:11:54,720 --> 00:11:57,600 OK so now that we can actually fetch the data. 138 00:11:57,600 --> 00:11:58,800 Let's go ahead and save this. 139 00:11:58,800 --> 00:12:03,600 We can fetch the data in the next video we're going to start to work on bringing it into the UI.