Let's start with the confirmation dialog here in edit product screen. We can simply import the alert
API from React Native which allows us to show a nice alert and then add a new method here maybe, we could
all do it in line but to have a little bit more structured code where I have my delete handler.
By the way, how you name your functions is totally up to you, I just like this handler naming here if
I assign that to my event emitters in the jsx code so to say and in there we can call alert.alert
to show an alert with the title of
are you sure
message, do you really want to delete this item
and then an array with all the buttons we want to present
where the button number one has a text of no and a style of default.
There are only three default styles or preconfigured styles you can choose from and no special handler
on this first button.
Second button has yes, there
I want to have a style of destructive to mark this as hey
this will delete something and the onPress handler here is then in the end holding a function that will
really dispatch the delete action.
So now it's the delete handler which I want to execute when we click on that delete button and therefore
of course I'm in the wrong component I just saw.
Let's cut this,
it's not inside of the edit product screen,
we don't need the alert import there,
it's the user products screen I'm talking about. There we need to import alert, there we should add this
handler and now the delete handler should be assigned to this delete button here,
so here we can just point at the delete handler and this anonymous function can be cut from down there
and can be moved here and replace this onPress handler for this button and now with that, we should
get this popup, this confirmation dialog before we actually delete something.
So if I click on delete, now I'm asking, if I press
no,
nothing happens, only if I click
yes we delete this. Tiny mistake of course
is that the item data we need
needs to be available.
So here we forward the ID we want to delete,
so actually for the delete handler, we need the ID of the product we're applying this handler to
so that here I have that ID available and that means that when the delete handler is called down
there, we need to make sure it gets the ID.
So there are two ways of doing that,
an anonymous function in which we execute delete handler manually and forward itemData.item.id
or alternative to that, passing the delete handler like this but use bind to preconfigure any arguments
this function will get. Bind always needs value for the this keyword inside of the function it'll execute. There
we can just pass this, it does not matter
but the second argument now is the first argument the delete handler will get,
so here we pass itemData.item.id. Now with that, we make sure that we can actually press yes and
it will work, if we now go back here to admin, click delete, press yes,
this now really works and if we press no, nothing happens, yes deletes it.
So that's the first thing
and to make sure that we navigate back, if we save this, now we need to go to the edit product screen
and there in our submit handler, no matter if we dispatch the update or create product action, in the end
I want to also call props navigation go back to go back to the previous screen. And if we now save this
and we go to the admin screen and I do for now submit an empty product,
I of course get a warning but this generally works, this going back and if I edit a product, this also
works.
So now with this, we're done regarding all that input management,
the remaining thing I now want to do before I really finish all of this up is to now I want to optimize
the product item a little bit more
and the way we're reusing our card look here with the shadow and so on because we're using that in multiple
components
and if you find yourself using something in multiple components, you might always want to think about
whether you can optimize this a bit more
and indeed here, we have optimization potential.
So how can we optimize this though?
Well we could create a separate component here in our UI folder of the components folder which we name
cart.js, where we just store this cart look. A cart component can be a very simple component in the
end. We import React from React here because we need to create a component and we import a view from
React Native, just like that and now here, we create our cart component where we simply get our props,
return some jsx and export this component in the end, though we'll also need to set up some styling
because that's the core idea behind this component,
it's all about giving us some preconfigured styles. So I'll also add my styles constant with
Stylesheet.create
down there and now, what is the jsx code I want to return here?
Well that's a view, a view which will actually wrap whatever we pass in there,
so between the tags of my component, so just props children in there
but now that view can get some default styling here which I'll name cart and that should be the styles
with which I otherwise copy around.
So here my cart style in this cart component is exactly what I have here, the product item, it's this
shadows stuff here,
the elevation, the border radius and the background color. You can cut all of that and move it into the
cart here.
Now to still be able to configure this a bit, I'll actually enhance this and set style to an object
where I merge in my styles cart values and any values I get on the style prop here, like this.
So now we can even set a style prop when we use our cart and pass in our own styles that will be merged
together with these default card styles because this now allows me to use the cart here in the product
item for example by importing cart from, and now up one level into the UI folder, into the cart file and replace
this view here,
this outer view with card
and of course therefore also replace the closing tag and still pass in my product specifics
here,
so this height and the margin. This will be merged with the other card looks and everything between the opening
and closing tags of card will just work,
I pass this into my card here with the help of props
children. Now the same for the order item, there
we just need to import card from and now go into the UI folder, to card here
and then use card instead of that view, that outer view here,
replace it with a card and get rid of these card styles here,
the shadow stuff, the elevation, border radius and background color and only keep the special styles you
want to merge in. And now the last thing, the last place where we can use this is the cart screen, there
I also have my summary which uses these card styles.
Well again, we can import the card component from the components folder,
the UI folder there and there, from the cart.js file and now use the card component instead of view
in the place where we want these card styles,
so here that would be the view which had the summary styles,
I'll replace this with card. And down at the summary styles,
we keep everything that specific to this screen or to this component but we can get rid of the shadow
color, shadow radius, elevation, border radius background color, that can all be removed.
Now let's save that and you will see that of course the app still works and looks the same way as it
did before
if I add this to the cart for example and I order this and I have a look at my orders, this all looks
the way it did before but now it does so with a little bit of a more optimal code where we actually
reuse our styles and have a separate presentational component for them
so that our other components can be a bit leaner and we don't repeat ourselves as often when setting
up that cart look. Another advantage is that we can't mistype, if we set shadow radius to 8 in one
component and 10 in another, then our app might look slightly inconsistent.
We avoid this by having some central styling focused components which set up these core styles which
we then use in other components as we're doing it here.