1
00:00:02,000 --> 00:00:03,000
{Maximilian Schwarzmuller} Now we worked on

2
00:00:03,000 --> 00:00:05,000
the newsletter registration.

3
00:00:05,000 --> 00:00:07,000
Let's now work on the comments area

4
00:00:07,000 --> 00:00:09,000
for our individual events.

5
00:00:09,000 --> 00:00:12,000
Here the goal is to again add an API route

6
00:00:12,000 --> 00:00:15,000
which accepts incoming data,

7
00:00:15,000 --> 00:00:17,000
this entered data.

8
00:00:17,000 --> 00:00:20,000
And then for the moment just logs it to the console

9
00:00:20,000 --> 00:00:25,000
But which in addition, all's returns data for GET requests.

10
00:00:25,000 --> 00:00:28,000
And the API routes should be dynamic,

11
00:00:28,000 --> 00:00:31,000
because the ID of the event to which the comment belongs,

12
00:00:31,000 --> 00:00:33,000
should be encoded in the URL.

13
00:00:34,000 --> 00:00:37,000
That was part of the instructions.

14
00:00:37,000 --> 00:00:41,000
Hence, I'll add another API route in the pages API folder

15
00:00:41,000 --> 00:00:45,000
and I'll use square brackets in the file name here

16
00:00:45,000 --> 00:00:48,000
since it will be a dynamic API route.

17
00:00:48,000 --> 00:00:52,000
And I'll name my dynamic path segment identifier here

18
00:00:52,000 --> 00:00:57,000
event ID, because that is what should be encoded in the URL.

19
00:00:58,000 --> 00:01:00,000
Now we could leave it here

20
00:01:00,000 --> 00:01:03,000
but I will actually create that file in a comments folder,

21
00:01:03,000 --> 00:01:07,000
so that the full API route to reach that file

22
00:01:07,000 --> 00:01:11,000
and to execute the code in that file will later

23
00:01:11,000 --> 00:01:14,000
be slash comments, slash some event ID.

24
00:01:15,000 --> 00:01:17,000
Because I think that is easier to read

25
00:01:17,000 --> 00:01:22,000
and makes more sense than just slash some event ID.

26
00:01:22,000 --> 00:01:24,000
There it's not clear that this refers to comments.

27
00:01:24,000 --> 00:01:29,000
If the full path is slash comments, slash some event ID

28
00:01:29,000 --> 00:01:31,000
that makes more sense.

29
00:01:31,000 --> 00:01:34,000
And of course there's slash API in front of all of that.

30
00:01:35,000 --> 00:01:38,000
So they offer here we can again define our handler function

31
00:01:38,000 --> 00:01:41,000
which gets a request and a response.

32
00:01:41,000 --> 00:01:45,000
And export that inside of this event ID file,

33
00:01:45,000 --> 00:01:46,000
like this.

34
00:01:47,000 --> 00:01:51,000
And now in there, we need to handle two different cases.

35
00:01:51,000 --> 00:01:54,000
The case that it's a post request which we get

36
00:01:54,000 --> 00:01:57,000
and the case that it's a GET request.

37
00:01:57,000 --> 00:02:01,000
Hence again, we can check the request method here

38
00:02:01,000 --> 00:02:04,000
and check if it's post and then do something.

39
00:02:04,000 --> 00:02:05,000
And then also check,

40
00:02:06,000 --> 00:02:09,000
else if or in another if statement thereafter,

41
00:02:09,000 --> 00:02:12,000
if request method is GET.

42
00:02:12,000 --> 00:02:15,000
And if it's something totally else, we do nothing.

43
00:02:15,000 --> 00:02:18,000
And therefore we don't return a valid response

44
00:02:18,000 --> 00:02:21,000
but that's fine because for this application

45
00:02:21,000 --> 00:02:24,000
we don't intend any other usage.

46
00:02:24,000 --> 00:02:27,000
So now here we support post and GET requests

47
00:02:27,000 --> 00:02:30,000
and we can now implement the different logic.

48
00:02:30,000 --> 00:02:33,000
Now in both cases, we need to know

49
00:02:33,000 --> 00:02:36,000
for which event we should add a comment

50
00:02:36,000 --> 00:02:38,000
or return to comments.

51
00:02:38,000 --> 00:02:40,000
That's why we made this dynamic.

52
00:02:40,000 --> 00:02:43,000
And hence, before we dive into any if block,

53
00:02:43,000 --> 00:02:48,000
we can already retrieve the event ID from request query.

54
00:02:48,000 --> 00:02:50,000
That's what you learned in the last section.

55
00:02:50,000 --> 00:02:54,000
This is how you can get access to the concrete value entered

56
00:02:54,000 --> 00:02:58,000
in the path, as a value for this placeholder.

57
00:02:58,000 --> 00:03:02,000
So here it's requests query.event ID,

58
00:03:02,000 --> 00:03:05,000
because I chose event ID written like this

59
00:03:05,000 --> 00:03:07,000
between my square brackets.

60
00:03:07,000 --> 00:03:09,000
If you chose a different identifier here

61
00:03:09,000 --> 00:03:12,000
you have to choose a different property here.

62
00:03:13,000 --> 00:03:15,000
Now with that, I get my event ID though.

63
00:03:15,000 --> 00:03:18,000
Now what we want to do differs on

64
00:03:18,000 --> 00:03:21,000
which request method we have though.

65
00:03:21,000 --> 00:03:23,000
If it's a post request,

66
00:03:23,000 --> 00:03:25,000
we get data for a new comment.

67
00:03:25,000 --> 00:03:30,000
So then we want to add server side validation here

68
00:03:30,000 --> 00:03:33,000
because I mentioned that you can't trust

69
00:03:33,000 --> 00:03:35,000
client site validation.

70
00:03:35,000 --> 00:03:40,000
Therefore here, I will add server side validation

71
00:03:41,000 --> 00:03:44,000
and check if the enter data is correct.

72
00:03:44,000 --> 00:03:47,000
For this we first of all need to extract the entered data.

73
00:03:47,000 --> 00:03:50,000
So the data, which is part of the incoming requests

74
00:03:50,000 --> 00:03:52,000
from the request body.

75
00:03:52,000 --> 00:03:56,000
And here I expect to get free pieces of data,

76
00:03:56,000 --> 00:03:58,000
which I'll pull out of the request body

77
00:03:58,000 --> 00:04:01,000
with object de-structuring.

78
00:04:01,000 --> 00:04:05,000
I expect to get the email address of the user,

79
00:04:05,000 --> 00:04:08,000
who left a comment, the name of the user

80
00:04:08,000 --> 00:04:11,000
and then the comment text.

81
00:04:11,000 --> 00:04:13,000
And therefore of course

82
00:04:13,000 --> 00:04:16,000
when we later sent a request from the client.

83
00:04:16,000 --> 00:04:19,000
So from the front-end code, we need to make sure

84
00:04:19,000 --> 00:04:22,000
that we include exactly these free properties

85
00:04:22,000 --> 00:04:24,000
into our request data.

86
00:04:24,000 --> 00:04:28,000
That's our responsibility later.

87
00:04:28,000 --> 00:04:30,000
With that we'll then be able to extract it like this

88
00:04:30,000 --> 00:04:33,000
from the incoming request body.

89
00:04:33,000 --> 00:04:35,000
And then we can add validation logic.

90
00:04:35,000 --> 00:04:40,000
We can check if not the email address includes add symbol

91
00:04:40,000 --> 00:04:43,000
or if we don't have a valid name

92
00:04:43,000 --> 00:04:47,000
or if name if we trim it,

93
00:04:47,000 --> 00:04:48,000
is equal to an empty string

94
00:04:48,000 --> 00:04:50,000
which would also be invalid.

95
00:04:50,000 --> 00:04:54,000
Or if we don't have a text or if the text

96
00:04:54,000 --> 00:04:56,000
if we trim it, is equal to an empty string.

97
00:04:59,000 --> 00:05:03,000
If any of those conditions here is met,

98
00:05:03,000 --> 00:05:05,000
the input is invalid.

99
00:05:05,000 --> 00:05:06,000
And then I want to return.

100
00:05:06,000 --> 00:05:09,000
I don't want to continue with the function execution.

101
00:05:09,000 --> 00:05:13,000
And I then also want to send back a response.

102
00:05:13,000 --> 00:05:15,000
With a status code of 422,

103
00:05:15,000 --> 00:05:18,000
which stands for invalid input

104
00:05:18,000 --> 00:05:20,000
and some message of our choice.

105
00:05:20,000 --> 00:05:24,000
For example, we could say invalid input

106
00:05:24,000 --> 00:05:27,000
of course you could add a more elaborate validation

107
00:05:27,000 --> 00:05:29,000
but that's good enough for now.

108
00:05:30,000 --> 00:05:34,000
So with that, we validate the user input

109
00:05:34,000 --> 00:05:36,000
as a next step, after this if check

110
00:05:36,000 --> 00:05:39,000
but still in the post method if check

111
00:05:39,000 --> 00:05:42,000
we want to do something.

112
00:05:42,000 --> 00:05:43,000
And for the moment again

113
00:05:43,000 --> 00:05:46,000
I'll just console log the data which we received.

114
00:05:46,000 --> 00:05:49,000
So I will console log, email,

115
00:05:49,000 --> 00:05:51,000
name and text here.

116
00:05:51,000 --> 00:05:53,000
We will soon do something where useful

117
00:05:53,000 --> 00:05:55,000
but for the moment, that's it.

118
00:05:57,000 --> 00:05:59,000
Thereafter, I want to send back a response

119
00:05:59,000 --> 00:06:02,000
with a status code of 201

120
00:06:02,000 --> 00:06:05,000
because we will have created a new comment.

121
00:06:05,000 --> 00:06:07,000
We don't actually do it here,

122
00:06:07,000 --> 00:06:09,000
but we will soon do so

123
00:06:09,000 --> 00:06:12,000
and sent back some data in Jason format

124
00:06:12,000 --> 00:06:17,000
where we could send back a message of added comment.

125
00:06:18,000 --> 00:06:23,000
And actually we can, create a new comment object here.

126
00:06:23,000 --> 00:06:25,000
A new JavaScript object,

127
00:06:25,000 --> 00:06:28,000
with some random ID.

128
00:06:28,000 --> 00:06:31,000
For the moment I'll just use the current date time stamp

129
00:06:31,000 --> 00:06:33,000
to create a dummy ID.

130
00:06:33,000 --> 00:06:35,000
We will also soon have a better ID

131
00:06:35,000 --> 00:06:37,000
but for the moment that's good enough.

132
00:06:37,000 --> 00:06:41,000
And then add email, name and text here as fields

133
00:06:41,000 --> 00:06:43,000
in that object.

134
00:06:43,000 --> 00:06:46,000
And therefore then, as part of the response

135
00:06:46,000 --> 00:06:48,000
not just send back the message

136
00:06:48,000 --> 00:06:51,000
but also the comment that was created.

137
00:06:51,000 --> 00:06:53,000
That new comment.

138
00:06:53,000 --> 00:06:55,000
So that we created here and we send it back.

139
00:06:55,000 --> 00:06:57,000
And actually then,

140
00:06:58,000 --> 00:07:01,000
we can also lock that new comment here

141
00:07:01,000 --> 00:07:04,000
instead of the individual inputs.

142
00:07:04,000 --> 00:07:06,000
So that is then my actual logic

143
00:07:06,000 --> 00:07:09,000
for this case, for the post case.

144
00:07:10,000 --> 00:07:12,000
Now if we get a GET request,

145
00:07:12,000 --> 00:07:14,000
we want to send back a list of comments.

146
00:07:14,000 --> 00:07:16,000
At the moment we have no such list

147
00:07:16,000 --> 00:07:19,000
because we have no data source, no database yet.

148
00:07:19,000 --> 00:07:21,000
And therefore at the moment,

149
00:07:21,000 --> 00:07:25,000
I will just create a dummy list of comments

150
00:07:25,000 --> 00:07:28,000
which is an array, where I add a couple

151
00:07:28,000 --> 00:07:30,000
of dummy comments with an ID,

152
00:07:30,000 --> 00:07:34,000
a name for the user and an email address

153
00:07:34,000 --> 00:07:35,000
like this.

154
00:07:35,000 --> 00:07:37,000
And then also

155
00:07:37,000 --> 00:07:40,000
the comment data.

156
00:07:40,000 --> 00:07:43,000
Actually, we don't even need to add an email address

157
00:07:43,000 --> 00:07:45,000
because we will not use that on the front.

158
00:07:45,000 --> 00:07:48,000
And anyways, when displaying the comments.

159
00:07:48,000 --> 00:07:51,000
So here let's maybe also name this text

160
00:07:51,000 --> 00:07:54,000
and then let's add a text like

161
00:07:54,000 --> 00:07:57,000
a first comment here

162
00:07:58,000 --> 00:08:00,000
and then add a second comment

163
00:08:00,000 --> 00:08:02,000
with C2

164
00:08:02,000 --> 00:08:04,000
by manual

165
00:08:04,000 --> 00:08:06,000
where I say a second comment.

166
00:08:06,000 --> 00:08:08,000
And of course it shouldn't be a fist,

167
00:08:08,000 --> 00:08:10,000
but a first comment.

168
00:08:11,000 --> 00:08:11,000
Okay.

169
00:08:11,000 --> 00:08:14,000
So that's my dummy list of comments

170
00:08:14,000 --> 00:08:16,000
which we will later replace

171
00:08:16,000 --> 00:08:19,000
with an actual list coming from a database.

172
00:08:19,000 --> 00:08:20,000
But for the moment it's this.

173
00:08:20,000 --> 00:08:24,000
And then we sent back a response with a status code of 200

174
00:08:24,000 --> 00:08:27,000
with some Jason and coded data where we have our comments

175
00:08:27,000 --> 00:08:31,000
which is just this list of dummy comments for the moment.

176
00:08:32,000 --> 00:08:37,000
And that's the API route for the comments feature.

177
00:08:37,000 --> 00:08:41,000
Now let's send the appropriate requests from the front end.