1 00:00:02,120 --> 00:00:08,560 Currently in our product item component here in the components folder, the buttons are part of the component, 2 00:00:08,580 --> 00:00:10,660 so is the wrapping touchable component. 3 00:00:12,480 --> 00:00:18,990 We can't change the touchable component that much because it belongs around our content here and 4 00:00:18,990 --> 00:00:25,200 that's also not a big problem because on the admin screen here, I also want the items to be touchable 5 00:00:25,590 --> 00:00:30,210 but I want to go to my edit screen in that case. 6 00:00:30,360 --> 00:00:33,530 I also want to have two buttons - one for editing and one for deleting 7 00:00:33,540 --> 00:00:37,710 but of course the captions and the actions should be different. 8 00:00:38,370 --> 00:00:46,150 Now we could pass in this caption text here as props and rename the props we trigger when the buttons 9 00:00:46,150 --> 00:00:50,880 are pressed in a more generic way, so that that we could use it for viewing the details on the products overview 10 00:00:50,920 --> 00:00:59,500 screen and for editing or deleting on the user product screen. There also is an alternative way of handling 11 00:00:59,500 --> 00:01:00,320 this. 12 00:01:00,370 --> 00:01:07,720 So for one when we press this component in general, I'll rename this to on select to have a more generic 13 00:01:07,720 --> 00:01:12,000 name that makes sense in a broader array of use cases 14 00:01:12,770 --> 00:01:15,810 and I'll also change the way we receive these buttons here. 15 00:01:15,890 --> 00:01:22,310 I'll cut them from here and instead, output props children here which is that special prop that refers 16 00:01:22,310 --> 00:01:29,560 to whatever we pass between the opening and closing tag of our own component. Now with that, I can also 17 00:01:29,560 --> 00:01:32,540 get rid of the colors import here and of the button import 18 00:01:32,830 --> 00:01:35,180 and now go to the places where we use the product item, 19 00:01:35,230 --> 00:01:38,010 that would be the products overview screen for example. 20 00:01:38,290 --> 00:01:44,100 There we now have to import the button component and make sure you import your colors, 21 00:01:44,110 --> 00:01:46,150 so import colors from 22 00:01:48,490 --> 00:01:57,630 constants colors and now go to your product item and change it from a self closing component to a component 23 00:01:57,630 --> 00:02:00,450 which you've close and open with your own 24 00:02:00,450 --> 00:02:06,090 component tags. In between these tags, you can now re-add these two buttons 25 00:02:06,090 --> 00:02:13,680 and now of course, don't use props on view detail and props on add to cart here but instead, add your logic 26 00:02:13,680 --> 00:02:18,690 right here because now we're dynamically passing this in the product item component but therefore we're 27 00:02:18,690 --> 00:02:21,950 able to pass different buttons depending on where we use that product 28 00:02:21,960 --> 00:02:26,970 item component. So now here I'll add a new handler, 29 00:02:29,840 --> 00:02:39,030 select item handler for example which is just a function stored in a constant like this 30 00:02:39,140 --> 00:02:42,280 and there I want to do what I previously did on view detail, 31 00:02:42,350 --> 00:02:48,440 I'll cut that and add it here and I expect to get the ID and the title here as an argument so that 32 00:02:48,440 --> 00:02:52,350 I can forward ID and title here like this 33 00:02:52,610 --> 00:02:59,860 and now select item handler is what I want to trigger here on on select, remember that I renamed this in the 34 00:02:59,870 --> 00:03:03,590 product item, this touchable now fires just on select, 35 00:03:03,590 --> 00:03:09,770 so you'll need to rename this in the places where you use that component like here and then here, I execute 36 00:03:09,770 --> 00:03:17,360 my select item handler here and forward itemData.item.id and itemData.item.title 37 00:03:17,360 --> 00:03:23,690 here so that this data ends up in this function. I'm doing this because now I can use the same item handler 38 00:03:23,690 --> 00:03:31,760 here on this view details button, I can essentially just copy this anonymous function and add it here 39 00:03:31,760 --> 00:03:34,560 to this onPress handler of this button, 40 00:03:34,610 --> 00:03:37,970 so now we reuse that and on add to cart, 41 00:03:38,060 --> 00:03:39,740 well there we dispatch this, 42 00:03:39,890 --> 00:03:45,320 this now is removed here from the product item component because there we no longer have that prop, 43 00:03:45,320 --> 00:03:52,340 instead it's now here, this prop which takes this anonymous function which then in the end should dispatch 44 00:03:52,340 --> 00:03:53,510 this action. 45 00:03:53,900 --> 00:04:00,170 So now the main change is that I move the buttons out of the component, of the product item component into 46 00:04:00,170 --> 00:04:05,930 the products overview screen component and that allows us to still do the same thing as before, if I save 47 00:04:05,930 --> 00:04:11,330 that, that should still work as before. We can tap an item, we can tap 48 00:04:11,330 --> 00:04:15,420 view details, we can tap to cart and that all works 49 00:04:15,740 --> 00:04:18,890 but now we can also customize this in the user product screen. 50 00:04:19,250 --> 00:04:28,410 So there I'll also copy these buttons and go over to the user product screen and in there, import button 51 00:04:28,470 --> 00:04:36,870 from React Native, import our colors constant because we'll need that for the buttons from constants 52 00:04:37,320 --> 00:04:47,480 colors and then here in the product item, instead of setting up this, we need to parse our on select prop 53 00:04:47,480 --> 00:04:49,450 when the item in general is tapped 54 00:04:49,550 --> 00:04:53,240 but now we also add opening and closing tags for our own custom component 55 00:04:53,240 --> 00:04:55,380 and again, add our buttons here 56 00:04:55,490 --> 00:05:01,940 but instead of view details, now I say edit and delete and for the moment, 57 00:05:02,060 --> 00:05:06,380 I can just remove all other logic because for the moment, we have no logic for editing and deleting but 58 00:05:06,380 --> 00:05:08,630 that's something we can add later. 59 00:05:08,870 --> 00:05:13,630 And here for on select, it's also just an empty function for the moment. 60 00:05:13,780 --> 00:05:19,690 This has the advantage that now we have our items as we had before here but in the admin section, we 61 00:05:19,690 --> 00:05:21,430 now have edit and delete 62 00:05:21,550 --> 00:05:26,290 and this allows us to do different things by still reusing the product item component which is of course 63 00:05:26,290 --> 00:05:27,330 quite nice.