1
00:00:02,000 --> 00:00:03,000
So let's now make sure

2
00:00:03,000 --> 00:00:05,000
that we actually have a form

3
00:00:05,000 --> 00:00:07,000
where we have a submit button,

4
00:00:07,000 --> 00:00:09,000
and maybe also a cancel button

5
00:00:09,000 --> 00:00:11,000
to cancel editing and close the modal,

6
00:00:11,000 --> 00:00:13,000
but that we have a submit button

7
00:00:13,000 --> 00:00:15,000
which when pressed adds a new post

8
00:00:15,000 --> 00:00:18,000
and our list or our grid of posts

9
00:00:18,000 --> 00:00:21,000
then keeps on growing as we add more posts.

10
00:00:23,000 --> 00:00:26,000
To achieve this, back in the new post component

11
00:00:26,000 --> 00:00:30,000
we first of all have to add some buttons there.

12
00:00:30,000 --> 00:00:32,000
For this, here at the end of the form,

13
00:00:32,000 --> 00:00:33,000
we can add a new paragraph

14
00:00:33,000 --> 00:00:38,000
which should receive a class name of classes-dot-actions.

15
00:00:38,000 --> 00:00:41,000
Since I prepared a class named actions,

16
00:00:41,000 --> 00:00:43,000
in the CSS file which then,

17
00:00:43,000 --> 00:00:45,000
will style these buttons accordingly.

18
00:00:47,000 --> 00:00:49,000
Now, in this newly added paragraph

19
00:00:49,000 --> 00:00:52,000
we should add two buttons.

20
00:00:53,000 --> 00:00:55,000
Now the second button will have a caption of submit.

21
00:00:55,000 --> 00:00:59,000
The first button will have a caption of cancel.

22
00:00:59,000 --> 00:01:03,000
However, by default, if you add buttons to a form,

23
00:01:03,000 --> 00:01:06,000
if they are pressed, they will submit that form.

24
00:01:06,000 --> 00:01:09,000
This means that a submit event will be generated

25
00:01:09,000 --> 00:01:13,000
and also that by default the browser will generate

26
00:01:13,000 --> 00:01:16,000
and send an HTTP request

27
00:01:16,000 --> 00:01:18,000
to the server that's serving the website.

28
00:01:19,000 --> 00:01:20,000
Now we don't want that,

29
00:01:20,000 --> 00:01:22,000
and we'll prevent it therefore,

30
00:01:22,000 --> 00:01:24,000
because we want to handle the input

31
00:01:24,000 --> 00:01:26,000
with our client side code instead

32
00:01:26,000 --> 00:01:31,000
with React instead not with server side code here.

33
00:01:31,000 --> 00:01:33,000
But besides that, I also want to make sure

34
00:01:33,000 --> 00:01:36,000
that not both buttons submit the form,

35
00:01:36,000 --> 00:01:39,000
instead only the submit button should do so,

36
00:01:39,000 --> 00:01:41,000
not the cancel button.

37
00:01:41,000 --> 00:01:43,000
To make sure that the cancel button

38
00:01:43,000 --> 00:01:45,000
does not trigger form submission,

39
00:01:45,000 --> 00:01:48,000
we can and should give it a type attribute

40
00:01:48,000 --> 00:01:51,000
which we set to button.

41
00:01:51,000 --> 00:01:53,000
The alternative which we can set

42
00:01:53,000 --> 00:01:56,000
on the submit button is type submit.

43
00:01:56,000 --> 00:01:59,000
But this is not required since status to default anyways.

44
00:02:00,000 --> 00:02:02,000
Now this button button here,

45
00:02:02,000 --> 00:02:05,000
will now not submit the form when clicked.

46
00:02:05,000 --> 00:02:07,000
Instead, it should close the form

47
00:02:07,000 --> 00:02:09,000
and to ensure that it does,

48
00:02:09,000 --> 00:02:12,000
I'll accept a new prop here.

49
00:02:12,000 --> 00:02:14,000
And I'll actually also use

50
00:02:14,000 --> 00:02:16,000
Object Destructuring here to

51
00:02:16,000 --> 00:02:18,000
get my on-body-change and

52
00:02:18,000 --> 00:02:21,000
on-author-change prop so

53
00:02:21,000 --> 00:02:23,000
that we can get rid of props-dot

54
00:02:23,000 --> 00:02:25,000
here in these two places.

55
00:02:27,000 --> 00:02:30,000
But I'll now also accept a new prop as mentioned

56
00:02:30,000 --> 00:02:33,000
which could be named on-cancel. Name is up to you.

57
00:02:33,000 --> 00:02:36,000
But I do expect to get a function on this prop

58
00:02:36,000 --> 00:02:40,000
because I want to connect it to the on-click prop here,

59
00:02:41,000 --> 00:02:43,000
so that in the end, an event listener

60
00:02:43,000 --> 00:02:45,000
is set up triggering the function,

61
00:02:45,000 --> 00:02:48,000
which will be received on the on-cancel prop.

62
00:02:49,000 --> 00:02:53,000
Now this on-cancel prop therefore must be set here

63
00:02:53,000 --> 00:02:55,000
on the new post component

64
00:02:55,000 --> 00:02:57,000
and it should be set to a function

65
00:02:57,000 --> 00:02:59,000
that will close that modal.

66
00:03:00,000 --> 00:03:02,000
Now for that we have the on-stop-posting prop

67
00:03:02,000 --> 00:03:06,000
which we're already receiving here on posts-list,

68
00:03:06,000 --> 00:03:08,000
which if you remember, will in the end

69
00:03:08,000 --> 00:03:11,000
trigger hide-modal-handler,

70
00:03:11,000 --> 00:03:13,000
which is exactly what should get triggered,

71
00:03:13,000 --> 00:03:16,000
so I can reuse the on-stop-posting prop here

72
00:03:16,000 --> 00:03:19,000
and set it as a value for the on-cancel prop.

73
00:03:21,000 --> 00:03:23,000
So with that, if we save everything

74
00:03:23,000 --> 00:03:26,000
and we open our modal, we now got these buttons

75
00:03:26,000 --> 00:03:29,000
and if I click cancel the modal closes.

76
00:03:29,000 --> 00:03:30,000
But now let's make sure

77
00:03:30,000 --> 00:03:32,000
that we can also submit that form.