Let's go to Redux, to the places actions which now receives a location object as well and keep in mind
that this is an object that looks like this,
so it has a lat and a lng key here.
So in places actions, in add place, we'll get this location object and here,
I of course want to store it in my database,
I want to store it in my Redux store
and as I mentioned, I want to get this human readable address,
right
and for that we can use another Google API.
If you search for Google Maps geocoding API, you'll find this link here
and this is an API which allows you to translate addresses into coordinates or coordinates into addresses.
Coordinates into addresses is called a reverse look up, so we can click on reverse geocoding down there
and this tells us how that works and for that, you need a Google Maps API key which I did set up earlier
in this module
and now we can send a request in the end to this
URL here. So we can just copy this entire URL and send a HTTP request to this.
Now this will not generate an image but give us back some JSON data, so we'll send that request with
the fetch API as you learned it in the HTTP module and I'll simply do that here inside of my add place
action handler in this inner function. Of course you could also outsource it in a separate file though
if you want to keep this file a bit leaner.
So there, we can use the fetch API and send a request to a URL which I'll create here as a string
with back ticks so that injecting dynamic data is easier and there, I want to copy this URL here
and paste it in there. Okay
that does not work,
so let me manually grab it then and now paste it in there and for the API key, I of course want to use
this environment variable which I set up earlier,
so import env from the env file.
You might remember this is a file which holds an object which holds my API key.
So now I can replace this here, this API key thing here, I can replace this with this dynamically injected
env.googleapikey
value and of course latitude and longitude also needs to be set dynamically.
Make sure you don't delete the comma between these two
but now here latitude can be found in my location which of course has a lat key the way we set it up,
you can always see that down here at the bottom in the console and location as an lng key too,
so we have these two piece of information.
This sends a get request there and that's okay
because we need to send a get request and of course, we can therefore await the response
and I want to store the response in a constant to use it.
Next we can check if this response is maybe not okay, it should be okay but if it's not, we could throw a
new error here,
something went wrong
and of course you can therefore also set up error handling in the same way as you learned it in the
HTTP module
but here I do assume that this will work
and now we can get the response data by awaiting response.json
which extracts the body of the response and converts it to normal Javascript and for the moment, I'll
simply console log that response data so that we get an idea of what's in there
and now let's simply give it a try.
Let's try adding a new place, get the user location and click on save place and we can do that even without
filling out the rest because we got no validation here on
iOS. So this works, of course I get an error because of missing data but we also actually do get the
result of our HTTP request and that's this super huge object there,
now that's really a large object as you can tell.
Now in the end what's in there, in this large object is this is the object here, we have a results key
in there which is an array and there, we have the different components of this address
but if you scroll down a bit, we see besides this array, we also have this formatted address key. So in our
result object here, we don't just have that array but we also have formatted address and that's what
I'm looking for,
this is what I want, I want this formatted address, so we can extract that from our response data here.
So instead of logging it here, I just check if we maybe don't have a response data results key, if that
somehow missing, in that case I will also throw an error but if we make it past this check, then I should
be able to retrieve it.
So here I can then derive my address by accessing response data results and then there, the first line
item,
that's where we actually then find the formatted address and you can simply inspect this object I just
showed you to get an idea for its complete structure.
Of course the official docs also document how this data looks like that you get back. So now we have
the formatted address here and therefore I can retrieve it like this and now we get everything we need.
When we now store something in the database, I can use my address which I just extracted, instead of
dummy address and here for the latitude, I can use location.lat, for the longitude
unsurprisingly I can use location.lng and for dispatching data, we can also add additional information.
We can add the address and maybe a coords key which holds an object where we have lat which is location.lat
and lng which is location.lng and now all that data is passed on with our action object and
therefore reaches our reducer.
So in the reducer, we now need to make sure we use the new address and coords fields we get. So in the places
reducer, we want to initialize our place here with that extra data
and for that we first of all need to tweak the place model to expect that data.
So here, I want to get an address and I want to get a latitude and longitude. So we can then store
all of that,
store the address here,
store the latitude and store the longitude, with that the model is prepared and with the model prepared,
to get this extra data back in the reducer, we should add this when we add a place.
So here we then add as an address, the action.placeData.address because that's what I just added
in the places actions here, this address key and we can also get the coordinates.
So for the latitude here, I pass action.placeData.coords.lat
and for the longitude, I pass action.placeData.coords.lng. With that, places are
initialize here.
Now when we load them from the database, when we set our places, we should therefore also initialize our
place model correctly and take the data which is in the database already,
so keep the address, keep the latitude and keep the longitude,
so that's pretty straightforward and therefore now, we hopefully have all the data and use all the data.
Now to see whether that works,
we need to work on the place item we're outputting here on the starting page, we can see it on Android,
so that we also show the address here maybe
and we also need to work on the place detail screen. So let's work on that so that we can see all the
pieces come together.