1 00:00:02,360 --> 00:00:08,330 So let's make sure we can go to the edit product screen and for that of course, I first of all will fill 2 00:00:08,330 --> 00:00:17,550 it with some life by importing React from React and then also by importing some things from React Native 3 00:00:17,850 --> 00:00:24,960 and these some things for the moment will include the view and the text and also a stylesheet which 4 00:00:24,960 --> 00:00:26,610 we'll need later 5 00:00:26,670 --> 00:00:34,980 and then here we have the edit product screen where I will get props and need to return some jsx. 6 00:00:34,980 --> 00:00:45,420 I set up my styles object here with Stylesheet.create like that and then we can export 7 00:00:45,450 --> 00:00:49,310 the edit product screen as the default. 8 00:00:49,390 --> 00:00:55,030 Now here in the component itself, for the moment just to see that this works, we can output a view with 9 00:00:55,030 --> 00:01:01,990 a text in there where we say that the edit product screen and later of course, we'll output more helpful 10 00:01:01,990 --> 00:01:07,210 things here and now to go there, again we need to register this in a navigator, 11 00:01:07,270 --> 00:01:12,120 it's part of the admin navigator, so let's import this screen, 12 00:01:13,150 --> 00:01:18,940 import the edit product screen from screens 13 00:01:18,940 --> 00:01:29,060 user edit product screen and then add it here to the admin navigator, maybe with edit product as an 14 00:01:29,060 --> 00:01:32,330 identifier, point at the edit product screen. 15 00:01:32,330 --> 00:01:37,250 Now we should be able to generally move there but of course we now need to trigger a navigation action 16 00:01:37,250 --> 00:01:42,320 to reach it and that's something I want to do from inside the user product screen when we select this 17 00:01:42,560 --> 00:01:46,060 or when we press edit, then I want to do the same thing. 18 00:01:46,220 --> 00:01:50,040 So I'll again create a function here so that I don't duplicate my code, 19 00:01:50,240 --> 00:02:00,170 select product or edit product handler maybe, this is a function where I expect to get the ID I want 20 00:02:00,200 --> 00:02:01,420 to 21 00:02:01,460 --> 00:02:11,630 edit so the ID of the product I want to edit and here, I want to use props navigation, navigate to the edit 22 00:02:11,780 --> 00:02:17,900 product screen, so to the screen with this identifier which I of course have because that's the identifier 23 00:02:17,930 --> 00:02:19,330 I just registered here 24 00:02:21,370 --> 00:02:24,580 and I want to forward the product ID here. 25 00:02:25,730 --> 00:02:30,150 So the ID I get as an argument here in the function is forwarded as a routing parameter, 26 00:02:30,200 --> 00:02:33,960 now edit product handler is the function that should be executed here 27 00:02:33,980 --> 00:02:40,850 when we click the edit button, there I forward itemData.item.id and I do the same here in 28 00:02:40,850 --> 00:02:42,790 this on select handler of course. 29 00:02:45,360 --> 00:02:48,400 If we have a look at this, we go back here, 30 00:02:48,510 --> 00:02:53,630 admin, click here, the edit product screen, also if I click the edit button, 31 00:02:53,640 --> 00:03:00,030 so that's working. Now to add new products, I want to go to the same screen but without passing in an 32 00:03:00,080 --> 00:03:05,730 ID and that will allow us to then find out whether we're in edit or add mode on that edit product 33 00:03:05,730 --> 00:03:08,940 screen by checking whether we have an ID or not. 34 00:03:08,940 --> 00:03:16,560 So to go to that add product screen, we can add an action item, so an item to the header bar here in the 35 00:03:16,560 --> 00:03:24,280 user product screen and that should be on the right so I'll add header right here. 36 00:03:25,290 --> 00:03:32,530 This is in the end just what we set up here, so I'll copy that using header buttons but the identifier 37 00:03:32,530 --> 00:03:40,840 here could be add and the icon should be md create and ios create to have that icon that signals that we're 38 00:03:40,840 --> 00:03:47,260 about to create something and also here, I don't toggle the drawer but instead I call navigate and go 39 00:03:47,260 --> 00:03:53,650 to edit product and now as I mentioned important, without passing any parameters here because we're adding 40 00:03:53,650 --> 00:03:57,910 a new product, we will certainly not pass in any existing ID here. 41 00:03:58,970 --> 00:04:06,070 And with that added, for example on Android to mix things up on the admin screen, we can now press this 42 00:04:06,430 --> 00:04:09,540 action bar icon to go the screen. 43 00:04:09,710 --> 00:04:14,540 Now of course here the header is missing and we'll fix this but before we do so, there is something else 44 00:04:14,540 --> 00:04:19,120 I want to fix, the coffee mug is actually cut of here on iOS, 45 00:04:19,130 --> 00:04:25,220 you see that the G is a little bit cut off and in addition to that, you might have noticed earlier that 46 00:04:25,220 --> 00:04:30,680 when I had items on the cart and I remove them, that earlier I had a minus here, 47 00:04:31,380 --> 00:04:37,490 now let's fix both things. For the coffee mug or for text being cut off, 48 00:04:37,490 --> 00:04:46,400 the reason is simple. In the product item component here, we assign the height to our different elements, 49 00:04:46,400 --> 00:04:48,420 like the image had 60% height, 50 00:04:48,550 --> 00:04:56,090 the details had 15, let's give those 17 and therefore deduct two percentage points from the actions so 51 00:04:56,080 --> 00:05:00,440 that the title has a little bit more space and this makes sure that the coffee mug is there, 52 00:05:00,440 --> 00:05:02,540 that was a simple fix. 53 00:05:02,540 --> 00:05:05,560 Now for the cart, 54 00:05:05,570 --> 00:05:07,910 the problem simply is that 55 00:05:07,910 --> 00:05:12,950 behind the scenes when working with floating point numbers, Javascript doesn't have the precision you 56 00:05:12,950 --> 00:05:14,630 would maybe want it to have 57 00:05:14,630 --> 00:05:16,800 and that's just how Javascript works 58 00:05:17,000 --> 00:05:21,910 and therefore if you add two items and then remove them both, you can actually end up with a value that 59 00:05:21,920 --> 00:05:29,580 at some decimal place isn't 0. Now what you can do to fix this in the cart screen is here when you output 60 00:05:29,580 --> 00:05:39,550 the amount with to fixed, you can actually use math which is built into Javascript, round and wrap this 61 00:05:39,610 --> 00:05:47,830 to fixed value here and multiply it with 100 and thereafter, divide this by 100. 62 00:05:47,850 --> 00:05:50,580 This will ensure that you never end up with this minus, again 63 00:05:50,610 --> 00:05:56,420 this has to do with how Javascript internally handles these floating point numbers. 64 00:05:56,440 --> 00:06:06,210 So now if we again add a couple of items here and add them to the cart, this generally looks good, 65 00:06:06,210 --> 00:06:07,700 so our logic still works 66 00:06:07,710 --> 00:06:13,170 but now if we remove items here, we should always end up with a zero like this, never with a minus in 67 00:06:13,170 --> 00:06:13,740 front of it. 68 00:06:13,800 --> 00:06:20,070 So that's just a tiny improvement regarding how we output this and with these visual tweaks out of the way, 69 00:06:20,070 --> 00:06:25,470 let's go back to the user products and make sure that now that we can reach the edit and add screen 70 00:06:25,470 --> 00:06:27,480 which is one and the same screen of course, 71 00:06:27,480 --> 00:06:34,940 we also do show some inputs there and we load some data for a product that should be edited if appropriate.