1
00:00:02,370 --> 00:00:09,300
So to use the data we're getting back from the map screen, we can go directly to the location picker

2
00:00:09,300 --> 00:00:15,080
component because there, I do have access to props navigation since I feed this in there from the new

3
00:00:15,080 --> 00:00:20,750
place screen, so I can directly listen to changes in my params there and there,

4
00:00:20,750 --> 00:00:29,090
let's say at the top of the component, here where I set up my state, I can also get my picked location

5
00:00:29,630 --> 00:00:36,440
with the help of props.navigation.getParam and now extract the param I'm setting in the map screen,

6
00:00:36,860 --> 00:00:42,810
so that picked location param I'm setting there, that's what we can retrieve here.

7
00:00:42,850 --> 00:00:44,670
Now of course, this will not always be set,

8
00:00:44,710 --> 00:00:51,130
for example if we go to the new place screen from our places list screen, there in this navigation action,

9
00:00:51,370 --> 00:00:56,460
I'm not setting any param so therefore of course this is not always available but in that case picked

10
00:00:56,460 --> 00:00:58,390
location will just be undefined.

11
00:00:58,420 --> 00:01:04,060
Now here, I now would have a name clash because I have this picked location or this picked location here

12
00:01:04,570 --> 00:01:06,940
and actually, I kind of want to merge both together.

13
00:01:06,940 --> 00:01:17,390
So what I'll do here, I'll rename this to map picked location and then add use effect here to the location

14
00:01:17,390 --> 00:01:21,740
picker and in the end, check for whenever this changes.

15
00:01:21,740 --> 00:01:27,800
So here, I'll add use effect and in this effect here, I want to trigger it or I want to run this

16
00:01:27,800 --> 00:01:34,250
effect whenever map pick location changes and if I then do have a map pick location, so if this is

17
00:01:34,250 --> 00:01:41,150
defined, I'll call set picked location to use my internal state here and set this to the location that

18
00:01:41,150 --> 00:01:42,870
was picked on the map.

19
00:01:42,890 --> 00:01:47,720
So this is now an elegant way of storing the location we picked on the map and which we passed around

20
00:01:47,720 --> 00:01:52,280
with props in our internal location picker state here.

21
00:01:52,410 --> 00:01:57,690
Now we'll update the pick location to the location picked on the map and therefore hopefully we see it in

22
00:01:57,690 --> 00:02:05,930
the preview. If we go back there and open the map and then I pick a location here somewhere around

23
00:02:05,930 --> 00:02:09,180
this hospital let's say and I click save,

24
00:02:09,350 --> 00:02:15,770
indeed we see that here on this preview and the same should be the case on Android

25
00:02:15,770 --> 00:02:21,170
and even if I fetch a user location first which is at the Googleplex, if I then pick a location here

26
00:02:21,170 --> 00:02:23,120
somewhere in San Francisco and I save this,

27
00:02:25,810 --> 00:02:28,370
this gets updated here in the preview as well.

28
00:02:28,540 --> 00:02:29,670
So that works,

29
00:02:29,670 --> 00:02:35,780
this is how we can pick places on the map and use them here in the preview and of course also therefore

30
00:02:35,830 --> 00:02:38,620
kind of store them here in the location picker.

31
00:02:38,620 --> 00:02:45,190
Now we also need to make sure we can pass the data from the location picker back to the new place screen

32
00:02:45,220 --> 00:02:47,820
because that's ultimately where we need that data.