So let's make sure we can go to the edit product screen and for that of course, I first of all will fill
it with some life by importing React from React and then also by importing some things from React Native
and these some things for the moment will include the view and the text and also a stylesheet which
we'll need later
and then here we have the edit product screen where I will get props and need to return some jsx.
I set up my styles object here with Stylesheet.create like that and then we can export
the edit product screen as the default.
Now here in the component itself, for the moment just to see that this works, we can output a view with
a text in there where we say that the edit product screen and later of course, we'll output more helpful
things here and now to go there, again we need to register this in a navigator,
it's part of the admin navigator, so let's import this screen,
import the edit product screen from screens
user edit product screen and then add it here to the admin navigator, maybe with edit product as an
identifier, point at the edit product screen.
Now we should be able to generally move there but of course we now need to trigger a navigation action
to reach it and that's something I want to do from inside the user product screen when we select this
or when we press edit, then I want to do the same thing.
So I'll again create a function here so that I don't duplicate my code,
select product or edit product handler maybe, this is a function where I expect to get the ID I want
to
edit so the ID of the product I want to edit and here, I want to use props navigation, navigate to the edit
product screen, so to the screen with this identifier which I of course have because that's the identifier
I just registered here
and I want to forward the product ID here.
So the ID I get as an argument here in the function is forwarded as a routing parameter,
now edit product handler is the function that should be executed here
when we click the edit button, there I forward itemData.item.id and I do the same here in
this on select handler of course.
If we have a look at this, we go back here,
admin, click here, the edit product screen, also if I click the edit button,
so that's working. Now to add new products, I want to go to the same screen but without passing in an
ID and that will allow us to then find out whether we're in edit or add mode on that edit product
screen by checking whether we have an ID or not.
So to go to that add product screen, we can add an action item, so an item to the header bar here in the
user product screen and that should be on the right so I'll add header right here.
This is in the end just what we set up here, so I'll copy that using header buttons but the identifier
here could be add and the icon should be md create and ios create to have that icon that signals that we're
about to create something and also here, I don't toggle the drawer but instead I call navigate and go
to edit product and now as I mentioned important, without passing any parameters here because we're adding
a new product, we will certainly not pass in any existing ID here.
And with that added, for example on Android to mix things up on the admin screen, we can now press this
action bar icon to go the screen.
Now of course here the header is missing and we'll fix this but before we do so, there is something else
I want to fix, the coffee mug is actually cut of here on iOS,
you see that the G is a little bit cut off and in addition to that, you might have noticed earlier that
when I had items on the cart and I remove them, that earlier I had a minus here,
now let's fix both things. For the coffee mug or for text being cut off,
the reason is simple. In the product item component here, we assign the height to our different elements,
like the image had 60% height,
the details had 15, let's give those 17 and therefore deduct two percentage points from the actions so
that the title has a little bit more space and this makes sure that the coffee mug is there,
that was a simple fix.
Now for the cart,
the problem simply is that
behind the scenes when working with floating point numbers, Javascript doesn't have the precision you
would maybe want it to have
and that's just how Javascript works
and therefore if you add two items and then remove them both, you can actually end up with a value that
at some decimal place isn't 0. Now what you can do to fix this in the cart screen is here when you output
the amount with to fixed, you can actually use math which is built into Javascript, round and wrap this
to fixed value here and multiply it with 100 and thereafter, divide this by 100.
This will ensure that you never end up with this minus, again
this has to do with how Javascript internally handles these floating point numbers.
So now if we again add a couple of items here and add them to the cart, this generally looks good,
so our logic still works
but now if we remove items here, we should always end up with a zero like this, never with a minus in
front of it.
So that's just a tiny improvement regarding how we output this and with these visual tweaks out of the way,
let's go back to the user products and make sure that now that we can reach the edit and add screen
which is one and the same screen of course,
we also do show some inputs there and we load some data for a product that should be edited if appropriate.