WEBVTT

1
00:00:00.080 --> 00:00:01.620
Welcome back to our tutorials.

2
00:00:01.640 --> 00:00:03.300
Today, what we're going to be doing is

3
00:00:03.330 --> 00:00:07.460
anytime a user presses on these items,
we're going to make sure that we redirect

4
00:00:07.490 --> 00:00:12.220
our users to the appropriate page,
which is going to be a single donation

5
00:00:12.250 --> 00:00:17.220
item page and that they can
read information about this.

6
00:00:17.240 --> 00:00:21.540
So the first thing that we're going
to need is definitely a new screen.

7
00:00:21.570 --> 00:00:27.900
And we're going to call this screen
single donation item.

8
00:00:27.920 --> 00:00:35.900
And here we are going to create
two files, single donation JS.

9
00:00:35.930 --> 00:00:38.900
And we're going to need
styling file for that as well.

10
00:00:38.930 --> 00:00:41.260
So let's do the usual stuff.

11
00:00:41.290 --> 00:00:43.540
Let's import the styles sheet.

12
00:00:43.570 --> 00:00:50.180
And let's create the styles using
stylesheet create function.

13
00:00:50.210 --> 00:00:55.900
And let's make sure that we export this
style so that we can import it here.

14
00:00:55.930 --> 00:01:03.260
And here we're just going to do an import
of react and import of our styles.

15
00:01:03.290 --> 00:01:05.340
And we're going to create a constant

16
00:01:05.370 --> 00:01:10.660
for single donation item that is
going to be a functional component

17
00:01:10.690 --> 00:01:12.540
returning null so far.

18
00:01:12.570 --> 00:01:17.570
Let's export default single donation item.
Great.

19
00:01:17.600 --> 00:01:19.570
So now we have set up this page.

20
00:01:19.600 --> 00:01:21.980
But in order to be able to access this

21
00:01:22.010 --> 00:01:25.420
page, we're going to have
to take care of our navigation.

22
00:01:25.450 --> 00:01:32.080
So first of all, we're going to create
a single donation item route.

23
00:01:33.040 --> 00:01:34.460
And then we're going to go to main

24
00:01:34.490 --> 00:01:39.210
navigation and we're going to say
that there is another screen available

25
00:01:39.240 --> 00:01:42.380
to us and it's going to be
single donation item.

26
00:01:42.410 --> 00:01:44.700
And we're going to import the screen

27
00:01:44.730 --> 00:01:48.900
that we just created
from screen and not components.

28
00:01:48.930 --> 00:01:51.620
Great.
Let's save this.

29
00:01:51.650 --> 00:01:56.740
And I shouldn't have parentheses here.

30
00:01:56.770 --> 00:01:58.540
Okay, all good with this.

31
00:01:58.570 --> 00:02:04.260
And then what do we have to take care
of is redirection from the home page.

32
00:02:04.290 --> 00:02:08.540
And here we're going to have
to do something like this.

33
00:02:08.570 --> 00:02:09.450
First of all,

34
00:02:09.480 --> 00:02:15.100
we're going to have to update
the selected donation ID which we can do

35
00:02:15.130 --> 00:02:20.780
by dispatching update
selected donation ID.

36
00:02:20.810 --> 00:02:24.960
And we're going to pass it
the selected donation ID.

37
00:02:25.600 --> 00:02:29.020
And once we do that,
actually I want to change this function

38
00:02:29.050 --> 00:02:34.540
here in our whoops it shouldn't
be a selected category ID.

39
00:02:34.570 --> 00:02:39.660
We should say
update donation selected donation ID.

40
00:02:39.690 --> 00:02:40.940
Yes.
Okay.

41
00:02:40.970 --> 00:02:43.060
So now once we go here,

42
00:02:43.090 --> 00:02:47.500
what we want to do is other than updating
selected donation ID,

43
00:02:47.530 --> 00:02:52.220
what we want to also do is get
the object of selected donation.

44
00:02:52.250 --> 00:02:59.700
So selected donation information should be
an empty object by its own initial state.

45
00:02:59.730 --> 00:03:05.260
And here we're going to say that we're
going to update the selected donation

46
00:03:05.290 --> 00:03:12.280
information
and we're going to have to find an item

47
00:03:12.560 --> 00:03:20.180
that has donation item ID equal
to the payload that we passed here.

48
00:03:20.210 --> 00:03:23.610
And that should give us
back the object itself.

49
00:03:23.640 --> 00:03:27.560
We should just say state items here.

50
00:03:28.040 --> 00:03:29.220
Great.

51
00:03:29.250 --> 00:03:34.100
So now once we click here,
we're going to have a state available

52
00:03:34.130 --> 00:03:40.940
that should contain the information about
the selected donation item.

53
00:03:40.970 --> 00:03:43.940
And then what we want to do
is go to our home screen.

54
00:03:43.970 --> 00:03:47.780
And here we should also say that we're
going to use the navigation.

55
00:03:47.810 --> 00:03:52.140
And to do that, we're going
to have to put it here.

56
00:03:52.170 --> 00:03:55.580
And then let's go to onpress function

57
00:03:55.610 --> 00:04:04.860
and say navigation navigate to Routes,
single donationitem.

58
00:04:04.890 --> 00:04:07.900
And we're going to have
to import these routes.

59
00:04:07.930 --> 00:04:09.980
And now we can save this.

60
00:04:10.010 --> 00:04:13.020
And then what I want to do is once we get

61
00:04:13.050 --> 00:04:17.980
to this screen, I want to get
that information item here.

62
00:04:18.010 --> 00:04:23.100
So we're going to have
to do constant donation

63
00:04:23.130 --> 00:04:27.980
item information is going to be equal to use

64
00:04:28.010 --> 00:04:33.500
selector that we should
import from react redux.

65
00:04:33.530 --> 00:04:38.380
And then we're going to get the state
and then we're going to get the donation.

66
00:04:38.410 --> 00:04:44.140
And then we're going to get selected
donation information.

67
00:04:44.160 --> 00:04:49.180
And then we're going to console log
donation item information to make sure

68
00:04:49.210 --> 00:04:52.380
that we get the information
that we wanted to get.

69
00:04:52.410 --> 00:04:53.820
So let's reload our app.

70
00:04:53.840 --> 00:04:55.820
Now our categories are visible.
Great.

71
00:04:55.840 --> 00:04:58.980
And all of our items here
are visible as well.

72
00:04:59.010 --> 00:05:02.300
And let's click on this item great.

73
00:05:02.320 --> 00:05:03.740
Where we direct it to a new screen.

74
00:05:03.770 --> 00:05:06.020
It doesn't really show anything to us,

75
00:05:06.040 --> 00:05:08.671
but it does grab the information

76
00:05:08.871 --> 00:05:11.220
about the item that we pressed.

77
00:05:11.250 --> 00:05:14.200
So if we go back

78
00:05:14.360 --> 00:05:17.819
and then we press something else, it will

79
00:05:18.019 --> 00:05:20.940
get information for that other item.

80
00:05:20.960 --> 00:05:21.380
Great.

81
00:05:21.410 --> 00:05:25.440
We have set this up and in the next video,
what we're going to do is we're going

82
00:05:25.470 --> 00:05:30.940
to use this information
to create the design that matches

83
00:05:30.970 --> 00:05:34.620
our given design for the
single donation item.

84
00:05:34.650 --> 00:05:37.760
Thanks so much for watching
and I'll see you in the next video.