1
00:00:00,260 --> 00:00:04,920
And once we have our global state available all throughout the application.

2
00:00:05,340 --> 00:00:07,560
Now, of course, we can start working on the dashboard.

3
00:00:08,310 --> 00:00:14,790
The thing is, though, when you work with get help API, while there have limits, each and every time

4
00:00:14,790 --> 00:00:18,750
you would want update, we would need to make another request.

5
00:00:19,200 --> 00:00:23,580
So technically you can do that, but you're run out of your quest pretty quickly.

6
00:00:24,210 --> 00:00:32,850
That's why I provided some static data, which essentially just allows us to set up our whole application.

7
00:00:33,450 --> 00:00:41,910
And then eventually hook it up to our fetch request, meaning there's going to be some global values.

8
00:00:42,900 --> 00:00:48,780
We'll update those values each and every time we'll perform a search for the new user.

9
00:00:49,230 --> 00:00:52,320
Now, you can find that data in the mob data.

10
00:00:52,890 --> 00:00:57,690
So if you're looking at the context folder, you'll find more data.

11
00:00:58,040 --> 00:01:04,440
And in that mock data, you'll have mock followers, mock repos, as well as the mock user.

12
00:01:05,190 --> 00:01:12,720
So, again, why I provided this data is because I don't want you to run out the requests because essentially

13
00:01:12,720 --> 00:01:16,500
you get up to 60 requests an hour.

14
00:01:18,090 --> 00:01:24,390
What that means is that as we're developing the application, you'll run out of those requests very

15
00:01:24,390 --> 00:01:24,780
quickly.

16
00:01:25,260 --> 00:01:31,620
Now, of course, you don't need to use the data that I provided if you'd want to use a different user.

17
00:01:31,950 --> 00:01:35,670
Most likely yourself, because that's something you would want to display right away.

18
00:01:36,480 --> 00:01:38,130
Then just use this.

19
00:01:38,130 --> 00:01:41,310
You are all and then change it to your username.

20
00:01:41,790 --> 00:01:49,830
And then, of course, just copy the euro into a browser and you'll have access to that data.

21
00:01:50,280 --> 00:01:51,510
So let me show you what I mean.

22
00:01:51,900 --> 00:01:58,530
For example, if you change this to some kind of different user, I don't know w boss and if you'll

23
00:01:58,530 --> 00:02:06,540
copy that, you'll have access to a user information copy and paste and you'll have a user information.

24
00:02:07,020 --> 00:02:13,110
So again, set up your user name and then just copy this one into the monitor data.

25
00:02:13,350 --> 00:02:17,880
If you don't want to use my data again, the reason why we're doing that, because we don't want to

26
00:02:17,880 --> 00:02:18,810
run out or request.

27
00:02:19,440 --> 00:02:25,050
We want to build out our whole application with the data that eventually we're going to be getting back.

28
00:02:25,590 --> 00:02:29,580
And then also, of course, we'll just hook it up to our search form.

29
00:02:30,090 --> 00:02:37,590
Now, I will leave this data eventually in our application because I wouldn't want to waste the user's

30
00:02:37,590 --> 00:02:38,460
request as well.

31
00:02:38,510 --> 00:02:43,620
Because we need to keep in mind that when someone comes to our application, they're using their own

32
00:02:43,620 --> 00:02:51,060
requests because the way the GitHub API works, the requests are checked by the IP address.

33
00:02:51,570 --> 00:02:53,490
So it's not checked by the user name.

34
00:02:54,000 --> 00:03:00,020
So essentially what I'm saying, once somebody logs in, you're displaying some kind of data that you'd

35
00:03:00,030 --> 00:03:00,270
want.

36
00:03:00,300 --> 00:03:04,020
Most likely there's going to be information about your own people.

37
00:03:04,260 --> 00:03:11,790
And then if he or she wants to look for different user, for example, where's boss?

38
00:03:12,300 --> 00:03:13,260
And of course, we can do that.

39
00:03:13,860 --> 00:03:14,790
We set up the search.

40
00:03:15,180 --> 00:03:18,900
But this is the time when we are setting up that request.

41
00:03:19,320 --> 00:03:23,700
So we're not wasting our request when the user loads it.

42
00:03:24,210 --> 00:03:25,860
That's why we're using that static data.

43
00:03:26,460 --> 00:03:34,650
And my key point was that if you don't like my mock data that I have here in the mock data folder,

44
00:03:34,920 --> 00:03:43,020
for example, followers or repost or whatever, user just use the URLs that I provide, change values

45
00:03:43,410 --> 00:03:46,420
to your username or whatever username you would want.

46
00:03:46,440 --> 00:03:53,310
Like I just showed you with W boss, you can change it and then you're getting the info about this particular

47
00:03:53,310 --> 00:03:53,670
user.

48
00:03:54,030 --> 00:03:55,860
Then grab everything that you have.

49
00:03:55,940 --> 00:04:00,790
And as a side note, I'm using the Google Chrome extension by the name of J.

50
00:04:00,790 --> 00:04:01,170
Soundview.

51
00:04:01,710 --> 00:04:07,530
That's how I have this view where I have correctly displayed everything that I'm getting back.

52
00:04:07,890 --> 00:04:13,830
So just copy everything, then navigate back to a mock folder.

53
00:04:14,640 --> 00:04:18,150
We have mock data folder and then in this case it would be a user.

54
00:04:18,510 --> 00:04:21,990
So notice how I'm exporting default the object.

55
00:04:22,420 --> 00:04:25,590
And of course, this is my data that I already provided.

56
00:04:25,890 --> 00:04:32,220
So if you want a different info, just delete everything here and copy paste whatever you'd want.

57
00:04:32,670 --> 00:04:40,350
So in this case, of course, we are displaying information about the West Bosch show eventually meaning

58
00:04:40,500 --> 00:04:44,880
in a second we'll import this in to our context.

59
00:04:45,270 --> 00:04:46,740
And of course, this is what we'll display.

60
00:04:47,310 --> 00:04:48,070
So it's up to you.

61
00:04:48,090 --> 00:04:49,140
Do it one by one.

62
00:04:49,560 --> 00:04:51,810
If you want to have a different repost.

63
00:04:52,200 --> 00:04:54,150
Just use the you are all that I provided.

64
00:04:54,160 --> 00:04:56,450
Just change the user name.

65
00:04:57,020 --> 00:04:59,910
And of course, repos is gonna be the biggest one because.

66
00:04:59,980 --> 00:05:01,850
This is gonna give you hundred reposts.

67
00:05:02,290 --> 00:05:04,150
So this is gonna be somewhat giant.

68
00:05:04,630 --> 00:05:10,810
That's why I remember when you're changing this around to a mock repost, delete everything here, but

69
00:05:10,810 --> 00:05:15,520
just export that array as a default because that's the functionality that I have.

70
00:05:16,060 --> 00:05:20,350
Again, you can use my data and you can change it later if you want.

71
00:05:20,920 --> 00:05:25,790
Or you can right away use the Yarl's search for your own users.

72
00:05:26,470 --> 00:05:27,180
Meaning followers.

73
00:05:27,280 --> 00:05:33,160
I guess more correctly than your your own user name as well as your own repost.

74
00:05:33,340 --> 00:05:39,850
So you can use the URLs, just change the values and then copy and paste them in the mock data because

75
00:05:39,850 --> 00:05:41,470
this is where we'll use it.

76
00:05:42,220 --> 00:05:44,860
So what I would want to do next.

77
00:05:44,950 --> 00:05:50,290
Well, I would want to save I guess the read me since I change it to his boss.

78
00:05:50,320 --> 00:05:51,490
We can just leave it the way it is.

79
00:05:51,880 --> 00:05:56,770
Again, it doesn't matter which ever user you want to display when the application loads.

80
00:05:57,190 --> 00:06:03,900
Now, of course, I was just using your own profile because that would showcase what you're doing on

81
00:06:03,920 --> 00:06:04,240
GitHub.

82
00:06:04,540 --> 00:06:06,160
But as always, it's up to you.

83
00:06:06,910 --> 00:06:13,270
And now, once we have the setup, either you're using my setup to one, I provide it, or you copied

84
00:06:13,270 --> 00:06:15,220
and pasted with the on your values.

85
00:06:15,670 --> 00:06:23,410
Now, in the context, JSC, you'll notice that we're importing we're importing moch user Mochrie post

86
00:06:23,770 --> 00:06:25,240
as well as mock followers.

87
00:06:25,750 --> 00:06:34,540
And then since I'm using provider right now, what's really cool is I can set up my state values using

88
00:06:34,630 --> 00:06:40,180
you state and just pass in whatever I'm getting back from the user, whether that is going to be user

89
00:06:40,180 --> 00:06:42,260
object or to repost.

90
00:06:42,400 --> 00:06:47,290
So the array we Hungary repost the same 40 followers.

91
00:06:47,800 --> 00:06:50,080
So in the GitHub provider.

92
00:06:51,140 --> 00:06:56,450
Now, I'm going to change this around where I'm going to say that there's going to be a GitHub user

93
00:06:56,840 --> 00:07:02,490
and the name here is important because eventually there's going to be a different user that is going

94
00:07:02,490 --> 00:07:04,580
to be the user that logs in.

95
00:07:05,060 --> 00:07:09,950
So just make sure that you actually call does get up user, because if you will call this user, then

96
00:07:09,950 --> 00:07:12,140
it's not going to make sense a little bit later on.

97
00:07:12,680 --> 00:07:19,020
So I'm gonna go at GitHub GitHub user and then we're gonna have our functions.

98
00:07:19,070 --> 00:07:25,490
So set GitHub user and that is going to be equal to R use state.

99
00:07:25,530 --> 00:07:25,740
OK.

100
00:07:26,360 --> 00:07:33,050
Now the way you state hook works is we need to have some kind of default value, which in our case is

101
00:07:33,050 --> 00:07:42,290
going to be mock user and then it returns an array with two hours with the actual value, whatever we

102
00:07:42,290 --> 00:07:47,240
passed in as a default and then the function that allows us to change it.

103
00:07:47,750 --> 00:07:49,490
So this is going to be our default value.

104
00:07:49,940 --> 00:07:54,860
That's going to be our mock user, which now is stored in the get up user.

105
00:07:56,190 --> 00:08:03,390
But later, when we performed the Fetch request, of course, we are going to use this said get Abuzer

106
00:08:03,870 --> 00:08:05,490
to change that value.

107
00:08:06,120 --> 00:08:10,000
And now we want to do the same thing for repos for the followers.

108
00:08:10,350 --> 00:08:14,490
And then, of course, eventually I also want to pass it into the value.

109
00:08:14,610 --> 00:08:15,030
Correct.

110
00:08:15,420 --> 00:08:19,530
So, again, we have used that hook that returns an array with two values.

111
00:08:19,920 --> 00:08:25,050
We have the actual value, the default one that we're currently passing in, as well as the function

112
00:08:25,470 --> 00:08:27,000
that changes that value.

113
00:08:27,450 --> 00:08:28,620
So copy and paste.

114
00:08:28,830 --> 00:08:29,970
Two more times.

115
00:08:30,450 --> 00:08:32,310
And we're looking for the repos.

116
00:08:32,670 --> 00:08:37,080
The name is going to be repos and land function.

117
00:08:37,080 --> 00:08:42,150
Name is set repos, set repos, of course.

118
00:08:42,630 --> 00:08:45,600
And then we're using not a mock user.

119
00:08:46,260 --> 00:08:52,770
We're using Mark and or EBOs and the same thing I would want to do for the followers.

120
00:08:53,460 --> 00:08:58,980
So in this case, I'm going to change this to a follower's.

121
00:08:59,950 --> 00:09:05,620
All are worse than set followers, of course, set followers.

122
00:09:08,240 --> 00:09:13,820
And then after that, I would want to assign it to my followers that I'm importing.

123
00:09:14,390 --> 00:09:18,170
So the oray with all my followers, let's save it.

124
00:09:18,290 --> 00:09:19,670
We have three rulers right now.

125
00:09:20,030 --> 00:09:26,930
And, of course, we're going to get a big, fat error because I typed here followers, but it should

126
00:09:26,930 --> 00:09:28,730
be mark followers like.

127
00:09:28,730 --> 00:09:30,610
So let me fix that up.

128
00:09:30,890 --> 00:09:32,060
Now I have Moch followers.

129
00:09:32,660 --> 00:09:36,950
And now want access these three things all throughout my application.

130
00:09:37,370 --> 00:09:43,070
Now how I can access that while of course I wouldn't want to change my value to an object because at

131
00:09:43,070 --> 00:09:44,600
the moment it is a string of hello.

132
00:09:45,020 --> 00:09:48,020
So I say within a value I'm going to have an object.

133
00:09:48,440 --> 00:09:54,950
And in that object, I'm going to have a properties and we can simply use the ESX syntax where even

134
00:09:54,950 --> 00:09:58,970
the property name is equal to a variable name that has the value.

135
00:09:59,360 --> 00:10:01,940
Well, I can just write only the property name.

136
00:10:02,360 --> 00:10:08,480
So, for example, if I have GitHub user, I can either set it up equal to my get up user state value.

137
00:10:09,400 --> 00:10:14,450
Like we have over here, or we can just limit that, we can say, alright, just get me to get up.

138
00:10:14,520 --> 00:10:19,280
Years are the same thing I'm going to do for repos as well as the followers.

139
00:10:19,730 --> 00:10:21,300
So this is what we're providing.

140
00:10:21,320 --> 00:10:28,400
And of course, the moment we said we should get some kind of different information in the user info

141
00:10:28,760 --> 00:10:31,550
because now we don't have the string anymore.

142
00:10:31,700 --> 00:10:32,060
Correct.

143
00:10:32,420 --> 00:10:34,850
So now we have our Mogg data.

144
00:10:35,270 --> 00:10:39,410
So the static data that we're using on our value is an object.

145
00:10:39,680 --> 00:10:41,600
It's not a string anymore, of course.

146
00:10:41,690 --> 00:10:43,880
Let's navigate back to a info.

147
00:10:44,220 --> 00:10:46,400
And in this case, I wouldn't want to display data.

148
00:10:46,850 --> 00:10:49,720
I would just want to console Log-in what we're getting back into there.

149
00:10:50,120 --> 00:10:55,790
So I'm going to both console log data and we should see something really, really cool.

150
00:10:56,150 --> 00:10:58,940
So help me navigate to a bigger browser window.

151
00:10:59,330 --> 00:11:00,350
Can I have the console?

152
00:11:00,650 --> 00:11:02,240
Then I have a bunch of warnings and all that.

153
00:11:02,570 --> 00:11:03,290
Please ignore them.

154
00:11:03,680 --> 00:11:05,930
And then this is my giant object.

155
00:11:06,320 --> 00:11:09,800
And in that giant object, I have my followers.

156
00:11:10,220 --> 00:11:14,510
So that is my static data that is coming from the mock followers.

157
00:11:14,930 --> 00:11:22,370
I have my GitHub user, which of course right now is was boss, because I used my Yooralla, not just

158
00:11:22,370 --> 00:11:23,090
change the value.

159
00:11:23,540 --> 00:11:24,870
So if you want to do that.

160
00:11:25,250 --> 00:11:26,120
Do that, of course.

161
00:11:26,600 --> 00:11:30,050
And then the last thing that I have are my repos.

162
00:11:30,440 --> 00:11:36,050
So that is that giant array where each and every repo is that object.

163
00:11:36,500 --> 00:11:41,600
So what's really cool is that now we can start pulling that data out.

164
00:11:42,170 --> 00:11:47,930
So if I'm looking, for example, at my info, so I'm not looking at the search, I'm not looking at

165
00:11:47,940 --> 00:11:49,320
Naba, I'm looking at the info.

166
00:11:49,730 --> 00:11:50,400
What I would want?

167
00:11:50,420 --> 00:11:55,160
Well, I would want the information from the user object.

168
00:11:55,610 --> 00:12:01,310
So if I check my user object, the GitHub user object, I'll see that I have all this data.

169
00:12:01,820 --> 00:12:05,990
I have the followers are how the following and all that good stuff.

170
00:12:06,500 --> 00:12:12,970
So this is what we'll do starting from next video where one by one will work on our components.

171
00:12:13,310 --> 00:12:19,220
We'll pull out of that static data and we'll display so well that that is gonna be the info.

172
00:12:19,230 --> 00:12:20,210
There is gonna be card.

173
00:12:20,570 --> 00:12:24,380
And whether that is gonna be the charts with our report information.

174
00:12:24,530 --> 00:12:31,180
And again, the reason why we're doing that, because we're getting only 60 requests per hour and Eve

175
00:12:31,190 --> 00:12:35,120
will fetch our data first as we're developing.

176
00:12:35,750 --> 00:12:37,130
We're gonna waste them in no time.

177
00:12:37,910 --> 00:12:43,670
So that way you would need to stop and start pretty much every hour because you'll waste those reports.

178
00:12:44,240 --> 00:12:51,110
If we have the static data, that means that we can build up our whole application and then only eventually

179
00:12:51,110 --> 00:12:55,400
hook it up to our fetch water, for example, once we fetch.

180
00:12:55,700 --> 00:13:01,740
We just change these values, because at the moment, if you'll notice in the context, I have set up

181
00:13:01,760 --> 00:13:07,280
user reports and followers, too, you can already imagine that eventually there is going to be an AJAX

182
00:13:07,280 --> 00:13:13,370
request where we get that particular user we're looking for and we're just going to change these values.

183
00:13:13,760 --> 00:13:18,410
So these are gonna be our default values that will always display wants the application loads.

184
00:13:18,770 --> 00:13:23,600
So this is a good case where you can showcase your own GitHub profile.

185
00:13:23,990 --> 00:13:27,730
So if somebody visits your application, you're displaying what you're doing on them.

186
00:13:28,220 --> 00:13:28,970
And then.

187
00:13:30,050 --> 00:13:32,750
He or she can search for a different user.

188
00:13:33,290 --> 00:13:34,370
Hopefully this makes sense.

189
00:13:35,090 --> 00:13:39,780
Starting from next video, we'll work on our user info component.