Original subtitles

Okay. So now we know what API routes are,

that we can write server-side code there,

Node.js code to be specific,

that we can handle different kinds of requests,

that we can extract data,

and then run any kind of Node.js code we want.

We can then also send back a response

or different responses depending

on the kind of request sent.

And so, for example, if I still enter a request

and send it to slash API slash feedback

through the browser URL bar,

that will automatically be a get request.

Therefore, it will not trigger this if block

or it'll not make it into this if block

because the method is not post, but get.

And therefore this line of code will execute

which is why we see this response.

And now that we got this response,

of course, let me also make it crystal clear

that you can also handle incoming get requests

in whichever way you want.

So for example, here, let's say for incoming get requests

we wanna get access

to all our feedback objects that were stored

and return those as JSON.

So that in our front end application,

we could also send a behind the scenes request

to fetch all feedback entries

and display them on the screen.

So to achieve this in our API feedback route

I will basically repeat the code

from up there to get access to my file

And hence we can copy that code,

or, to avoid code duplication,

create helper functions like buildFeedbackPath, let's say,

where I simply return this file path

which I create here.

So where I return this, so that down there

we can just execute buildFeedbackPath,

and then do this again here in the else block.

And also to then get our file data,

we can create another function.

extractFeedback could be the function name and

in extractFeedback, I in the end wanna execute that code,

so we can copy that code, move that in there.

Expect the file path as a parameter,

and then simply return the parsed data as a response.

And then below here in that code, we can now get our data

by calling extract feedback and passing our file path

as a argument.

With that refactoring,

we can repeat that down here in the else block.

And then we got that extracted

and parsed feedback data in that data constant.

And hence, instead

of sending back this dummy, 'this works' message,

we could send back our feedback, our data

which we're extracting from the feedback file.

And if we do that and save this

if I now reload slash API slash feedback

we see that this also works.

But of course we typically don't add an API route

so that users have to enter them in their URL bar.

That's not the user experience we typically wanna offer.

Instead, maybe on local host slash 3000,

we wanna have a button

that loads all the stored feedback items from that API route

or with help of that API route when it's clicked.

So on index.js, below the form,

we'll add a horizontal line,

and then a button where I say load feedback.

And when that button is clicked,

I wanna send a get request to my feedback API route

to trigger this else block and get that feedback data.

For this in the front end, in index.js

in my homepage component, I add another function

which should be triggered when this new button is clicked.

And that could be the load feedback handler function.

Name is up to you.

And in there I also want to send a fetch request

to slash API feedback.

So I will actually copy

that code from up there and paste it in here,

but I will not set this configuration object

because here I do wanna send a get request.

I have no extra data that should be added to the request

and I therefore also don't need to set any headers.

So just sending a get request

by just passing in the URL is enough.

Now let's connect this loadFeedbackHandler

to this button here

through the onClick prop loadFeedbackHandler.

And then we can of course do more useful things

with our data here as well.

Currently, we're just logging it to the console.

We could also set some state

that renders the feedback items.

So let's maybe do that.

Let's import useState from react,

and let's register some state here by calling useState.

And let's say initially we have an empty array

for our feedbackItems state.

And then a setFeedbackItems updating function.

So that could be state

which we now use in the homepage component.

And now I wanna set my state whenever I did

fetch my feedback data.

So then here in the loadFeedbackHandler,

instead of logging the feedback to the console,

I'll call setFeedbackItems to update that feedback state.

And I want to update it with that data that was fetched.

Now, keep in mind that the data we're sending back

will be an object with a feedback property

which holds the actual data parsed

from the feedback JSON file.

And therefore it's this feedback property

which will give us access

to that feedback array stored in that file.

Hence, when we work with our response data on the front end,

we want to set data.feedback as our feedback items

because that is then accessing that feedback property

which is being set on the response and which therefore

does hold those feedback items in that array.

And now we're setting that state,

and we can now use that state in our homepage component

below the button to simply output an unordered list

of feedback items

which we map to list items where I then, for example,

simply output item.text, because my feedback items

as stored in feedback.json do have a text property

and these are the items we're working with here.

So we can output the text here.

And since we're mapping, also set a key

to item.id as a unique identifier per item.

With all that implemented, if we save everything again,

if I click load feedback,

you see that data shows up here.

And if I reload the page and open the network tab

you see that if I click load feedback,

a request is sent to feedback.

It's a get request to my domain slash API slash feedback

and there on the response you see

we got that feedback data as JSON.

So that is how we can then also send a get request

to a API route.

And the special thing here is

that we do this behind the scenes

with JavaScript on the already loaded page.