Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,182 --> 00:00:03,140
{Maximilian Schwarzmuller} Now we worked on
2
00:00:03,140 --> 00:00:05,200
the newsletter registration.
3
00:00:05,200 --> 00:00:07,220
Let's now work on the comments area
4
00:00:07,220 --> 00:00:09,560
for our individual events.
5
00:00:09,560 --> 00:00:12,541
Here the goal is to again add an API route
6
00:00:12,541 --> 00:00:15,610
which accepts incoming data,
7
00:00:15,610 --> 00:00:17,420
this entered data.
8
00:00:17,420 --> 00:00:20,810
And then for the moment just logs it to the console
9
00:00:20,810 --> 00:00:25,150
But which in addition, all's returns data for GET requests.
10
00:00:25,150 --> 00:00:28,000
And the API routes should be dynamic,
11
00:00:28,000 --> 00:00:31,830
because the ID of the event to which the comment belongs,
12
00:00:31,830 --> 00:00:33,383
should be encoded in the URL.
13
00:00:34,480 --> 00:00:37,190
That was part of the instructions.
14
00:00:37,190 --> 00:00:41,840
Hence, I'll add another API route in the pages API folder
15
00:00:41,840 --> 00:00:45,090
and I'll use square brackets in the file name here
16
00:00:45,090 --> 00:00:48,080
since it will be a dynamic API route.
17
00:00:48,080 --> 00:00:52,180
And I'll name my dynamic path segment identifier here
18
00:00:52,180 --> 00:00:57,057
event ID, because that is what should be encoded in the URL.
19
00:00:58,560 --> 00:01:00,080
Now we could leave it here
20
00:01:00,080 --> 00:01:03,930
but I will actually create that file in a comments folder,
21
00:01:03,930 --> 00:01:07,280
so that the full API route to reach that file
22
00:01:07,280 --> 00:01:11,130
and to execute the code in that file will later
23
00:01:11,130 --> 00:01:14,683
be slash comments, slash some event ID.
24
00:01:15,710 --> 00:01:17,830
Because I think that is easier to read
25
00:01:17,830 --> 00:01:22,120
and makes more sense than just slash some event ID.
26
00:01:22,120 --> 00:01:24,930
There it's not clear that this refers to comments.
27
00:01:24,930 --> 00:01:29,730
If the full path is slash comments, slash some event ID
28
00:01:29,730 --> 00:01:31,420
that makes more sense.
29
00:01:31,420 --> 00:01:34,583
And of course there's slash API in front of all of that.
30
00:01:35,660 --> 00:01:38,750
So they offer here we can again define our handler function
31
00:01:38,750 --> 00:01:41,380
which gets a request and a response.
32
00:01:41,380 --> 00:01:45,540
And export that inside of this event ID file,
33
00:01:45,540 --> 00:01:46,513
like this.
34
00:01:47,750 --> 00:01:51,320
And now in there, we need to handle two different cases.
35
00:01:51,320 --> 00:01:54,800
The case that it's a post request which we get
36
00:01:54,800 --> 00:01:57,970
and the case that it's a GET request.
37
00:01:57,970 --> 00:02:01,360
Hence again, we can check the request method here
38
00:02:01,360 --> 00:02:04,430
and check if it's post and then do something.
39
00:02:04,430 --> 00:02:05,863
And then also check,
40
00:02:06,930 --> 00:02:09,900
else if or in another if statement thereafter,
41
00:02:09,900 --> 00:02:12,920
if request method is GET.
42
00:02:12,920 --> 00:02:15,700
And if it's something totally else, we do nothing.
43
00:02:15,700 --> 00:02:18,960
And therefore we don't return a valid response
44
00:02:18,960 --> 00:02:21,260
but that's fine because for this application
45
00:02:21,260 --> 00:02:24,480
we don't intend any other usage.
46
00:02:24,480 --> 00:02:27,850
So now here we support post and GET requests
47
00:02:27,850 --> 00:02:30,880
and we can now implement the different logic.
48
00:02:30,880 --> 00:02:33,100
Now in both cases, we need to know
49
00:02:33,100 --> 00:02:36,210
for which event we should add a comment
50
00:02:36,210 --> 00:02:38,270
or return to comments.
51
00:02:38,270 --> 00:02:40,650
That's why we made this dynamic.
52
00:02:40,650 --> 00:02:43,580
And hence, before we dive into any if block,
53
00:02:43,580 --> 00:02:48,010
we can already retrieve the event ID from request query.
54
00:02:48,010 --> 00:02:50,510
That's what you learned in the last section.
55
00:02:50,510 --> 00:02:54,420
This is how you can get access to the concrete value entered
56
00:02:54,420 --> 00:02:58,370
in the path, as a value for this placeholder.
57
00:02:58,370 --> 00:03:02,220
So here it's requests query.event ID,
58
00:03:02,220 --> 00:03:05,480
because I chose event ID written like this
59
00:03:05,480 --> 00:03:07,380
between my square brackets.
60
00:03:07,380 --> 00:03:09,840
If you chose a different identifier here
61
00:03:09,840 --> 00:03:12,603
you have to choose a different property here.
62
00:03:13,610 --> 00:03:15,960
Now with that, I get my event ID though.
63
00:03:15,960 --> 00:03:18,720
Now what we want to do differs on
64
00:03:18,720 --> 00:03:21,430
which request method we have though.
65
00:03:21,430 --> 00:03:23,210
If it's a post request,
66
00:03:23,210 --> 00:03:25,850
we get data for a new comment.
67
00:03:25,850 --> 00:03:30,850
So then we want to add server side validation here
68
00:03:30,970 --> 00:03:33,330
because I mentioned that you can't trust
69
00:03:33,330 --> 00:03:35,984
client site validation.
70
00:03:35,984 --> 00:03:40,984
Therefore here, I will add server side validation
71
00:03:41,070 --> 00:03:44,170
and check if the enter data is correct.
72
00:03:44,170 --> 00:03:47,810
For this we first of all need to extract the entered data.
73
00:03:47,810 --> 00:03:50,510
So the data, which is part of the incoming requests
74
00:03:50,510 --> 00:03:52,500
from the request body.
75
00:03:52,500 --> 00:03:56,610
And here I expect to get free pieces of data,
76
00:03:56,610 --> 00:03:58,750
which I'll pull out of the request body
77
00:03:58,750 --> 00:04:01,610
with object de-structuring.
78
00:04:01,610 --> 00:04:05,090
I expect to get the email address of the user,
79
00:04:05,090 --> 00:04:08,920
who left a comment, the name of the user
80
00:04:08,920 --> 00:04:11,770
and then the comment text.
81
00:04:11,770 --> 00:04:13,130
And therefore of course
82
00:04:13,130 --> 00:04:16,110
when we later sent a request from the client.
83
00:04:16,110 --> 00:04:19,130
So from the front-end code, we need to make sure
84
00:04:19,130 --> 00:04:22,750
that we include exactly these free properties
85
00:04:22,750 --> 00:04:24,800
into our request data.
86
00:04:24,800 --> 00:04:28,070
That's our responsibility later.
87
00:04:28,070 --> 00:04:30,700
With that we'll then be able to extract it like this
88
00:04:30,700 --> 00:04:33,020
from the incoming request body.
89
00:04:33,020 --> 00:04:35,390
And then we can add validation logic.
90
00:04:35,390 --> 00:04:40,390
We can check if not the email address includes add symbol
91
00:04:40,410 --> 00:04:43,900
or if we don't have a valid name
92
00:04:43,900 --> 00:04:47,370
or if name if we trim it,
93
00:04:47,370 --> 00:04:48,710
is equal to an empty string
94
00:04:48,710 --> 00:04:50,960
which would also be invalid.
95
00:04:50,960 --> 00:04:54,210
Or if we don't have a text or if the text
96
00:04:54,210 --> 00:04:56,863
if we trim it, is equal to an empty string.
97
00:04:59,980 --> 00:05:03,045
If any of those conditions here is met,
98
00:05:03,045 --> 00:05:05,050
the input is invalid.
99
00:05:05,050 --> 00:05:06,570
And then I want to return.
100
00:05:06,570 --> 00:05:09,710
I don't want to continue with the function execution.
101
00:05:09,710 --> 00:05:13,280
And I then also want to send back a response.
102
00:05:13,280 --> 00:05:15,540
With a status code of 422,
103
00:05:15,540 --> 00:05:18,130
which stands for invalid input
104
00:05:18,130 --> 00:05:20,180
and some message of our choice.
105
00:05:20,180 --> 00:05:24,440
For example, we could say invalid input
106
00:05:24,440 --> 00:05:27,860
of course you could add a more elaborate validation
107
00:05:27,860 --> 00:05:29,763
but that's good enough for now.
108
00:05:30,600 --> 00:05:34,190
So with that, we validate the user input
109
00:05:34,190 --> 00:05:36,760
as a next step, after this if check
110
00:05:36,760 --> 00:05:39,470
but still in the post method if check
111
00:05:39,470 --> 00:05:42,360
we want to do something.
112
00:05:42,360 --> 00:05:43,590
And for the moment again
113
00:05:43,590 --> 00:05:46,730
I'll just console log the data which we received.
114
00:05:46,730 --> 00:05:49,280
So I will console log, email,
115
00:05:49,280 --> 00:05:51,300
name and text here.
116
00:05:51,300 --> 00:05:53,600
We will soon do something where useful
117
00:05:53,600 --> 00:05:55,253
but for the moment, that's it.
118
00:05:57,010 --> 00:05:59,870
Thereafter, I want to send back a response
119
00:05:59,870 --> 00:06:02,670
with a status code of 201
120
00:06:02,670 --> 00:06:05,870
because we will have created a new comment.
121
00:06:05,870 --> 00:06:07,490
We don't actually do it here,
122
00:06:07,490 --> 00:06:09,640
but we will soon do so
123
00:06:09,640 --> 00:06:12,670
and sent back some data in Jason format
124
00:06:12,670 --> 00:06:17,193
where we could send back a message of added comment.
125
00:06:18,040 --> 00:06:23,040
And actually we can, create a new comment object here.
126
00:06:23,750 --> 00:06:25,890
A new JavaScript object,
127
00:06:25,890 --> 00:06:28,030
with some random ID.
128
00:06:28,030 --> 00:06:31,200
For the moment I'll just use the current date time stamp
129
00:06:31,200 --> 00:06:33,490
to create a dummy ID.
130
00:06:33,490 --> 00:06:35,800
We will also soon have a better ID
131
00:06:35,800 --> 00:06:37,970
but for the moment that's good enough.
132
00:06:37,970 --> 00:06:41,580
And then add email, name and text here as fields
133
00:06:41,580 --> 00:06:43,090
in that object.
134
00:06:43,090 --> 00:06:46,260
And therefore then, as part of the response
135
00:06:46,260 --> 00:06:48,620
not just send back the message
136
00:06:48,620 --> 00:06:51,000
but also the comment that was created.
137
00:06:51,000 --> 00:06:53,150
That new comment.
138
00:06:53,150 --> 00:06:55,970
So that we created here and we send it back.
139
00:06:55,970 --> 00:06:57,233
And actually then,
140
00:06:58,900 --> 00:07:01,340
we can also lock that new comment here
141
00:07:01,340 --> 00:07:04,010
instead of the individual inputs.
142
00:07:04,010 --> 00:07:06,230
So that is then my actual logic
143
00:07:06,230 --> 00:07:09,423
for this case, for the post case.
144
00:07:10,700 --> 00:07:12,270
Now if we get a GET request,
145
00:07:12,270 --> 00:07:14,940
we want to send back a list of comments.
146
00:07:14,940 --> 00:07:16,940
At the moment we have no such list
147
00:07:16,940 --> 00:07:19,950
because we have no data source, no database yet.
148
00:07:19,950 --> 00:07:21,610
And therefore at the moment,
149
00:07:21,610 --> 00:07:25,046
I will just create a dummy list of comments
150
00:07:25,046 --> 00:07:28,030
which is an array, where I add a couple
151
00:07:28,030 --> 00:07:30,660
of dummy comments with an ID,
152
00:07:30,660 --> 00:07:34,830
a name for the user and an email address
153
00:07:34,830 --> 00:07:35,870
like this.
154
00:07:35,870 --> 00:07:37,170
And then also
155
00:07:37,170 --> 00:07:40,480
the comment data.
156
00:07:40,480 --> 00:07:43,150
Actually, we don't even need to add an email address
157
00:07:43,150 --> 00:07:45,260
because we will not use that on the front.
158
00:07:45,260 --> 00:07:48,650
And anyways, when displaying the comments.
159
00:07:48,650 --> 00:07:51,450
So here let's maybe also name this text
160
00:07:51,450 --> 00:07:54,070
and then let's add a text like
161
00:07:54,070 --> 00:07:57,020
a first comment here
162
00:07:58,530 --> 00:08:00,440
and then add a second comment
163
00:08:00,440 --> 00:08:02,050
with C2
164
00:08:02,050 --> 00:08:04,260
by manual
165
00:08:04,260 --> 00:08:06,730
where I say a second comment.
166
00:08:06,730 --> 00:08:08,600
And of course it shouldn't be a fist,
167
00:08:08,600 --> 00:08:10,163
but a first comment.
168
00:08:11,150 --> 00:08:11,983
Okay.
169
00:08:11,983 --> 00:08:14,290
So that's my dummy list of comments
170
00:08:14,290 --> 00:08:16,440
which we will later replace
171
00:08:16,440 --> 00:08:19,330
with an actual list coming from a database.
172
00:08:19,330 --> 00:08:20,920
But for the moment it's this.
173
00:08:20,920 --> 00:08:24,660
And then we sent back a response with a status code of 200
174
00:08:24,660 --> 00:08:27,360
with some Jason and coded data where we have our comments
175
00:08:27,360 --> 00:08:31,973
which is just this list of dummy comments for the moment.
176
00:08:32,909 --> 00:08:37,200
And that's the API route for the comments feature.
177
00:08:37,200 --> 00:08:41,183
Now let's send the appropriate requests from the front end.
13559
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.