Original subtitles

{Maximilian Schwarzmuller} Now we worked on

the newsletter registration.

Let's now work on the comments area

for our individual events.

Here the goal is to again add an API route

which accepts incoming data,

this entered data.

And then for the moment just logs it to the console

But which in addition, all's returns data for GET requests.

And the API routes should be dynamic,

because the ID of the event to which the comment belongs,

should be encoded in the URL.

That was part of the instructions.

Hence, I'll add another API route in the pages API folder

and I'll use square brackets in the file name here

since it will be a dynamic API route.

And I'll name my dynamic path segment identifier here

event ID, because that is what should be encoded in the URL.

Now we could leave it here

but I will actually create that file in a comments folder,

so that the full API route to reach that file

and to execute the code in that file will later

be slash comments, slash some event ID.

Because I think that is easier to read

and makes more sense than just slash some event ID.

There it's not clear that this refers to comments.

If the full path is slash comments, slash some event ID

that makes more sense.

And of course there's slash API in front of all of that.

So they offer here we can again define our handler function

which gets a request and a response.

And export that inside of this event ID file,

like this.

And now in there, we need to handle two different cases.

The case that it's a post request which we get

and the case that it's a GET request.

Hence again, we can check the request method here

and check if it's post and then do something.

And then also check,

else if or in another if statement thereafter,

if request method is GET.

And if it's something totally else, we do nothing.

And therefore we don't return a valid response

but that's fine because for this application

we don't intend any other usage.

So now here we support post and GET requests

and we can now implement the different logic.

Now in both cases, we need to know

for which event we should add a comment

or return to comments.

That's why we made this dynamic.

And hence, before we dive into any if block,

we can already retrieve the event ID from request query.

That's what you learned in the last section.

This is how you can get access to the concrete value entered

in the path, as a value for this placeholder.

So here it's requests query.event ID,

because I chose event ID written like this

between my square brackets.

If you chose a different identifier here

you have to choose a different property here.

Now with that, I get my event ID though.

Now what we want to do differs on

which request method we have though.

If it's a post request,

we get data for a new comment.

So then we want to add server side validation here

because I mentioned that you can't trust

client site validation.

Therefore here, I will add server side validation

and check if the enter data is correct.

For this we first of all need to extract the entered data.

So the data, which is part of the incoming requests

from the request body.

And here I expect to get free pieces of data,

which I'll pull out of the request body

with object de-structuring.

I expect to get the email address of the user,

who left a comment, the name of the user

and then the comment text.

And therefore of course

when we later sent a request from the client.

So from the front-end code, we need to make sure

that we include exactly these free properties

into our request data.

That's our responsibility later.

With that we'll then be able to extract it like this

from the incoming request body.

And then we can add validation logic.

We can check if not the email address includes add symbol

or if we don't have a valid name

or if name if we trim it,

is equal to an empty string

which would also be invalid.

Or if we don't have a text or if the text

if we trim it, is equal to an empty string.

If any of those conditions here is met,

the input is invalid.

And then I want to return.

I don't want to continue with the function execution.

And I then also want to send back a response.

With a status code of 422,

which stands for invalid input

and some message of our choice.

For example, we could say invalid input

of course you could add a more elaborate validation

but that's good enough for now.

So with that, we validate the user input

as a next step, after this if check

but still in the post method if check

we want to do something.

And for the moment again

I'll just console log the data which we received.

So I will console log, email,

name and text here.

We will soon do something where useful

but for the moment, that's it.

Thereafter, I want to send back a response

with a status code of 201

because we will have created a new comment.

We don't actually do it here,

but we will soon do so

and sent back some data in Jason format

where we could send back a message of added comment.

And actually we can, create a new comment object here.

A new JavaScript object,

with some random ID.

For the moment I'll just use the current date time stamp

to create a dummy ID.

We will also soon have a better ID

but for the moment that's good enough.

And then add email, name and text here as fields

in that object.

And therefore then, as part of the response

not just send back the message

but also the comment that was created.

That new comment.

So that we created here and we send it back.

And actually then,

we can also lock that new comment here

instead of the individual inputs.

So that is then my actual logic

for this case, for the post case.

Now if we get a GET request,

we want to send back a list of comments.

At the moment we have no such list

because we have no data source, no database yet.

And therefore at the moment,

I will just create a dummy list of comments

which is an array, where I add a couple

of dummy comments with an ID,

a name for the user and an email address

like this.

And then also

the comment data.

Actually, we don't even need to add an email address

because we will not use that on the front.

And anyways, when displaying the comments.

So here let's maybe also name this text

and then let's add a text like

a first comment here

and then add a second comment

with C2

by manual

where I say a second comment.

And of course it shouldn't be a fist,

but a first comment.

Okay.

So that's my dummy list of comments

which we will later replace

with an actual list coming from a database.

But for the moment it's this.

And then we sent back a response with a status code of 200

with some Jason and coded data where we have our comments

which is just this list of dummy comments for the moment.

And that's the API route for the comments feature.

Now let's send the appropriate requests from the front end.