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.