Currently in our product item component here in the components folder, the buttons are part of the component,
so is the wrapping touchable component.
We can't change the touchable component that much because it belongs around our content here and
that's also not a big problem because on the admin screen here, I also want the items to be touchable
but I want to go to my edit screen in that case.
I also want to have two buttons - one for editing and one for deleting
but of course the captions and the actions should be different.
Now we could pass in this caption text here as props and rename the props we trigger when the buttons
are pressed in a more generic way, so that that we could use it for viewing the details on the products overview
screen and for editing or deleting on the user product screen. There also is an alternative way of handling
this.
So for one when we press this component in general, I'll rename this to on select to have a more generic
name that makes sense in a broader array of use cases
and I'll also change the way we receive these buttons here.
I'll cut them from here and instead, output props children here which is that special prop that refers
to whatever we pass between the opening and closing tag of our own component. Now with that, I can also
get rid of the colors import here and of the button import
and now go to the places where we use the product item,
that would be the products overview screen for example.
There we now have to import the button component and make sure you import your colors,
so import colors from
constants colors and now go to your product item and change it from a self closing component to a component
which you've close and open with your own
component tags. In between these tags, you can now re-add these two buttons
and now of course, don't use props on view detail and props on add to cart here but instead, add your logic
right here because now we're dynamically passing this in the product item component but therefore we're
able to pass different buttons depending on where we use that product
item component. So now here I'll add a new handler,
select item handler for example which is just a function stored in a constant like this
and there I want to do what I previously did on view detail,
I'll cut that and add it here and I expect to get the ID and the title here as an argument so that
I can forward ID and title here like this
and now select item handler is what I want to trigger here on on select, remember that I renamed this in the
product item, this touchable now fires just on select,
so you'll need to rename this in the places where you use that component like here and then here, I execute
my select item handler here and forward itemData.item.id and itemData.item.title
here so that this data ends up in this function. I'm doing this because now I can use the same item handler
here on this view details button, I can essentially just copy this anonymous function and add it here
to this onPress handler of this button,
so now we reuse that and on add to cart,
well there we dispatch this,
this now is removed here from the product item component because there we no longer have that prop,
instead it's now here, this prop which takes this anonymous function which then in the end should dispatch
this action.
So now the main change is that I move the buttons out of the component, of the product item component into
the products overview screen component and that allows us to still do the same thing as before, if I save
that, that should still work as before. We can tap an item, we can tap
view details, we can tap to cart and that all works
but now we can also customize this in the user product screen.
So there I'll also copy these buttons and go over to the user product screen and in there, import button
from React Native, import our colors constant because we'll need that for the buttons from constants
colors and then here in the product item, instead of setting up this, we need to parse our on select prop
when the item in general is tapped
but now we also add opening and closing tags for our own custom component
and again, add our buttons here
but instead of view details, now I say edit and delete and for the moment,
I can just remove all other logic because for the moment, we have no logic for editing and deleting but
that's something we can add later.
And here for on select, it's also just an empty function for the moment.
This has the advantage that now we have our items as we had before here but in the admin section, we
now have edit and delete
and this allows us to do different things by still reusing the product item component which is of course
quite nice.