1
00:00:02,280 --> 00:00:08,810
So whenever our location changes here in the location picker, I want to inform the new place screen.

2
00:00:09,030 --> 00:00:11,460
Well that of course means that here

3
00:00:11,490 --> 00:00:20,400
when I picked a place on the map or also here if I got the user location, in both cases I want to

4
00:00:21,030 --> 00:00:26,840
trigger a method or a function which I expect to get from my new place screen.

5
00:00:26,940 --> 00:00:31,740
So the same thing as we're doing it on the image picker in the end. There once I took an image, I call props

6
00:00:31,800 --> 00:00:35,810
on image taken to call a function that the parent component,

7
00:00:35,850 --> 00:00:40,360
so the new place screen, can pass to the image picker and I want to do the same here,

8
00:00:40,390 --> 00:00:43,080
I want to use the same pattern here in the location picker.

9
00:00:43,110 --> 00:00:50,820
So here after picking a location with the please locate me button, I want to trigger props on location

10
00:00:50,910 --> 00:01:02,720
picked and forward this location in the end, right and I want to do the exact same thing if I got a new

11
00:01:02,720 --> 00:01:03,560
map location.

12
00:01:03,560 --> 00:01:08,640
So besides setting the internal location to update the preview, I'll forward

13
00:01:08,900 --> 00:01:14,570
in this case here, the map pick location. So on location picked is now a prop we can set on the location

14
00:01:14,570 --> 00:01:20,030
picker, so I'll do that here in the new place screen and this should now point to a function which will

15
00:01:20,030 --> 00:01:28,960
receive the picked location. So here we can add the location picked handler,

16
00:01:29,020 --> 00:01:37,870
this is a function and this function will of course receive the location in the end and for the moment,

17
00:01:38,200 --> 00:01:46,020
I'll just console log it there and then take the function name here and pass that to on location picked

18
00:01:46,170 --> 00:01:51,770
so that a reference to this function is passed to on location picked into the location picker.

19
00:01:51,840 --> 00:01:56,430
Now one important thing, on location picked is getting used in use effect here,

20
00:01:56,460 --> 00:01:59,190
therefore we should specify it as a dependency,

21
00:01:59,400 --> 00:02:05,730
so to only specify this and not all our props, I'll use this destructuring syntax for I get on location

22
00:02:05,730 --> 00:02:10,230
picked out of my props like this, so that I can use it without props.

23
00:02:10,320 --> 00:02:17,340
Now I can use it here on location picked and now to make sure we get no infinite loop, back in the new

24
00:02:17,340 --> 00:02:20,850
place screen where we do with send in this function,

25
00:02:21,030 --> 00:02:27,120
I need to make sure that the location picked handler which is what I do provide on location picked is

26
00:02:27,750 --> 00:02:29,620
a function that doesn't change all the time.

27
00:02:29,640 --> 00:02:37,830
So here, I'll import use callback and wrap use callback around my location picked handler, to avoid that

28
00:02:37,830 --> 00:02:42,380
this gets recreated with every re-render cycle and I therefore get into an infinite loop

29
00:02:42,660 --> 00:02:47,760
and here use callback needs no dependencies because in there, right now I'm doing nothing with external

30
00:02:47,760 --> 00:02:49,350
data.

31
00:02:49,420 --> 00:02:55,630
So now we should see that log hopefully when we either select a user with the get user location button

32
00:02:56,930 --> 00:02:57,930
and that's looking good,

33
00:02:58,040 --> 00:03:02,700
here's my output and the same if I pick it on the map.

34
00:03:02,710 --> 00:03:12,520
So if I pick a location here and I click save, I also get this output. So that seems to work, this here

35
00:03:12,520 --> 00:03:13,740
was my first output,

36
00:03:13,810 --> 00:03:18,430
this was the second output for picking it on the map and with that, we have the information available in the

37
00:03:18,430 --> 00:03:19,740
new place screen,

38
00:03:19,840 --> 00:03:24,680
now we just need to store it in some state there as we're doing it with the title and the image,

39
00:03:24,720 --> 00:03:32,080
so the selected location and set selected location,

40
00:03:32,080 --> 00:03:39,400
we get that with the help of use state and now we can call set selected location in here and set our

41
00:03:39,400 --> 00:03:44,770
location, like this. You don't need to specify this as a dependency,

42
00:03:44,770 --> 00:03:50,540
you could but React will guarantee that it doesn't change anyway so you don't need to specify this

43
00:03:50,930 --> 00:03:59,830
and now we got our selected location here. We can now use this in the save place handler, there besides

44
00:03:59,830 --> 00:04:02,560
forwarding title value and selected image,

45
00:04:02,560 --> 00:04:10,420
we can now also forward the selected location to add place. And therefore the next thing we'll do is

46
00:04:10,480 --> 00:04:16,960
work on our Redux logic to take that location into account and that's one thing that's missing right

47
00:04:16,990 --> 00:04:17,650
now,

48
00:04:17,650 --> 00:04:22,750
also make sure we translate this coordinate pair we get into a human readable address as well.