{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.