All language subtitles for 005 Connecting the Frontend To the Comments API Routes_Downloadly.ir_en

So from the front end,

we wanna send requests

to our newly added comments API route.

And it's the new comments component

where I wanna start with this.

Here, we have the send comment handler,

and in there we get all the user input

and we then have some client side validation

which we shouldn't trust,

but which is still there.

And we then call on add comment on props

which should be a function,

where we pass an object with email name and text

And on add comment, then in the end is a function here

in the comments JSX file, this add comment handler

which has passed as a function

through the on add comment prop

on the new comment component.

And here we then receive that comments data

which should be sent as a request.

Now I actually do need to connect my

send comment handler to the form.

So here with on submit

I point at send comment handler to connect that.

And then in comments JS we wanna send a request.

So here again, we can use the fetch function for it is

and the route now is slash API slash

and then it's comments,

because of that comments folder

slash and then this file.

But of course, with a concrete value for the event ID.

Now that event ID is something

which we get through props here in the comments component.

It's a Indian passed in by this page

by this event ID page.

So this Real page, not the API route, but this Real page.

They're into comments.

I pass in this event prop which points

at the ID of the event we're loading here.

Hence in the comments JSX file,

we get this event ID prop

and that is what we should add as a concrete value

to the route here, to the path.

Then it should be a post request.

Hence we add this second argument to configure the request

and set the method to post

and the body then to our data.

And here I'll use JSON stringify to send my comment data,

which is this data package we get

from the new comment component.

Which contains email, name and text.

And here I'm using these property names,

email, name and text, and hence it's these property names

which you should be looking for in your API route,

Email, name, and text.

So that the data can be retrieved correctly.

Because I'm just forwarding that data

with my HTTP request to the API route.

Then I'll add these extra headers to clarify the

the content type I'm sending here,

application JSON and we should be good.

Now we can again wait for a response

and parse that

and then as a next step

thereafter get back some data

which you for example console log, like this.

With all that implemented,

if we save everything and go back

if I try to submit as empty form, I get an error here

because I have some built in client side validation.

If I disable this client side validation

if I go to the new comments JSX file,

and I comment out this code here,

and I submit this, it is submitted,

but now in the network tab,

if we opened that and submit this

we see that the request actually fails it's red

and it has this 422 status code.

Which we do send back from the API route,

if our service side validation fails.

And then that server side validation

unlike the client side application can't be tricked.

So it is good to add logic like this.

Nonetheless, I'll bring back that client side validation

because of course for the user experience,

it's better if we already validate the data

and show an error before we even send a request.

So with that back, let's now enter some valid data here.

Let's enter an email address and a name

and some texts, this is my comment and click submit.

And now this succeeds, we have the 201 status code.

And in the response we see

the message and this comment object

with the dummy ID, which was created on the backend.

We're also logging it into console here.

So this works and if we have a look at the server side log

so the terminal where we run npm run dev,

we also see that object here.

So that works and we do send that data.

Now last but not least before we then add some real logic

talking to a database to our API route,

let's also fetch comments in the comments JSX file

when we do show our comments.

Now for showing the comments

we have the toggle comments handler,

and that is executed whenever this button here is clicked.

And whenever we do show comments,

I want to load the comments

by sending a get request to these comments API route.

So I wanna trigger this part of this handler functioning.

And to achieve this we got various different ways.

We could go into this toggle comments handler function

for example, and here we changed the state

but this will not be processed instantly by React.

It will be scheduled.

And then the next line thereafter

the state will not be updated yet.

So here we could check if show comments is true

which means the current state is show comments.

Then the button was clicked and dysfunction executes again.

So the goal is to hide them now.

And therefore we could check if not show comments

which means to current status

that the comments are not shown,

then dysfunction executes

and the new state is that they will be shown.

So now we should fetch data

and that's something we could do.

Or alternatively, we use good old useEffect here

and also import that from React

and in here simply add

show comments as a dependency

and in the effect function

we then check if show comments is true

which means that comments are shown.

And if that is true, we wanna fetch the comments.

So then here we can send our request to

slash API slash comments slash event ID.

So this concrete event ID.

We don't need to configure it

because it will be a get request, not a post request.

So the default is fine.

And then we also get our data and parse that.

So that we have the real data here eventually

with which we can work.

Now once we got that data,

we wanna use the data to set the actual comments

which should be rendered here with help of comment list.

So for that we can manage another piece of state

with use state, a list of comments,

where I have my comments

and set comments to update them, like this.

And I wanna set comments once I get them.

So here in this then block

once we got a response, I'll set my comments.

And then the API route

will send back object with a comments key

which then contains this array of comments.

So when we work with that data

I wanna set comments equal to data dot comments,

to access that array of comments,

which is set in that response data package,

which has this comments key as we just saw.

That then sets that comments state

to those fetched comments.

And that means that we can then use them to render them.

So this comments state could then be passed to comment list.

Let's say through items prop, like this,

and now in comment list we need to work with this items prop

And of course you can name that prop differently.

In there I'm not expecting any props right now

but we should change this,

add the props parameter

and extract items from props.

And then we can use items to render

these list items dynamically.

So we just go through items

and map every item into a list item

with content like this.

So cut this and add it here

and get rid of these dummy list items down there.

And then here add a key on every list item

which should be item dot id

here as a text we wanna output item dot text

And for the address here, we wanna output item dot name.

So the name of the user who wrote to comment.

And with that we have our list items,

which should be rendered

and we can now check whether that works.

Let's reload this page

for a single event and click on show comments.

And we see the comments showing up there

and in the network tab,

we can also see the request there.

If I hide the comments

and I click show again they are fetched again.

And hence we see the request here

and we see that it carries the comments in the response.

I guess that's kind of obvious

because we all also a rendered them successfully here.

So it clearly works.

And these are the core tasks which I gave you solved.

We added the newsletter registration.

And now also those comments feature for storing comments

or for at least submitting the comments I guess

and for fetching the dummy comments.

Now it's not very realistic yet though

because we are only working with dummy data

and we're not storing the submitted comment anywhere.

Therefore in the next step,

let me show you an example of how we could talk

to a real database to store our data there

and to get our data from there.