1
00:00:02,000 --> 00:00:05,000
Okay. So now we know what API routes are,

2
00:00:05,000 --> 00:00:08,000
that we can write server-side code there,

3
00:00:08,000 --> 00:00:10,000
Node.js code to be specific,

4
00:00:10,000 --> 00:00:13,000
that we can handle different kinds of requests,

5
00:00:13,000 --> 00:00:15,000
that we can extract data,

6
00:00:15,000 --> 00:00:19,000
and then run any kind of Node.js code we want.

7
00:00:19,000 --> 00:00:20,000
We can then also send back a response

8
00:00:20,000 --> 00:00:23,000
or different responses depending

9
00:00:23,000 --> 00:00:25,000
on the kind of request sent.

10
00:00:25,000 --> 00:00:28,000
And so, for example, if I still enter a request

11
00:00:28,000 --> 00:00:31,000
and send it to slash API slash feedback

12
00:00:31,000 --> 00:00:34,000
through the browser URL bar,

13
00:00:34,000 --> 00:00:37,000
that will automatically be a get request.

14
00:00:37,000 --> 00:00:40,000
Therefore, it will not trigger this if block

15
00:00:40,000 --> 00:00:43,000
or it'll not make it into this if block

16
00:00:43,000 --> 00:00:46,000
because the method is not post, but get.

17
00:00:46,000 --> 00:00:49,000
And therefore this line of code will execute

18
00:00:49,000 --> 00:00:51,000
which is why we see this response.

19
00:00:52,000 --> 00:00:54,000
And now that we got this response,

20
00:00:54,000 --> 00:00:57,000
of course, let me also make it crystal clear

21
00:00:57,000 --> 00:01:00,000
that you can also handle incoming get requests

22
00:01:00,000 --> 00:01:02,000
in whichever way you want.

23
00:01:02,000 --> 00:01:06,000
So for example, here, let's say for incoming get requests

24
00:01:06,000 --> 00:01:08,000
we wanna get access

25
00:01:08,000 --> 00:01:13,000
to all our feedback objects that were stored

26
00:01:13,000 --> 00:01:16,000
and return those as JSON.

27
00:01:16,000 --> 00:01:18,000
So that in our front end application,

28
00:01:18,000 --> 00:01:21,000
we could also send a behind the scenes request

29
00:01:21,000 --> 00:01:25,000
to fetch all feedback entries

30
00:01:25,000 --> 00:01:27,000
and display them on the screen.

31
00:01:27,000 --> 00:01:31,000
So to achieve this in our API feedback route

32
00:01:31,000 --> 00:01:33,000
I will basically repeat the code

33
00:01:33,000 --> 00:01:37,000
from up there to get access to my file

34
00:01:37,000 --> 00:01:40,000
And hence we can copy that code,

35
00:01:40,000 --> 00:01:42,000
or, to avoid code duplication,

36
00:01:42,000 --> 00:01:47,000
create helper functions like buildFeedbackPath, let's say,

37
00:01:49,000 --> 00:01:53,000
where I simply return this file path

38
00:01:53,000 --> 00:01:54,000
which I create here.

39
00:01:54,000 --> 00:01:59,000
So where I return this, so that down there

40
00:01:59,000 --> 00:02:02,000
we can just execute buildFeedbackPath,

41
00:02:03,000 --> 00:02:05,000
and then do this again here in the else block.

42
00:02:06,000 --> 00:02:11,000
And also to then get our file data,

43
00:02:11,000 --> 00:02:13,000
we can create another function.

44
00:02:15,000 --> 00:02:20,000
extractFeedback could be the function name and

45
00:02:20,000 --> 00:02:24,000
in extractFeedback, I in the end wanna execute that code,

46
00:02:25,000 --> 00:02:29,000
so we can copy that code, move that in there.

47
00:02:29,000 --> 00:02:33,000
Expect the file path as a parameter,

48
00:02:33,000 --> 00:02:37,000
and then simply return the parsed data as a response.

49
00:02:39,000 --> 00:02:44,000
And then below here in that code, we can now get our data

50
00:02:44,000 --> 00:02:48,000
by calling extract feedback and passing our file path

51
00:02:48,000 --> 00:02:50,000
as a argument.

52
00:02:50,000 --> 00:02:51,000
With that refactoring,

53
00:02:51,000 --> 00:02:56,000
we can repeat that down here in the else block.

54
00:02:56,000 --> 00:02:58,000
And then we got that extracted

55
00:02:58,000 --> 00:03:02,000
and parsed feedback data in that data constant.

56
00:03:02,000 --> 00:03:03,000
And hence, instead

57
00:03:03,000 --> 00:03:06,000
of sending back this dummy, 'this works' message,

58
00:03:06,000 --> 00:03:10,000
we could send back our feedback, our data

59
00:03:10,000 --> 00:03:12,000
which we're extracting from the feedback file.

60
00:03:13,000 --> 00:03:16,000
And if we do that and save this

61
00:03:16,000 --> 00:03:19,000
if I now reload slash API slash feedback

62
00:03:19,000 --> 00:03:21,000
we see that this also works.

63
00:03:22,000 --> 00:03:26,000
But of course we typically don't add an API route

64
00:03:26,000 --> 00:03:31,000
so that users have to enter them in their URL bar.

65
00:03:31,000 --> 00:03:35,000
That's not the user experience we typically wanna offer.

66
00:03:35,000 --> 00:03:38,000
Instead, maybe on local host slash 3000,

67
00:03:38,000 --> 00:03:40,000
we wanna have a button

68
00:03:40,000 --> 00:03:45,000
that loads all the stored feedback items from that API route

69
00:03:46,000 --> 00:03:50,000
or with help of that API route when it's clicked.

70
00:03:50,000 --> 00:03:54,000
So on index.js, below the form,

71
00:03:54,000 --> 00:03:55,000
we'll add a horizontal line,

72
00:03:55,000 --> 00:03:58,000
and then a button where I say load feedback.

73
00:03:58,000 --> 00:04:00,000
And when that button is clicked,

74
00:04:00,000 --> 00:04:04,000
I wanna send a get request to my feedback API route

75
00:04:04,000 --> 00:04:07,000
to trigger this else block and get that feedback data.

76
00:04:08,000 --> 00:04:11,000
For this in the front end, in index.js

77
00:04:11,000 --> 00:04:15,000
in my homepage component, I add another function

78
00:04:15,000 --> 00:04:19,000
which should be triggered when this new button is clicked.

79
00:04:19,000 --> 00:04:22,000
And that could be the load feedback handler function.

80
00:04:22,000 --> 00:04:24,000
Name is up to you.

81
00:04:24,000 --> 00:04:27,000
And in there I also want to send a fetch request

82
00:04:27,000 --> 00:04:29,000
to slash API feedback.

83
00:04:29,000 --> 00:04:31,000
So I will actually copy

84
00:04:31,000 --> 00:04:34,000
that code from up there and paste it in here,

85
00:04:34,000 --> 00:04:38,000
but I will not set this configuration object

86
00:04:38,000 --> 00:04:41,000
because here I do wanna send a get request.

87
00:04:41,000 --> 00:04:45,000
I have no extra data that should be added to the request

88
00:04:45,000 --> 00:04:49,000
and I therefore also don't need to set any headers.

89
00:04:49,000 --> 00:04:51,000
So just sending a get request

90
00:04:51,000 --> 00:04:54,000
by just passing in the URL is enough.

91
00:04:55,000 --> 00:04:58,000
Now let's connect this loadFeedbackHandler

92
00:04:58,000 --> 00:04:59,000
to this button here

93
00:04:59,000 --> 00:05:03,000
through the onClick prop loadFeedbackHandler.

94
00:05:06,000 --> 00:05:09,000
And then we can of course do more useful things

95
00:05:09,000 --> 00:05:11,000
with our data here as well.

96
00:05:11,000 --> 00:05:14,000
Currently, we're just logging it to the console.

97
00:05:14,000 --> 00:05:15,000
We could also set some state

98
00:05:15,000 --> 00:05:17,000
that renders the feedback items.

99
00:05:17,000 --> 00:05:19,000
So let's maybe do that.

100
00:05:19,000 --> 00:05:22,000
Let's import useState from react,

101
00:05:22,000 --> 00:05:26,000
and let's register some state here by calling useState.

102
00:05:27,000 --> 00:05:29,000
And let's say initially we have an empty array

103
00:05:30,000 --> 00:05:33,000
for our feedbackItems state.

104
00:05:33,000 --> 00:05:37,000
And then a setFeedbackItems updating function.

105
00:05:37,000 --> 00:05:38,000
So that could be state

106
00:05:38,000 --> 00:05:40,000
which we now use in the homepage component.

107
00:05:40,000 --> 00:05:43,000
And now I wanna set my state whenever I did

108
00:05:43,000 --> 00:05:45,000
fetch my feedback data.

109
00:05:45,000 --> 00:05:48,000
So then here in the loadFeedbackHandler,

110
00:05:48,000 --> 00:05:50,000
instead of logging the feedback to the console,

111
00:05:50,000 --> 00:05:55,000
I'll call setFeedbackItems to update that feedback state.

112
00:05:55,000 --> 00:05:59,000
And I want to update it with that data that was fetched.

113
00:05:59,000 --> 00:06:01,000
Now, keep in mind that the data we're sending back

114
00:06:01,000 --> 00:06:04,000
will be an object with a feedback property

115
00:06:04,000 --> 00:06:07,000
which holds the actual data parsed

116
00:06:07,000 --> 00:06:09,000
from the feedback JSON file.

117
00:06:09,000 --> 00:06:11,000
And therefore it's this feedback property

118
00:06:11,000 --> 00:06:12,000
which will give us access

119
00:06:12,000 --> 00:06:16,000
to that feedback array stored in that file.

120
00:06:16,000 --> 00:06:19,000
Hence, when we work with our response data on the front end,

121
00:06:19,000 --> 00:06:24,000
we want to set data.feedback as our feedback items

122
00:06:24,000 --> 00:06:27,000
because that is then accessing that feedback property

123
00:06:27,000 --> 00:06:30,000
which is being set on the response and which therefore

124
00:06:30,000 --> 00:06:34,000
does hold those feedback items in that array.

125
00:06:35,000 --> 00:06:37,000
And now we're setting that state,

126
00:06:37,000 --> 00:06:40,000
and we can now use that state in our homepage component

127
00:06:40,000 --> 00:06:44,000
below the button to simply output an unordered list

128
00:06:44,000 --> 00:06:48,000
of feedback items

129
00:06:48,000 --> 00:06:53,000
which we map to list items where I then, for example,

130
00:06:53,000 --> 00:06:58,000
simply output item.text, because my feedback items

131
00:06:59,000 --> 00:07:03,000
as stored in feedback.json do have a text property

132
00:07:03,000 --> 00:07:06,000
and these are the items we're working with here.

133
00:07:06,000 --> 00:07:08,000
So we can output the text here.

134
00:07:08,000 --> 00:07:10,000
And since we're mapping, also set a key

135
00:07:10,000 --> 00:07:14,000
to item.id as a unique identifier per item.

136
00:07:15,000 --> 00:07:19,000
With all that implemented, if we save everything again,

137
00:07:19,000 --> 00:07:20,000
if I click load feedback,

138
00:07:20,000 --> 00:07:23,000
you see that data shows up here.

139
00:07:23,000 --> 00:07:26,000
And if I reload the page and open the network tab

140
00:07:26,000 --> 00:07:28,000
you see that if I click load feedback,

141
00:07:28,000 --> 00:07:30,000
a request is sent to feedback.

142
00:07:30,000 --> 00:07:35,000
It's a get request to my domain slash API slash feedback

143
00:07:36,000 --> 00:07:38,000
and there on the response you see

144
00:07:38,000 --> 00:07:41,000
we got that feedback data as JSON.

145
00:07:41,000 --> 00:07:44,000
So that is how we can then also send a get request

146
00:07:44,000 --> 00:07:46,000
to a API route.

147
00:07:46,000 --> 00:07:48,000
And the special thing here is

148
00:07:48,000 --> 00:07:50,000
that we do this behind the scenes

149
00:07:50,000 --> 00:07:54,000
with JavaScript on the already loaded page.