1
00:00:02,000 --> 00:00:05,000
So let's now make sure that we load the data

2
00:00:05,000 --> 00:00:09,000
we store here on Firebase into our application

3
00:00:09,000 --> 00:00:10,000
into our website here

4
00:00:10,000 --> 00:00:13,000
when we load this starting page.

5
00:00:13,000 --> 00:00:16,000
Because at the moment here in the All Meetups page,

6
00:00:16,000 --> 00:00:18,000
we're still using this dummy data.

7
00:00:18,000 --> 00:00:21,000
And that's of course not the goal.

8
00:00:21,000 --> 00:00:24,000
Now to load data from our back and from our API,

9
00:00:24,000 --> 00:00:28,000
we need to send a HTTP request again

10
00:00:28,000 --> 00:00:32,000
just as we send one when we store data.

11
00:00:32,000 --> 00:00:34,000
So in the AllMeetups js file

12
00:00:34,000 --> 00:00:36,000
in the "AllMeetups Page" component

13
00:00:36,000 --> 00:00:38,000
we want to send the request.

14
00:00:38,000 --> 00:00:42,000
The question is, when do we wanna to send the request?

15
00:00:42,000 --> 00:00:46,000
And the answer is whenever this component is being rendered.

16
00:00:46,000 --> 00:00:49,000
So whenever we visit this page.

17
00:00:50,000 --> 00:00:53,000
So what you could do, what could be your first idea,

18
00:00:53,000 --> 00:00:56,000
is that directly in this component function

19
00:00:56,000 --> 00:00:59,000
before we returned to JSX code,

20
00:00:59,000 --> 00:01:02,000
we can "fetch" our data.

21
00:01:02,000 --> 00:01:06,000
We can use the same URL as we used for storing the data.

22
00:01:06,000 --> 00:01:08,000
Since you want to "fetch" data

23
00:01:08,000 --> 00:01:10,000
from the same API and node,

24
00:01:11,000 --> 00:01:14,000
and hence, we can use the same URL here.

25
00:01:15,000 --> 00:01:19,000
Now, we don't need to configure this request here

26
00:01:19,000 --> 00:01:21,000
with this second argument,

27
00:01:21,000 --> 00:01:25,000
because the default is that a "get" request is sent

28
00:01:25,000 --> 00:01:29,000
and that's exactly the kind of request we need here.

29
00:01:29,000 --> 00:01:32,000
We want to send a request to get our data.

30
00:01:32,000 --> 00:01:35,000
So we can call ""fetch"" just like this.

31
00:01:35,000 --> 00:01:38,000
And this will "fetch" this data.

32
00:01:38,000 --> 00:01:41,000
But now, unlike as with the "POST" request

33
00:01:41,000 --> 00:01:45,000
when we sent data, now, when we get data

34
00:01:45,000 --> 00:01:49,000
we are definitely also interested in the response.

35
00:01:49,000 --> 00:01:51,000
Now since "fetch" returns a promise,

36
00:01:51,000 --> 00:01:55,000
we can of course use the "then" method here

37
00:01:55,000 --> 00:02:00,000
and change this after "then" to handle this response.

38
00:02:00,000 --> 00:02:02,000
So we pass an anonymous function to "then"

39
00:02:02,000 --> 00:02:05,000
and here we'll get the response object

40
00:02:05,000 --> 00:02:07,000
as an argument automatically

41
00:02:07,000 --> 00:02:09,000
because that's how the ""fetch"" function works.

42
00:02:09,000 --> 00:02:13,000
It returns a promise, which resolves to the actual response,

43
00:02:13,000 --> 00:02:14,000
at some point in time.

44
00:02:15,000 --> 00:02:18,000
Now, from that response, we want to read the body.

45
00:02:18,000 --> 00:02:20,000
We want to read the data

46
00:02:20,000 --> 00:02:23,000
and we can do that with the "json" method.

47
00:02:23,000 --> 00:02:24,000
That's a method which exists

48
00:02:24,000 --> 00:02:27,000
on this response object out of the box.

49
00:02:27,000 --> 00:02:28,000
And this will give us access

50
00:02:28,000 --> 00:02:32,000
to that data automatically converted from "json"

51
00:02:32,000 --> 00:02:35,000
to a plain JavaScript object.

52
00:02:35,000 --> 00:02:36,000
But here's a gotcha,

53
00:02:36,000 --> 00:02:40,000
"json" will actually return a promise as well.

54
00:02:40,000 --> 00:02:43,000
So we also need to wait for this promise to resolve.

55
00:02:43,000 --> 00:02:47,000
So I actually will return "response,Json" here

56
00:02:47,000 --> 00:02:49,000
and add another "then" block,

57
00:02:49,000 --> 00:02:52,000
where we then get the actual data.

58
00:02:52,000 --> 00:02:54,000
And it's now in this second

59
00:02:54,000 --> 00:02:58,000
"then" block where we can work on that data.

60
00:02:58,000 --> 00:03:01,000
We could also add error handling

61
00:03:01,000 --> 00:03:03,000
and we do that in the complete guide course.

62
00:03:03,000 --> 00:03:05,000
But for the moment here, let's focus

63
00:03:05,000 --> 00:03:09,000
on just getting that data and using that data.

64
00:03:10,000 --> 00:03:13,000
So here in this "then" block, we get the data.

65
00:03:13,000 --> 00:03:15,000
What do we want to do with this data now?

66
00:03:15,000 --> 00:03:18,000
In the end, we want to extract an array

67
00:03:18,000 --> 00:03:22,000
of meetups from that response data and pass that

68
00:03:22,000 --> 00:03:25,000
as a value to the meetups prop on the meetup list.

69
00:03:26,000 --> 00:03:28,000
Now we'll have a problem here though.

70
00:03:28,000 --> 00:03:31,000
Since ""fetch"" returns a promise

71
00:03:31,000 --> 00:03:35,000
and we're in this promise chain, JavaScript does not wait

72
00:03:35,000 --> 00:03:40,000
for this promise to complete before we return here.

73
00:03:40,000 --> 00:03:43,000
Now you could think that we can use "async await"

74
00:03:43,000 --> 00:03:46,000
here to wait until this is done,

75
00:03:46,000 --> 00:03:49,000
but that would be bad because that would mean

76
00:03:49,000 --> 00:03:53,000
that the entire component function now returns a promise

77
00:03:53,000 --> 00:03:56,000
because that's what the "async" keyword does.

78
00:03:56,000 --> 00:03:57,000
It converts this function

79
00:03:57,000 --> 00:03:59,000
to a function that returns a promise

80
00:03:59,000 --> 00:04:03,000
and that then no longer qualifies

81
00:04:03,000 --> 00:04:05,000
as a valid React component

82
00:04:05,000 --> 00:04:09,000
because React component functions must be synchronous

83
00:04:09,000 --> 00:04:12,000
and must not return a promise

84
00:04:12,000 --> 00:04:16,000
but instead they have to directly return JSX.

85
00:04:16,000 --> 00:04:19,000
So we can't use "async, await" weight here.

86
00:04:19,000 --> 00:04:23,000
Hence we can't defer returning a value

87
00:04:23,000 --> 00:04:25,000
until we have a response.

88
00:04:25,000 --> 00:04:28,000
Instead, what we need to do is we need to return

89
00:04:28,000 --> 00:04:32,000
some temporary JSX code, for example, a loading spinner

90
00:04:32,000 --> 00:04:34,000
or something like this.

91
00:04:34,000 --> 00:04:37,000
And then once we have the response, we want to

92
00:04:37,000 --> 00:04:40,000
update the returned JSX code.

93
00:04:40,000 --> 00:04:43,000
And how do we change what's visible on the screen?

94
00:04:43,000 --> 00:04:45,000
With "state".

95
00:04:45,000 --> 00:04:48,000
That's what we learned earlier already.

96
00:04:48,000 --> 00:04:52,000
We can use "state" to change what's displayed on the screen

97
00:04:52,000 --> 00:04:55,000
when certain conditions change.

98
00:04:55,000 --> 00:04:58,000
Before we did that, when the user clicked a button

99
00:04:58,000 --> 00:05:01,000
and we wanted to show an overlay.

100
00:05:01,000 --> 00:05:04,000
Now I want to change the "state" once we have response data.

101
00:05:05,000 --> 00:05:09,000
So for that here in this AllMeetups JS file,

102
00:05:09,000 --> 00:05:13,000
we can import "useState" from React.

103
00:05:13,000 --> 00:05:16,000
So this "useState" hook.

104
00:05:16,000 --> 00:05:19,000
And then register some state here with "useState".

105
00:05:21,000 --> 00:05:24,000
And here we could, for example, set up some loading state.

106
00:05:25,000 --> 00:05:29,000
So name the constant "loading", or "isLoading"

107
00:05:29,000 --> 00:05:33,000
and add a "setIsloading" state updating function.

108
00:05:33,000 --> 00:05:35,000
Because you learned that "useState"

109
00:05:35,000 --> 00:05:39,000
always returns an array with exactly two elements

110
00:05:39,000 --> 00:05:42,000
where the first element is the current state snapshot.

111
00:05:42,000 --> 00:05:47,000
And the second element is a function for updating the state.

112
00:05:47,000 --> 00:05:50,000
And when we have data we want to set "isLoading"

113
00:05:50,000 --> 00:05:53,000
to "false" again, because we're not loading anymore

114
00:05:53,000 --> 00:05:56,000
but actually the initial state here should be "true",

115
00:05:56,000 --> 00:05:58,000
not "false".

116
00:05:58,000 --> 00:06:00,000
So we start in a loading state

117
00:06:00,000 --> 00:06:04,000
and then we set it to false, once we have the data.

118
00:06:04,000 --> 00:06:09,000
And then with that, we could check if we are loading here

119
00:06:09,000 --> 00:06:13,000
in the component function, before we return, I check

120
00:06:13,000 --> 00:06:16,000
if we are loading, and if we are,

121
00:06:16,000 --> 00:06:21,000
then I want to return another piece of JSX code,

122
00:06:21,000 --> 00:06:22,000
where I, for example,

123
00:06:22,000 --> 00:06:26,000
have a section with a paragraph where I say, "loading",

124
00:06:26,000 --> 00:06:27,000
something like this.

125
00:06:28,000 --> 00:06:31,000
So that's my fallback content, which I want to return

126
00:06:31,000 --> 00:06:34,000
in this component whilst we are loading.

127
00:06:34,000 --> 00:06:37,000
And we only return the actual meetup list

128
00:06:37,000 --> 00:06:40,000
if we're done loading, so if we have the data.

129
00:06:41,000 --> 00:06:42,000
But speaking of that,

130
00:06:42,000 --> 00:06:45,000
there we're missing an important point.

131
00:06:45,000 --> 00:06:47,000
At the moment, we're just managing the loading state.

132
00:06:47,000 --> 00:06:49,000
We're not doing anything

133
00:06:49,000 --> 00:06:52,000
with the actual data that is being fetched.

134
00:06:53,000 --> 00:06:57,000
For this we could add another "state" to this component

135
00:06:57,000 --> 00:07:00,000
and that is something we haven't done before

136
00:07:00,000 --> 00:07:04,000
but you can have multiple pieces of "state" in one

137
00:07:04,000 --> 00:07:05,000
and the same component.

138
00:07:05,000 --> 00:07:06,000
As many as you need.

139
00:07:06,000 --> 00:07:08,000
There is no restriction here.

140
00:07:08,000 --> 00:07:12,000
And this could be our array of meetups

141
00:07:12,000 --> 00:07:15,000
and it could be an empty array initially

142
00:07:15,000 --> 00:07:17,000
but eventually we want to override this

143
00:07:17,000 --> 00:07:20,000
once we've "fetched our data from the backend,

144
00:07:20,000 --> 00:07:21,000
from the API.

145
00:07:22,000 --> 00:07:25,000
So here, I'll name this "loadedMeetups"

146
00:07:25,000 --> 00:07:25,000
and "setLoadedMeetups".

147
00:07:27,000 --> 00:07:29,000
And here we want to set "loadedMeetups" to "data" let's say.

148
00:07:32,000 --> 00:07:35,000
That will not be the final step,

149
00:07:35,000 --> 00:07:38,000
but for the moment we can do it like this.

150
00:07:38,000 --> 00:07:40,000
And then we could pass the "loadedMeetups"

151
00:07:40,000 --> 00:07:45,000
instead of the dummy data to our meetups prop down there.

152
00:07:45,000 --> 00:07:46,000
And that means that now

153
00:07:46,000 --> 00:07:50,000
we can also get rid of that dummy data.

154
00:07:50,000 --> 00:07:52,000
So I will delete this dummy data constant.

155
00:07:53,000 --> 00:07:58,000
Now don't save this file yet though, because this code

156
00:07:58,000 --> 00:08:01,000
will cause an infinite loop.

157
00:08:01,000 --> 00:08:03,000
What's the problem here.

158
00:08:03,000 --> 00:08:08,000
The problem is related to "state" and our HTTP request.

159
00:08:08,000 --> 00:08:11,000
You might recall that I mentioned,

160
00:08:11,000 --> 00:08:13,000
when I introduced state,

161
00:08:13,000 --> 00:08:16,000
that when we call this state updating function,

162
00:08:16,000 --> 00:08:19,000
we tell react that it should

163
00:08:19,000 --> 00:08:24,000
re-execute this component function and re-evaluate it

164
00:08:24,000 --> 00:08:28,000
and then return the updated JSX code.

165
00:08:28,000 --> 00:08:29,000
That's the idea of "state".

166
00:08:29,000 --> 00:08:33,000
It allows us to reevaluate a component

167
00:08:33,000 --> 00:08:37,000
and possibly render different content on the screen

168
00:08:37,000 --> 00:08:39,000
whenever state changes.

169
00:08:39,000 --> 00:08:43,000
The problem here is, that we change "state"

170
00:08:43,000 --> 00:08:45,000
once we made our requests.

171
00:08:45,000 --> 00:08:48,000
We change the loading and the loaded meetup state.

172
00:08:49,000 --> 00:08:53,000
Then this component function will execute again.

173
00:08:53,000 --> 00:08:54,000
What does this mean?

174
00:08:54,000 --> 00:08:57,000
It means that this "fetch" function will run again

175
00:08:57,000 --> 00:09:00,000
and we send another request.

176
00:09:00,000 --> 00:09:03,000
And once that's done, we update the state again

177
00:09:03,000 --> 00:09:06,000
which means the component function executes again

178
00:09:06,000 --> 00:09:10,000
and "fetch" is called again and so on and so on.

179
00:09:10,000 --> 00:09:15,000
So we have an infinite loop and that breaks our application

180
00:09:15,000 --> 00:09:18,000
and spams our API with requests.

181
00:09:18,000 --> 00:09:20,000
And it's not something we want.

182
00:09:20,000 --> 00:09:22,000
How can we prevent this?