1 00:00:00,650 --> 00:00:05,070 IT guys in the last video we made it so that we could fetch data from get hub. 2 00:00:05,100 --> 00:00:11,100 We created a little good hub class that will do that for us using promises and a sink and a. 3 00:00:11,400 --> 00:00:14,400 And then we're returning that data in the profile. 4 00:00:14,640 --> 00:00:23,820 So now we want to do is we want to render the profile in the dorm in the UI when it's fecche So that 5 00:00:23,820 --> 00:00:26,300 will happen right here with show profile. 6 00:00:26,430 --> 00:00:33,210 So what we'll do is go to the UI dot J.S. and we're going to create a UI class. 7 00:00:33,210 --> 00:00:33,540 All right. 8 00:00:33,540 --> 00:00:39,110 So we'll see say class UI and we'll create a constructor. 9 00:00:41,490 --> 00:00:44,990 And it's just going to have a property called profile. 10 00:00:45,090 --> 00:00:54,260 So the start profile we're going to set it to document Dart's get element by the profile. 11 00:00:54,390 --> 00:00:59,700 So basically that's talking about this right here in our index each team Well that's going to be the 12 00:00:59,700 --> 00:01:01,720 placeholder for the profile. 13 00:01:02,100 --> 00:01:13,320 And then let's create a method called show profile and that's going to take in a user. 14 00:01:13,320 --> 00:01:21,780 Now if we go back to J.S. we want to initialize or instantiate the UI class so let's call this 15 00:01:24,570 --> 00:01:31,030 protocol as you said new to call the constructor in new UI like that. 16 00:01:31,440 --> 00:01:38,940 And then down here where we say show profile we want to do UI Daut show profile. 17 00:01:38,970 --> 00:01:45,440 Now remember that takes in a user and we can get that from data Daut profile. 18 00:01:45,810 --> 00:01:51,690 OK because that's that's what we're getting back from this get hub get user. 19 00:01:51,690 --> 00:01:57,630 So we're going to pass in here data Daut profile. 20 00:01:57,630 --> 00:02:03,770 So let's say that UI is not defined. 21 00:02:03,910 --> 00:02:06,060 C is not defined. 22 00:02:06,060 --> 00:02:10,410 We have Konst Google's new UI. 23 00:02:10,530 --> 00:02:12,420 I saved this file No I didn't. 24 00:02:12,420 --> 00:02:15,590 OK so save that now that error is gone. 25 00:02:15,600 --> 00:02:22,600 So let's just see what we get if we go ahead and say cancel dot log or 8 here for user. 26 00:02:23,130 --> 00:02:29,180 If I go and I type in a b and you can see we get all that users info. 27 00:02:29,400 --> 00:02:37,140 So we want to take this user data and we want to build basically build a template from it using a template 28 00:02:37,140 --> 00:02:45,230 string or a template literal and then inserted into this profile which is that profile ID. 29 00:02:45,270 --> 00:02:47,340 All right so let's go ahead and do that. 30 00:02:47,340 --> 00:02:58,170 So save this Daut profile Daut inner h team out equals a template string and then we're going to have 31 00:02:58,170 --> 00:03:01,230 a whole mess of markup here. 32 00:03:01,230 --> 00:03:08,880 Now I know some people like when I copy and paste each T-Mo because they don't want to you know watch 33 00:03:08,880 --> 00:03:12,180 me type a whole mess of a smile but some people don't. 34 00:03:12,210 --> 00:03:17,250 It makes them feel like we're kind of skipping around and stuff so I'm going to go ahead and type it 35 00:03:17,250 --> 00:03:18,150 out if you want. 36 00:03:18,150 --> 00:03:20,240 You can just kind of fast forward the video. 37 00:03:20,460 --> 00:03:25,200 But I am going to type this out and kind of explain the layout a little bit even though this isn't a 38 00:03:25,200 --> 00:03:27,470 bootstrap course or anything. 39 00:03:27,870 --> 00:03:32,040 But and speaking of that I do have a bootstrap for course. 40 00:03:32,040 --> 00:03:39,450 So we're going to create a div with the class of card and card body that will give us a border and some 41 00:03:39,450 --> 00:03:42,500 padding and some drop shadows things like that. 42 00:03:42,540 --> 00:03:48,390 I'm also going to do M-B three which will give it margined bottom a little margin on the bottom and 43 00:03:48,390 --> 00:03:52,380 then we're going to use the grid system so we need a road class. 44 00:03:56,020 --> 00:03:58,930 And inside here we'll have two columns. 45 00:03:59,210 --> 00:04:07,550 The first one will be a three column divs so call em D-3 that's where the image of the Avatar is going 46 00:04:07,550 --> 00:04:08,030 to go. 47 00:04:08,030 --> 00:04:11,160 And then under that was just copy this. 48 00:04:11,180 --> 00:04:14,860 We're going to have a 9 column div that's where everything else is going to go. 49 00:04:15,080 --> 00:04:22,040 So it's start in three column and we're going to have an image that's going to have a class of I Am 50 00:04:22,040 --> 00:04:26,690 G fluid which will make it 100 percent of its container. 51 00:04:26,690 --> 00:04:31,190 We're also going to give it a little margin bottom because there's going to be a link underneath it 52 00:04:31,190 --> 00:04:35,450 or a button underneath it and then the source is going to be dynamic. 53 00:04:35,450 --> 00:04:37,250 This comes from the API. 54 00:04:37,400 --> 00:04:44,810 So if we look at this link here which is the link that we're fetching you can see that there is in whereas 55 00:04:44,810 --> 00:04:51,310 it's hurried here avatar you are l and that points to the image file. 56 00:04:51,330 --> 00:04:57,330 So that's what we want to put right here so we're going to use our variable expression and we're going 57 00:04:57,330 --> 00:05:06,150 to say user Daut Avatar underscore you or else so we have access to all of this data for whatever user 58 00:05:06,150 --> 00:05:07,760 is being looked at. 59 00:05:07,830 --> 00:05:10,000 So that get us the image now. 60 00:05:10,020 --> 00:05:18,030 Underneath it we're going to have an eight tag and it's going to go to this right here which is the 61 00:05:18,030 --> 00:05:25,650 Get have profiles so it's each team l u r l so in here we want to put a variable of user dots. 62 00:05:25,890 --> 00:05:33,500 Each team will underscore you are l and we're going to make this target the schools underscore blank 63 00:05:33,510 --> 00:05:41,970 so it opens on a new tab and then we also want to add some bootstrap classes so between between primary 64 00:05:42,570 --> 00:05:54,550 and let's do DTN block which will make it a block level element and we'll just say View Profile. 65 00:05:54,870 --> 00:05:59,790 All right so that's the three call them now the nine call them we'll have all of the other the rest 66 00:05:59,790 --> 00:06:05,850 of the info so I'm going to put spanne class and we're going to use badges here which are just like 67 00:06:05,850 --> 00:06:08,490 little background colors. 68 00:06:08,610 --> 00:06:10,150 So it's a badge. 69 00:06:10,170 --> 00:06:18,810 And then the color will see Badge dash primary and then what we're going to put here is the number of 70 00:06:18,840 --> 00:06:30,180 public repo's the user has Let's save public reposes a label and then let's say user underscore no user 71 00:06:30,210 --> 00:06:37,250 Daut public underscore repo's. 72 00:06:37,950 --> 00:06:38,390 OK. 73 00:06:38,400 --> 00:06:42,000 And then we're going to have some other stuff here as well so we're going to just go ahead and copy 74 00:06:42,000 --> 00:06:44,600 this couple of times four times. 75 00:06:44,610 --> 00:06:51,600 This one here I'm going to change the color to secondary and then this is going to be the public just's 76 00:06:53,400 --> 00:06:57,010 so will change this gists. 77 00:06:57,240 --> 00:07:06,650 And then this one will say badge Dasch success and then this one's going to be the followers which will 78 00:07:06,650 --> 00:07:15,260 be user Daut followers and you can see all the those all the data over here followers and will do following 79 00:07:15,950 --> 00:07:19,380 which will be badged dash info. 80 00:07:19,690 --> 00:07:25,990 And I'll say following in the end user Daut following. 81 00:07:27,040 --> 00:07:31,970 OK and then underneath the last span we're just going to put a couple of line breaks in we're going 82 00:07:31,970 --> 00:07:39,890 to have a UL with the class of list group. 83 00:07:39,980 --> 00:07:42,100 All bootstrap classes. 84 00:07:42,500 --> 00:07:45,330 And in here we'll have a couple of list items. 85 00:07:45,740 --> 00:07:49,340 So these allys you want to give a class of list group item 86 00:07:52,170 --> 00:07:55,910 unless you want them to look absolutely horrible. 87 00:07:56,240 --> 00:08:05,630 And then in here we'll have the company sells a user Dauth company and then let's just copy this line 88 00:08:06,980 --> 00:08:14,930 say three more times and then under the company we're going to have the Web site slash blog and you 89 00:08:14,930 --> 00:08:22,250 can see there's a blog right here and it's actually it's actually pointed to my Web site so this will 90 00:08:22,250 --> 00:08:24,280 be user Daut blog. 91 00:08:24,590 --> 00:08:32,570 And then under that we're going to do the location which we can get with the user dot location and then 92 00:08:32,570 --> 00:08:37,790 we also want the created at which I'm going to call member since. 93 00:08:37,790 --> 00:08:44,630 So how long they've been registered at get hub so created an underscore at. 94 00:08:45,480 --> 00:08:47,030 And yeah that should be it. 95 00:08:47,030 --> 00:08:53,150 Now at the very bottom here I'm going to put an H-3 with the class of page heading 96 00:08:56,090 --> 00:09:03,080 and also and the dash 3 which has a margin bottom and then this is where the public Repos are going 97 00:09:03,080 --> 00:09:03,540 to go. 98 00:09:03,560 --> 00:09:06,450 So we're going to say latest repo's. 99 00:09:06,710 --> 00:09:08,630 And then just a placeholder for that. 100 00:09:08,630 --> 00:09:11,650 So that will be a div with the idea of repo's. 101 00:09:12,080 --> 00:09:12,410 All right. 102 00:09:12,410 --> 00:09:19,610 So hopefully this wasn't too much torture to watch me type this out but this is going to be the profile 103 00:09:20,020 --> 00:09:21,380 or the profile display. 104 00:09:21,420 --> 00:09:23,870 So let's save this. 105 00:09:23,870 --> 00:09:29,110 And now let's go back to app J.S.. 106 00:09:29,210 --> 00:09:30,620 We've already initialized it. 107 00:09:30,620 --> 00:09:32,770 We're already calling it down here. 108 00:09:32,930 --> 00:09:34,190 So let's see what happens. 109 00:09:34,190 --> 00:09:39,010 Make sure everything is saved and we'll put in a B here and there we go. 110 00:09:39,140 --> 00:09:42,370 And it's actually well it's kind of responsive. 111 00:09:42,380 --> 00:09:50,390 I guess we could put some margin bottom under this this button right here so let's do that. 112 00:09:50,390 --> 00:09:51,290 So that's this. 113 00:09:51,290 --> 00:10:01,920 Actually this link will say Amby for save. 114 00:10:01,940 --> 00:10:03,570 There we go so that looks better. 115 00:10:03,880 --> 00:10:07,410 And if we make this bigger of course it's going to stretch out the column. 116 00:10:07,400 --> 00:10:12,350 So Alex pretty good if I go ahead and type B.R. it will fetch that profile. 117 00:10:12,350 --> 00:10:16,340 I can keep typing. 118 00:10:16,340 --> 00:10:23,730 Now every time it hits you are a user that doesn't exist it's going to send this 404 not found. 119 00:10:23,780 --> 00:10:29,930 And what we want to happen in the UI when that happens is we want to show an alert that says that user 120 00:10:29,930 --> 00:10:35,150 isn't found and then just keep whatever the current profile is on the page. 121 00:10:35,150 --> 00:10:36,800 All right so that's what we're going to do next. 122 00:10:36,800 --> 00:10:41,180 Guys we're going to take care of the alert which will be part of the UI class. 123 00:10:41,180 --> 00:10:42,980 All right so I will see you in the next video.