1 00:00:00,240 --> 00:00:00,570 All right. 2 00:00:00,600 --> 00:00:09,750 So once we have our global state and once we made our default values available all throughout our application 3 00:00:09,990 --> 00:00:18,510 by using the used state hook line, setting up the object with the properties that are equal to our 4 00:00:18,510 --> 00:00:21,660 values, whether AD is get up user repos and followers. 5 00:00:22,260 --> 00:00:26,620 Now, of course, we can finally start working on the components. 6 00:00:26,920 --> 00:00:31,890 On the first component that I would want to work on is not the search, not the nav bar. 7 00:00:32,280 --> 00:00:37,230 Because for the search, eventually you would want to of course, set up my friends request. 8 00:00:37,650 --> 00:00:43,170 So I think that just makes a little bit more sense once we're done with our static components, meaning 9 00:00:43,380 --> 00:00:45,150 the ones that just display the data. 10 00:00:45,600 --> 00:00:53,430 And then once we are ready to set up our functionality, then, of course, we'll also set up our search 11 00:00:53,430 --> 00:00:59,490 component as well as the Navar, because for Navar, we need to have the authentication provider. 12 00:00:59,490 --> 00:01:06,180 So again, we'll leave those two for now alone and we'll start working with our info. 13 00:01:06,600 --> 00:01:12,660 So the one that displays how many reposts we have, the followers following and the gists. 14 00:01:12,840 --> 00:01:15,150 Now we can start doing that. 15 00:01:15,630 --> 00:01:24,360 My first I guess I'm gonna close all my files cause my tabs are getting really busy and I'm looking 16 00:01:24,360 --> 00:01:25,530 for my info address. 17 00:01:26,280 --> 00:01:29,580 The one that we finished in the previous video. 18 00:01:30,060 --> 00:01:36,590 And then in my component, instead of looking for the whole data, I already know that I can to structure 19 00:01:36,590 --> 00:01:36,750 it. 20 00:01:37,290 --> 00:01:41,070 Correct, because I have a giant object in that object. 21 00:01:41,400 --> 00:01:42,600 I have a good user. 22 00:01:43,020 --> 00:01:48,270 So instead of looking for the data, I'm going to say, yeah, I'm getting back some kind of object. 23 00:01:48,510 --> 00:01:56,550 So I'd want the structure from that data, a GitHub, GitHub user, and then I would want to structure 24 00:01:56,610 --> 00:01:58,530 more things from that user. 25 00:01:59,050 --> 00:02:04,350 So let me first the structure, those things, and then I'll show you where you can find them. 26 00:02:04,800 --> 00:02:06,030 If you're still confused. 27 00:02:06,360 --> 00:02:07,320 So I'm going to vote counts. 28 00:02:07,380 --> 00:02:10,110 That is gonna be equal to my get up user. 29 00:02:10,560 --> 00:02:13,380 And then I'm looking for three things or I'm sorry for. 30 00:02:13,560 --> 00:02:15,780 So I'm looking for public repose. 31 00:02:16,320 --> 00:02:18,600 That's the property and followers. 32 00:02:18,920 --> 00:02:26,360 And then following and then also public online underscore gists. 33 00:02:27,000 --> 00:02:28,980 So these are the four things that we're looking for. 34 00:02:29,370 --> 00:02:31,440 And of course, you can console log all of them. 35 00:02:31,470 --> 00:02:35,830 But I'm just gonna go public on this score or EBOs. 36 00:02:36,450 --> 00:02:37,890 Now where I can find this data. 37 00:02:38,790 --> 00:02:42,590 Well, if you use one of the you are L's. 38 00:02:42,600 --> 00:02:48,390 And I guess in this case, more correctly would be if you use the you are all looking to navigate there. 39 00:02:48,840 --> 00:02:53,460 The API GitHub users and then forward slash the user name. 40 00:02:53,820 --> 00:02:55,550 If you use this, you are real. 41 00:02:55,890 --> 00:02:57,870 This is the information you're gonna get back. 42 00:02:57,930 --> 00:03:01,190 Meaning those properties are on that object. 43 00:03:01,530 --> 00:03:02,550 So if I check it out. 44 00:03:02,670 --> 00:03:06,210 The users and non hyphen was boss. 45 00:03:06,660 --> 00:03:14,250 This is the object that we're getting back and the properties are following where again, I'm looking 46 00:03:14,250 --> 00:03:17,550 for the repos, the followers and all that. 47 00:03:17,810 --> 00:03:20,520 So notice followers, just the name of the property. 48 00:03:21,050 --> 00:03:26,700 Then the same goes for public repose for public, just as well as what was the fourth one? 49 00:03:27,030 --> 00:03:28,300 Well, I don't remember anyway. 50 00:03:28,920 --> 00:03:34,180 So we have the info where I'm looking for public rebo followers following and public. 51 00:03:34,250 --> 00:03:34,450 Yes. 52 00:03:34,920 --> 00:03:39,870 And also, if you want to double check whether those properties there, of course, you can use the 53 00:03:39,910 --> 00:03:46,560 mark repoll Awana recopying person because please keep in mind, we copy and paste the same thing. 54 00:03:47,160 --> 00:03:47,410 OK. 55 00:03:47,940 --> 00:03:53,700 So we're just pulling out the properties that we know are on that object. 56 00:03:54,140 --> 00:04:01,260 And in our case, since we're looking for repulsed followers following an while, that's why we're pulling 57 00:04:01,260 --> 00:04:02,520 out of that object. 58 00:04:02,870 --> 00:04:04,040 And once we have pulled them out. 59 00:04:04,990 --> 00:04:07,180 Now I want to set up some kind of array. 60 00:04:07,450 --> 00:04:07,810 Why? 61 00:04:08,320 --> 00:04:13,420 Well, because if I'm looking at what I'm getting display now, this is pretty much going to be the 62 00:04:13,420 --> 00:04:14,050 same thing. 63 00:04:14,560 --> 00:04:17,740 Only thing that's gonna change is the icon. 64 00:04:18,070 --> 00:04:20,170 I'm also gonna change the color of the icon. 65 00:04:20,930 --> 00:04:22,030 And, of course, some data. 66 00:04:22,150 --> 00:04:22,540 Correct. 67 00:04:22,960 --> 00:04:25,370 But everything else should be exactly the same. 68 00:04:25,390 --> 00:04:31,590 So I think it's gonna be easier if we set up some kind of array with this date. 69 00:04:31,600 --> 00:04:32,080 Of course. 70 00:04:32,530 --> 00:04:34,480 And then we can iterate over that data. 71 00:04:34,840 --> 00:04:40,420 We'll set up one more component in the fall for each and every item that we have. 72 00:04:41,110 --> 00:04:46,830 And then, of course, we'll render it because you'll notice that we have all our says already. 73 00:04:47,320 --> 00:04:50,070 So let's first start by setting up our. 74 00:04:50,230 --> 00:04:50,590 All right. 75 00:04:50,980 --> 00:04:56,410 Now, I'm going to call these items not as my array in each and every item in that array is going to 76 00:04:56,410 --> 00:04:56,950 be an object. 77 00:04:57,320 --> 00:04:58,900 So I have array of objects. 78 00:04:59,320 --> 00:05:04,360 And as far as the values, well, I'm gonna have a property of an I.D. because we already know that 79 00:05:04,420 --> 00:05:09,550 if we have list of items, we need to have a key prop and then it needs to have a unique value. 80 00:05:09,550 --> 00:05:11,320 And I'm just gonna go when I need this case. 81 00:05:11,890 --> 00:05:14,350 Then the second property is going to be an icon. 82 00:05:14,440 --> 00:05:16,180 So what icon I would want to display. 83 00:05:16,740 --> 00:05:21,400 And you'll notice at the top that I already imported the icons I want on display. 84 00:05:22,240 --> 00:05:24,460 So have the icon property. 85 00:05:24,580 --> 00:05:30,130 And that is going to be equal in the first case to a go and then repoll. 86 00:05:30,820 --> 00:05:34,060 And then I'll add here a class name of icon. 87 00:05:34,510 --> 00:05:35,680 So that's my second property. 88 00:05:36,220 --> 00:05:38,410 Then I would want to display the label. 89 00:05:38,890 --> 00:05:40,450 So what is going to be my value? 90 00:05:40,450 --> 00:05:43,660 And by the way, I need to close out my go repoll icon. 91 00:05:44,140 --> 00:05:48,410 So the value is going to be repoll Vacek repos. 92 00:05:48,620 --> 00:05:48,880 Sorry. 93 00:05:48,880 --> 00:05:49,540 More correctly. 94 00:05:49,960 --> 00:05:51,970 So I'm going to have a label here. 95 00:05:52,600 --> 00:05:55,150 And the value is going to be repos. 96 00:05:55,730 --> 00:05:58,180 Then I would also want to have the actual value. 97 00:05:58,570 --> 00:06:02,450 And this is the one that's coming from my get up user. 98 00:06:03,010 --> 00:06:06,610 So that's the one that's gonna be changing when we perform the fetch request. 99 00:06:07,000 --> 00:06:11,510 And when we update the user value in our get up contacts. 100 00:06:12,190 --> 00:06:13,960 But at the moment, of course, it's hardcoded. 101 00:06:14,250 --> 00:06:16,360 And the property name is gonna be value. 102 00:06:17,410 --> 00:06:23,380 And this is equal to a property that we're pulling out, of course, from our giddap user. 103 00:06:23,820 --> 00:06:30,340 And last thing is gonna be color and yes, please, if you want to use my styling, use the same classifiers 104 00:06:30,430 --> 00:06:36,250 because you'll notice that in the styled component they match. 105 00:06:36,880 --> 00:06:38,410 If I have a class of pink. 106 00:06:38,860 --> 00:06:40,240 This is exactly what I have here. 107 00:06:40,720 --> 00:06:43,030 So if you don't like name, of course you can change it. 108 00:06:43,060 --> 00:06:48,400 And you can also name change in the wrapper in the style component. 109 00:06:48,550 --> 00:06:49,270 That's up to you. 110 00:06:49,300 --> 00:06:51,910 But if you want to follow along. 111 00:06:51,920 --> 00:06:52,430 Exactly. 112 00:06:52,480 --> 00:06:56,200 Then use the same class name and you can change it later if you want. 113 00:06:56,590 --> 00:06:58,280 So this is going to be my first item. 114 00:06:58,700 --> 00:07:01,450 And now, of course, if I'm looking at I have three more. 115 00:07:02,080 --> 00:07:08,260 So we just need to selected one copy and paste and just change these values. 116 00:07:08,770 --> 00:07:10,720 So we have a commas and all that is good. 117 00:07:11,140 --> 00:07:15,580 And then for the second one, of course, the I.D. is going to be number two. 118 00:07:16,120 --> 00:07:26,200 The icon name will be F.A.A. or I'm sorry if I guess users the label is going to be followers. 119 00:07:27,380 --> 00:07:27,970 Followers. 120 00:07:28,890 --> 00:07:32,640 So when the value, of course, is not going to be public repose. 121 00:07:33,060 --> 00:07:34,190 So they're gonna be followers. 122 00:07:35,480 --> 00:07:35,940 Followers. 123 00:07:36,020 --> 00:07:38,400 That's the one that we're pulling out of the gate of user. 124 00:07:38,840 --> 00:07:42,230 And as far as the styling, the class name will be green. 125 00:07:42,800 --> 00:07:43,880 So that's our second one. 126 00:07:44,420 --> 00:07:46,550 Then for the third one idea of three. 127 00:07:47,270 --> 00:07:52,880 That's not a surprise as far as the icon we're going with F I. 128 00:07:53,450 --> 00:07:59,930 And then use Zeus and nine plus icon names does the same label. 129 00:08:00,200 --> 00:08:01,100 We'll be following. 130 00:08:01,830 --> 00:08:04,790 So the text that we're displaying is going to be falling. 131 00:08:05,210 --> 00:08:08,270 The value is going from the get up user. 132 00:08:08,660 --> 00:08:10,580 So we're going with a following. 133 00:08:11,070 --> 00:08:13,780 And as far as the styling, we go we purple. 134 00:08:14,510 --> 00:08:14,840 All right. 135 00:08:14,930 --> 00:08:20,410 And the last one is ideal for than the icon. 136 00:08:20,660 --> 00:08:22,370 We'll be g o. 137 00:08:22,640 --> 00:08:25,640 And then just class name stays the same. 138 00:08:26,060 --> 00:08:35,090 As far as the label we go with, just the property we're looking for is public record just the last 139 00:08:35,090 --> 00:08:35,270 one. 140 00:08:35,290 --> 00:08:38,630 Of course he is our styling, which is the yellow one. 141 00:08:39,200 --> 00:08:40,100 So that's our setup. 142 00:08:40,490 --> 00:08:44,730 Now at the moment it says if I users plus is not defined. 143 00:08:45,200 --> 00:08:46,490 All right, let's see. 144 00:08:47,000 --> 00:08:48,350 It is user. 145 00:08:48,440 --> 00:08:55,730 My podgy so known honors the icon that I imported as the name of f our user plus not users. 146 00:08:56,240 --> 00:08:57,560 That's why it's so important. 147 00:08:58,030 --> 00:08:59,780 Have the same exact syntax. 148 00:09:00,020 --> 00:09:00,620 OK, good. 149 00:09:01,340 --> 00:09:09,020 So once we have this array now where we are displaying the items, I would want to iterate over them. 150 00:09:09,670 --> 00:09:10,760 And of course display them. 151 00:09:11,210 --> 00:09:13,640 So we start by setting up my section. 152 00:09:14,000 --> 00:09:17,330 Now this is again using a global class in the class name. 153 00:09:17,780 --> 00:09:20,630 We'll be section and then within this section. 154 00:09:20,780 --> 00:09:24,750 This is where I would want to display my styled components wrapper. 155 00:09:25,100 --> 00:09:31,270 But I also want to add a global class name that is going to be a section center. 156 00:09:32,090 --> 00:09:34,790 So that's my class name section. 157 00:09:35,800 --> 00:09:38,720 But of course, this is my style. 158 00:09:38,930 --> 00:09:39,920 Components component. 159 00:09:40,300 --> 00:09:47,040 This is responsible for all the local styling, but I'm still adding a little bit of extra global styling. 160 00:09:47,420 --> 00:09:48,550 So I have my items there. 161 00:09:48,560 --> 00:09:48,800 Right. 162 00:09:49,130 --> 00:09:51,290 And of course, now I'd want to iterate over them. 163 00:09:51,590 --> 00:09:59,810 So we go with items on a map and then each and every item, of course, is accessible by setting up 164 00:09:59,960 --> 00:10:00,860 the parameter. 165 00:10:01,150 --> 00:10:02,720 In my case, he is the item. 166 00:10:02,780 --> 00:10:06,410 And then we just need to decide what we would want to return for the time being. 167 00:10:06,470 --> 00:10:09,470 I'm going to return a paragraph. 168 00:10:09,530 --> 00:10:13,030 So let me go with a paragraph and I'm going to say item. 169 00:10:13,600 --> 00:10:13,960 Serried. 170 00:10:14,540 --> 00:10:15,890 And we should have four items. 171 00:10:15,920 --> 00:10:16,830 Why not? 172 00:10:17,090 --> 00:10:20,590 Because we have four items in our. 173 00:10:20,730 --> 00:10:21,180 All right. 174 00:10:21,680 --> 00:10:25,030 And for the time being, we're just displaying the program. 175 00:10:25,430 --> 00:10:26,630 But of course, we would change that. 176 00:10:27,140 --> 00:10:31,010 And the way I'm going to set this up, I'm going to have another component in here. 177 00:10:31,400 --> 00:10:33,290 Now, we could set this up in a different file. 178 00:10:33,320 --> 00:10:34,760 That's, of course, up to us. 179 00:10:35,150 --> 00:10:37,970 But in this case, I'm gonna go in the same file where I'm here. 180 00:10:37,980 --> 00:10:43,880 So, yeah, there's going to be a item component and it's going to be looking for four things. 181 00:10:44,240 --> 00:10:50,870 Since eventually I'm just going to pass in this item, object directly in the item component. 182 00:10:51,270 --> 00:10:55,970 And from there, I would want to pull out the icon, the labeled value on the color. 183 00:10:56,510 --> 00:10:57,200 So let's do that. 184 00:10:57,710 --> 00:10:59,870 We're gonna go with icon label. 185 00:11:00,620 --> 00:11:04,070 Label value and then the color. 186 00:11:04,430 --> 00:11:06,470 So these are the things that are coming from the object. 187 00:11:06,840 --> 00:11:08,900 And now we just need to work on our return. 188 00:11:09,360 --> 00:11:12,170 So if, say, we're returning a article. 189 00:11:13,070 --> 00:11:13,430 I'm sorry. 190 00:11:13,430 --> 00:11:14,250 Not area. 191 00:11:14,990 --> 00:11:17,810 Article on line for the article. 192 00:11:18,200 --> 00:11:22,250 I would want to add a class name so I have a little bit of styling. 193 00:11:22,790 --> 00:11:23,990 And then one by one. 194 00:11:24,960 --> 00:11:26,040 Let's display those things. 195 00:11:26,400 --> 00:11:29,940 So there's going to be a span with a class name. 196 00:11:30,750 --> 00:11:32,340 And now I'm accessing that color. 197 00:11:33,000 --> 00:11:35,790 So the color that I'm setting up in the object. 198 00:11:36,400 --> 00:11:40,800 So whether that's purple, green or yellow, I'm setting up or here. 199 00:11:41,100 --> 00:11:43,950 So I sent class name and that is going to be my color. 200 00:11:43,980 --> 00:11:49,140 That's why in the style component, whether I'm going to have paint green or whatever. 201 00:11:49,590 --> 00:11:49,730 Wow. 202 00:11:49,730 --> 00:11:51,900 Well, that's how I'm going to change the color. 203 00:11:52,320 --> 00:11:57,060 So I'm saying your last name and depending on that value, on that string value, that is going to be 204 00:11:57,060 --> 00:11:57,630 the class name. 205 00:11:58,160 --> 00:12:02,490 And as far as the value in a span, I'm just going to place the icon. 206 00:12:03,060 --> 00:12:10,340 So whether that is go just or whether that is going to be if I use her plus that is going to be my icon, 207 00:12:11,190 --> 00:12:13,740 then of course, I would also want to have a div here. 208 00:12:14,620 --> 00:12:16,830 They have land within that live. 209 00:12:17,040 --> 00:12:18,180 There's gonna be two things. 210 00:12:18,750 --> 00:12:20,490 There's going to be a value. 211 00:12:21,290 --> 00:12:24,390 So whatever I have value for my value property. 212 00:12:24,990 --> 00:12:26,610 And the second one is the label. 213 00:12:27,940 --> 00:12:30,070 So in here, let's have a paragraph. 214 00:12:30,790 --> 00:12:33,970 We a value of a label. 215 00:12:34,480 --> 00:12:37,300 Again, these are the things that we're passing in at the moment. 216 00:12:37,330 --> 00:12:39,040 Of course, we're not the wonderingly item. 217 00:12:39,220 --> 00:12:40,300 That's why nothing happens. 218 00:12:40,810 --> 00:12:46,030 But if I change this around from the paragraph and I say, yeah, you know what? 219 00:12:46,150 --> 00:12:51,610 I would want to render my item instead item here, I'm here. 220 00:12:52,000 --> 00:12:56,310 And then remember, we needed to have a key prop for the list. 221 00:12:56,860 --> 00:12:59,920 And in order to have that, I'm gonna go with item I.D.. 222 00:13:00,460 --> 00:13:06,970 And then in order to pass all these properties here directly in the item, I'm going to use the spread 223 00:13:06,970 --> 00:13:07,480 operator. 224 00:13:07,900 --> 00:13:11,260 Where I know that item, of course, is my object. 225 00:13:11,620 --> 00:13:11,950 Correct. 226 00:13:12,970 --> 00:13:13,290 And. 227 00:13:13,720 --> 00:13:14,860 I can just say dot, dot, dot. 228 00:13:15,340 --> 00:13:21,130 So I copy all the properties that I have in the item without his icon labeled value and color. 229 00:13:21,950 --> 00:13:25,750 And that's how I pass them to my item component. 230 00:13:26,350 --> 00:13:32,320 I do structure them right there and then in my parameters and then of course I display them. 231 00:13:32,830 --> 00:13:35,470 So the moment we separate notice, we have very balls. 232 00:13:35,480 --> 00:13:38,110 We have the followers following all that. 233 00:13:38,350 --> 00:13:42,540 So if we go to a bigger page, this is what we should see. 234 00:13:43,060 --> 00:13:44,930 We have not bar search and all that. 235 00:13:45,390 --> 00:13:50,240 But we also have nicely reposed followers following as well as the gist. 236 00:13:50,950 --> 00:13:57,730 And as we're going to be performing the search course, we'll change these values again at the moment. 237 00:13:58,180 --> 00:13:59,410 These are default values. 238 00:13:59,470 --> 00:14:02,590 These are static values that we have in our mock data. 239 00:14:03,130 --> 00:14:08,290 Then we pass that mock data to our give a context using the U.S. 240 00:14:08,740 --> 00:14:09,400 State hook. 241 00:14:09,640 --> 00:14:11,320 We set them up as that values. 242 00:14:11,770 --> 00:14:15,420 Then we pass them to our info using. 243 00:14:15,490 --> 00:14:16,710 Of course, our giving up context. 244 00:14:17,170 --> 00:14:19,300 We pull out that info first. 245 00:14:19,310 --> 00:14:20,500 We get the good Abuzer. 246 00:14:20,890 --> 00:14:24,640 Then we get these specific properties that are on that object. 247 00:14:25,060 --> 00:14:26,680 And I showed you where you can get that. 248 00:14:27,040 --> 00:14:33,520 We set up items, some kind of array with some nice values that we would want to use. 249 00:14:34,000 --> 00:14:37,090 And then, of course, eventually we just iterate over that array. 250 00:14:37,540 --> 00:14:40,900 We have some kind of component that is responsible for rendering. 251 00:14:41,290 --> 00:14:43,470 We pass in using these print operated. 252 00:14:43,900 --> 00:14:49,300 And of course, eventually we'll just have some kind of styling, including these class names that change 253 00:14:49,450 --> 00:14:51,490 whether or not his pink, green or purple. 254 00:14:51,840 --> 00:14:56,770 And that's how we can display the information about the user, whether that's repos followers, Pawling 255 00:14:57,160 --> 00:14:58,120 or Tigist.