1
00:00:01,000 --> 00:00:04,000
So let's now talk to that API route

2
00:00:04,000 --> 00:00:05,000
from our front end.

3
00:00:05,000 --> 00:00:09,000
Here we got the ContactForm and it's probably here

4
00:00:09,000 --> 00:00:12,000
where we wanna talk to our backend.

5
00:00:12,000 --> 00:00:14,000
First of all, we need to add a function

6
00:00:14,000 --> 00:00:16,000
which is triggered when the form is submitted.

7
00:00:16,000 --> 00:00:19,000
So I'll add a new nested function in this component

8
00:00:19,000 --> 00:00:23,000
the sendMessageHandler function

9
00:00:23,000 --> 00:00:25,000
which will get to the default event object

10
00:00:25,000 --> 00:00:28,000
and which should call event.preventDefault

11
00:00:28,000 --> 00:00:30,000
to prevent the browser default

12
00:00:30,000 --> 00:00:33,000
where we would basically reload the page

13
00:00:33,000 --> 00:00:35,000
because the browser automatically sends a request

14
00:00:35,000 --> 00:00:37,000
which we don't want here.

15
00:00:37,000 --> 00:00:39,000
So prevent that default

16
00:00:39,000 --> 00:00:41,000
and then connect my sendMessageHandler

17
00:00:42,000 --> 00:00:44,000
to onSubmit, like this.

18
00:00:45,000 --> 00:00:49,000
Now in here, we wanna send that HTTP request.

19
00:00:49,000 --> 00:00:53,000
We wanna send that HTTP request to our API route.

20
00:00:53,000 --> 00:00:56,000
And we can do this with the good old fetch function

21
00:00:56,000 --> 00:00:58,000
which is built into the browser.

22
00:00:58,000 --> 00:01:02,000
We could also use a third party package like access.

23
00:01:02,000 --> 00:01:05,000
Now here, we need to pass into URL

24
00:01:05,000 --> 00:01:07,000
to which we wanna send the request.

25
00:01:07,000 --> 00:01:10,000
We can omit the domain because we're using a API route

26
00:01:10,000 --> 00:01:11,000
which will be hosted

27
00:01:11,000 --> 00:01:15,000
by the same server as our pages are hosted on.

28
00:01:15,000 --> 00:01:20,000
So we can just add a absolute path to /API/contact.

29
00:01:20,000 --> 00:01:24,000
/API/contact because we named the file contact

30
00:01:24,000 --> 00:01:26,000
in that special API folder.

31
00:01:27,000 --> 00:01:30,000
Now, we also need to pass that second argument to fetch

32
00:01:30,000 --> 00:01:31,000
to configure the request

33
00:01:31,000 --> 00:01:34,000
because we don't wanna use the default

34
00:01:34,000 --> 00:01:37,000
which would be a get request with no data.

35
00:01:37,000 --> 00:01:39,000
But instead we want to post request

36
00:01:39,000 --> 00:01:41,000
with the submitted data.

37
00:01:41,000 --> 00:01:44,000
So, set this here to post

38
00:01:44,000 --> 00:01:47,000
and then also add a body.

39
00:01:47,000 --> 00:01:47,000
Now for the body,

40
00:01:47,000 --> 00:01:50,000
we need to extract the entered data, first of all,

41
00:01:50,000 --> 00:01:53,000
and we can use refs for that,

42
00:01:53,000 --> 00:01:55,000
as we did it before in the course,

43
00:01:55,000 --> 00:01:57,000
or to mix things up here,

44
00:01:57,000 --> 00:02:00,000
we use state and two-way binding

45
00:02:00,000 --> 00:02:04,000
and I'll do the latter simply just to see this alternative.

46
00:02:04,000 --> 00:02:06,000
So I'll not set the body for now,

47
00:02:06,000 --> 00:02:09,000
and instead in the ContactForm component,

48
00:02:09,000 --> 00:02:11,000
I'll now use the useState hook

49
00:02:11,000 --> 00:02:14,000
which is imported from react to manage state

50
00:02:14,000 --> 00:02:17,000
for the different inputs,

51
00:02:17,000 --> 00:02:20,000
initially an empty string for every input,

52
00:02:20,000 --> 00:02:24,000
but then here we have the enteredEmail state

53
00:02:24,000 --> 00:02:26,000
and setEnteredEmail.

54
00:02:27,000 --> 00:02:29,000
And I replicate this twice

55
00:02:29,000 --> 00:02:32,000
to also have my entered name, state

56
00:02:32,000 --> 00:02:34,000
and the set entered,

57
00:02:34,000 --> 00:02:37,000
name, state updating function

58
00:02:37,000 --> 00:02:41,000
and the entered message state and setEnteredMessage.

59
00:02:42,000 --> 00:02:45,000
Alternatively, we could also use one state

60
00:02:45,000 --> 00:02:49,000
which is an object and has a email name and message field.

61
00:02:49,000 --> 00:02:50,000
That is up to you.

62
00:02:50,000 --> 00:02:53,000
And that is just standard react.

63
00:02:54,000 --> 00:02:55,000
So now we've got that.

64
00:02:55,000 --> 00:02:57,000
Now we need to bind this.

65
00:02:57,000 --> 00:02:59,000
So here on this first input,

66
00:02:59,000 --> 00:03:03,000
all now set value equal to entered email,

67
00:03:03,000 --> 00:03:05,000
to pass the currently stored value

68
00:03:05,000 --> 00:03:08,000
in this state back into the input,

69
00:03:08,000 --> 00:03:12,000
but then also add the onChange prop to listen to changes.

70
00:03:12,000 --> 00:03:15,000
And here I'll add a quick inline function

71
00:03:15,000 --> 00:03:18,000
where we get the default event object automatically

72
00:03:18,000 --> 00:03:20,000
and then call sentEnteredEmail

73
00:03:21,000 --> 00:03:24,000
and set this equal to event.target.value.

74
00:03:24,000 --> 00:03:28,000
That will give us access to the currently entered value.

75
00:03:28,000 --> 00:03:32,000
And we can now repeat that on all the inputs.

76
00:03:32,000 --> 00:03:36,000
So here on this input for the name, it's the entered name

77
00:03:37,000 --> 00:03:40,000
which you wanna bind and onChange,

78
00:03:40,000 --> 00:03:43,000
we wanna set the entered name therefore.

79
00:03:43,000 --> 00:03:46,000
And for the text area, we can do the same,

80
00:03:46,000 --> 00:03:49,000
value is set to enteredMessage.

81
00:03:51,000 --> 00:03:53,000
Nope, enteredMessage.

82
00:03:53,000 --> 00:03:58,000
And we set the entered message, entered message.

83
00:03:58,000 --> 00:04:01,000
So for text area, you also set the value prop.

84
00:04:01,000 --> 00:04:04,000
You don't add it between the text area text

85
00:04:05,000 --> 00:04:06,000
just to make this clear.

86
00:04:06,000 --> 00:04:08,000
So now I'm using this two-way binding

87
00:04:08,000 --> 00:04:10,000
to have the entered data

88
00:04:10,000 --> 00:04:14,000
in those state values

89
00:04:14,000 --> 00:04:15,000
and therefore now,

90
00:04:15,000 --> 00:04:17,000
when we add a body here

91
00:04:17,000 --> 00:04:21,000
to our outgoing request, we want a JSON stringify,

92
00:04:21,000 --> 00:04:23,000
an object with that entered data.

93
00:04:24,000 --> 00:04:29,000
Now we can also add client side validation here

94
00:04:29,000 --> 00:04:30,000
and simply check the entered values

95
00:04:30,000 --> 00:04:32,000
before they are submitted

96
00:04:32,000 --> 00:04:35,000
and possibly show an error message to the user.

97
00:04:35,000 --> 00:04:38,000
But we already have some basic validation

98
00:04:38,000 --> 00:04:41,000
because we added their required attribute here.

99
00:04:41,000 --> 00:04:44,000
So that will make sure that it can't be empty anyways.

100
00:04:44,000 --> 00:04:47,000
We should add this to the text area as well.

101
00:04:47,000 --> 00:04:49,000
And we already do all the validate

102
00:04:49,000 --> 00:04:51,000
on the server as we should.

103
00:04:51,000 --> 00:04:55,000
And hence, I won't add another layer of validation here.

104
00:04:55,000 --> 00:04:57,000
But you could, because of course,

105
00:04:57,000 --> 00:05:00,000
with client side JavaScript based validation,

106
00:05:00,000 --> 00:05:02,000
you have full control

107
00:05:02,000 --> 00:05:03,000
over which error messages

108
00:05:03,000 --> 00:05:06,000
you might want to show and so on

109
00:05:06,000 --> 00:05:07,000
but I will omit it here.

110
00:05:07,000 --> 00:05:09,000
It's optional.

111
00:05:09,000 --> 00:05:12,000
And hence here, I'll just construct the object

112
00:05:12,000 --> 00:05:13,000
which will be sent to the server,

113
00:05:13,000 --> 00:05:17,000
and that is a object converted to JSON

114
00:05:17,000 --> 00:05:18,000
which has a email field,

115
00:05:18,000 --> 00:05:20,000
which contains the enteredEmail,

116
00:05:20,000 --> 00:05:23,000
which has a name field, which contains the enteredName

117
00:05:23,000 --> 00:05:25,000
and which has a message field

118
00:05:25,000 --> 00:05:27,000
which contains the enteredMessage.

119
00:05:27,000 --> 00:05:29,000
And you have to make sure

120
00:05:29,000 --> 00:05:31,000
that the field names you choose here,

121
00:05:31,000 --> 00:05:33,000
email name and message, of course,

122
00:05:33,000 --> 00:05:35,000
map the field names you expect

123
00:05:35,000 --> 00:05:39,000
in your API route function.

124
00:05:39,000 --> 00:05:42,000
Here, I'm trying to extract email, name and message.

125
00:05:42,000 --> 00:05:46,000
So these should be the identifiers I set here,

126
00:05:46,000 --> 00:05:48,000
email, name and message.

127
00:05:50,000 --> 00:05:51,000
With that resetting this,

128
00:05:51,000 --> 00:05:52,000
last but not least,

129
00:05:52,000 --> 00:05:54,000
I'll also add a header

130
00:05:54,000 --> 00:05:59,000
and set the content type header to application JSON

131
00:05:59,000 --> 00:06:01,000
to make the backend aware

132
00:06:01,000 --> 00:06:04,000
of the fact that this request will carry JSON data

133
00:06:04,000 --> 00:06:07,000
and hence it can be parsed correctly by the backend.

134
00:06:08,000 --> 00:06:10,000
This now sends the request.

135
00:06:10,000 --> 00:06:12,000
We're not doing anything else,

136
00:06:12,000 --> 00:06:14,000
not working with the response,

137
00:06:14,000 --> 00:06:15,000
we're handling errors,

138
00:06:15,000 --> 00:06:19,000
but the request should be sent now.

139
00:06:19,000 --> 00:06:21,000
And therefore let's now save everything

140
00:06:21,000 --> 00:06:23,000
and let's give it a try.

141
00:06:23,000 --> 00:06:25,000
Let's reload this contact page

142
00:06:25,000 --> 00:06:29,000
and fill out this form with some dummy data,

143
00:06:29,000 --> 00:06:33,000
"Does this work?" and click Send Message.

144
00:06:33,000 --> 00:06:35,000
Now we don't get any feedback here,

145
00:06:35,000 --> 00:06:38,000
but if we go back to the terminal

146
00:06:38,000 --> 00:06:40,000
where we run our dev server,

147
00:06:40,000 --> 00:06:43,000
so where all the server side code executes,

148
00:06:43,000 --> 00:06:45,000
we should see this output,

149
00:06:45,000 --> 00:06:47,000
this log which comes

150
00:06:47,000 --> 00:06:49,000
from our API route here,

151
00:06:49,000 --> 00:06:51,000
where we lock the message.

152
00:06:51,000 --> 00:06:55,000
So the data does arrive successfully on the server.

153
00:06:55,000 --> 00:06:57,000
And now that that's the case,

154
00:06:57,000 --> 00:07:00,000
we only got two main steps left,

155
00:07:00,000 --> 00:07:03,000
two main tasks which we have to tackle.

156
00:07:03,000 --> 00:07:06,000
We probably wanna show some feedback to the user

157
00:07:06,000 --> 00:07:09,000
on the front end like a notification when the request

158
00:07:09,000 --> 00:07:14,000
is on its way and when it succeeded or when it failed.

159
00:07:14,000 --> 00:07:16,000
And of course, we wanna store the data

160
00:07:16,000 --> 00:07:18,000
in the actual database.

161
00:07:18,000 --> 00:07:21,000
Now let's start with the database in the next lecture

162
00:07:21,000 --> 00:07:24,000
and then add better client side feedback thereafter.