1
00:00:02,000 --> 00:00:05,000
So we got this feedback API route here

2
00:00:05,000 --> 00:00:08,000
and now as part of that function,

3
00:00:08,000 --> 00:00:12,000
I want to accept a incoming request

4
00:00:12,000 --> 00:00:14,000
with the email and feedback data

5
00:00:14,000 --> 00:00:17,000
and then store that somewhere in a database,

6
00:00:17,000 --> 00:00:20,000
in a file or for development,

7
00:00:20,000 --> 00:00:23,000
maybe also just in an array.

8
00:00:23,000 --> 00:00:25,000
And therefore, to implement this,

9
00:00:25,000 --> 00:00:27,000
we now have to do one important thing.

10
00:00:27,000 --> 00:00:29,000
Inside of this handler function,

11
00:00:29,000 --> 00:00:32,000
we have to find out which kind of request

12
00:00:32,000 --> 00:00:35,000
is triggering this API route

13
00:00:35,000 --> 00:00:39,000
because when we submit that form here,

14
00:00:39,000 --> 00:00:44,000
I soon want to send a HTTP request with JavaScript

15
00:00:44,000 --> 00:00:47,000
and I'll do this with the fetch function here.

16
00:00:47,000 --> 00:00:50,000
We could also use third-party library like Axios.

17
00:00:50,000 --> 00:00:52,000
That does not matter.

18
00:00:52,000 --> 00:00:55,000
But I'll send the request from inside my JavaScript code.

19
00:00:55,000 --> 00:00:58,000
And I will send a POST request

20
00:00:58,000 --> 00:01:01,000
because I don't want to get data,

21
00:01:01,000 --> 00:01:03,000
instead, I want to send data.

22
00:01:03,000 --> 00:01:05,000
So we would typically use a POST

23
00:01:05,000 --> 00:01:09,000
or maybe also a PUT request.

24
00:01:09,000 --> 00:01:10,000
Now, since that's the goal,

25
00:01:10,000 --> 00:01:12,000
here inside of that handler,

26
00:01:12,000 --> 00:01:14,000
we need to find out which kind of request

27
00:01:14,000 --> 00:01:17,000
is triggering this function execution

28
00:01:17,000 --> 00:01:19,000
because by default,

29
00:01:19,000 --> 00:01:23,000
all kinds of requests will trigger this function execution.

30
00:01:23,000 --> 00:01:28,000
GET requests, POST requests, PUT, DELETE, everything.

31
00:01:28,000 --> 00:01:30,000
Now, I only wanna try and extract data

32
00:01:30,000 --> 00:01:33,000
from the request and store it in a database

33
00:01:33,000 --> 00:01:37,000
or somewhere else if it's a POST request though.

34
00:01:37,000 --> 00:01:39,000
So therefore here, we need a if check

35
00:01:39,000 --> 00:01:41,000
and we need to find out which kind

36
00:01:41,000 --> 00:01:43,000
of request was sent.

37
00:01:43,000 --> 00:01:46,000
And that's easily done with help of that request object

38
00:01:46,000 --> 00:01:50,000
which we get automatically by Next.js

39
00:01:50,000 --> 00:01:52,000
when this function executes.

40
00:01:52,000 --> 00:01:53,000
This will give us information

41
00:01:53,000 --> 00:01:56,000
about the incoming request and for example,

42
00:01:56,000 --> 00:01:59,000
there we'll have a method property,

43
00:01:59,000 --> 00:02:02,000
which allows us to find out which HTTP method was used.

44
00:02:03,000 --> 00:02:07,000
And we can simply check if that was a POST request here,

45
00:02:07,000 --> 00:02:08,000
if it was a POST method.

46
00:02:08,000 --> 00:02:10,000
And if that's the case,

47
00:02:10,000 --> 00:02:12,000
then inside of this if check,

48
00:02:12,000 --> 00:02:15,000
we could try to extract data

49
00:02:15,000 --> 00:02:16,000
from the incoming request

50
00:02:16,000 --> 00:02:20,000
and then store that extracted data in a database.

51
00:02:20,000 --> 00:02:24,000
Now, let's say we expect our incoming POST requests

52
00:02:24,000 --> 00:02:25,000
to this API route

53
00:02:25,000 --> 00:02:29,000
to have this email and feedback text data field

54
00:02:29,000 --> 00:02:31,000
in the request body.

55
00:02:31,000 --> 00:02:33,000
That is something we could expect

56
00:02:33,000 --> 00:02:36,000
because we're the ones writing the code for this API.

57
00:02:37,000 --> 00:02:41,000
Then we can easily extract data from the incoming request

58
00:02:41,000 --> 00:02:44,000
with help of more properties that exist

59
00:02:44,000 --> 00:02:46,000
on this request object,

60
00:02:46,000 --> 00:02:49,000
to be precise, with help of the body property,

61
00:02:49,000 --> 00:02:51,000
which exists there.

62
00:02:51,000 --> 00:02:54,000
This will be the already parsed body

63
00:02:54,000 --> 00:02:57,000
of that incoming request.

64
00:02:57,000 --> 00:03:00,000
So Next.js will automatically parse

65
00:03:00,000 --> 00:03:02,000
the incoming request body for us,

66
00:03:02,000 --> 00:03:05,000
so it will give us easy access to the data attached

67
00:03:05,000 --> 00:03:09,000
to the request through that body property.

68
00:03:09,000 --> 00:03:11,000
And then body will just be the value

69
00:03:11,000 --> 00:03:14,000
that was sent with the request.

70
00:03:14,000 --> 00:03:17,000
So let's say here in our front end,

71
00:03:17,000 --> 00:03:19,000
we will soon send a request,

72
00:03:19,000 --> 00:03:23,000
which carries a body of a JavaScript object

73
00:03:23,000 --> 00:03:26,000
with an email field with some data

74
00:03:26,000 --> 00:03:31,000
and with a text field with some feedback text data.

75
00:03:32,000 --> 00:03:34,000
That could be the structure we wanna use

76
00:03:34,000 --> 00:03:35,000
in this application.

77
00:03:35,000 --> 00:03:38,000
And since we are the developer of this application,

78
00:03:38,000 --> 00:03:40,000
of this website, we can, of course,

79
00:03:40,000 --> 00:03:42,000
use any structure we want.

80
00:03:42,000 --> 00:03:44,000
So now we would send this object

81
00:03:44,000 --> 00:03:48,000
with a request to that API route.

82
00:03:48,000 --> 00:03:49,000
So on that API route,

83
00:03:49,000 --> 00:03:52,000
we could now expect that on this body,

84
00:03:52,000 --> 00:03:57,000
we get our email with request.body.email

85
00:03:57,000 --> 00:03:59,000
because we have an object as a body,

86
00:03:59,000 --> 00:04:01,000
which has a email property.

87
00:04:01,000 --> 00:04:04,000
And it also has a text property,

88
00:04:04,000 --> 00:04:06,000
so we can extract that as well.

89
00:04:06,000 --> 00:04:08,000
We can also get our feedbackText

90
00:04:09,000 --> 00:04:13,000
by accessing request.body.text then.

91
00:04:14,000 --> 00:04:16,000
So that's how we can extract the data

92
00:04:16,000 --> 00:04:20,000
from the incoming request if it's a POST request

93
00:04:20,000 --> 00:04:23,000
and then here we could store that in a database.

94
00:04:23,000 --> 00:04:26,000
So here we could create a newFeedback object

95
00:04:26,000 --> 00:04:31,000
where we add this email and text

96
00:04:33,000 --> 00:04:35,000
and then maybe also add a unique ID

97
00:04:35,000 --> 00:04:40,000
to have well, a unique identifier for every newFeedback.

98
00:04:40,000 --> 00:04:42,000
And here during development,

99
00:04:42,000 --> 00:04:45,000
I'll just create a new Date object

100
00:04:45,000 --> 00:04:48,000
and convert that to a string.

101
00:04:48,000 --> 00:04:50,000
It's not a perfect unique ID

102
00:04:50,000 --> 00:04:53,000
because theoretically, two requests could be sent

103
00:04:53,000 --> 00:04:56,000
and handled at exactly the same time

104
00:04:56,000 --> 00:04:58,000
but during development, that's good enough.

105
00:04:58,000 --> 00:05:01,000
It's a dummy ID we can use here.

106
00:05:02,000 --> 00:05:04,000
So now we would create this feedback object

107
00:05:04,000 --> 00:05:09,000
and we could now store that in a database

108
00:05:09,000 --> 00:05:13,000
or in a file or anything like that.

109
00:05:13,000 --> 00:05:14,000
Now, here during development,

110
00:05:14,000 --> 00:05:16,000
I will store it in a file

111
00:05:16,000 --> 00:05:18,000
and I'll create a new data folder,

112
00:05:18,000 --> 00:05:20,000
the folder name is up to you though,

113
00:05:20,000 --> 00:05:22,000
in my root project folder.

114
00:05:22,000 --> 00:05:25,000
So not inside of pages, api,

115
00:05:25,000 --> 00:05:27,000
you should not create it there

116
00:05:27,000 --> 00:05:29,000
but just in my root project folder.

117
00:05:29,000 --> 00:05:34,000
And in there, I'll add a feedback.json file,

118
00:05:34,000 --> 00:05:36,000
the file name is up to you though,

119
00:05:36,000 --> 00:05:38,000
and my goal is to open that file

120
00:05:38,000 --> 00:05:40,000
and store my data in there

121
00:05:40,000 --> 00:05:43,000
when we well, get that feedback.

122
00:05:44,000 --> 00:05:48,000
For this, I, will import fs from fs.

123
00:05:48,000 --> 00:05:51,000
So import the file system Node.js module

124
00:05:51,000 --> 00:05:54,000
and we can use Node.js code here

125
00:05:54,000 --> 00:05:56,000
because this will run on the server

126
00:05:56,000 --> 00:05:59,000
and this will only run on the server,

127
00:05:59,000 --> 00:06:00,000
never somewhere else

128
00:06:00,000 --> 00:06:04,000
and it will be executed with Node.js.

129
00:06:04,000 --> 00:06:07,000
So we can use all the Node.js features here

130
00:06:07,000 --> 00:06:12,000
and I'll also import the path Node.js module here

131
00:06:13,000 --> 00:06:16,000
and then here we can store that in a file

132
00:06:16,000 --> 00:06:18,000
by constructing a path

133
00:06:18,000 --> 00:06:21,000
with the join method to that data folder

134
00:06:21,000 --> 00:06:24,000
and there the feedback.json file

135
00:06:24,000 --> 00:06:26,000
by getting access to the current working directory

136
00:06:26,000 --> 00:06:28,000
with process current working directory,

137
00:06:28,000 --> 00:06:32,000
which will refer to the overall project directory.

138
00:06:33,000 --> 00:06:34,000
Then diving into data

139
00:06:34,000 --> 00:06:37,000
and then into feedback.json.

140
00:06:37,000 --> 00:06:40,000
And this will create an absolute path

141
00:06:40,000 --> 00:06:42,000
to that folder for us.

142
00:06:42,000 --> 00:06:45,000
So that's my filePath then.

143
00:06:46,000 --> 00:06:51,000
And then we can use the fs module to write to a file

144
00:06:51,000 --> 00:06:54,000
and here I wanna write to that filePath

145
00:06:55,000 --> 00:06:57,000
and then the data which I wanna write

146
00:06:57,000 --> 00:07:00,000
is actually this data,

147
00:07:00,000 --> 00:07:02,000
however, to be precise,

148
00:07:02,000 --> 00:07:05,000
I actually wanna read the file first,

149
00:07:05,000 --> 00:07:07,000
fetch the data which is in the file

150
00:07:07,000 --> 00:07:10,000
and then override it with the updated data.

151
00:07:10,000 --> 00:07:12,000
And therefore, to do that,

152
00:07:12,000 --> 00:07:15,000
I'll first of all, read the file

153
00:07:15,000 --> 00:07:17,000
and I'll do this with readFileSync

154
00:07:17,000 --> 00:07:19,000
to do it a synchronous blocking way.

155
00:07:20,000 --> 00:07:23,000
So I'll read that file here

156
00:07:23,000 --> 00:07:25,000
and that gives me my fileData,

157
00:07:26,000 --> 00:07:29,000
so the data which is currently stored in that file

158
00:07:29,000 --> 00:07:31,000
and that will be some JSON data,

159
00:07:31,000 --> 00:07:35,000
so I'll now convert to a JavaScript object to work with it

160
00:07:35,000 --> 00:07:39,000
by executing JSON.parse fileData.

161
00:07:41,000 --> 00:07:43,000
Then that data should be an array, let's say,

162
00:07:43,000 --> 00:07:45,000
and therefore, I'll add an empty array

163
00:07:45,000 --> 00:07:49,000
inside of this feedback.json file as a start.

164
00:07:49,000 --> 00:07:51,000
So this is an empty array for now.

165
00:07:51,000 --> 00:07:55,000
And then we interact with that array.

166
00:07:55,000 --> 00:07:57,000
We know that it will be an array

167
00:07:57,000 --> 00:07:59,000
because we own that file

168
00:07:59,000 --> 00:08:03,000
and I push my need feedback into that array

169
00:08:03,000 --> 00:08:06,000
and then I wanna write it back to the disk.

170
00:08:06,000 --> 00:08:08,000
So then I use writeFile

171
00:08:08,000 --> 00:08:10,000
and I'll use writeFileSync

172
00:08:10,000 --> 00:08:12,000
to again do this in a blocking way here

173
00:08:12,000 --> 00:08:15,000
and I'll write my file here

174
00:08:15,000 --> 00:08:17,000
by again targeting that file

175
00:08:17,000 --> 00:08:20,000
in that filePath and now the data which I write back

176
00:08:20,000 --> 00:08:23,000
is again the data converted back to JSON

177
00:08:23,000 --> 00:08:26,000
with the JSON.stringify method,

178
00:08:26,000 --> 00:08:28,000
I pass in my updated data here

179
00:08:28,000 --> 00:08:30,000
and that then writes the data to the disk.

180
00:08:30,000 --> 00:08:33,000
That's the goal, that's how this should behave.

181
00:08:34,000 --> 00:08:36,000
And then once we're done with all of that,

182
00:08:36,000 --> 00:08:38,000
we wanna send back a response.

183
00:08:38,000 --> 00:08:41,000
So then here I'll set a response of

184
00:08:41,000 --> 00:08:44,000
or with a status code of 201,

185
00:08:44,000 --> 00:08:48,000
which signals success, we added data successfully.

186
00:08:48,000 --> 00:08:51,000
And then any data of our choice.

187
00:08:51,000 --> 00:08:55,000
For example, an object sent back as JSON

188
00:08:55,000 --> 00:08:59,000
where I say Success in my message property

189
00:08:59,000 --> 00:09:03,000
and where I maybe also send back the newFeedback object

190
00:09:03,000 --> 00:09:05,000
that was created.

191
00:09:06,000 --> 00:09:07,000
So that will send back a response

192
00:09:07,000 --> 00:09:11,000
after we successfully updated our file

193
00:09:11,000 --> 00:09:14,000
and it sends back an object in JSON format

194
00:09:14,000 --> 00:09:17,000
with a message and a feedback property.

195
00:09:17,000 --> 00:09:20,000
This line of code would also execute though

196
00:09:20,000 --> 00:09:22,000
after we go through this if check

197
00:09:22,000 --> 00:09:25,000
because function execution does not stop

198
00:09:25,000 --> 00:09:29,000
just because we set some response data.

199
00:09:29,000 --> 00:09:31,000
Hence, to not send two responses,

200
00:09:31,000 --> 00:09:33,000
which would cause problems,

201
00:09:33,000 --> 00:09:37,000
we should move this code into an else block

202
00:09:37,000 --> 00:09:39,000
so that this does not execute

203
00:09:39,000 --> 00:09:42,000
if we just make it here into this if check.

204
00:09:43,000 --> 00:09:46,000
Okay, so now we spent a lot time on that

205
00:09:46,000 --> 00:09:49,000
but now we got some server-side code added

206
00:09:49,000 --> 00:09:54,000
to this API route using API routes-specific features

207
00:09:54,000 --> 00:09:56,000
like looking into the request,

208
00:09:56,000 --> 00:09:59,000
extracting request body data

209
00:09:59,000 --> 00:10:01,000
and running server-side code

210
00:10:01,000 --> 00:10:02,000
and sending a response

211
00:10:02,000 --> 00:10:04,000
and with all that added,

212
00:10:04,000 --> 00:10:07,000
we can now connect our front end code

213
00:10:07,000 --> 00:10:08,000
to that backend

214
00:10:08,000 --> 00:10:12,000
by sending that request to that API route

215
00:10:12,000 --> 00:10:14,000
to then see whether that works.