1 00:00:00,270 --> 00:00:05,220 Awesome work on right off 30 user card, cause we can display our followers. 2 00:00:05,730 --> 00:00:07,440 Now, where do we have our followers? 3 00:00:07,470 --> 00:00:14,790 Of course, that is in our context, correct, because first we set up the user mark user. 4 00:00:15,210 --> 00:00:19,290 Then we had a state value of repolish as well as the followers. 5 00:00:19,500 --> 00:00:24,990 Now we'll use the repos when we're setting up the charts, but now we would want to access the followers. 6 00:00:25,260 --> 00:00:31,230 So what's really cool is that since again, we're sharing this all throughout our application. 7 00:00:31,710 --> 00:00:39,300 I can easily access followers in my followers component, which of course is rendered in the user. 8 00:00:39,600 --> 00:00:41,170 So let's do that first. 9 00:00:41,280 --> 00:00:46,890 I guess I'm going to remove all my tabs, then I'm going to navigate to my followers. 10 00:00:46,920 --> 00:00:53,880 So at the moment we just have the heading to we have already input 40 GitHub contacts and let's right 11 00:00:53,880 --> 00:00:55,350 away get our followers. 12 00:00:55,440 --> 00:00:57,390 So we're going to say follow worse. 13 00:00:58,070 --> 00:01:02,170 And that one is coming from use contacts. 14 00:01:02,180 --> 00:01:08,170 So I'm going to use react, use context and then I'm gonna pass in my get up contacts. 15 00:01:08,620 --> 00:01:11,100 And just so we all are on the same page. 16 00:01:11,700 --> 00:01:17,120 We're gonna be looking at a giant object we munch overrides. 17 00:01:17,340 --> 00:01:19,590 Now, in this case, it says followers are not defined. 18 00:01:19,920 --> 00:01:22,500 Of course it's not defined because I misspelled it. 19 00:01:22,950 --> 00:01:24,180 Now I should have my followers. 20 00:01:24,210 --> 00:01:26,350 Now I'm going to navigate to a bigger screen. 21 00:01:27,520 --> 00:01:31,660 Because they think it's going to be easier to say sorry for, check out the console again, bunch of 22 00:01:31,660 --> 00:01:32,050 warnings. 23 00:01:32,080 --> 00:01:33,550 But then I have a of 30. 24 00:01:33,970 --> 00:01:34,750 Now, don't worry. 25 00:01:35,110 --> 00:01:43,960 Eventually, we're going to get followers and we will use the query where we're adding this per hundred, 26 00:01:44,320 --> 00:01:46,060 meaning we're going to get hundred followers. 27 00:01:46,480 --> 00:01:53,170 But in the Hmong data, I just set it up as a 30 and then each and every follower is an object. 28 00:01:53,200 --> 00:01:56,920 And then in the object, we have some properties that we wouldn't want to display. 29 00:01:57,310 --> 00:02:03,550 More specifically, I would want to showcase the image, the name, as well as where you can navigate 30 00:02:03,940 --> 00:02:07,060 in order to check out that follower's profile. 31 00:02:07,360 --> 00:02:08,560 So this is where we're going to do. 32 00:02:09,010 --> 00:02:10,120 We have the followers. 33 00:02:10,150 --> 00:02:10,720 Beautiful. 34 00:02:10,870 --> 00:02:12,900 Now, I don't need to console lock them anymore. 35 00:02:13,330 --> 00:02:15,730 Now I need to set up my rapport again. 36 00:02:16,010 --> 00:02:17,800 So my style component. 37 00:02:18,250 --> 00:02:24,610 Then inside of the wrapper, I would want to have a div with a class of followers. 38 00:02:25,150 --> 00:02:27,540 So follow the Hirsch show. 39 00:02:28,060 --> 00:02:31,150 And then within this they have now I'd want to iterate over my. 40 00:02:31,190 --> 00:02:31,540 All right. 41 00:02:31,840 --> 00:02:38,500 So let's go to followers and then map and then each and every object I'm going to have access to. 42 00:02:38,830 --> 00:02:40,080 Using the primer. 43 00:02:40,180 --> 00:02:40,570 Correct. 44 00:02:40,600 --> 00:02:41,870 So follower. 45 00:02:42,310 --> 00:02:43,060 That's my name. 46 00:02:43,480 --> 00:02:45,430 And then also I would want to grab the index. 47 00:02:46,490 --> 00:02:47,750 Because we're just going to use it. 48 00:02:48,260 --> 00:02:51,020 So I'm going to go here with my return. 49 00:02:51,470 --> 00:02:55,100 And that inside of their return, I just need to decide what I would want to display. 50 00:02:55,640 --> 00:03:04,480 And since each and every object is in my follower, I'm just gonna pull out my image my age. 51 00:03:04,580 --> 00:03:10,850 The email you are all meaning the location of the repo or the user, I guess more correctly, as it 52 00:03:10,850 --> 00:03:16,280 was the LOG-IN, which essentially just gives us the name of the follower. 53 00:03:16,610 --> 00:03:19,070 So we're gonna go with concept from the follower. 54 00:03:19,080 --> 00:03:20,690 We're going to look for Avatar. 55 00:03:21,050 --> 00:03:22,460 Then on the score, you are all. 56 00:03:22,800 --> 00:03:28,940 And I'm right away going to give it an Allegra's some de structuring from my follower object, but I'm 57 00:03:28,940 --> 00:03:36,840 going to give it an alias of I am G and nine ASTM all euro as well as the last one. 58 00:03:36,880 --> 00:03:38,510 Of course is dialoging. 59 00:03:38,930 --> 00:03:42,890 So those three things are coming from each and every follower. 60 00:03:43,280 --> 00:03:49,670 So iterating over my array and then each and every item is an object pushing that array. 61 00:03:50,210 --> 00:03:55,010 And then from that object I'm looking for Avatar Yoro, which is of course, the image. 62 00:03:55,280 --> 00:03:59,000 Now I'm going to give an analysis of image because it's easier than H.T. Amelle. 63 00:03:59,000 --> 00:04:00,810 You are all as well as the log. 64 00:04:01,340 --> 00:04:04,700 And once I have this now, I just need to decide what I would want to return. 65 00:04:05,000 --> 00:04:08,630 So in here, I'm going to go with article. 66 00:04:09,080 --> 00:04:11,330 Then let's add a key, because again, we have the list. 67 00:04:11,390 --> 00:04:13,880 That's why I grabbed the index as well. 68 00:04:14,300 --> 00:04:16,130 And then we're just going to have the image. 69 00:04:16,670 --> 00:04:21,110 Now, keep in mind, we already have the I am G correct. 70 00:04:21,330 --> 00:04:21,940 Ellers here. 71 00:04:22,420 --> 00:04:26,480 Now for the alternative, we're gonna have a log-in that's gonna be our name. 72 00:04:26,960 --> 00:04:29,180 So we should see already some images. 73 00:04:29,360 --> 00:04:29,780 Awesome. 74 00:04:30,290 --> 00:04:33,800 And then after that, I would want to have a div here. 75 00:04:34,220 --> 00:04:37,850 So right next to it, let's place quickly a div. 76 00:04:38,300 --> 00:04:41,720 And then inside that div we're going to get a heading for. 77 00:04:42,080 --> 00:04:48,620 And then inside of that heading for, we're just going to display a logging property right after the 78 00:04:48,620 --> 00:04:49,150 logging. 79 00:04:49,760 --> 00:04:53,140 We are going to go with our atrip. 80 00:04:53,540 --> 00:04:55,010 So let's go with a. 81 00:04:55,550 --> 00:04:58,640 And of course in here we're looking for HDMI. 82 00:04:58,640 --> 00:05:04,960 I'll underscore your all as far as the value is gonna be exactly the same as the amount you are all. 83 00:05:05,270 --> 00:05:05,800 Well, Sarah. 84 00:05:06,230 --> 00:05:08,240 Everything looks really well. 85 00:05:08,600 --> 00:05:13,760 Now, the one thing that I messed up is the fact that the link should be right here. 86 00:05:14,120 --> 00:05:14,780 My apologies. 87 00:05:15,080 --> 00:05:19,880 Now, once we add that, of course, now we're displaying the user's snorers, how we can scroll up 88 00:05:19,880 --> 00:05:24,920 and down and see the followers that the user has.