1
00:00:01,140 --> 00:00:03,270
‫So now it's time to fetch

2
00:00:03,270 --> 00:00:07,203
‫the weather data according to the user's input location.

3
00:00:08,400 --> 00:00:11,070
‫And to do that I actually already prepared

4
00:00:11,070 --> 00:00:13,200
‫much of the code.

5
00:00:13,200 --> 00:00:16,710
‫So that's right here in starter dot JS.

6
00:00:16,710 --> 00:00:18,370
‫So let's copy all of this

7
00:00:20,130 --> 00:00:22,650
‫and close that and then just

8
00:00:22,650 --> 00:00:24,330
‫paste it in here.

9
00:00:24,330 --> 00:00:27,510
‫So before our actual component.

10
00:00:27,510 --> 00:00:30,060
‫So here we have basically a function

11
00:00:30,060 --> 00:00:32,763
‫that will get these weather icons here.

12
00:00:34,740 --> 00:00:37,083
‫So the icons that we have right here,

13
00:00:38,760 --> 00:00:41,103
‫so they will come from this function here.

14
00:00:42,750 --> 00:00:44,130
‫Then we also have this function

15
00:00:44,130 --> 00:00:47,430
‫that converts a country code to an emoji

16
00:00:47,430 --> 00:00:50,490
‫just to make this look a little bit nicer.

17
00:00:50,490 --> 00:00:52,680
‫And then we have this function here

18
00:00:52,680 --> 00:00:54,750
‫for formatting a day.

19
00:00:54,750 --> 00:00:56,640
‫So that one will be responsible

20
00:00:56,640 --> 00:01:00,360
‫to showing the weekday here like this.

21
00:01:00,360 --> 00:01:02,310
‫But what we're interested in now is

22
00:01:02,310 --> 00:01:04,200
‫this get weather location.

23
00:01:04,200 --> 00:01:06,330
‫And in fact, all that we need

24
00:01:06,330 --> 00:01:08,910
‫is to grab this code here.

25
00:01:08,910 --> 00:01:10,540
‫So just this try catch

26
00:01:11,670 --> 00:01:15,150
‫and cut it here and then this function itself,

27
00:01:15,150 --> 00:01:17,370
‫we actually don't need it.

28
00:01:17,370 --> 00:01:20,940
‫So just grab that code there

29
00:01:20,940 --> 00:01:23,910
‫then get ride of this temporary code

30
00:01:23,910 --> 00:01:25,203
‫and paste that here.

31
00:01:26,940 --> 00:01:29,580
‫Now, immediately we see that we have a problem

32
00:01:29,580 --> 00:01:32,280
‫because we are using the await keyword

33
00:01:32,280 --> 00:01:35,310
‫and so this needs to be an a-sync function.

34
00:01:35,310 --> 00:01:36,143
‫But that's

35
00:01:37,410 --> 00:01:40,590
‫but that's, luckily for us, very easy.

36
00:01:40,590 --> 00:01:44,460
‫So we can simply make these methods here a-sync methods,

37
00:01:44,460 --> 00:01:45,423
‫Like this.

38
00:01:46,530 --> 00:01:49,860
‫Alright, so that's looking better but we still have a

39
00:01:49,860 --> 00:01:54,030
‫problem here which is that we are using this location

40
00:01:54,030 --> 00:01:57,420
‫here. So, trying to reference a variable that doesn't

41
00:01:57,420 --> 00:02:01,182
‫exist. So instead, here what we want is this.

42
00:02:01,182 --> 00:02:04,953
‫Dot state dot location.

43
00:02:06,930 --> 00:02:10,440
‫Okay. Now it looks like we have no more errors

44
00:02:10,440 --> 00:02:11,880
‫and so let's just quickly go

45
00:02:11,880 --> 00:02:13,530
‫through what this code here does.

46
00:02:14,370 --> 00:02:19,024
‫So we have this API here at open-meteo.com

47
00:02:19,024 --> 00:02:23,010
‫So we can check that out and check out the documentation

48
00:02:23,010 --> 00:02:25,890
‫if you want. But, it's basically just a

49
00:02:25,890 --> 00:02:28,140
‫free weather API.

50
00:02:28,140 --> 00:02:31,140
‫So if you want, you can check out the documentation here,

51
00:02:31,140 --> 00:02:34,920
‫but that's not necessary here right now.

52
00:02:34,920 --> 00:02:39,240
‫To use this API, we first need to basically geo code

53
00:02:39,240 --> 00:02:44,240
‫our location here into a latitude, longitude, a country,

54
00:02:45,180 --> 00:02:48,570
‫and so on. So first we do a fetch request

55
00:02:48,570 --> 00:02:52,080
‫to this endpoint right here with our location string

56
00:02:52,080 --> 00:02:55,920
‫which will then return basically all the information about

57
00:02:55,920 --> 00:02:58,050
‫that location. So then here,

58
00:02:58,050 --> 00:03:02,190
‫we are, for now logging that to the console.

59
00:03:02,190 --> 00:03:04,380
‫So the name of the location that came back

60
00:03:04,380 --> 00:03:08,010
‫and then converting a country to an emoji flag.

61
00:03:08,010 --> 00:03:09,960
‫So just as I showed you before.

62
00:03:09,960 --> 00:03:12,660
‫And then, once we have that information, we plug

63
00:03:12,660 --> 00:03:16,022
‫that here into this URL endpoint.

64
00:03:16,022 --> 00:03:20,901
‫So, the latitude, longitude, and timezone are things that

65
00:03:20,901 --> 00:03:23,010
‫this endpoint here needs.

66
00:03:23,010 --> 00:03:25,894
‫So, that's why first, we need to convert our location

67
00:03:25,894 --> 00:03:29,160
‫to basically this information.

68
00:03:29,160 --> 00:03:32,596
‫And so then, we get the data here and

69
00:03:32,596 --> 00:03:36,210
‫again for now, just log it to the console.

70
00:03:36,210 --> 00:03:37,800
‫And in case there's any error,

71
00:03:37,800 --> 00:03:41,400
‫then that simply gets logged also to the console.

72
00:03:41,400 --> 00:03:43,170
‫So let's just reload.

73
00:03:43,170 --> 00:03:45,870
‫Let's click here. And..

74
00:03:45,870 --> 00:03:48,690
‫so you see that's it's actually working.

75
00:03:48,690 --> 00:03:51,150
‫So let's see what we have here.

76
00:03:51,150 --> 00:03:52,893
‫So first we have the geo data.

77
00:03:55,290 --> 00:03:57,627
‫And so then in the results we have

78
00:03:57,627 --> 00:04:00,450
‫basically different possible results

79
00:04:00,450 --> 00:04:02,850
‫where we would then take the first one.

80
00:04:02,850 --> 00:04:05,962
‫So here we take geo data. results and the first one,

81
00:04:05,962 --> 00:04:10,713
‫and from there we get all this information that we need.

82
00:04:11,910 --> 00:04:15,780
‫Okay. Then we display the name that came back

83
00:04:15,780 --> 00:04:18,690
‫together with the emoji, and finally we have

84
00:04:18,690 --> 00:04:20,550
‫the weather data.

85
00:04:20,550 --> 00:04:23,550
‫So that's weatherData.daily.

86
00:04:23,550 --> 00:04:26,580
‫So here we have all the information that we need

87
00:04:26,580 --> 00:04:28,413
‫to then later display the weather.

88
00:04:29,250 --> 00:04:33,540
‫Okay. Now one thing that I want to start by doing here

89
00:04:33,540 --> 00:04:36,150
‫is to create an is loading state.

90
00:04:36,150 --> 00:04:39,120
‫So just like we have been doing before,

91
00:04:39,120 --> 00:04:40,920
‫we want to indicate to the user

92
00:04:40,920 --> 00:04:42,840
‫that we are currently loading.

93
00:04:42,840 --> 00:04:45,423
‫And so, let's add a new piece of state.

94
00:04:46,260 --> 00:04:49,380
‫And, as I said previously here we know

95
00:04:49,380 --> 00:04:52,350
‫to not create multiple state variables.

96
00:04:52,350 --> 00:04:56,130
‫But instead, we add them all to the same object.

97
00:04:56,130 --> 00:05:00,030
‫And so here, let's say is loading

98
00:05:00,030 --> 00:05:02,460
‫and we start at false.

99
00:05:02,460 --> 00:05:06,400
‫And then here, in the beginning of this tri block

100
00:05:07,632 --> 00:05:10,713
‫we simply do this dot set state.

101
00:05:11,880 --> 00:05:15,090
‫And so now here comes a very important part.

102
00:05:15,090 --> 00:05:18,360
‫So, in this object that we pass to setState,

103
00:05:18,360 --> 00:05:21,660
‫we only need to specify the actual properties

104
00:05:21,660 --> 00:05:23,820
‫that we want to change.

105
00:05:23,820 --> 00:05:28,820
‫So here, we just need to write is loading set to false.

106
00:05:29,460 --> 00:05:32,760
‫And that will then not override the location.

107
00:05:32,760 --> 00:05:36,990
‫So it will really only update this is loading property.

108
00:05:36,990 --> 00:05:39,390
‫And this is important to mention because

109
00:05:39,390 --> 00:05:42,600
‫with the you state hook, if we updated the state

110
00:05:42,600 --> 00:05:45,720
‫that is an object, we could not do this.

111
00:05:45,720 --> 00:05:49,710
‫We would first have to de-structure the current state.

112
00:05:49,710 --> 00:05:52,200
‫So like this dot state, for example

113
00:05:52,200 --> 00:05:55,680
‫and then we would mutate this one property.

114
00:05:55,680 --> 00:05:59,220
‫So, basically we would have to return the entire object.

115
00:05:59,220 --> 00:06:01,920
‫But here, again that's not necessary.

116
00:06:01,920 --> 00:06:05,400
‫So just mutating this one property,

117
00:06:05,400 --> 00:06:07,713
‫and of course it needs to be true.

118
00:06:08,550 --> 00:06:11,405
‫And then let's copy it and at the end,

119
00:06:11,405 --> 00:06:12,963
‫set it to false.

120
00:06:14,040 --> 00:06:16,890
‫So let's add a finally block here,

121
00:06:16,890 --> 00:06:19,890
‫which will run no matter if the code here

122
00:06:19,890 --> 00:06:21,750
‫through an error or not.

123
00:06:21,750 --> 00:06:25,707
‫And then, down here in our render output ,

124
00:06:26,760 --> 00:06:29,280
‫let's do some conditional rendering.

125
00:06:29,280 --> 00:06:33,850
‫So, this dot state dot is loading

126
00:06:34,710 --> 00:06:37,350
‫and maybe you start seeing that it is

127
00:06:37,350 --> 00:06:41,373
‫quite annoying to always type that this dot state.

128
00:06:43,290 --> 00:06:46,080
‫But anyway, that's why we no longer use these

129
00:06:46,080 --> 00:06:47,463
‫components in practice.

130
00:06:49,650 --> 00:06:53,160
‫Okay. But so here we just render a paragraph

131
00:06:53,160 --> 00:06:55,860
‫with this predefined class name.

132
00:06:55,860 --> 00:06:57,633
‫And so, let's try that again.

133
00:06:59,100 --> 00:07:03,870
‫And, beautiful. Now, we just forgot to

134
00:07:03,870 --> 00:07:06,840
‫actually change it back to false

135
00:07:06,840 --> 00:07:08,823
‫and not leave it at true.

136
00:07:10,410 --> 00:07:12,273
‫Yeah. That looks a lot better.

137
00:07:13,542 --> 00:07:16,110
‫Okay. And now next up, we also want

138
00:07:16,110 --> 00:07:18,750
‫to get this city here and of course

139
00:07:18,750 --> 00:07:21,240
‫the weather onto the user interface.

140
00:07:21,240 --> 00:07:23,700
‫Which means, that we need two new pieces

141
00:07:23,700 --> 00:07:27,361
‫of state. And by the way, we need to get

142
00:07:27,361 --> 00:07:31,050
‫also this new location into the UI

143
00:07:31,050 --> 00:07:33,000
‫even though we already have it here

144
00:07:33,000 --> 00:07:36,780
‫because sometimes it's actually different.

145
00:07:36,780 --> 00:07:39,243
‫So for example, if I search for London.

146
00:07:40,200 --> 00:07:43,200
‫So if I just type Lon, then our API

147
00:07:43,200 --> 00:07:45,930
‫will automatically assume that it is London.

148
00:07:45,930 --> 00:07:48,570
‫So here, we then want to display that the weather

149
00:07:48,570 --> 00:07:52,800
‫is indeed coming from London, not just from Lon.

150
00:07:52,800 --> 00:07:57,800
‫Okay. So, let's uh come

151
00:07:57,900 --> 00:07:58,953
‫now, where is that?

152
00:08:02,580 --> 00:08:03,453
‫Yeah. Right here.

153
00:08:05,100 --> 00:08:10,100
‫So let's call this one the display location

154
00:08:10,230 --> 00:08:12,690
‫and it starts as an empty string and

155
00:08:12,690 --> 00:08:15,663
‫then also the weather.

156
00:08:16,500 --> 00:08:19,440
‫And let's initialize this one as an empty object

157
00:08:19,440 --> 00:08:22,473
‫because it will later also become an object.

158
00:08:23,700 --> 00:08:27,750
‫Alright. And so then here, instead of logging this stuff

159
00:08:27,750 --> 00:08:30,690
‫to the console, well this one, we actually

160
00:08:30,690 --> 00:08:33,780
‫only want to log. We don't want this one in state.

161
00:08:33,780 --> 00:08:36,270
‫But we want this display name.

162
00:08:36,270 --> 00:08:41,270
‫And so, let's now do this dot set state and then

163
00:08:41,940 --> 00:08:44,643
‫of course, this needs to be an object.

164
00:08:47,730 --> 00:08:51,450
‫And then, display location.

165
00:08:51,450 --> 00:08:53,673
‫And the same thing for the weather.

166
00:08:55,203 --> 00:08:58,570
‫So here, this dot set state

167
00:09:01,170 --> 00:09:05,733
‫and object and then weather just like this.

168
00:09:07,080 --> 00:09:11,190
‫Okay. So let's reload here.

169
00:09:11,190 --> 00:09:13,083
‫Let's come to our components.

170
00:09:14,700 --> 00:09:17,763
‫So we have all the initial state right there.

171
00:09:18,630 --> 00:09:20,610
‫Then, let's get the weather

172
00:09:20,610 --> 00:09:25,140
‫and nice! So we get our actual weather for

173
00:09:25,140 --> 00:09:27,840
‫display location and really all the data

174
00:09:27,840 --> 00:09:31,080
‫that we need to nicely display and render

175
00:09:31,080 --> 00:09:33,090
‫our date here, in the UI.

176
00:09:33,090 --> 00:09:35,430
‫And so, that's going to be the topic

177
00:09:35,430 --> 00:09:37,113
‫of our next lecture.