1
00:00:00,470 --> 00:00:07,650
Now, our application works really well for what I would want is to make sure that all the data comes

2
00:00:07,650 --> 00:00:15,180
back at the same time, because if you pay a close attention to our application, you'll notice that

3
00:00:15,540 --> 00:00:20,640
once we search for a new user, well, first we'll get the user data.

4
00:00:21,090 --> 00:00:25,560
Then we get three posts and only then we get the followers.

5
00:00:26,010 --> 00:00:31,900
On this video, I'll showcase Cortland, who is the founder of the Indie Hackers.

6
00:00:32,130 --> 00:00:34,110
The best podcast probably out there.

7
00:00:34,380 --> 00:00:39,990
Well, the indie hackers and the syntax probably go hand-in-hand as far as the best podcasts out there.

8
00:00:40,380 --> 00:00:46,110
And if you have never listened to any hackers, it's about how to make business online without venture

9
00:00:46,110 --> 00:00:47,130
capital and all that.

10
00:00:47,140 --> 00:00:49,440
How should you bootstrap your business yourself?

11
00:00:50,340 --> 00:00:50,760
Awesome.

12
00:00:50,790 --> 00:00:51,600
Awesome podcast.

13
00:00:52,110 --> 00:01:00,390
Then we have Marcy, who is working at Gadsby, who's doing an amazing job at Gadsby and is all things

14
00:01:00,780 --> 00:01:01,500
accessibility.

15
00:01:01,990 --> 00:01:07,620
And then of course, we also have Kyle, who is the founder of the awesome static site generator.

16
00:01:07,650 --> 00:01:13,470
Or we can already probably say the framework by the name of Gadsby.

17
00:01:13,920 --> 00:01:20,730
And if we notice that E files search for causing fall, you'll see that first.

18
00:01:20,760 --> 00:01:25,680
I'm gonna get the user info, then I'm going to get my repost.

19
00:01:26,010 --> 00:01:26,640
See that change?

20
00:01:26,880 --> 00:01:28,710
And only then I have the followers.

21
00:01:29,240 --> 00:01:31,380
And technically you can say, well, what's the big deal?

22
00:01:31,860 --> 00:01:37,350
But wouldn't it be nicer if we would change all of them at the same time?

23
00:01:37,530 --> 00:01:39,630
Now, again, this is technically optional.

24
00:01:40,230 --> 00:01:44,970
If you're happy with the way the app works right now, you don't have to do that.

25
00:01:45,270 --> 00:01:51,300
You don't have to change your code or on how or I will refactor it and we'll use Promis all settled

26
00:01:51,690 --> 00:01:55,380
on one last thing that I would want to mention before we start typing away.

27
00:01:55,710 --> 00:01:56,610
That, of course.

28
00:01:57,590 --> 00:02:05,810
If you're looking at repos, technically, we could have got the repos from the user.

29
00:02:06,230 --> 00:02:12,230
So instead of looking for the logging and then constructing my repos, you are where I said the route

30
00:02:12,260 --> 00:02:15,200
you are old and users logging and then the reports per page.

31
00:02:15,740 --> 00:02:18,500
I could have just went with my posts.

32
00:02:18,620 --> 00:02:22,040
You are all that is in the user data that I'm getting back.

33
00:02:22,400 --> 00:02:24,890
And then only attach this per page.

34
00:02:25,270 --> 00:02:27,650
Haha, I just wanted to showcase that.

35
00:02:27,870 --> 00:02:31,010
Of course there's multiple ways how we can construct that repo.

36
00:02:31,460 --> 00:02:32,450
That was my preference.

37
00:02:32,790 --> 00:02:33,230
As always.

38
00:02:33,270 --> 00:02:36,650
You want to change this around, you just want to get that property.

39
00:02:37,130 --> 00:02:42,620
The Repos, your órale and then attach the per page like we're doing with followers.

40
00:02:42,950 --> 00:02:44,860
You can definitely do that on my case.

41
00:02:44,930 --> 00:02:47,830
I'm going to delete these two suckers.

42
00:02:48,310 --> 00:02:55,310
And now let's find out a way how we could wait for everything to come back.

43
00:02:55,400 --> 00:03:01,260
And only then, once I have all the data, then I'm gonna set loading to false.

44
00:03:01,620 --> 00:03:01,910
All right.

45
00:03:02,150 --> 00:03:03,080
He was crawling away.

46
00:03:03,500 --> 00:03:08,150
And then, of course, once I do that, then I'll display all the data at once again.

47
00:03:08,510 --> 00:03:09,230
It is optional.

48
00:03:09,440 --> 00:03:11,450
If you don't want to do that, you don't have to.

49
00:03:11,480 --> 00:03:13,190
But in my case, I will.

50
00:03:13,590 --> 00:03:17,600
And you could simply say, alright, we could just attach a weight.

51
00:03:18,020 --> 00:03:18,440
Correct.

52
00:03:18,800 --> 00:03:22,760
I could say a weight or here than a weight or here.

53
00:03:23,270 --> 00:03:25,420
And yet technically it is correct.

54
00:03:25,460 --> 00:03:29,780
But don't you think that the problem is going to be that now is gonna take way longer?

55
00:03:30,360 --> 00:03:35,850
Because now we'll have to wait for a repost to come back and only then we're fetching the powers.

56
00:03:36,500 --> 00:03:44,510
So I would still want to set my requests or I should probably say send my requests at the same time,

57
00:03:45,020 --> 00:03:50,710
meaning I don't want to hold off sending a request while I'm still waiting for response.

58
00:03:51,350 --> 00:03:54,680
However, I would want to wait when both of them come back.

59
00:03:55,370 --> 00:03:56,290
So what we can do that?

60
00:03:56,300 --> 00:04:03,320
Well, we have a promise all settled and we can just attach a weight in front of it.

61
00:04:04,240 --> 00:04:05,100
How is that going to look like?

62
00:04:05,120 --> 00:04:11,480
Well, we could go with a weight and then promise and then all settled.

63
00:04:12,140 --> 00:04:16,240
So this is just gonna fire when all of them settled.

64
00:04:16,820 --> 00:04:20,000
So all the promises that we pass in here when they're settled.

65
00:04:20,240 --> 00:04:20,660
Yes.

66
00:04:20,720 --> 00:04:21,780
Danimal fired this one.

67
00:04:22,200 --> 00:04:25,340
And the way we parse the men is by setting up the array.

68
00:04:25,850 --> 00:04:29,300
And then either we could assign it to some kind of variable.

69
00:04:29,860 --> 00:04:30,830
That's definitely option.

70
00:04:31,310 --> 00:04:32,810
Or you can pass them directly.

71
00:04:32,990 --> 00:04:33,930
She's gonna be my coach.

72
00:04:34,310 --> 00:04:41,220
So what I want you to take is everything, starting with an axe years up until the closing parenthesis.

73
00:04:41,690 --> 00:04:42,660
So don't grab them.

74
00:04:43,220 --> 00:04:45,500
Not technically you can, but we'll avoid that.

75
00:04:45,860 --> 00:04:47,030
So remove this.

76
00:04:47,600 --> 00:04:48,320
Pass it in.

77
00:04:48,500 --> 00:04:49,610
So that's our first one.

78
00:04:50,060 --> 00:04:51,080
And then the second one.

79
00:04:51,080 --> 00:05:00,590
The same way where tech actually goes all the way to the dot remove and line after the comma added in

80
00:05:00,590 --> 00:05:00,800
here.

81
00:05:01,360 --> 00:05:03,830
And now, of course, we can remove the repos and the followers.

82
00:05:03,850 --> 00:05:08,490
Sol, delete that one and then the wady promise.

83
00:05:08,800 --> 00:05:09,420
All set.

84
00:05:09,420 --> 00:05:12,530
All the works is we have dot then.

85
00:05:12,950 --> 00:05:15,980
So now this one we change to all settled.

86
00:05:16,510 --> 00:05:21,680
And this one is going to run only when both of them are settled in here.

87
00:05:21,680 --> 00:05:23,780
Of course, we would want to set up some kind of functionality.

88
00:05:24,200 --> 00:05:31,130
And I'll just simply start with results more here than I'm gonna console log.

89
00:05:31,460 --> 00:05:32,240
My results.

90
00:05:32,660 --> 00:05:37,400
So I'm gonna go with log and and we'll just take a look at these results.

91
00:05:37,930 --> 00:05:38,750
Let's say that.

92
00:05:39,410 --> 00:05:41,190
So now that should be our functionality.

93
00:05:41,210 --> 00:05:42,290
I'm going to navigate back.

94
00:05:42,770 --> 00:05:44,660
We're going to look for martially, this one.

95
00:05:46,010 --> 00:05:49,460
Let's copy and paste a copy paste search.

96
00:05:49,980 --> 00:05:52,460
And now notice non loading, loading, loading.

97
00:05:52,550 --> 00:05:56,900
And only then once I get the data, then I fire this one.

98
00:05:57,170 --> 00:05:57,430
OK.

99
00:05:57,710 --> 00:05:59,770
Now, of course, I didn't change the followers in repose.

100
00:06:00,110 --> 00:06:03,500
Those are still mine because, of course, we removed that functionality.

101
00:06:03,530 --> 00:06:05,840
But you noticed how we were waiting for it.

102
00:06:05,900 --> 00:06:09,410
And only then once we got the data, then we changed this around.

103
00:06:09,920 --> 00:06:15,420
So let's do inspect and you'll see in the console the photos, the results, the ones that I'm constant

104
00:06:15,420 --> 00:06:17,860
logging in that then I have the array.

105
00:06:18,800 --> 00:06:19,820
So what is in the array?

106
00:06:20,360 --> 00:06:27,200
Well, in the array, each of them is represented as a value, meaning as a object.

107
00:06:27,680 --> 00:06:33,830
And then in there we have the status, which just says that the promise has been fulfilled, meaning

108
00:06:34,040 --> 00:06:35,060
everything is correct.

109
00:06:35,630 --> 00:06:41,490
And then we have, of course, the value for the data that we're getting back.

110
00:06:41,940 --> 00:06:42,500
So in here.

111
00:06:42,530 --> 00:06:44,780
Notice we have value object.

112
00:06:44,810 --> 00:06:47,630
And then in there we have the data during that data.

113
00:06:47,630 --> 00:06:52,670
Of course, this is where we're getting the repos and this is where we're getting the followers.

114
00:06:53,230 --> 00:06:55,310
Now, let's also test that out right away.

115
00:06:55,310 --> 00:06:56,780
What happens if.

116
00:06:56,940 --> 00:07:01,460
For example, I don't know, for some weird reason, we have the wrong you are all.

117
00:07:01,890 --> 00:07:05,520
What if we're not getting the data and the way I can turn us around?

118
00:07:05,630 --> 00:07:05,940
I don't know.

119
00:07:05,970 --> 00:07:07,910
I'm going to say reposes this is this.

120
00:07:08,410 --> 00:07:10,560
So I'm going to add a bunch of rebozo here.

121
00:07:10,990 --> 00:07:12,630
And now let's look for Courtland.

122
00:07:13,380 --> 00:07:16,890
So we're going to take his GED, Abuzer.

123
00:07:18,180 --> 00:07:19,380
We're just going to copy and paste.

124
00:07:19,620 --> 00:07:20,720
So it's copy paste.

125
00:07:21,300 --> 00:07:23,520
And now, of course, notice I'm still getting back.

126
00:07:23,520 --> 00:07:23,860
Meyera.

127
00:07:23,940 --> 00:07:29,010
Yeah, I waited for them to be settled, but now the first one is rejected.

128
00:07:29,560 --> 00:07:29,700
OK.

129
00:07:30,270 --> 00:07:34,200
So where they can put two and two together where I would want to check.

130
00:07:35,350 --> 00:07:41,530
If everything is correct, if the promise has been fulfilled and then if that is the case, then I'm

131
00:07:41,530 --> 00:07:47,410
only going to get the value that I'm going to get this array or whatever date I have in there.

132
00:07:47,590 --> 00:07:52,300
And I already know that the first one that I passed in is the Repos.

133
00:07:52,720 --> 00:07:53,110
Correct.

134
00:07:53,500 --> 00:07:59,350
So the first one will represent the Repos and the second one will represent the followers.

135
00:07:59,840 --> 00:08:06,160
And remember when we were working with you state when we used array the structuring, since of course

136
00:08:06,160 --> 00:08:07,630
this is what's happening with results.

137
00:08:08,020 --> 00:08:10,210
We're getting back the array of two items.

138
00:08:10,650 --> 00:08:15,400
Well, we can just the structure is correct so we can go with concert and then repos.

139
00:08:15,640 --> 00:08:16,510
That's the first one.

140
00:08:16,910 --> 00:08:17,680
Paul, a word.

141
00:08:17,740 --> 00:08:18,940
Now, of course, I'm going to fix this.

142
00:08:18,970 --> 00:08:20,210
I'm going to say, yep.

143
00:08:20,320 --> 00:08:23,440
Get me three powers that is coming from results.

144
00:08:23,560 --> 00:08:28,210
And now simply say following thing where I'm gonna get the status.

145
00:08:28,390 --> 00:08:34,190
So I'll have some kind of variable that is equal to fulfilled, fulfilled like show.

146
00:08:34,660 --> 00:08:43,000
And if that is the case, if the repo status and the follower status are fulfilled, then of course

147
00:08:43,180 --> 00:08:46,450
I would want to set the repos and followers.

148
00:08:46,990 --> 00:08:53,710
Now, just to emphasize that if you look at the results, what you're getting back, you'll see.

149
00:08:53,830 --> 00:08:55,750
Now, of course, at the moment you don't see anything.

150
00:08:55,780 --> 00:09:00,880
But if we go back to his boss, we will see that we're getting Bagheera.

151
00:09:01,480 --> 00:09:06,580
And then in that array, of course, we're going to have the status.

152
00:09:07,150 --> 00:09:14,830
So in those objects, in that array to array that I'm getting back in those objects, I am having a

153
00:09:15,040 --> 00:09:16,180
status property.

154
00:09:16,630 --> 00:09:18,430
So I'm going to be looking for that status property.

155
00:09:18,820 --> 00:09:19,810
So I'm getting back the array.

156
00:09:19,840 --> 00:09:21,150
I have two items in that, Ray.

157
00:09:21,460 --> 00:09:22,630
I'm going to grab the first one.

158
00:09:22,660 --> 00:09:25,840
That is my repos, because that's the promise that I placed first.

159
00:09:26,200 --> 00:09:30,190
And then I had followers and I just want to check with their property is fulfilled.

160
00:09:30,350 --> 00:09:31,000
If that is the case.

161
00:09:31,030 --> 00:09:33,100
Yeah, get me the value.

162
00:09:33,520 --> 00:09:34,270
Now, where was the value?

163
00:09:34,300 --> 00:09:36,910
It was in value property and then data.

164
00:09:37,300 --> 00:09:39,970
So let's head back and.

165
00:09:40,990 --> 00:09:42,610
Will remove the console log.

166
00:09:42,850 --> 00:09:52,090
We don't need that one anymore, and we'll simply say if repos status is equal to a status variable

167
00:09:52,090 --> 00:09:52,630
that I have.

168
00:09:53,060 --> 00:09:54,690
So, Zengel, I'm just saying the strings.

169
00:09:54,700 --> 00:09:57,250
So there is no typo or anything like that.

170
00:09:57,670 --> 00:09:59,850
We're gonna go with set Rebholz.

171
00:10:00,310 --> 00:10:04,030
I'm looking for reposed value and then data.

172
00:10:04,780 --> 00:10:07,240
Now I need to do the same thing for my followers.

173
00:10:07,840 --> 00:10:11,260
So let me copy and paste in here.

174
00:10:11,590 --> 00:10:13,440
We're gonna change primary.

175
00:10:13,840 --> 00:10:15,250
So let we select both of them.

176
00:10:15,860 --> 00:10:19,690
And we're gonna just change them around to a followers.

177
00:10:20,200 --> 00:10:25,210
And once I change the followers, of course, out, I also want to change what I'm setting up.

178
00:10:25,220 --> 00:10:29,170
So instead of set repos, I'm going with set followers.

179
00:10:29,590 --> 00:10:34,540
So now let's save it and we're going to navigate back to our application.

180
00:10:35,200 --> 00:10:36,940
And let's try Marché one more time.

181
00:10:37,510 --> 00:10:43,240
So we're gonna grab her GitHub username, copy and paste.

182
00:10:43,570 --> 00:10:44,440
We will search.

183
00:10:44,860 --> 00:10:45,620
And then, of course.

184
00:10:45,700 --> 00:10:52,240
Now, what you can say is that we're only displaying the data when we get everything back.

185
00:10:52,840 --> 00:10:53,740
So that's really cool.

186
00:10:54,340 --> 00:11:00,040
Again, you don't technically have to do that, but in my opinion, it's a little bit better where we

187
00:11:00,130 --> 00:11:07,480
only update once we have all the data instead of showing the user info first than showing the repos

188
00:11:07,480 --> 00:11:09,520
and only then once the followers come back.

189
00:11:09,910 --> 00:11:13,000
Then, of course, we display to followers again.

190
00:11:13,060 --> 00:11:17,590
Just to recap the way we did that, we used Promis all settled.

191
00:11:18,100 --> 00:11:22,230
Then we passed in two Axios requests.

192
00:11:22,750 --> 00:11:24,370
And of course, like I just mentioned.

193
00:11:25,440 --> 00:11:31,860
If you want, you can change this around to as you are also just the structured of response data and

194
00:11:31,860 --> 00:11:36,300
just add that per page because it's just going to make it a little bit more interesting where you have

195
00:11:36,300 --> 00:11:41,790
more repos and that all settled is just going to return one dot then.

196
00:11:42,350 --> 00:11:46,750
So we have one dot then when we get all the promises back.

197
00:11:46,830 --> 00:11:48,300
So once they have been settled.

198
00:11:48,720 --> 00:11:53,730
So once the promises have been settled, then of course we decide to do something with them.

199
00:11:54,300 --> 00:11:59,970
Now, while, like all settled the curs, essentially it doesn't throw the error e there's something

200
00:12:00,090 --> 00:12:01,080
wrong with one of them.

201
00:12:01,590 --> 00:12:05,100
So essentially there are other options out there as far as promises.

202
00:12:05,100 --> 00:12:10,890
But what I really like about all settled option is the fact that even though one of them could have

203
00:12:10,890 --> 00:12:19,140
the error like we had with a repost, it still waits for all of them to be settled and only then we

204
00:12:19,140 --> 00:12:20,220
can decide what we're doing.

205
00:12:21,090 --> 00:12:22,640
If, for example, it's all failed.

206
00:12:22,980 --> 00:12:23,380
Awesome.

207
00:12:23,580 --> 00:12:24,240
We're doing something.

208
00:12:24,240 --> 00:12:27,090
If it's not, then of course we're doing something else.

209
00:12:27,580 --> 00:12:34,710
So now, of course, we have our out functionality in place so we can start focusing on the authentication.

210
00:12:35,120 --> 00:12:41,610
But before we move on to our next video, of course, we can change up, catch and just console out

211
00:12:41,610 --> 00:12:44,330
there, because again, we have that then.

212
00:12:44,580 --> 00:12:47,210
So that also means that we have Dakich.

213
00:12:47,600 --> 00:12:51,360
So we're going to hold console log and then we're looking for the console.

214
00:12:51,360 --> 00:12:51,800
Log it.

215
00:12:52,920 --> 00:12:57,030
Now everything is set up for us to start working on the authentication.