1
00:00:02,330 --> 00:00:09,590
So the add button here calls onAddGoal and that basically forwards the goal to app.js which is

2
00:00:09,590 --> 00:00:10,860
exactly what we need

3
00:00:11,030 --> 00:00:16,660
but what we also need to do is we need to make sure that when we add a new goal, the modal gets closed.

4
00:00:16,700 --> 00:00:22,790
Now keep in mind that we in the end control the modal visibility from inside the app.js file because

5
00:00:22,790 --> 00:00:29,690
there, we have the isAddMode state which we're changing when we click this button here, the add new goal

6
00:00:29,690 --> 00:00:31,050
button for example

7
00:00:31,220 --> 00:00:38,900
and this state value, isAddMode is forwarded to goal input where we then use it to control the visibility

8
00:00:38,900 --> 00:00:40,310
of the modal.

9
00:00:40,340 --> 00:00:46,580
So in order to make sure that the modal disappears, we simply have to change isAddMode again inside

10
00:00:46,580 --> 00:00:52,270
of the app.js file because the new value will then automatically be forwarded to goal input.

11
00:00:52,310 --> 00:00:56,990
So all we have to do is in add goal handler where we set the course goals,

12
00:00:56,990 --> 00:01:03,920
we also have to set isAddMode to false because we're done adding. Now a little side note, the way React works

13
00:01:03,920 --> 00:01:06,500
if you're setting two states after each other,

14
00:01:06,590 --> 00:01:08,230
it will batch these together,

15
00:01:08,270 --> 00:01:14,060
it will not re-render the component twice after first change and after the second change, instead it

16
00:01:14,060 --> 00:01:19,460
will basically apply all state changes at once and only re-render the component once which of course

17
00:01:19,460 --> 00:01:20,110
is good,

18
00:01:20,120 --> 00:01:23,240
otherwise we would have an unnecessary re-render cycle there

19
00:01:23,240 --> 00:01:29,960
and this is simply a nice optimization React does for us. So we can absolutely change two different states

20
00:01:29,990 --> 00:01:31,760
after each other like this

21
00:01:31,760 --> 00:01:38,740
and with that, the modal should know actually also disappear if we set this to false. Let's test it

22
00:01:38,740 --> 00:01:40,430
here on iOS.

23
00:01:40,480 --> 00:01:46,320
If I add learn React Native here, click add, this disappears

24
00:01:46,420 --> 00:01:52,530
and now learn way more, this also works and

25
00:01:52,530 --> 00:01:54,510
I can also still delete items.

26
00:01:54,740 --> 00:01:58,910
Now to test this on Android, same procedure as before,

27
00:01:59,060 --> 00:02:01,310
let's actually restart this on Android,

28
00:02:05,490 --> 00:02:11,840
click add new goal and learn React Native here, click add and this closes it,

29
00:02:11,850 --> 00:02:23,740
now let's also learn way more here, like this and this also works correctly. Now two tiny improvements

30
00:02:23,740 --> 00:02:29,800
I still want to apply, for one I want to clear the input once we're done and in addition, I want to provide

31
00:02:29,800 --> 00:02:36,550
a cancel button, so that alternatively instead of adding this, we could also cancel here to close the modal

32
00:02:36,610 --> 00:02:40,290
without adding an item because right now, that's not something we can do.

33
00:02:40,300 --> 00:02:43,300
Let's start with clearing our input here

34
00:02:43,300 --> 00:02:48,480
after we entered something. For that in goal input, in the end, we have that entered goal and we need

35
00:02:48,480 --> 00:02:49,530
to reset this

36
00:02:49,560 --> 00:02:56,370
once we add a new goal. Now of course, we add a new goal when we press that add button and there in the

37
00:02:56,370 --> 00:03:01,690
end, we trigger a function which we get with the help of the onAddGoal prop.

38
00:03:01,700 --> 00:03:07,110
Now to also clear our input, what we can do here is we can add a function inside of the goal input

39
00:03:07,290 --> 00:03:12,440
component, add goal handler or whatever you want to call it,

40
00:03:12,560 --> 00:03:19,310
this is a function which doesn't have to take any argument and in the end, it's now this function which

41
00:03:19,310 --> 00:03:20,270
I want to trigger.

42
00:03:20,300 --> 00:03:23,330
So I want to trigger add goal handlers,

43
00:03:23,360 --> 00:03:29,660
so my own function in this component. Now in here, I want to call props onAddGoal without bind

44
00:03:29,660 --> 00:03:35,630
here, we can just call it like this because when this function runs, I want to execute it, here we're just

45
00:03:35,630 --> 00:03:39,340
passing a pointer at this function without parentheses,

46
00:03:39,340 --> 00:03:44,270
so here we must not have parentheses to not execute this too early, here

47
00:03:44,270 --> 00:03:49,460
we absolutely need parentheses because this only runs when this function executes and that is when I want

48
00:03:49,460 --> 00:03:52,340
to trigger the function in my parent component,

49
00:03:52,340 --> 00:03:59,000
so in the app component here. And here to onAddGoal, of course I still want to forward my entered goal

50
00:03:59,000 --> 00:03:59,390
here,

51
00:03:59,390 --> 00:04:03,770
so this state, I want to forward this but thereafter, I also want to clear it.

52
00:04:04,010 --> 00:04:06,140
So thereafter, I'll set set entered

53
00:04:06,140 --> 00:04:10,930
goal to an empty string again which will reset the text we entered here.

54
00:04:10,970 --> 00:04:12,120
So that's one thing,

55
00:04:12,140 --> 00:04:18,770
the other thing is a button that allows us to close this and for that, we can add a button here and that button

56
00:04:18,950 --> 00:04:22,100
could have a title of cancel because that's in the end

57
00:04:22,100 --> 00:04:23,990
what this button should do

58
00:04:23,990 --> 00:04:24,880
and for the cancel

59
00:04:24,890 --> 00:04:29,410
button, it might be nice to not have to default blue color but change that color

60
00:04:29,420 --> 00:04:33,410
and you can do this by adding the color prop here,

61
00:04:33,410 --> 00:04:39,250
for example we could set this to red here because red in my opinion is a nice color for a cancel button.

62
00:04:40,850 --> 00:04:44,960
If we save this and we test this here on iOS,

63
00:04:44,960 --> 00:04:47,540
we see the cancel button and and the add button

64
00:04:47,690 --> 00:04:55,300
and now if I learn React Native here and I add this, this is added and if I reopen this, you see it was

65
00:04:55,300 --> 00:05:02,830
cleared and cancel of course doesn't do anything though because we need to connect cancel to the app component

66
00:05:02,950 --> 00:05:06,280
where we control the visibility by controlling the isAddMode.

67
00:05:07,330 --> 00:05:16,090
So here, we can also add another function handler in the app component now, cancel goal addition handler

68
00:05:16,120 --> 00:05:16,870
or something like that,

69
00:05:16,870 --> 00:05:21,040
it's a very long name, I just want to be clear about what this does and when it's called.

70
00:05:21,040 --> 00:05:26,800
So here, we have the cancel goal additional handler and in the end here, we can simply set isAddMode to

71
00:05:26,800 --> 00:05:28,540
false which will close the modal

72
00:05:29,050 --> 00:05:31,020
and of course we're not doing anything else,

73
00:05:31,030 --> 00:05:36,550
we're not changing our course goals because we canceled the addition and now, we can forward this to

74
00:05:36,550 --> 00:05:38,590
goal item, to goal input,

75
00:05:38,650 --> 00:05:45,580
so to our component here. There we can add onCancel prop, the name of that prop of course is up to

76
00:05:45,580 --> 00:05:48,330
you because it's your own prop on your own component

77
00:05:48,580 --> 00:05:53,710
and I've forward a pointer at cancel goal addition handler to onCancel

78
00:05:54,000 --> 00:05:59,480
and now inside of goal input, we can trigger onCancel upon a press of this button.

79
00:05:59,500 --> 00:06:04,990
So here, we add onPress and we want to trigger props.onCancel here,

80
00:06:04,990 --> 00:06:12,690
so the function we're receiving on our onCancel prop. With that, the cancel button should work, yes

81
00:06:12,770 --> 00:06:14,260
works just fine.

82
00:06:14,510 --> 00:06:17,830
Now it should also work on Android of course but to test it,

83
00:06:17,900 --> 00:06:19,310
same procedure as always,

84
00:06:19,310 --> 00:06:22,930
let's close it and restart it and thereafter,

85
00:06:22,940 --> 00:06:31,340
let's see if clearing the input works. If I enter or learn React Native here, click add, yes that's empty

86
00:06:31,340 --> 00:06:33,330
and cancel also works.

87
00:06:33,350 --> 00:06:38,300
Now regarding the styling here on Android, it would be nice to have some spacing between the buttons

88
00:06:38,390 --> 00:06:43,150
or actually on both platforms, maybe have these buttons sit next to each other.