1 00:00:00,560 --> 00:00:07,280 All right guys who are now able to search for users and you could see as we type in search for use or 2 00:00:07,280 --> 00:00:08,710 if we clear this out. 3 00:00:08,990 --> 00:00:13,940 Well that's one thing that's not happening is if we clear this out I want it to get rid of everything 4 00:00:13,940 --> 00:00:15,090 in the profile. 5 00:00:15,230 --> 00:00:19,020 So we're going to take care of that before we do the alert which is actually really easy. 6 00:00:19,020 --> 00:00:24,470 So we go back here where we have a clear profile this comment right here. 7 00:00:24,560 --> 00:00:33,920 We're just going to call from the class a method called clear profile and we'll save that and we'll 8 00:00:33,920 --> 00:00:35,390 go to our UI. 9 00:00:35,520 --> 00:00:39,410 J.S. and in here. 10 00:00:39,410 --> 00:00:45,160 Let's go to the bottom and let's add those who need Claire profile. 11 00:00:47,850 --> 00:00:56,970 And then all we're doing is saying this stock profile got enraged Yamal is equal to nothing. 12 00:00:57,320 --> 00:01:04,090 OK so that way if we try to search you know comes up if we go back and empty the search box it goes 13 00:01:04,090 --> 00:01:06,020 away. 14 00:01:06,340 --> 00:01:13,790 So sometimes little you know one line of code it can change the user interface and change the user experience. 15 00:01:13,960 --> 00:01:21,040 All right so now we're going to do the alert if we get something that is not a profile we want to have 16 00:01:21,040 --> 00:01:28,930 a little alert pop up so let's go to our app J.S. and go to where it says show alert and we're going 17 00:01:28,930 --> 00:01:37,510 to call you I dot show alert and it's going to take in two things going to take in a message. 18 00:01:37,510 --> 00:01:44,590 So we're going to say use or not found it's also going to take in a class which are classes which will 19 00:01:44,590 --> 00:01:52,810 be alert and then alert dash danger which are bootstrap alert classes. 20 00:01:52,820 --> 00:01:58,480 All right so save that and go to Jasin go Under the show profile. 21 00:01:59,490 --> 00:02:01,770 And we're going to create show alert. 22 00:02:05,490 --> 00:02:14,150 We should probably be commenting these functions so this will be show alert message and so be clear 23 00:02:17,220 --> 00:02:20,890 profile. 24 00:02:21,180 --> 00:02:26,280 Say display profile in UI. 25 00:02:27,890 --> 00:02:34,630 So Schoeller again takes in a message and a class name. 26 00:02:34,670 --> 00:02:41,120 Now this is going to work just like the Just like some of the other applications we've created like 27 00:02:41,120 --> 00:02:44,550 the booklist application where we create an alert. 28 00:02:44,810 --> 00:02:49,060 So we're going to create a div from scratch. 29 00:02:49,130 --> 00:03:00,260 So will say Konst div equals document Daut create elements and we want that to be a development that 30 00:03:00,260 --> 00:03:07,080 we want to add the classes so we'll say div dot class name equals. 31 00:03:07,740 --> 00:03:14,550 And inside here we're going to say the variable actually. 32 00:03:14,720 --> 00:03:18,730 If we're not going to add any other classes we can just say class name like that. 33 00:03:26,520 --> 00:03:26,890 All right. 34 00:03:26,910 --> 00:03:30,910 And then after that let's add the text. 35 00:03:32,040 --> 00:03:39,300 So to do that we're going to do div dot a pen child because we want to put it inside and we want to 36 00:03:39,300 --> 00:03:48,660 create a text node which we do with document dot create text mode and the text is going to be the message 37 00:03:49,290 --> 00:03:57,040 OK the message gets passed in and then to insert it we want to first get a parent. 38 00:03:57,720 --> 00:04:03,280 So for the parent We're going to use We're going to call this container. 39 00:04:03,330 --> 00:04:08,450 When to said this to document dot query selector. 40 00:04:08,720 --> 00:04:15,020 Now I'm not going to just use the container class container because if you look at the HCM now we have 41 00:04:15,050 --> 00:04:17,360 two class containers. 42 00:04:17,360 --> 00:04:22,700 So it's going to look at the first one and then things will not work correctly so that's why I added 43 00:04:22,700 --> 00:04:26,330 search container to this one because this is the one that we want. 44 00:04:26,360 --> 00:04:32,200 This is a parent to where we want to insert the the alert. 45 00:04:32,240 --> 00:04:32,620 All right. 46 00:04:32,620 --> 00:04:36,790 So let's go back here and let's put it in here. 47 00:04:37,040 --> 00:04:40,860 Search container like that. 48 00:04:41,270 --> 00:04:45,000 OK then we want to get the search box. 49 00:04:45,200 --> 00:04:51,170 So say Konst search equals document Daut 50 00:04:55,160 --> 00:05:01,290 queries selector and that has a class of search. 51 00:05:02,180 --> 00:05:04,000 And then we want to get. 52 00:05:04,030 --> 00:05:07,520 Or we want to insert the alert. 53 00:05:07,520 --> 00:05:18,050 So say container that variable container and then insert the 4 pass in our div which is the alert and 54 00:05:18,050 --> 00:05:20,850 then the search which is what we want to put it before. 55 00:05:20,930 --> 00:05:26,280 OK because you want it before the search up here. 56 00:05:27,620 --> 00:05:32,680 That should be good. 57 00:05:32,680 --> 00:05:35,680 Let's let's actually try that. 58 00:05:35,780 --> 00:05:46,400 So if we go and type in something crazy was this reference or a UL is not defined as just on 20 did 59 00:05:46,400 --> 00:05:46,550 I. 60 00:05:46,550 --> 00:05:51,570 Do you balance that of view I did and try again. 61 00:05:51,570 --> 00:05:53,870 So if we just type in crap here. 62 00:05:53,870 --> 00:05:56,430 All right so now you can see we're getting used or not found. 63 00:05:56,430 --> 00:06:02,240 And it just keeps going it's every time we hit a used or not found it creates a new alert. 64 00:06:02,240 --> 00:06:06,020 Now this obviously we don't want it to act like this. 65 00:06:06,020 --> 00:06:12,070 We just want one notification even if we hit multiple Not founds. 66 00:06:12,680 --> 00:06:20,540 So the solution to this is going to be to clear the alert before we actually output it. 67 00:06:20,540 --> 00:06:28,350 So let's go back to you I thought Jay ass and let's create a new method down here. 68 00:06:28,490 --> 00:06:36,830 Say clear alert message and we'll call this clear alert. 69 00:06:37,290 --> 00:06:37,750 OK. 70 00:06:37,760 --> 00:06:45,920 And then for this we're going to say first of all put into a variable the current alert set it to document 71 00:06:45,930 --> 00:06:53,310 dot query selector get it by it's class which is a word. 72 00:06:53,890 --> 00:06:59,040 And then we want to check to see if there is one or else we'll get an error. 73 00:06:59,050 --> 00:07:15,520 So we're going to say if current If current alert then we're going to say current alert Daut remove 74 00:07:15,570 --> 00:07:27,550 OK that should work and then let's go up here which says show alert in lets clear any remaining alerts 75 00:07:28,240 --> 00:07:32,890 by saying this dot clear alert. 76 00:07:33,120 --> 00:07:34,290 All right let's try that. 77 00:07:34,300 --> 00:07:41,030 So if we start typing here OK and now can see that we're not going to get more than one use or not found. 78 00:07:41,030 --> 00:07:47,650 Now another thing that I want to do is I don't want it to stay here because once we find a user that 79 00:07:47,650 --> 00:07:50,140 does exist that I mean that shouldn't stay there. 80 00:07:50,140 --> 00:07:55,470 So what we'll do and that's a crazy picture by the way. 81 00:07:55,990 --> 00:08:02,950 And so is the first one to be the user with what what is that a chicken and a kid with a sick cigarette 82 00:08:04,510 --> 00:08:05,770 or whatever. 83 00:08:05,770 --> 00:08:16,060 So anyway I want this to go away after three seconds so we're going to go down here and let's say time 84 00:08:16,060 --> 00:08:17,500 out after 85 00:08:21,670 --> 00:08:23,070 three seconds. 86 00:08:23,380 --> 00:08:29,160 So to do that we can use set time which is a great little function. 87 00:08:29,340 --> 00:08:41,000 It'll pass in here an arrow function because we can and then say this Daut clear alert and then take 88 00:08:41,080 --> 00:08:44,690 a second parameter of the time which is going to be 3000 milliseconds. 89 00:08:44,690 --> 00:08:46,780 So let's go ahead and clear that. 90 00:08:46,800 --> 00:08:48,230 Let's start to type. 91 00:08:48,490 --> 00:08:54,130 OK these are all fun and we get to Brad t.a that's not found in three seconds. 92 00:08:54,140 --> 00:08:55,720 There it goes it goes away. 93 00:08:55,720 --> 00:09:00,040 We hit another user that's not found three seconds goes away. 94 00:09:00,040 --> 00:09:03,070 So that's exactly how this should work. 95 00:09:03,070 --> 00:09:03,370 All right. 96 00:09:03,370 --> 00:09:05,990 So our alert is working. 97 00:09:06,010 --> 00:09:11,920 So what I want to do in the next video is get the repo's see how we have no repots down here because 98 00:09:11,920 --> 00:09:14,550 the Repos are not included in this. 99 00:09:14,560 --> 00:09:16,120 You are all that we fetched. 100 00:09:16,120 --> 00:09:22,650 It's actually included in this slash repo's like that. 101 00:09:22,710 --> 00:09:30,650 OK so you see and this is exactly what happens when you don't register an API key and use that in. 102 00:09:30,740 --> 00:09:33,850 Obviously I'm not using my API key in the browser. 103 00:09:34,040 --> 00:09:38,790 So I've exceeded my my requests. 104 00:09:38,810 --> 00:09:45,410 Now we can still do it through the application because the application when we fetch we look at Get 105 00:09:45,410 --> 00:09:52,340 Hobb we're actually using the client id in secret in the you are all in the browser I'm not so not able 106 00:09:52,340 --> 00:09:57,310 to do this anymore unless I unless I include it in the U R L but that's fine. 107 00:09:57,320 --> 00:10:02,680 We don't we don't need to it just gives us a list of reape of repositories for that user. 108 00:10:02,690 --> 00:10:06,170 So in the next video we're going to go ahead and fetch those repositories.