Welcome back to our tutorials.
Today, what we're going to be doing is
anytime a user presses on these items, we're going to make sure that we redirect
our users to the appropriate page, which is going to be a single donation
item page and that they can read information about this.
So the first thing that we're going to need is definitely a new screen.
And we're going to call this screen single donation item.
And here we are going to create two files, single donation JS.
And we're going to need styling file for that as well.
So let's do the usual stuff.
Let's import the styles sheet.
And let's create the styles using stylesheet create function.
And let's make sure that we export this style so that we can import it here.
And here we're just going to do an import of react and import of our styles.
And we're going to create a constant
for single donation item that is going to be a functional component
returning null so far.
Let's export default single donation item. Great.
So now we have set up this page.
But in order to be able to access this
page, we're going to have to take care of our navigation.
So first of all, we're going to create a single donation item route.
And then we're going to go to main
navigation and we're going to say that there is another screen available
to us and it's going to be single donation item.
And we're going to import the screen
that we just created from screen and not components.
Great. Let's save this.
And I shouldn't have parentheses here.
Okay, all good with this.
And then what do we have to take care of is redirection from the home page.
And here we're going to have to do something like this.
First of all,
we're going to have to update the selected donation ID which we can do
by dispatching update selected donation ID.
And we're going to pass it the selected donation ID.
And once we do that, actually I want to change this function
here in our whoops it shouldn't be a selected category ID.
We should say update donation selected donation ID.
Yes. Okay.
So now once we go here,
what we want to do is other than updating selected donation ID,
what we want to also do is get the object of selected donation.
So selected donation information should be an empty object by its own initial state.
And here we're going to say that we're going to update the selected donation
information and we're going to have to find an item
that has donation item ID equal to the payload that we passed here.
And that should give us back the object itself.
We should just say state items here.
Great.
So now once we click here, we're going to have a state available
that should contain the information about the selected donation item.
And then what we want to do is go to our home screen.
And here we should also say that we're going to use the navigation.
And to do that, we're going to have to put it here.
And then let's go to onpress function
and say navigation navigate to Routes, single donationitem.
And we're going to have to import these routes.
And now we can save this.
And then what I want to do is once we get
to this screen, I want to get that information item here.
So we're going to have to do constant donation
item information is going to be equal to use
selector that we should import from react redux.
And then we're going to get the state and then we're going to get the donation.
And then we're going to get selected donation information.
And then we're going to console log donation item information to make sure
that we get the information that we wanted to get.
So let's reload our app.
Now our categories are visible. Great.
And all of our items here are visible as well.
And let's click on this item great.
Where we direct it to a new screen.
It doesn't really show anything to us,
but it does grab the information
about the item that we pressed.
So if we go back
and then we press something else, it will
get information for that other item.
Great.
We have set this up and in the next video, what we're going to do is we're going
to use this information to create the design that matches
our given design for the single donation item.
Thanks so much for watching and I'll see you in the next video.