1 00:00:00,850 --> 00:00:03,150 All right guys so we are almost there. 2 00:00:03,150 --> 00:00:10,210 Now we can fetch the profiles of users but we want to include. 3 00:00:11,250 --> 00:00:14,260 We want to include the repositories as well. 4 00:00:14,310 --> 00:00:21,130 So what we need to do is go to our Get Not Jazz file and just like we made this a weight fecche request 5 00:00:21,130 --> 00:00:26,430 with for our profile we're going to do the same thing for the repo's So I'm actually going to copy this 6 00:00:26,430 --> 00:00:34,740 line and then we're going to call this repots or repo response and we're going to change the you are 7 00:00:34,740 --> 00:00:36,200 all up here just a bit. 8 00:00:36,210 --> 00:00:38,930 We want to go we're going to leave all this. 9 00:00:39,000 --> 00:00:44,410 Even the user and then we just want to add on to the end slash repo's. 10 00:00:44,800 --> 00:00:45,500 OK. 11 00:00:45,570 --> 00:00:50,400 Now there's actually some parameters that I want to add here because if we just do it like this it's 12 00:00:50,400 --> 00:00:56,750 going to fetch all the users repo's and they don't want a list of 100 repositories on the profile. 13 00:00:56,760 --> 00:01:01,100 So what I'm going to do is put a couple of properties up here one is going to be the count. 14 00:01:01,140 --> 00:01:07,420 So it's going to be this dog repo's underscore count and I'm going to set that to five. 15 00:01:07,560 --> 00:01:10,780 You can change it if you want but I think five is a good number. 16 00:01:10,890 --> 00:01:12,590 And then we also want to sort it by. 17 00:01:12,600 --> 00:01:14,940 We want the latest ones first. 18 00:01:15,090 --> 00:01:18,580 So let's say this start repo's underscore sort. 19 00:01:18,870 --> 00:01:27,780 And we're going to set that too created Colwin A.S.C. and we can use these as queery strings in our 20 00:01:27,780 --> 00:01:36,760 you are able to format the response so I'm going to go let's see let's actually do it before we put 21 00:01:36,760 --> 00:01:38,340 in the client's secret ID. 22 00:01:38,350 --> 00:01:45,660 So right after user I'm sorry right after repo's where we have this question mark right after the question 23 00:01:45,660 --> 00:01:55,080 mark we're going to say per underscore page B calls and then we're going to put in the this Daut repo's 24 00:01:55,100 --> 00:01:56,100 konked. 25 00:01:56,550 --> 00:01:57,020 OK. 26 00:01:57,030 --> 00:02:05,130 And then we're going to put in ampersand and then we want to do sort equals another variable which will 27 00:02:05,130 --> 00:02:09,430 be this Daut free sort. 28 00:02:09,570 --> 00:02:12,250 And then just put an amber stamp here at the end. 29 00:02:12,450 --> 00:02:14,780 And then our client id and all that. 30 00:02:14,790 --> 00:02:17,370 So that's going to be the if the you are l. 31 00:02:17,440 --> 00:02:23,040 Now down here we got the profile we want to do the same thing with the repo so I'm going to go ahead 32 00:02:23,040 --> 00:02:33,150 and just copy this and then we're going to say three HBOS equals a weight repots response and then we're 33 00:02:33,150 --> 00:02:37,040 going to add that to the object here that's being returned. 34 00:02:37,560 --> 00:02:42,540 And by the way doing this is the same as doing this. 35 00:02:42,540 --> 00:02:52,370 So let's go ahead and save that and that should be all set hopefully and then we'll go to app J.S. and 36 00:02:52,370 --> 00:02:59,270 we're going to go down to where we have our show profile and we also want to call UIA dot show repo's 37 00:03:00,230 --> 00:03:06,740 and we want to pass in data repots because now that should be part of the data object because we're 38 00:03:06,740 --> 00:03:09,890 returning it right here in addition to the profile. 39 00:03:09,920 --> 00:03:14,200 So we now have data daat profile and data repo's. 40 00:03:14,240 --> 00:03:20,080 All right so now the last step here is to create the show repo's in the UI class. 41 00:03:20,150 --> 00:03:23,530 So let's go well go right below show profile 42 00:03:31,570 --> 00:03:34,660 case that's going to take in the repots array 43 00:03:39,350 --> 00:03:48,320 and since this is an array we're going to do is initialize an output variable to nothing and then we're 44 00:03:48,320 --> 00:03:58,500 going to loop through the repo so we're going to use a foreach and in here will say Ribault I'm sorry 45 00:03:58,500 --> 00:03:59,940 we have to put a function in here 46 00:04:04,310 --> 00:04:06,880 and then we'll put Ribault. 47 00:04:07,430 --> 00:04:12,680 So we can access each one and we're going to create We're going to take that output variable and we're 48 00:04:12,680 --> 00:04:18,020 going to append to it with plus equals and we want to use a template literal here. 49 00:04:18,020 --> 00:04:23,280 All right so now for each repository what I want to do is put it into a card. 50 00:04:23,660 --> 00:04:34,040 So again we'll create a class with card and let's do card dash body and let's do and b use me dashed 51 00:04:34,060 --> 00:04:34,470 to 52 00:04:37,310 --> 00:04:40,620 K and then inside here we're going to create a row class 53 00:04:48,770 --> 00:04:58,940 and we're going to have two six column divs so div class equals call him the six 54 00:05:03,090 --> 00:05:05,610 K we're going to have two of those 55 00:05:08,900 --> 00:05:14,180 and on this side we're going to have the repository name with a link wrapped around it. 56 00:05:14,220 --> 00:05:23,200 So to get the name we can simply do Ribault dot name and then we're going to wrap a link around it. 57 00:05:24,730 --> 00:05:29,280 Let's put a target of blank 58 00:05:33,190 --> 00:05:38,520 and the link is going to be repo dots. 59 00:05:38,600 --> 00:05:42,070 H t M-L underscore you are ELF. 60 00:05:42,110 --> 00:05:44,790 All right make sure we close that tag as well. 61 00:05:44,870 --> 00:05:45,990 So that's that. 62 00:05:46,130 --> 00:05:52,160 That comb the other column is going to have a couple of badges with the number of stars washers and 63 00:05:52,160 --> 00:05:59,840 forks so it's going to have badges like we did up here so I'm just going to copy the first three spans 64 00:05:59,840 --> 00:06:04,170 right here and put them here. 65 00:06:06,450 --> 00:06:12,120 So see this one will be stars. 66 00:06:12,120 --> 00:06:19,980 And it's actually this is actually going to be Ribault Daut stargazers count. 67 00:06:20,360 --> 00:06:21,910 That's just what they call it. 68 00:06:22,350 --> 00:06:25,730 And then we also have the watchers. 69 00:06:25,860 --> 00:06:32,450 So people that watch the repositories for that will be Ribault dog watchers. 70 00:06:33,870 --> 00:06:42,990 And then we also have the fork's so people that for the repository Ribault dog forks or fork's count 71 00:06:43,700 --> 00:06:48,230 and it should actually be watchers as well. 72 00:06:48,240 --> 00:06:49,470 All right so that's good. 73 00:06:49,470 --> 00:06:51,320 Now after the For Each loop. 74 00:06:51,360 --> 00:06:58,680 So it ends right here we want to go under it and we want to output the repositories. 75 00:06:58,680 --> 00:07:12,360 So we'll say document Daut get element by the repo's and we're going to set the enraged him now equal 76 00:07:12,360 --> 00:07:15,060 to the output variable. 77 00:07:15,060 --> 00:07:15,470 Great. 78 00:07:15,510 --> 00:07:20,490 So let's save it and now go back and let's put a bee in here. 79 00:07:20,790 --> 00:07:23,980 Looks like something's wrong. 80 00:07:24,060 --> 00:07:27,150 Let's see rebozo response is not defined. 81 00:07:27,150 --> 00:07:32,910 So looks like I did something wrong here and that's because I have an acid in this one and not in this 82 00:07:32,910 --> 00:07:33,150 one. 83 00:07:33,150 --> 00:07:38,190 So let's take that S-O and we'll try it again. 84 00:07:38,190 --> 00:07:38,820 There we go. 85 00:07:38,820 --> 00:07:46,760 And now you can see we have that user's latest five repo's. 86 00:07:46,820 --> 00:07:53,190 All right so if we check check out mine and you can see from the last five repo's here I should be able 87 00:07:53,190 --> 00:08:05,730 to go to my actual harbor pausa Tori and let's see can I can see how babbel web pack Heredia. 88 00:08:05,770 --> 00:08:13,970 I don't know why s.c.i blog is on the top o because it was updated the earliest but you can see that 89 00:08:13,980 --> 00:08:20,120 web packs start or no text up a Dawna's blog and that's what we're seeing right here as well. 90 00:08:20,120 --> 00:08:23,950 All right so our application is now done. 91 00:08:23,950 --> 00:08:29,000 And if we clear this so then that everything should go away. 92 00:08:29,030 --> 00:08:29,300 All right. 93 00:08:29,300 --> 00:08:34,370 So I think that this was a good project because it gave you a lot of insight into things that we've 94 00:08:34,370 --> 00:08:46,130 looked at such as the fecche API such as promises async awaits classes yes six classes aero functions 95 00:08:46,610 --> 00:08:53,900 events pretty much you know all of the core fundamentals that we've gone through so far. 96 00:08:53,900 --> 00:08:57,230 So I think it's it's a good experience. 97 00:08:57,240 --> 00:09:02,090 This is a good application to learn with and we use some extra files we didn't put everything in the 98 00:09:02,090 --> 00:09:03,310 same file. 99 00:09:03,800 --> 00:09:09,550 So in the next video what we're going to do is we're going to move on to another project using an API. 100 00:09:09,560 --> 00:09:14,810 We're going to use the W underground or weather underground API and we're going to create a nice little 101 00:09:14,810 --> 00:09:20,630 weather application where we can get the weather we can get a little icon for whatever the weather is 102 00:09:20,990 --> 00:09:26,600 and we can define the city and state that we want to get the weather for and we'll save that in local 103 00:09:26,600 --> 00:09:32,660 storage so that when we come back to the application it actually gives us the weather for that city 104 00:09:32,660 --> 00:09:34,340 and state that's been saved. 105 00:09:34,340 --> 00:09:39,400 So I think it's another nice application to create using an API. 106 00:09:39,410 --> 00:09:40,410 So thanks guys. 107 00:09:40,440 --> 00:09:42,500 And I will see you in the next project.