1
00:00:02,200 --> 00:00:07,030
So let's make sure we can see all the data we're working with. In the place

2
00:00:07,030 --> 00:00:09,310
item, I already got a feel for the address,

3
00:00:09,310 --> 00:00:14,820
I just need to make sure I fit that into there. So in the place list screen, when I use the place

4
00:00:14,830 --> 00:00:20,940
item, instead of passing null for the address, of course we should pass itemData.item.address

5
00:00:20,940 --> 00:00:23,820
in there because we should have the address stored.

6
00:00:23,820 --> 00:00:33,960
So if we try that and this reloads, we see dummy address here and now if we add a new item which should

7
00:00:33,960 --> 00:00:41,260
work as a title and then an image to take a nice image and we can even move around here a little bit

8
00:00:41,260 --> 00:00:43,600
by pressing the key you see down there,

9
00:00:43,600 --> 00:00:45,480
so now if I take an image here,

10
00:00:45,700 --> 00:00:46,630
yes this looks good,

11
00:00:47,870 --> 00:00:55,760
this one and confirm by clicking on crop up there,

12
00:00:55,850 --> 00:00:56,900
that looks good.

13
00:00:56,900 --> 00:01:02,600
Now get the user location maybe and then save this, this looks good.

14
00:01:02,600 --> 00:01:04,350
This is the address of the Google headquarters,

15
00:01:04,350 --> 00:01:05,550
this looks like the image I took

16
00:01:05,550 --> 00:01:06,630
so that's nice.

17
00:01:06,630 --> 00:01:12,240
Let's make sure that on the detail page, we also see a bit more about this and for that on the place detail

18
00:01:12,570 --> 00:01:19,890
screen here, we of course can tweak this and add a scroll view so that we ensure that we can always see

19
00:01:19,890 --> 00:01:25,460
everything, we don't need a flat list here because we'll not have an infinite amount of items, maybe just a

20
00:01:25,460 --> 00:01:28,690
little bit of scrolling that is required based on the device size

21
00:01:29,180 --> 00:01:32,840
and then in there, I definitely want to be able to output an image.

22
00:01:32,840 --> 00:01:36,410
So here I'll output my image and below that,

23
00:01:36,410 --> 00:01:43,270
I also want to be able to output my address and then also actually, a map preview,

24
00:01:43,280 --> 00:01:47,190
so I'll import this as well and we'll need to tweak that component a little bit

25
00:01:47,200 --> 00:01:55,110
therefore but for now I'll just import map preview from components map preview, like this and output

26
00:01:55,110 --> 00:01:57,830
this below my text here.

27
00:01:57,890 --> 00:02:06,650
Now in the text, I want to have my address text in the end and that's of course all data which I expect to

28
00:02:06,650 --> 00:02:11,040
get passed as params or with the help of params,

29
00:02:11,120 --> 00:02:16,660
so to be precise when we select an item, we already pass in the place ID here.

30
00:02:16,700 --> 00:02:25,200
So in the place detail screen, I can get the place ID by accessing props.navigation.getParam place

31
00:02:25,230 --> 00:02:32,430
ID is the identifier I used and then we can of course use use selector to get the fitting data from our Redux

32
00:02:32,490 --> 00:02:33,530
store,

33
00:02:33,540 --> 00:02:36,680
so from React Redux, that's where we import this from

34
00:02:36,780 --> 00:02:47,260
and then here, we can get our selected place with the help of use selector, pass in a function and access

35
00:02:47,300 --> 00:02:57,950
state.places.places and then the find method to find a specific place where the place ID should

36
00:02:57,950 --> 00:03:03,920
be equal to the place ID we're extracting from our params, that's the place we loaded for this screen

37
00:03:03,920 --> 00:03:11,420
and the selected place of course therefore has an address field which we can access because that follows

38
00:03:11,420 --> 00:03:17,750
our place model in the end and for the image, we can of course then also bind the source and set the URI

39
00:03:17,750 --> 00:03:26,600
on this object we pass the source to selectedPlace.imageUri because in my place

40
00:03:26,690 --> 00:03:30,510
model there, I name this 

41
00:03:30,520 --> 00:03:31,440
image URI,

42
00:03:31,440 --> 00:03:33,640
that's what I'm extracting here

43
00:03:33,940 --> 00:03:38,380
and for the map preview, I want to pass in my location.

44
00:03:38,390 --> 00:03:42,590
Good thing is my map preview of course takes a location,

45
00:03:42,590 --> 00:03:49,430
it looks for this location prop so I can pass this in and this should be an object actually with lat

46
00:03:49,520 --> 00:03:57,340
key, so we can use selectedPlace.lat for this and the lng key which is selectedPlace.lng.

47
00:03:57,360 --> 00:04:01,540
So now we pass all of that in there.

48
00:04:01,590 --> 00:04:09,030
Now I'll also wrap the text here into a view and then assign some stylings here,

49
00:04:09,070 --> 00:04:19,490
so on the image here, I want to have a style of styles.image on this view here which wraps my entire

50
00:04:19,490 --> 00:04:21,670
location based stuff,

51
00:04:21,800 --> 00:04:28,350
I want to have a style of let's say location container. On this view here,

52
00:04:28,370 --> 00:04:29,600
a style of

53
00:04:31,980 --> 00:04:44,550
address container, on the text here, style of address and on the map preview, I'll also set a style and name

54
00:04:44,550 --> 00:04:46,400
this map

55
00:04:46,400 --> 00:04:49,860
preview, like this.

56
00:04:51,410 --> 00:04:56,630
Now if you use the exact same names, attached you find some styling which I set up for you,

57
00:04:56,630 --> 00:04:59,010
you can just replace your styles object with that

58
00:04:59,120 --> 00:05:04,220
and this sets up styles for all these identifiers I just added to make that all look the way I want it

59
00:05:04,220 --> 00:05:04,520
to look.

60
00:05:04,520 --> 00:05:09,200
So that's attached and you can use that to make sure you get the same styling out of the box without

61
00:05:09,200 --> 00:05:13,730
me writing all these styles because we've written so many styles throughout this course, here I really want

62
00:05:13,730 --> 00:05:18,430
to focus on the native functionality and not write those all again.

63
00:05:18,490 --> 00:05:23,420
Now one important thing, on the scroll view, you also should set the content container style and there

64
00:05:23,420 --> 00:05:29,300
I'll use a quick and dirty inline styling to set align items here to centers so that everything is

65
00:05:29,300 --> 00:05:37,710
nicely centered on the horizontal axis. With that we should be able to view the details about a place.

66
00:05:37,710 --> 00:05:41,590
One important note, I use the colors constant in the styles I provided to you,

67
00:05:41,620 --> 00:05:50,490
so you need to make sure to import that, import colors from Constants/colors and with that import added

68
00:05:50,490 --> 00:05:56,970
here as well, if you save that and this reloads, you should be able to see these places on Android and

69
00:05:56,970 --> 00:06:00,480
of course you could show a fallback text if you have no places

70
00:06:00,480 --> 00:06:03,360
but now here, you see the places

71
00:06:03,360 --> 00:06:06,570
and if I click on it, this is the detail screen.

72
00:06:06,750 --> 00:06:10,170
Now the one problem I have with that is it looks nice,

73
00:06:10,170 --> 00:06:10,890
that's good

74
00:06:10,980 --> 00:06:17,300
but if I click on the map, nothing happens and of course there I want to go to the map screen as well

75
00:06:17,300 --> 00:06:23,650
but in a non-editable way, so that I go to the map screen without being able to edit it there.

76
00:06:23,750 --> 00:06:25,250
That's the remaining piece

77
00:06:25,250 --> 00:06:25,880
we need to add.