‫So now it's time to fetch
‫the weather data according to the user's input location.
‫And to do that I actually already prepared
‫much of the code.
‫So that's right here in starter dot JS.
‫So let's copy all of this
‫and close that and then just
‫paste it in here.
‫So before our actual component.
‫So here we have basically a function
‫that will get these weather icons here.
‫So the icons that we have right here,
‫so they will come from this function here.
‫Then we also have this function
‫that converts a country code to an emoji
‫just to make this look a little bit nicer.
‫And then we have this function here
‫for formatting a day.
‫So that one will be responsible
‫to showing the weekday here like this.
‫But what we're interested in now is
‫this get weather location.
‫And in fact, all that we need
‫is to grab this code here.
‫So just this try catch
‫and cut it here and then this function itself,
‫we actually don't need it.
‫So just grab that code there
‫then get ride of this temporary code
‫and paste that here.
‫Now, immediately we see that we have a problem
‫because we are using the await keyword
‫and so this needs to be an a-sync function.
‫But that's
‫but that's, luckily for us, very easy.
‫So we can simply make these methods here a-sync methods,
‫Like this.
‫Alright, so that's looking better but we still have a
‫problem here which is that we are using this location
‫here. So, trying to reference a variable that doesn't
‫exist. So instead, here what we want is this.
‫Dot state dot location.
‫Okay. Now it looks like we have no more errors
‫and so let's just quickly go
‫through what this code here does.
‫So we have this API here at open-meteo.com
‫So we can check that out and check out the documentation
‫if you want. But, it's basically just a
‫free weather API.
‫So if you want, you can check out the documentation here,
‫but that's not necessary here right now.
‫To use this API, we first need to basically geo code
‫our location here into a latitude, longitude, a country,
‫and so on. So first we do a fetch request
‫to this endpoint right here with our location string
‫which will then return basically all the information about
‫that location. So then here,
‫we are, for now logging that to the console.
‫So the name of the location that came back
‫and then converting a country to an emoji flag.
‫So just as I showed you before.
‫And then, once we have that information, we plug
‫that here into this URL endpoint.
‫So, the latitude, longitude, and timezone are things that
‫this endpoint here needs.
‫So, that's why first, we need to convert our location
‫to basically this information.
‫And so then, we get the data here and
‫again for now, just log it to the console.
‫And in case there's any error,
‫then that simply gets logged also to the console.
‫So let's just reload.
‫Let's click here. And..
‫so you see that's it's actually working.
‫So let's see what we have here.
‫So first we have the geo data.
‫And so then in the results we have
‫basically different possible results
‫where we would then take the first one.
‫So here we take geo data. results and the first one,
‫and from there we get all this information that we need.
‫Okay. Then we display the name that came back
‫together with the emoji, and finally we have
‫the weather data.
‫So that's weatherData.daily.
‫So here we have all the information that we need
‫to then later display the weather.
‫Okay. Now one thing that I want to start by doing here
‫is to create an is loading state.
‫So just like we have been doing before,
‫we want to indicate to the user
‫that we are currently loading.
‫And so, let's add a new piece of state.
‫And, as I said previously here we know
‫to not create multiple state variables.
‫But instead, we add them all to the same object.
‫And so here, let's say is loading
‫and we start at false.
‫And then here, in the beginning of this tri block
‫we simply do this dot set state.
‫And so now here comes a very important part.
‫So, in this object that we pass to setState,
‫we only need to specify the actual properties
‫that we want to change.
‫So here, we just need to write is loading set to false.
‫And that will then not override the location.
‫So it will really only update this is loading property.
‫And this is important to mention because
‫with the you state hook, if we updated the state
‫that is an object, we could not do this.
‫We would first have to de-structure the current state.
‫So like this dot state, for example
‫and then we would mutate this one property.
‫So, basically we would have to return the entire object.
‫But here, again that's not necessary.
‫So just mutating this one property,
‫and of course it needs to be true.
‫And then let's copy it and at the end,
‫set it to false.
‫So let's add a finally block here,
‫which will run no matter if the code here
‫through an error or not.
‫And then, down here in our render output ,
‫let's do some conditional rendering.
‫So, this dot state dot is loading
‫and maybe you start seeing that it is
‫quite annoying to always type that this dot state.
‫But anyway, that's why we no longer use these
‫components in practice.
‫Okay. But so here we just render a paragraph
‫with this predefined class name.
‫And so, let's try that again.
‫And, beautiful. Now, we just forgot to
‫actually change it back to false
‫and not leave it at true.
‫Yeah. That looks a lot better.
‫Okay. And now next up, we also want
‫to get this city here and of course
‫the weather onto the user interface.
‫Which means, that we need two new pieces
‫of state. And by the way, we need to get
‫also this new location into the UI
‫even though we already have it here
‫because sometimes it's actually different.
‫So for example, if I search for London.
‫So if I just type Lon, then our API
‫will automatically assume that it is London.
‫So here, we then want to display that the weather
‫is indeed coming from London, not just from Lon.
‫Okay. So, let's uh come
‫now, where is that?
‫Yeah. Right here.
‫So let's call this one the display location
‫and it starts as an empty string and
‫then also the weather.
‫And let's initialize this one as an empty object
‫because it will later also become an object.
‫Alright. And so then here, instead of logging this stuff
‫to the console, well this one, we actually
‫only want to log. We don't want this one in state.
‫But we want this display name.
‫And so, let's now do this dot set state and then
‫of course, this needs to be an object.
‫And then, display location.
‫And the same thing for the weather.
‫So here, this dot set state
‫and object and then weather just like this.
‫Okay. So let's reload here.
‫Let's come to our components.
‫So we have all the initial state right there.
‫Then, let's get the weather
‫and nice! So we get our actual weather for
‫display location and really all the data
‫that we need to nicely display and render
‫our date here, in the UI.
‫And so, that's going to be the topic
‫of our next lecture.