1
00:00:02,200 --> 00:00:08,410
So regarding the spacing, on the image picker component, I'll simply add a little bit of margin bottom

2
00:00:08,410 --> 00:00:15,160
here of 15 to add a spacing between this image picker component and everything else in the form but

3
00:00:15,160 --> 00:00:21,520
the more important thing of course is that we kind of pass this picked image on to our place, our

4
00:00:21,520 --> 00:00:25,870
new place screen right because that's where we need the image in the end, I don't just need it here as

5
00:00:25,870 --> 00:00:28,370
a preview, I also need it in that other screen.

6
00:00:28,600 --> 00:00:33,910
Well for that, we can go to our take image handler and when we set this as a preview, of course we can

7
00:00:34,000 --> 00:00:41,590
also reach out to our props and assume that we get a let's say on image taken prop which should point

8
00:00:41,620 --> 00:00:48,760
at a function which we define in the new place screen which we can now execute and to that function,

9
00:00:48,780 --> 00:00:54,700
I forward my imageUri as well. So I don't just store it here internally to have a preview,

10
00:00:54,700 --> 00:01:01,730
I also forward it to the parent component so to say and that should be on image taken.

11
00:01:01,920 --> 00:01:08,250
So all we need to do for this to work is we need to go to the new place screen and add this on image

12
00:01:08,250 --> 00:01:10,350
taken prop here on the image picker

13
00:01:10,410 --> 00:01:14,510
and now this should point at a function which is executed by the image picker

14
00:01:14,550 --> 00:01:16,410
once we did pick an image.

15
00:01:16,680 --> 00:01:22,950
So of course here, I also want to store that value, so I'll add another state here and that's the image

16
00:01:23,820 --> 00:01:27,300
value or just image and set image,

17
00:01:27,390 --> 00:01:38,540
maybe the selected image and set selected image name is up to you, which initially is null or undefined

18
00:01:38,540 --> 00:01:40,280
like this

19
00:01:40,280 --> 00:01:42,470
and now we can add a new function for this,

20
00:01:42,470 --> 00:01:50,240
the image taken handler here which receives the image path in the end, right,

21
00:01:50,240 --> 00:01:53,990
that's what we forward from the image picker when we call this function

22
00:01:54,230 --> 00:02:01,370
and here we then set the selected image to the image path we're getting as an argument and the image

23
00:02:01,370 --> 00:02:06,800
taken handler is now what we pass into the image picker here with the help of the on image taken prop

24
00:02:06,920 --> 00:02:14,140
and this is how we communicate between the image picker and the new place screen. When we now click the

25
00:02:14,140 --> 00:02:20,850
save button and therefore the save place handler gets executed, when we dispatch this add place action,

26
00:02:20,860 --> 00:02:24,010
I now want to forward the selected image,

27
00:02:24,100 --> 00:02:32,380
so this state constant here. Of course for that, we need to tweak the add place action creator a bit, right

28
00:02:32,380 --> 00:02:38,740
now it only expects a title, it should now also expect an image and also add this here to our place

29
00:02:38,740 --> 00:02:40,950
data and in the reducer,

30
00:02:40,990 --> 00:02:47,430
I now want to add the image to the place which is getting created but important, right now our place model

31
00:02:47,440 --> 00:02:48,370
expects no image,

32
00:02:48,520 --> 00:02:50,150
so it's time to change that as well,

33
00:02:50,170 --> 00:02:57,220
add an imageUrl there maybe, imageUri to be precise because it's local and then have this image

34
00:02:57,250 --> 00:03:06,490
URI set equal to imageUri we're getting here and now with this adjusted, back in the places

35
00:03:06,490 --> 00:03:15,640
reducer, we now get this extra image data in our action and we need to pass this on to the new place

36
00:03:15,640 --> 00:03:21,670
constructor, so here action.placeData.image is what I want to forward,

37
00:03:21,670 --> 00:03:28,750
so that's the new argument added to the place constructor and action.placeData.image of course refers

38
00:03:28,750 --> 00:03:35,840
to the image we're setting here in our action object. So with that, the image is actually getting added to

39
00:03:35,840 --> 00:03:37,160
the place which is created

40
00:03:37,280 --> 00:03:42,920
and with that in the place list screen where we output the place item, we can now feed some data into the

41
00:03:42,920 --> 00:03:50,360
image and that would be itemData.item.imageUrl, image URL because itemData.item

42
00:03:50,420 --> 00:03:56,750
refers to a single place which is created as defined in our place model and there we have imageUri

43
00:03:56,780 --> 00:04:03,090
and therefore of course here it should be imageUri, not URL but that's the important,

44
00:04:03,220 --> 00:04:05,200
it's not just image, it's imageUri

45
00:04:05,230 --> 00:04:12,740
because here we're referring to a place object following our place model. If we now save that and have

46
00:04:12,740 --> 00:04:13,410
a look,

47
00:04:13,580 --> 00:04:19,250
this should actually work and should allow us to add images which we also see in our place list.

48
00:04:19,340 --> 00:04:30,680
So here if I click take image and I take this dummy image here, like this, crop this and then also add

49
00:04:30,980 --> 00:04:34,700
a title here and click save place,

50
00:04:34,880 --> 00:04:37,710
this doesn't look too bad, we see our image here.

51
00:04:38,120 --> 00:04:40,770
Now one thing is important to understand.

52
00:04:40,880 --> 00:04:47,240
Thus far, we're only storing this image in the default path we get out of the box which is this temporary

53
00:04:47,240 --> 00:04:52,160
path and that's of course not where we want to have it stored because as I mentioned, this will be cleared

54
00:04:52,160 --> 00:04:57,050
periodically and therefore eventually we'll lose our image which of course is not the goal here.