1
00:00:02,170 --> 00:00:07,360
Let's go to Redux, to the places actions which now receives a location object as well and keep in mind

2
00:00:07,390 --> 00:00:09,490
that this is an object that looks like this,

3
00:00:09,490 --> 00:00:12,610
so it has a lat and a lng key here.

4
00:00:12,610 --> 00:00:21,730
So in places actions, in add place, we'll get this location object and here,

5
00:00:21,730 --> 00:00:23,920
I of course want to store it in my database,

6
00:00:23,920 --> 00:00:25,460
I want to store it in my Redux store

7
00:00:25,540 --> 00:00:28,930
and as I mentioned, I want to get this human readable address,

8
00:00:28,960 --> 00:00:30,010
right

9
00:00:30,100 --> 00:00:33,130
and for that we can use another Google API.

10
00:00:33,130 --> 00:00:37,610
If you search for Google Maps geocoding API, you'll find this link here

11
00:00:37,690 --> 00:00:43,780
and this is an API which allows you to translate addresses into coordinates or coordinates into addresses.

12
00:00:44,590 --> 00:00:52,870
Coordinates into addresses is called a reverse look up, so we can click on reverse geocoding down there

13
00:00:52,870 --> 00:00:58,230
and this tells us how that works and for that, you need a Google Maps API key which I did set up earlier

14
00:00:58,230 --> 00:00:59,530
in this module

15
00:01:00,130 --> 00:01:04,960
and now we can send a request in the end to this

16
00:01:04,960 --> 00:01:10,780
URL here. So we can just copy this entire URL and send a HTTP request to this.

17
00:01:10,810 --> 00:01:15,130
Now this will not generate an image but give us back some JSON data, so we'll send that request with

18
00:01:15,130 --> 00:01:22,460
the fetch API as you learned it in the HTTP module and I'll simply do that here inside of my add place

19
00:01:22,460 --> 00:01:27,340
action handler in this inner function. Of course you could also outsource it in a separate file though

20
00:01:27,460 --> 00:01:29,920
if you want to keep this file a bit leaner.

21
00:01:29,980 --> 00:01:36,730
So there, we can use the fetch API and send a request to a URL which I'll create here as a string

22
00:01:36,730 --> 00:01:45,620
with back ticks so that injecting dynamic data is easier and there, I want to copy this URL here

23
00:01:45,620 --> 00:01:47,080
and paste it in there. Okay

24
00:01:47,090 --> 00:01:47,930
that does not work,

25
00:01:47,930 --> 00:01:56,310
so let me manually grab it then and now paste it in there and for the API key, I of course want to use

26
00:01:56,310 --> 00:01:58,520
this environment variable which I set up earlier,

27
00:01:58,520 --> 00:02:02,980
so import env from the env file.

28
00:02:02,990 --> 00:02:07,180
You might remember this is a file which holds an object which holds my API key.

29
00:02:07,220 --> 00:02:13,040
So now I can replace this here, this API key thing here, I can replace this with this dynamically injected

30
00:02:13,460 --> 00:02:14,170
env.googleapikey

31
00:02:14,180 --> 00:02:20,870
value and of course latitude and longitude also needs to be set dynamically.

32
00:02:20,870 --> 00:02:23,840
Make sure you don't delete the comma between these two

33
00:02:23,840 --> 00:02:30,460
but now here latitude can be found in my location which of course has a lat key the way we set it up,

34
00:02:30,460 --> 00:02:35,620
you can always see that down here at the bottom in the console and location as an lng key too,

35
00:02:35,620 --> 00:02:37,880
so we have these two piece of information.

36
00:02:37,960 --> 00:02:39,990
This sends a get request there and that's okay

37
00:02:40,000 --> 00:02:45,830
because we need to send a get request and of course, we can therefore await the response

38
00:02:45,970 --> 00:02:50,700
and I want to store the response in a constant to use it.

39
00:02:50,760 --> 00:02:57,690
Next we can check if this response is maybe not okay, it should be okay but if it's not, we could throw a

40
00:02:57,690 --> 00:02:59,930
new error here,

41
00:02:59,970 --> 00:03:01,630
something went wrong

42
00:03:01,710 --> 00:03:05,850
and of course you can therefore also set up error handling in the same way as you learned it in the

43
00:03:05,860 --> 00:03:06,890
HTTP module

44
00:03:07,200 --> 00:03:09,640
but here I do assume that this will work

45
00:03:09,840 --> 00:03:14,970
and now we can get the response data by awaiting response.json

46
00:03:14,980 --> 00:03:21,730
which extracts the body of the response and converts it to normal Javascript and for the moment, I'll

47
00:03:21,730 --> 00:03:26,780
simply console log that response data so that we get an idea of what's in there

48
00:03:26,920 --> 00:03:28,340
and now let's simply give it a try.

49
00:03:29,230 --> 00:03:34,960
Let's try adding a new place, get the user location and click on save place and we can do that even without

50
00:03:34,960 --> 00:03:37,350
filling out the rest because we got no validation here on

51
00:03:37,370 --> 00:03:43,840
iOS. So this works, of course I get an error because of missing data but we also actually do get the

52
00:03:43,840 --> 00:03:48,500
result of our HTTP request and that's this super huge object there,

53
00:03:48,560 --> 00:03:51,190
now that's really a large object as you can tell.

54
00:03:51,760 --> 00:03:58,390
Now in the end what's in there, in this large object is this is the object here, we have a results key

55
00:03:58,390 --> 00:04:02,310
in there which is an array and there, we have the different components of this address

56
00:04:02,320 --> 00:04:09,220
but if you scroll down a bit, we see besides this array, we also have this formatted address key. So in our

57
00:04:09,280 --> 00:04:13,930
result object here, we don't just have that array but we also have formatted address and that's what

58
00:04:13,930 --> 00:04:14,690
I'm looking for,

59
00:04:14,710 --> 00:04:21,360
this is what I want, I want this formatted address, so we can extract that from our response data here.

60
00:04:21,360 --> 00:04:26,510
So instead of logging it here, I just check if we maybe don't have a response data results key, if that

61
00:04:26,520 --> 00:04:34,300
somehow missing, in that case I will also throw an error but if we make it past this check, then I should

62
00:04:34,300 --> 00:04:35,960
be able to retrieve it.

63
00:04:35,980 --> 00:04:43,210
So here I can then derive my address by accessing response data results and then there, the first line

64
00:04:43,280 --> 00:04:43,790
item,

65
00:04:43,810 --> 00:04:49,540
that's where we actually then find the formatted address and you can simply inspect this object I just

66
00:04:49,540 --> 00:04:52,090
showed you to get an idea for its complete structure.

67
00:04:52,090 --> 00:04:58,570
Of course the official docs also document how this data looks like that you get back. So now we have

68
00:04:58,570 --> 00:05:03,550
the formatted address here and therefore I can retrieve it like this and now we get everything we need.

69
00:05:04,420 --> 00:05:09,280
When we now store something in the database, I can use my address which I just extracted, instead of

70
00:05:09,280 --> 00:05:15,210
dummy address and here for the latitude, I can use location.lat, for the longitude

71
00:05:15,430 --> 00:05:23,100
unsurprisingly I can use location.lng and for dispatching data, we can also add additional information.

72
00:05:23,520 --> 00:05:32,100
We can add the address and maybe a coords key which holds an object where we have lat which is location.lat

73
00:05:32,100 --> 00:05:40,320
and lng which is location.lng and now all that data is passed on with our action object and

74
00:05:40,320 --> 00:05:42,380
therefore reaches our reducer.

75
00:05:42,480 --> 00:05:47,940
So in the reducer, we now need to make sure we use the new address and coords fields we get. So in the places

76
00:05:47,940 --> 00:05:53,750
reducer, we want to initialize our place here with that extra data

77
00:05:53,770 --> 00:05:58,150
and for that we first of all need to tweak the place model to expect that data.

78
00:05:58,150 --> 00:06:04,990
So here, I want to get an address and I want to get a latitude and longitude. So we can then store

79
00:06:04,990 --> 00:06:05,530
all of that,

80
00:06:05,530 --> 00:06:08,740
store the address here,

81
00:06:08,880 --> 00:06:17,460
store the latitude and store the longitude, with that the model is prepared and with the model prepared,

82
00:06:17,460 --> 00:06:22,500
to get this extra data back in the reducer, we should add this when we add a place.

83
00:06:22,500 --> 00:06:30,420
So here we then add as an address, the action.placeData.address because that's what I just added

84
00:06:30,420 --> 00:06:35,310
in the places actions here, this address key and we can also get the coordinates.

85
00:06:35,310 --> 00:06:40,860
So for the latitude here, I pass action.placeData.coords.lat

86
00:06:40,860 --> 00:06:50,620
and for the longitude, I pass action.placeData.coords.lng. With that, places are

87
00:06:50,620 --> 00:06:51,510
initialize here.

88
00:06:51,520 --> 00:06:57,550
Now when we load them from the database, when we set our places, we should therefore also initialize our

89
00:06:57,550 --> 00:07:01,650
place model correctly and take the data which is in the database already,

90
00:07:02,020 --> 00:07:07,210
so keep the address, keep the latitude and keep the longitude,

91
00:07:07,240 --> 00:07:13,940
so that's pretty straightforward and therefore now, we hopefully have all the data and use all the data.

92
00:07:14,330 --> 00:07:16,340
Now to see whether that works,

93
00:07:16,340 --> 00:07:21,760
we need to work on the place item we're outputting here on the starting page, we can see it on Android,

94
00:07:21,950 --> 00:07:23,800
so that we also show the address here maybe

95
00:07:24,080 --> 00:07:29,540
and we also need to work on the place detail screen. So let's work on that so that we can see all the

96
00:07:29,540 --> 00:07:30,680
pieces come together.