1
00:00:02,380 --> 00:00:08,420
Let's start with the confirmation dialog here in edit product screen. We can simply import the alert

2
00:00:08,450 --> 00:00:16,490
API from React Native which allows us to show a nice alert and then add a new method here maybe, we could

3
00:00:16,490 --> 00:00:22,830
all do it in line but to have a little bit more structured code where I have my delete handler.

4
00:00:23,020 --> 00:00:28,600
By the way, how you name your functions is totally up to you, I just like this handler naming here if

5
00:00:28,600 --> 00:00:35,950
I assign that to my event emitters in the jsx code so to say and in there we can call alert.alert

6
00:00:35,980 --> 00:00:37,690
to show an alert with the title of

7
00:00:37,720 --> 00:00:38,960
are you sure

8
00:00:39,880 --> 00:00:45,670
message, do you really want to delete this item

9
00:00:45,670 --> 00:00:48,940
and then an array with all the buttons we want to present

10
00:00:48,940 --> 00:00:58,020
where the button number one has a text of no and a style of default.

11
00:00:58,060 --> 00:01:02,800
There are only three default styles or preconfigured styles you can choose from and no special handler

12
00:01:02,800 --> 00:01:03,930
on this first button.

13
00:01:04,030 --> 00:01:07,180
Second button has yes, there

14
00:01:07,190 --> 00:01:10,640
I want to have a style of destructive to mark this as hey

15
00:01:10,640 --> 00:01:17,900
this will delete something and the onPress handler here is then in the end holding a function that will

16
00:01:17,900 --> 00:01:20,540
really dispatch the delete action.

17
00:01:20,610 --> 00:01:28,110
So now it's the delete handler which I want to execute when we click on that delete button and therefore

18
00:01:28,110 --> 00:01:30,080
of course I'm in the wrong component I just saw.

19
00:01:30,210 --> 00:01:31,610
Let's cut this,

20
00:01:31,800 --> 00:01:33,740
it's not inside of the edit product screen,

21
00:01:33,750 --> 00:01:35,440
we don't need the alert import there,

22
00:01:35,460 --> 00:01:41,310
it's the user products screen I'm talking about. There we need to import alert, there we should add this

23
00:01:41,700 --> 00:01:47,380
handler and now the delete handler should be assigned to this delete button here,

24
00:01:47,400 --> 00:01:53,730
so here we can just point at the delete handler and this anonymous function can be cut from down there

25
00:01:53,980 --> 00:02:00,790
and can be moved here and replace this onPress handler for this button and now with that, we should

26
00:02:00,790 --> 00:02:07,320
get this popup, this confirmation dialog before we actually delete something.

27
00:02:07,330 --> 00:02:09,790
So if I click on delete, now I'm asking, if I press

28
00:02:09,790 --> 00:02:10,210
no,

29
00:02:10,210 --> 00:02:11,640
nothing happens, only if I click

30
00:02:11,650 --> 00:02:16,060
yes we delete this. Tiny mistake of course

31
00:02:16,060 --> 00:02:17,920
is that the item data we need

32
00:02:20,570 --> 00:02:21,790
needs to be available.

33
00:02:21,830 --> 00:02:24,920
So here we forward the ID we want to delete,

34
00:02:24,920 --> 00:02:30,180
so actually for the delete handler, we need the ID of the product we're applying this handler to

35
00:02:30,410 --> 00:02:35,360
so that here I have that ID available and that means that when the delete handler is called down

36
00:02:35,360 --> 00:02:37,980
there, we need to make sure it gets the ID.

37
00:02:38,510 --> 00:02:40,150
So there are two ways of doing that,

38
00:02:40,400 --> 00:02:46,100
an anonymous function in which we execute delete handler manually and forward itemData.item.id

39
00:02:46,100 --> 00:02:55,000
or alternative to that, passing the delete handler like this but use bind to preconfigure any arguments

40
00:02:55,000 --> 00:03:01,150
this function will get. Bind always needs value for the this keyword inside of the function it'll execute. There

41
00:03:01,150 --> 00:03:04,170
we can just pass this, it does not matter

42
00:03:04,360 --> 00:03:08,290
but the second argument now is the first argument the delete handler will get,

43
00:03:08,620 --> 00:03:15,640
so here we pass itemData.item.id. Now with that, we make sure that we can actually press yes and

44
00:03:15,640 --> 00:03:22,530
it will work, if we now go back here to admin, click delete, press yes,

45
00:03:22,600 --> 00:03:27,700
this now really works and if we press no, nothing happens, yes deletes it.

46
00:03:27,700 --> 00:03:29,020
So that's the first thing

47
00:03:29,230 --> 00:03:34,450
and to make sure that we navigate back, if we save this, now we need to go to the edit product screen

48
00:03:34,750 --> 00:03:41,680
and there in our submit handler, no matter if we dispatch the update or create product action, in the end

49
00:03:41,680 --> 00:03:51,870
I want to also call props navigation go back to go back to the previous screen. And if we now save this

50
00:03:53,430 --> 00:03:58,920
and we go to the admin screen and I do for now submit an empty product,

51
00:04:01,990 --> 00:04:07,750
I of course get a warning but this generally works, this going back and if I edit a product, this also

52
00:04:07,750 --> 00:04:08,890
works.

53
00:04:08,950 --> 00:04:13,470
So now with this, we're done regarding all that input management,

54
00:04:13,510 --> 00:04:18,920
the remaining thing I now want to do before I really finish all of this up is to now I want to optimize

55
00:04:18,920 --> 00:04:20,850
the product item a little bit more

56
00:04:21,040 --> 00:04:26,800
and the way we're reusing our card look here with the shadow and so on because we're using that in multiple

57
00:04:27,040 --> 00:04:28,270
components

58
00:04:28,270 --> 00:04:33,940
and if you find yourself using something in multiple components, you might always want to think about

59
00:04:33,940 --> 00:04:35,920
whether you can optimize this a bit more

60
00:04:35,980 --> 00:04:39,370
and indeed here, we have optimization potential.

61
00:04:39,490 --> 00:04:42,600
So how can we optimize this though?

62
00:04:42,720 --> 00:04:48,720
Well we could create a separate component here in our UI folder of the components folder which we name

63
00:04:49,080 --> 00:04:55,800
cart.js, where we just store this cart look. A cart component can be a very simple component in the

64
00:04:55,800 --> 00:05:05,140
end. We import React from React here because we need to create a component and we import a view from

65
00:05:05,260 --> 00:05:13,990
React Native, just like that and now here, we create our cart component where we simply get our props,

66
00:05:14,030 --> 00:05:21,000
return some jsx and export this component in the end, though we'll also need to set up some styling

67
00:05:21,000 --> 00:05:23,390
because that's the core idea behind this component,

68
00:05:23,400 --> 00:05:30,370
it's all about giving us some preconfigured styles. So I'll also add my styles constant with

69
00:05:30,680 --> 00:05:31,750
Stylesheet.create

70
00:05:31,770 --> 00:05:36,710
down there and now, what is the jsx code I want to return here?

71
00:05:36,760 --> 00:05:41,920
Well that's a view, a view which will actually wrap whatever we pass in there,

72
00:05:41,950 --> 00:05:46,870
so between the tags of my component, so just props children in there

73
00:05:46,930 --> 00:05:53,690
but now that view can get some default styling here which I'll name cart and that should be the styles

74
00:05:53,690 --> 00:05:56,090
with which I otherwise copy around.

75
00:05:56,110 --> 00:06:01,780
So here my cart style in this cart component is exactly what I have here, the product item, it's this

76
00:06:01,780 --> 00:06:02,880
shadows stuff here,

77
00:06:02,900 --> 00:06:09,540
the elevation, the border radius and the background color. You can cut all of that and move it into the

78
00:06:09,540 --> 00:06:10,260
cart here.

79
00:06:11,580 --> 00:06:16,890
Now to still be able to configure this a bit, I'll actually enhance this and set style to an object

80
00:06:16,890 --> 00:06:27,540
where I merge in my styles cart values and any values I get on the style prop here, like this.

81
00:06:27,540 --> 00:06:32,970
So now we can even set a style prop when we use our cart and pass in our own styles that will be merged

82
00:06:32,970 --> 00:06:39,240
together with these default card styles because this now allows me to use the cart here in the product

83
00:06:39,300 --> 00:06:50,780
item for example by importing cart from, and now up one level into the UI folder, into the cart file and replace

84
00:06:51,000 --> 00:06:52,460
this view here,

85
00:06:52,500 --> 00:06:54,830
this outer view with card

86
00:06:54,860 --> 00:07:01,410
and of course therefore also replace the closing tag and still pass in my product specifics

87
00:07:01,410 --> 00:07:01,880
here,

88
00:07:01,910 --> 00:07:08,360
so this height and the margin. This will be merged with the other card looks and everything between the opening

89
00:07:08,360 --> 00:07:11,570
and closing tags of card will just work,

90
00:07:11,570 --> 00:07:15,030
I pass this into my card here with the help of props

91
00:07:15,020 --> 00:07:18,820
children. Now the same for the order item, there

92
00:07:18,830 --> 00:07:25,280
we just need to import card from and now go into the UI folder, to card here

93
00:07:26,240 --> 00:07:29,690
and then use card instead of that view, that outer view here,

94
00:07:29,700 --> 00:07:34,570
replace it with a card and get rid of these card styles here,

95
00:07:34,590 --> 00:07:39,330
the shadow stuff, the elevation, border radius and background color and only keep the special styles you

96
00:07:39,330 --> 00:07:45,640
want to merge in. And now the last thing, the last place where we can use this is the cart screen, there

97
00:07:45,660 --> 00:07:49,440
I also have my summary which uses these card styles.

98
00:07:49,770 --> 00:07:56,870
Well again, we can import the card component from the components folder,

99
00:07:56,920 --> 00:08:04,930
the UI folder there and there, from the cart.js file and now use the card component instead of view

100
00:08:05,320 --> 00:08:07,290
in the place where we want these card styles,

101
00:08:07,300 --> 00:08:11,380
so here that would be the view which had the summary styles,

102
00:08:11,380 --> 00:08:16,590
I'll replace this with card. And down at the summary styles,

103
00:08:16,650 --> 00:08:22,170
we keep everything that specific to this screen or to this component but we can get rid of the shadow

104
00:08:22,170 --> 00:08:27,260
color, shadow radius, elevation, border radius background color, that can all be removed.

105
00:08:27,290 --> 00:08:32,480
Now let's save that and you will see that of course the app still works and looks the same way as it

106
00:08:32,480 --> 00:08:33,800
did before

107
00:08:34,630 --> 00:08:41,320
if I add this to the cart for example and I order this and I have a look at my orders, this all looks

108
00:08:41,320 --> 00:08:48,760
the way it did before but now it does so with a little bit of a more optimal code where we actually

109
00:08:48,760 --> 00:08:53,610
reuse our styles and have a separate presentational component for them

110
00:08:53,650 --> 00:08:59,170
so that our other components can be a bit leaner and we don't repeat ourselves as often when setting

111
00:08:59,170 --> 00:09:05,710
up that cart look. Another advantage is that we can't mistype, if we set shadow radius to 8 in one

112
00:09:05,710 --> 00:09:11,220
component and 10 in another, then our app might look slightly inconsistent.

113
00:09:11,260 --> 00:09:17,830
We avoid this by having some central styling focused components which set up these core styles which

114
00:09:17,830 --> 00:09:20,410
we then use in other components as we're doing it here.