WEBVTT

1
00:00:00.720 --> 00:00:02.140
Hi and welcome back.

2
00:00:02.160 --> 00:00:03.220
Today we're going to be working

3
00:00:03.250 --> 00:00:07.820
on selecting a category and showing
the list on this page here.

4
00:00:07.850 --> 00:00:09.500
So first things first,

5
00:00:09.530 --> 00:00:13.740
we are going to create a view
container for our donation items.

6
00:00:13.770 --> 00:00:18.140
And what I want to do is I'm just going
to quickly collapse these items so

7
00:00:18.170 --> 00:00:20.980
that you're clearly able
to see what I'm working on.

8
00:00:21.010 --> 00:00:24.060
So let's create a view
container and give it a style.

9
00:00:24.080 --> 00:00:29.020
And this style is going to be
donation items container.

10
00:00:29.050 --> 00:00:36.220
And let's create that style over here
and let's see what we need for that.

11
00:00:36.250 --> 00:00:39.900
So I'm going to go to our donation mobile

12
00:00:39.930 --> 00:00:46.180
app and we need a margin top and we're
going to need a horizontal margin of 24.

13
00:00:46.210 --> 00:00:47.540
So let's do that.

14
00:00:47.570 --> 00:00:52.500
Let's give it margin top of vertical scale

15
00:00:52.530 --> 00:01:02.880
20 and let's give it margin
horizontal of horizontal scale 24.

16
00:01:03.320 --> 00:01:07.050
And I missed the opening brace here.
Great.

17
00:01:07.080 --> 00:01:09.020
So now that should be applied here.

18
00:01:09.050 --> 00:01:13.130
And now what we want to do is
put these items inside here.

19
00:01:13.160 --> 00:01:19.180
And to do that, we are going
to use a mapping function.

20
00:01:19.210 --> 00:01:22.140
So let's create something like this.

21
00:01:22.170 --> 00:01:27.620
First of all, let's say if there are
nothing inside our donation items that we

22
00:01:27.650 --> 00:01:32.740
created here and we set it,
then don't show it.

23
00:01:32.770 --> 00:01:35.841
So only show it if the donation

24
00:01:36.041 --> 00:01:39.210
items length is greater than zero.

25
00:01:39.240 --> 00:01:41.180
Otherwise we don't want to see it.

26
00:01:41.210 --> 00:01:45.119
And then we're going to say

27
00:01:45.319 --> 00:01:48.160
map over these values

28
00:01:48.200 --> 00:01:51.034
and create a single donation

29
00:01:51.234 --> 00:01:54.780
item component for each one of those.

30
00:01:54.810 --> 00:01:57.049
And let's give it some kind of key

31
00:01:57.249 --> 00:01:59.420
so that they're uniquely identified.

32
00:01:59.450 --> 00:02:02.736
And for that, we're going to be using

33
00:02:02.936 --> 00:02:04.716
value donation item ID

34
00:02:04.916 --> 00:02:10.380
that is going to be passed through
here because every donation that we

35
00:02:10.410 --> 00:02:14.300
created, every donation item
has its own donation item ID.

36
00:02:14.330 --> 00:02:16.380
So we're going to use it here.

37
00:02:16.410 --> 00:02:20.500
Then I will definitely need
to import this component here.

38
00:02:20.530 --> 00:02:21.660
So let me do that.

39
00:02:21.690 --> 00:02:25.780
Let's import single donation item and then

40
00:02:25.810 --> 00:02:30.890
the single donation item will
definitely need some props.

41
00:02:30.920 --> 00:02:34.300
So let's set up those props here.

42
00:02:34.330 --> 00:02:41.380
Now I'm getting some error because I need
donation items inside and then I'm getting

43
00:02:41.410 --> 00:02:46.600
some bunch of other errors that are
going to be resolved very soon.

44
00:02:46.720 --> 00:02:50.140
First of all, I do need a price.

45
00:02:50.170 --> 00:02:56.540
And the price of each donation item
is presented as a string here.

46
00:02:56.570 --> 00:03:01.180
So we're going to have to make sure
that they are converted to numbers

47
00:03:01.210 --> 00:03:05.980
and to not lose anything
that comes after point here.

48
00:03:06.010 --> 00:03:08.020
We're going to have to use the floats.

49
00:03:08.050 --> 00:03:13.540
So I'm going to say parse float
and use value price for this.

50
00:03:13.570 --> 00:03:19.660
I'm also going to need batch title
and bash title is going to be a little

51
00:03:19.690 --> 00:03:25.420
complicated because all we know is
what category have we selected.

52
00:03:25.450 --> 00:03:27.860
So we're going to have to find

53
00:03:27.890 --> 00:03:34.220
the category name from here
for the selected category ID.

54
00:03:34.250 --> 00:03:40.060
So since we know what category we have
selected, what we're going to have to do

55
00:03:40.090 --> 00:03:50.140
here is do categories, categories
and then filter and only get the value

56
00:03:50.170 --> 00:03:53.980
that actually I can't use this value
here because I already used it here.

57
00:03:54.010 --> 00:03:56.780
So I'm just going to call it Val instead.

58
00:03:56.810 --> 00:03:58.700
So only get the value

59
00:03:58.730 --> 00:04:07.100
for which the category ID is equal to
categories selected category ID.

60
00:04:07.130 --> 00:04:10.500
So filtering functions will
give us back an array.

61
00:04:10.530 --> 00:04:14.900
So it only will contain
one element I'm sure.

62
00:04:14.930 --> 00:04:19.780
And from that element we want
to grab the category name.

63
00:04:19.800 --> 00:04:21.380
So let's save this.

64
00:04:21.410 --> 00:04:24.380
And then we also need the donation title.

65
00:04:24.410 --> 00:04:31.500
And donation title is going to be
value name which we have set up here.

66
00:04:31.530 --> 00:04:34.660
We need the Uri attribute for the image.

67
00:04:34.690 --> 00:04:39.020
So that is going to be value image.

68
00:04:39.040 --> 00:04:41.100
Save this.

69
00:04:41.130 --> 00:04:43.180
Let's reload our application.

70
00:04:43.210 --> 00:04:47.260
Okay, and now we see
everything shown up here.

71
00:04:47.280 --> 00:04:52.540
But we have something
different going on here.

72
00:04:52.570 --> 00:04:55.820
We see that our images are contained

73
00:04:55.840 --> 00:05:02.620
inside the dimensions that we gave
it so it doesn't lose its scaling.

74
00:05:02.650 --> 00:05:07.940
And then our highlight category
here is shown in a weird way.

75
00:05:07.970 --> 00:05:15.060
So what we do want to do is
change the resize mode contain to cover

76
00:05:15.090 --> 00:05:19.420
and now it's going to cover
the whole dimension that we gave it.

77
00:05:19.450 --> 00:05:24.220
And moreover, we might want to create
some kind of border radius for this.

78
00:05:24.250 --> 00:05:29.500
So let's go to image and see if we have
any kind of border radius on this.

79
00:05:29.530 --> 00:05:30.620
Do we have anything?

80
00:05:30.650 --> 00:05:32.820
Yeah, border radius is 20.

81
00:05:32.850 --> 00:05:36.180
So let's set border radius,

82
00:05:36.210 --> 00:05:41.840
horizontal scale 20 here so that these
are showing in a nicer way.

83
00:05:42.360 --> 00:05:45.940
And then what else do we need here?

84
00:05:45.970 --> 00:05:47.980
Let's go to our single donation item

85
00:05:48.010 --> 00:05:52.020
and we want this to be pressable
which it is not currently.

86
00:05:52.040 --> 00:05:58.580
So instead of view, let's create another
component here called pressable.

87
00:05:58.600 --> 00:06:05.900
And let's make this pressable and onpress
what we're going to have to do is call

88
00:06:05.920 --> 00:06:14.260
the props onpress function and pass it
the donation item ID that was selected.

89
00:06:14.290 --> 00:06:17.500
So here we're going to need an onpress

90
00:06:17.530 --> 00:06:23.140
prop types function
and it doesn't have to be required.

91
00:06:23.170 --> 00:06:26.020
So let's create single donation item

92
00:06:26.040 --> 00:06:34.300
default props here and say that onpress by
default is going to be an empty function.

93
00:06:34.330 --> 00:06:37.540
And then what we also should have forget

94
00:06:37.570 --> 00:06:43.380
is that our single donation item does
not accept a donation item ID prop.

95
00:06:43.410 --> 00:06:44.980
So let's do that.

96
00:06:45.010 --> 00:06:47.820
Let's make this required and say

97
00:06:47.850 --> 00:06:53.540
that props type should accept a number
that is required for donation item ID.

98
00:06:53.570 --> 00:06:56.540
And now we're getting an error
saying that's missing.

99
00:06:56.570 --> 00:06:58.780
So let's pass it here and say

100
00:06:58.800 --> 00:07:03.900
that the donation item ID
is grabbed from our values.

101
00:07:03.920 --> 00:07:10.060
Okay, so now if we were to press
on an item, we could get the selected

102
00:07:10.090 --> 00:07:15.620
donation ID and let's make
sure everything's set up here.

103
00:07:15.650 --> 00:07:18.620
Okay, let's load this
and let's press on this.

104
00:07:18.650 --> 00:07:20.660
And now we're getting the ID for this.

105
00:07:20.690 --> 00:07:23.460
And this is two and this is four.

106
00:07:23.480 --> 00:07:25.100
And this is eleven.

107
00:07:25.130 --> 00:07:28.580
So this is working just fine.

108
00:07:28.600 --> 00:07:30.020
We don't need this here.

109
00:07:30.040 --> 00:07:31.980
I'm just going to leave it empty.

110
00:07:32.000 --> 00:07:34.260
And there's one more thing
that I wanted to mention.

111
00:07:34.290 --> 00:07:36.700
If we reload our application right now,

112
00:07:36.730 --> 00:07:41.140
we see that our selected category is
going to be highlight automatically.

113
00:07:41.170 --> 00:07:43.220
And if we were to change the selected

114
00:07:43.250 --> 00:07:48.740
category to Environment, our items are
going to change according to those.

115
00:07:48.770 --> 00:07:50.780
So this is working just fine.

116
00:07:50.800 --> 00:07:52.140
You can try it yourself.

117
00:07:52.170 --> 00:07:58.140
You have the array that you can
copy our description of the video.

118
00:07:58.170 --> 00:07:59.820
And that's all.

119
00:07:59.840 --> 00:08:00.940
Thanks so much for watching.

120
00:08:00.960 --> 00:08:03.720
I'll see you in the next video where
we're going to be styling this in a grid.