1
00:00:00,240 --> 00:00:00,570
All right.

2
00:00:00,870 --> 00:00:04,770
Next up, we have the user component and the user component.

3
00:00:04,800 --> 00:00:06,870
We have two components.

4
00:00:07,290 --> 00:00:08,960
One for the user.

5
00:00:08,970 --> 00:00:10,460
So this is going to be our card component.

6
00:00:10,920 --> 00:00:13,260
And also, we have a list of followers.

7
00:00:13,330 --> 00:00:16,890
And, of course, we're going to start with our user card.

8
00:00:17,340 --> 00:00:21,920
Now, at the moment, our application is somewhat busy because we have all these having tiers.

9
00:00:22,320 --> 00:00:30,900
So also what I would want is in a dashboard come onto the nav bar, the search, as well as the repos.

10
00:00:31,290 --> 00:00:35,940
And as we start working on them, of course, will come at the mouth and set up the functionality.

11
00:00:35,970 --> 00:00:42,330
Now, if you're wondering how to comment out stuff, if you are using different operating system, because

12
00:00:42,330 --> 00:00:47,880
I'm using Macs or in my case, it is command and then forward slash in order to comment that out, just

13
00:00:47,880 --> 00:00:51,840
navigate to edit and then look for toggle like comment.

14
00:00:51,840 --> 00:00:53,130
Like I said, I'm using Mac.

15
00:00:53,490 --> 00:00:55,590
So for me it is command and forward slash.

16
00:00:55,980 --> 00:01:00,540
If you're using windows, of course you can see your own option.

17
00:01:00,900 --> 00:01:06,510
So we have right now our info and now we want to work on a year or so.

18
00:01:06,510 --> 00:01:09,510
Of course, we navigate bravely to a user.

19
00:01:09,860 --> 00:01:14,310
And like I said, user component will consist of two components.

20
00:01:14,430 --> 00:01:16,980
The card component and the followers component.

21
00:01:17,010 --> 00:01:23,850
So first, let's set up the user, but effectively will work first in the car component and then followers

22
00:01:23,850 --> 00:01:28,710
combine because as far as the functionality and user, there is not much there.

23
00:01:29,520 --> 00:01:32,090
Now, first, I would want to change changes through a section.

24
00:01:32,790 --> 00:01:38,550
Again, the global section, glacier line inside of it.

25
00:01:39,150 --> 00:01:42,540
We will place a rapper or a rapper here.

26
00:01:42,540 --> 00:01:44,190
That is, of course, our styled component.

27
00:01:44,520 --> 00:01:50,580
Again, we're going to add the global class, a class name, and we're looking for section, center

28
00:01:50,630 --> 00:01:53,070
section and then center.

29
00:01:53,370 --> 00:01:55,620
And then inside this rapper, we have two things.

30
00:01:56,100 --> 00:01:57,780
We have the card component.

31
00:01:58,260 --> 00:01:59,340
Copy and paste.

32
00:01:59,790 --> 00:02:02,190
We're looking for follower's component.

33
00:02:02,910 --> 00:02:03,680
What's her name?

34
00:02:04,170 --> 00:02:07,830
And now, of course, we just have card component and follower's component.

35
00:02:08,280 --> 00:02:10,920
And what's interesting that these two.

36
00:02:11,860 --> 00:02:13,060
I'm not exporting globally.

37
00:02:13,570 --> 00:02:14,530
Again, as a side note.

38
00:02:15,010 --> 00:02:18,740
Notice the user, the one that we're displaying, of course.

39
00:02:19,070 --> 00:02:21,230
We're exporting from the index chart.

40
00:02:21,910 --> 00:02:28,840
But since card and followers on just local files, essentially, we're just using them instead of the

41
00:02:28,840 --> 00:02:29,140
user.

42
00:02:29,170 --> 00:02:31,090
I don't have to export them globally.

43
00:02:31,600 --> 00:02:34,900
I can just keep them in the components and then only the user one.

44
00:02:35,100 --> 00:02:36,790
The one that I'm going to use in different pages.

45
00:02:37,150 --> 00:02:38,740
That's the one that I'm exporting.

46
00:02:38,980 --> 00:02:39,910
That's just a side note.

47
00:02:40,360 --> 00:02:47,590
And then in the card, what I would want is, of course, to use my global context again, because similarly,

48
00:02:47,680 --> 00:02:54,280
like in the info, I would want to start by pulling out some properties from the Gorev user.

49
00:02:55,150 --> 00:02:56,020
Now, what I would want.

50
00:02:56,090 --> 00:02:56,800
Well, let's check.

51
00:02:57,220 --> 00:02:58,630
So you have the name, of course.

52
00:02:58,660 --> 00:03:02,560
We have the Twitter and oh, we have the info on all of that.

53
00:03:02,800 --> 00:03:06,220
So I'm going to navigate to my card.

54
00:03:07,630 --> 00:03:11,980
I'm not going to work on my return yet, but I'm going to grab my get up user again.

55
00:03:12,050 --> 00:03:16,430
So I'm going to go to concert and then we're looking for GitHub user.

56
00:03:16,510 --> 00:03:21,810
That is the property, of course, in my giant object that I'm sharing all throughout my application.

57
00:03:21,820 --> 00:03:23,050
We're using use contacts.

58
00:03:23,400 --> 00:03:26,100
And of course, I already imported the get up context.

59
00:03:26,640 --> 00:03:28,870
Here we go here with a get up context.

60
00:03:29,430 --> 00:03:34,170
And now, again, we need to structure those other properties first.

61
00:03:34,410 --> 00:03:37,990
Well, the structure, the properties then, of course, will set up the functionality.

62
00:03:38,080 --> 00:03:43,460
Now, again, if you're wondering where those properties are, either use the euro that I provided in

63
00:03:43,460 --> 00:03:49,090
the read me and the euro would be API, get up users and then whatever is the user name you're looking

64
00:03:49,090 --> 00:03:49,300
for.

65
00:03:49,720 --> 00:03:51,580
Or in the mock data.

66
00:03:52,440 --> 00:03:58,500
Of course, those properties are going to be there because we're just pulling out of that object again

67
00:03:58,590 --> 00:03:59,280
in a card.

68
00:03:59,730 --> 00:04:01,780
I'm going to structure more from giddap user.

69
00:04:02,220 --> 00:04:07,020
So we're going to go to concert and land that is equal to my GitHub user.

70
00:04:07,410 --> 00:04:12,620
And the properties that I'm looking for are Avatar your whole avatar.

71
00:04:12,630 --> 00:04:14,940
You are also this is going to be our image.

72
00:04:15,360 --> 00:04:17,060
Then we have the email Yoro.

73
00:04:17,460 --> 00:04:20,790
So this is where we can navigate to get them to.

74
00:04:21,000 --> 00:04:23,250
For example, check out the repoll.

75
00:04:23,760 --> 00:04:24,270
You are out.

76
00:04:24,300 --> 00:04:25,470
Then we have the name, of course.

77
00:04:25,500 --> 00:04:26,670
This is the user name.

78
00:04:27,050 --> 00:04:29,640
And we have company that the user works for.

79
00:04:30,000 --> 00:04:31,440
If it is provided, of course.

80
00:04:31,620 --> 00:04:32,850
And we'll cover that in a second.

81
00:04:33,300 --> 00:04:34,950
What we do if it's not provided.

82
00:04:35,410 --> 00:04:41,820
So in here we have also a blog option bio, then location where the user is located.

83
00:04:42,240 --> 00:04:44,190
And then last one is Twitter.

84
00:04:44,730 --> 00:04:46,660
And their score user name.

85
00:04:46,890 --> 00:04:51,600
And of course, all of this is coming right now from my get up user.

86
00:04:52,380 --> 00:04:58,410
So once I have these options, then, of course, I would want to go with my wrapper again for my styling

87
00:04:58,410 --> 00:04:59,160
purposes.

88
00:04:59,550 --> 00:05:05,970
Start component and inside of the wrapper, I'm going to go with a had her and line inside of her.

89
00:05:06,510 --> 00:05:08,590
Let's start by setting up our image.

90
00:05:08,880 --> 00:05:09,960
So we're gonna go with image.

91
00:05:10,440 --> 00:05:14,150
And this is the case where we're of course, looking for the avatar, YORO.

92
00:05:14,610 --> 00:05:17,880
So that's the property that holds the path to an image.

93
00:05:18,300 --> 00:05:24,780
So would you say Avatar and then you órale as far as the name for the alternative?

94
00:05:24,830 --> 00:05:28,890
Well, we can just use the property that we're destruction.

95
00:05:28,920 --> 00:05:29,280
Correct.

96
00:05:29,850 --> 00:05:32,250
That is going to be, of course, the name of the user.

97
00:05:32,670 --> 00:05:34,980
So once we sell it, we have our card.

98
00:05:35,880 --> 00:05:38,010
And then in here we have the image.

99
00:05:38,550 --> 00:05:42,410
Now, if you would want to change this little tab here on top.

100
00:05:42,450 --> 00:05:43,890
Just keep on scrolling.

101
00:05:44,340 --> 00:05:48,330
And then in the Veerappan component, look for the before.

102
00:05:48,870 --> 00:05:50,130
Because as far as the content.

103
00:05:50,280 --> 00:05:51,430
This is where you're changing.

104
00:05:51,990 --> 00:05:57,550
For example, I could just change it to some random value.

105
00:05:57,960 --> 00:06:00,030
Of course, it's gonna be displayed some random value.

106
00:06:00,610 --> 00:06:01,440
Now, let me delete.

107
00:06:01,630 --> 00:06:03,820
And I'm going to send this back to user again.

108
00:06:04,320 --> 00:06:09,270
This is just in case you're wondering how to change this to some kind of different text.

109
00:06:10,030 --> 00:06:14,160
And right after the image, I would want to set up my div.

110
00:06:14,790 --> 00:06:21,840
So we're gonna go div and then inside of the div, we're gonna have a name for the user as well as Twitter

111
00:06:21,840 --> 00:06:22,290
user name.

112
00:06:22,380 --> 00:06:24,120
So let me go with adding four.

113
00:06:24,720 --> 00:06:27,390
And then here we have the name.

114
00:06:27,710 --> 00:06:28,380
So let's save it.

115
00:06:28,830 --> 00:06:31,240
And of course, this is going to be our GetUp!

116
00:06:31,250 --> 00:06:31,740
User name.

117
00:06:32,180 --> 00:06:35,640
Then I also want to display the Twitter user name.

118
00:06:36,420 --> 00:06:41,190
So we're gonna go here with ADD and then the Twitter user name.

119
00:06:41,400 --> 00:06:44,130
Now, I can tell you right away that there's going to be a gotcha.

120
00:06:44,580 --> 00:06:49,170
So Twitter user name and then we're looking at it and we can see only that.

121
00:06:49,800 --> 00:06:50,850
So why is this happening?

122
00:06:51,360 --> 00:06:55,620
Well, because a lot of these options are optional.

123
00:06:56,190 --> 00:06:59,720
I mean, if you don't want to provide username, you're not providing username.

124
00:07:00,180 --> 00:07:03,270
So on this point, of course, we would need to set up some kind of default.

125
00:07:03,630 --> 00:07:09,870
So I'm just gonna show you with Twitter user name, just keep in mind that for the rest of the things

126
00:07:10,050 --> 00:07:15,680
you'd want, you can set it up in a following fashion where I have the Twitter user name.

127
00:07:16,020 --> 00:07:23,160
But if the user hasn't provided if it is undefined, by the way, you can check that out again by either

128
00:07:23,160 --> 00:07:28,860
navigating through RL or I'm just gonna show you in a mock one where if we're looking for Twitter,

129
00:07:28,860 --> 00:07:33,000
Twitter, Twitter, where it is Twitter user name is equal to not correct.

130
00:07:33,390 --> 00:07:35,310
That's why we don't display anything.

131
00:07:35,970 --> 00:07:38,400
So we can use or or operator.

132
00:07:39,090 --> 00:07:43,920
So in that card we would say, yeah, get Twitter user name.

133
00:07:44,040 --> 00:07:51,180
But if the property is now, then of course I can just display some default value.

134
00:07:51,330 --> 00:07:53,550
So in this case I'm going to say John Doe.

135
00:07:53,850 --> 00:07:55,570
I'll say it again.

136
00:07:55,960 --> 00:08:01,860
I know I mentioned this just a second ago, but you can do the same thing for other properties as well.

137
00:08:02,490 --> 00:08:04,440
Now it gives you right away some kind of image.

138
00:08:04,560 --> 00:08:10,140
I don't think you're going to have any issues with image grab automatically issues, at least something.

139
00:08:10,530 --> 00:08:15,540
But then, for example, for BuYeo or for the company and all that, you can keep on adding this or

140
00:08:15,540 --> 00:08:22,770
operator where essentially we say, yeah, get me this property or if this value is going to be false,

141
00:08:23,040 --> 00:08:27,810
meaning it's going to be falsey, whether that is normal or undefined, then of course, just return

142
00:08:28,020 --> 00:08:29,340
some default value.

143
00:08:29,730 --> 00:08:35,730
Now, the one thing that I'm gonna do right now is quickly get back my own user name.

144
00:08:35,730 --> 00:08:41,400
So I'm gonna go to John Smellier because I know for sure that all my properties are there since I'm

145
00:08:41,400 --> 00:08:44,010
gonna be lazy on adding these default values.

146
00:08:44,930 --> 00:08:47,280
And this is, again, just to showcase how you can get yours.

147
00:08:47,640 --> 00:08:49,350
So search for your username.

148
00:08:49,830 --> 00:08:50,790
Copy this one.

149
00:08:50,910 --> 00:08:51,910
Then go back.

150
00:08:52,000 --> 00:08:56,310
To the mock one where you mock data in this case, and of course, I'm looking for mock user.

151
00:08:56,660 --> 00:09:00,450
So if you're getting your own rebozo, then look for mock replays.

152
00:09:00,450 --> 00:09:04,350
And then if you're getting for your followers, just look 40 mock followers.

153
00:09:04,670 --> 00:09:06,410
So in this case, it is moch user.

154
00:09:07,010 --> 00:09:08,930
Now, it's not a giant file.

155
00:09:08,930 --> 00:09:14,040
So I can just delete everything or, you know, I'm just gonna showcase how I will do that for Rebozo.

156
00:09:14,540 --> 00:09:17,390
You can just remove everything, copy and paste.

157
00:09:17,690 --> 00:09:18,650
So this is your object.

158
00:09:18,680 --> 00:09:20,210
And of course, we also need to export.

159
00:09:20,600 --> 00:09:26,300
So we're gonna go with export default and then now we're exporting this as a default object.

160
00:09:26,360 --> 00:09:28,760
Well, just say it and we're gonna get the data.

161
00:09:29,120 --> 00:09:29,800
So we sell it.

162
00:09:29,870 --> 00:09:30,290
OK.

163
00:09:30,800 --> 00:09:36,710
Now, when are fresh and I should get some different value, some reason I still have the worst boss.

164
00:09:37,190 --> 00:09:37,420
Mm hmm.

165
00:09:37,690 --> 00:09:38,200
Interesting.

166
00:09:38,480 --> 00:09:40,730
What do I do wrong here, Mark?

167
00:09:40,820 --> 00:09:41,510
User.

168
00:09:42,170 --> 00:09:44,440
Let me say, I think I didn't copy that.

169
00:09:44,450 --> 00:09:44,810
Sorry.

170
00:09:45,070 --> 00:09:46,490
So let me copy that for sure.

171
00:09:47,240 --> 00:09:48,440
Let's select everything.

172
00:09:48,710 --> 00:09:49,670
Export.

173
00:09:50,610 --> 00:09:51,640
Poor default.

174
00:09:51,760 --> 00:09:53,450
That's my object and I'm copying face.

175
00:09:53,970 --> 00:09:55,480
Yeah, that should be mindful.

176
00:09:55,660 --> 00:09:56,080
Beautiful.

177
00:09:56,650 --> 00:09:58,750
Now, what else we have in the card?

178
00:09:59,080 --> 00:10:02,020
Well, right after our d'Hiv.

179
00:10:02,590 --> 00:10:03,940
But still within the header.

180
00:10:04,300 --> 00:10:11,140
I also want to set up a link where the user can navigate to see the profile, to get a profile.

181
00:10:11,780 --> 00:10:12,880
Gonna go with a.

182
00:10:13,150 --> 00:10:14,160
So that's my link.

183
00:10:14,690 --> 00:10:17,910
And here I'm just gonna passing that HDMI all Yoro.

184
00:10:18,490 --> 00:10:26,830
Essentially, if you check out Mark User, you'll see that the amale urologist leads to a repo that

185
00:10:26,890 --> 00:10:28,060
he's referencing the user.

186
00:10:28,750 --> 00:10:29,530
So let's do that.

187
00:10:29,560 --> 00:10:31,420
We have them all your l we pass it.

188
00:10:31,480 --> 00:10:34,840
And as a atrip, I'm just going to say here, follow.

189
00:10:35,320 --> 00:10:40,100
Just in case the user would want to follow that particular get Abuzer.

190
00:10:40,660 --> 00:10:43,200
And then, of course, we need a little bit more info.

191
00:10:43,210 --> 00:10:49,780
So right after we had our we're gonna go with a bio here and we're going to add here a class name of

192
00:10:49,780 --> 00:10:52,150
bio class name, bio.

193
00:10:52,660 --> 00:10:56,320
And then we would want to render our bio property.

194
00:10:57,790 --> 00:11:00,060
And then we just have some kind of lunch.

195
00:11:00,700 --> 00:11:02,620
So what are we looking for here?

196
00:11:02,740 --> 00:11:03,260
Well, let's see.

197
00:11:03,820 --> 00:11:09,970
So we have a link that just displays the company that the user is working for the location.

198
00:11:10,330 --> 00:11:14,630
Of course, if these things are provided as well as the blog bridge.

199
00:11:15,070 --> 00:11:17,800
And just to make it a little bit better looking.

200
00:11:18,130 --> 00:11:20,860
I just added some icons, of course, here at the top.

201
00:11:20,880 --> 00:11:22,960
You can see which icons we're importing.

202
00:11:23,380 --> 00:11:25,930
And then right off third bar graph, I'm going to go with some kind of dev.

203
00:11:25,930 --> 00:11:30,250
And then within this Dev, first we're going to have some kind of class.

204
00:11:30,280 --> 00:11:32,120
So that is going to be linked.

205
00:11:32,910 --> 00:11:36,820
And then there's going to be a paragraph here on line inside that paragraph.

206
00:11:36,850 --> 00:11:40,770
Let's place A and D business icon.

207
00:11:41,270 --> 00:11:42,250
I'm right next to it.

208
00:11:42,340 --> 00:11:44,410
We're going to have our company property.

209
00:11:44,620 --> 00:11:48,280
So wherever it is, the value is going to be our company.

210
00:11:49,160 --> 00:11:55,580
Now we can just copy and paste because we're going to do the same thing is just the values are going

211
00:11:55,580 --> 00:11:56,230
to be different.

212
00:11:56,980 --> 00:11:59,950
This is going to be the end location.

213
00:12:00,700 --> 00:12:03,190
So I'm going to let my icon right now.

214
00:12:03,850 --> 00:12:06,640
And we're going to go with a location on that.

215
00:12:06,820 --> 00:12:12,540
The icon that I imported and of course, the value will be location.

216
00:12:12,820 --> 00:12:16,790
If the user has provided not, of course, you can have your or.

217
00:12:17,220 --> 00:12:19,690
And then say Earth, for example.

218
00:12:19,860 --> 00:12:20,060
Right.

219
00:12:20,740 --> 00:12:22,120
That would be a default value.

220
00:12:22,780 --> 00:12:25,780
And the last one is gonna be a link to a personal site.

221
00:12:26,590 --> 00:12:29,020
So, again, we go with a link element in this case.

222
00:12:29,380 --> 00:12:30,320
We have the atrip.

223
00:12:30,940 --> 00:12:33,750
The property that we're looking for is blog.

224
00:12:33,790 --> 00:12:35,500
But we do need the HDTV.

225
00:12:35,590 --> 00:12:35,970
Yes.

226
00:12:36,670 --> 00:12:41,460
So we go here, HTP less than colon, then two forward slashes.

227
00:12:41,980 --> 00:12:44,230
And now the property we're looking for is blog.

228
00:12:44,890 --> 00:12:46,990
So I'm setting up my template string here.

229
00:12:47,430 --> 00:12:51,990
And then inside of the link, I'm going to have my M.D..

230
00:12:52,570 --> 00:12:53,710
And then link.

231
00:12:54,030 --> 00:12:55,750
Icon link.

232
00:12:56,690 --> 00:13:01,550
Link icon, and then all right, next, then the icon I'm going to have on my blog.

233
00:13:02,150 --> 00:13:05,630
So I'm just gonna say, yeah, if you'd want to see the user's blog.

234
00:13:06,460 --> 00:13:06,880
Definitely.

235
00:13:06,920 --> 00:13:07,520
Just navigate.

236
00:13:08,000 --> 00:13:09,800
So that should do it for our card.

237
00:13:10,200 --> 00:13:13,520
And of course, we can start working on our followers as well.