Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,040 --> 00:00:05,760
Okay. So now we know what API routes are,
2
00:00:05,760 --> 00:00:08,070
that we can write server-side code there,
3
00:00:08,070 --> 00:00:10,630
Node.js code to be specific,
4
00:00:10,630 --> 00:00:13,730
that we can handle different kinds of requests,
5
00:00:13,730 --> 00:00:15,170
that we can extract data,
6
00:00:15,170 --> 00:00:19,050
and then run any kind of Node.js code we want.
7
00:00:19,050 --> 00:00:20,970
We can then also send back a response
8
00:00:20,970 --> 00:00:23,420
or different responses depending
9
00:00:23,420 --> 00:00:25,760
on the kind of request sent.
10
00:00:25,760 --> 00:00:28,870
And so, for example, if I still enter a request
11
00:00:28,870 --> 00:00:31,770
and send it to slash API slash feedback
12
00:00:31,770 --> 00:00:34,980
through the browser URL bar,
13
00:00:34,980 --> 00:00:37,710
that will automatically be a get request.
14
00:00:37,710 --> 00:00:40,680
Therefore, it will not trigger this if block
15
00:00:40,680 --> 00:00:43,730
or it'll not make it into this if block
16
00:00:43,730 --> 00:00:46,670
because the method is not post, but get.
17
00:00:46,670 --> 00:00:49,410
And therefore this line of code will execute
18
00:00:49,410 --> 00:00:51,623
which is why we see this response.
19
00:00:52,560 --> 00:00:54,490
And now that we got this response,
20
00:00:54,490 --> 00:00:57,440
of course, let me also make it crystal clear
21
00:00:57,440 --> 00:01:00,410
that you can also handle incoming get requests
22
00:01:00,410 --> 00:01:02,140
in whichever way you want.
23
00:01:02,140 --> 00:01:06,260
So for example, here, let's say for incoming get requests
24
00:01:06,260 --> 00:01:08,170
we wanna get access
25
00:01:08,170 --> 00:01:13,160
to all our feedback objects that were stored
26
00:01:13,160 --> 00:01:16,050
and return those as JSON.
27
00:01:16,050 --> 00:01:18,470
So that in our front end application,
28
00:01:18,470 --> 00:01:21,750
we could also send a behind the scenes request
29
00:01:21,750 --> 00:01:25,080
to fetch all feedback entries
30
00:01:25,080 --> 00:01:27,870
and display them on the screen.
31
00:01:27,870 --> 00:01:31,690
So to achieve this in our API feedback route
32
00:01:31,690 --> 00:01:33,980
I will basically repeat the code
33
00:01:33,980 --> 00:01:37,340
from up there to get access to my file
34
00:01:37,340 --> 00:01:40,070
And hence we can copy that code,
35
00:01:40,070 --> 00:01:42,900
or, to avoid code duplication,
36
00:01:42,900 --> 00:01:47,900
create helper functions like buildFeedbackPath, let's say,
37
00:01:49,470 --> 00:01:53,530
where I simply return this file path
38
00:01:53,530 --> 00:01:54,800
which I create here.
39
00:01:54,800 --> 00:01:59,270
So where I return this, so that down there
40
00:01:59,270 --> 00:02:02,173
we can just execute buildFeedbackPath,
41
00:02:03,440 --> 00:02:05,783
and then do this again here in the else block.
42
00:02:06,810 --> 00:02:11,670
And also to then get our file data,
43
00:02:11,670 --> 00:02:13,923
we can create another function.
44
00:02:15,960 --> 00:02:20,120
extractFeedback could be the function name and
45
00:02:20,120 --> 00:02:24,667
in extractFeedback, I in the end wanna execute that code,
46
00:02:25,920 --> 00:02:29,940
so we can copy that code, move that in there.
47
00:02:29,940 --> 00:02:33,480
Expect the file path as a parameter,
48
00:02:33,480 --> 00:02:37,443
and then simply return the parsed data as a response.
49
00:02:39,530 --> 00:02:44,530
And then below here in that code, we can now get our data
50
00:02:44,650 --> 00:02:48,890
by calling extract feedback and passing our file path
51
00:02:48,890 --> 00:02:50,570
as a argument.
52
00:02:50,570 --> 00:02:51,840
With that refactoring,
53
00:02:51,840 --> 00:02:56,480
we can repeat that down here in the else block.
54
00:02:56,480 --> 00:02:58,450
And then we got that extracted
55
00:02:58,450 --> 00:03:02,290
and parsed feedback data in that data constant.
56
00:03:02,290 --> 00:03:03,350
And hence, instead
57
00:03:03,350 --> 00:03:06,830
of sending back this dummy, 'this works' message,
58
00:03:06,830 --> 00:03:10,200
we could send back our feedback, our data
59
00:03:10,200 --> 00:03:12,673
which we're extracting from the feedback file.
60
00:03:13,610 --> 00:03:16,210
And if we do that and save this
61
00:03:16,210 --> 00:03:19,740
if I now reload slash API slash feedback
62
00:03:19,740 --> 00:03:21,763
we see that this also works.
63
00:03:22,630 --> 00:03:26,300
But of course we typically don't add an API route
64
00:03:26,300 --> 00:03:31,300
so that users have to enter them in their URL bar.
65
00:03:31,750 --> 00:03:35,470
That's not the user experience we typically wanna offer.
66
00:03:35,470 --> 00:03:38,800
Instead, maybe on local host slash 3000,
67
00:03:38,800 --> 00:03:40,750
we wanna have a button
68
00:03:40,750 --> 00:03:45,750
that loads all the stored feedback items from that API route
69
00:03:46,160 --> 00:03:50,050
or with help of that API route when it's clicked.
70
00:03:50,050 --> 00:03:54,120
So on index.js, below the form,
71
00:03:54,120 --> 00:03:55,800
we'll add a horizontal line,
72
00:03:55,800 --> 00:03:58,870
and then a button where I say load feedback.
73
00:03:58,870 --> 00:04:00,520
And when that button is clicked,
74
00:04:00,520 --> 00:04:04,430
I wanna send a get request to my feedback API route
75
00:04:04,430 --> 00:04:07,823
to trigger this else block and get that feedback data.
76
00:04:08,840 --> 00:04:11,630
For this in the front end, in index.js
77
00:04:11,630 --> 00:04:15,460
in my homepage component, I add another function
78
00:04:15,460 --> 00:04:19,190
which should be triggered when this new button is clicked.
79
00:04:19,190 --> 00:04:22,750
And that could be the load feedback handler function.
80
00:04:22,750 --> 00:04:24,680
Name is up to you.
81
00:04:24,680 --> 00:04:27,440
And in there I also want to send a fetch request
82
00:04:27,440 --> 00:04:29,750
to slash API feedback.
83
00:04:29,750 --> 00:04:31,040
So I will actually copy
84
00:04:31,040 --> 00:04:34,460
that code from up there and paste it in here,
85
00:04:34,460 --> 00:04:38,220
but I will not set this configuration object
86
00:04:38,220 --> 00:04:41,130
because here I do wanna send a get request.
87
00:04:41,130 --> 00:04:45,020
I have no extra data that should be added to the request
88
00:04:45,020 --> 00:04:49,130
and I therefore also don't need to set any headers.
89
00:04:49,130 --> 00:04:51,580
So just sending a get request
90
00:04:51,580 --> 00:04:54,623
by just passing in the URL is enough.
91
00:04:55,600 --> 00:04:58,230
Now let's connect this loadFeedbackHandler
92
00:04:58,230 --> 00:04:59,700
to this button here
93
00:04:59,700 --> 00:05:03,210
through the onClick prop loadFeedbackHandler.
94
00:05:06,290 --> 00:05:09,200
And then we can of course do more useful things
95
00:05:09,200 --> 00:05:11,450
with our data here as well.
96
00:05:11,450 --> 00:05:14,030
Currently, we're just logging it to the console.
97
00:05:14,030 --> 00:05:15,660
We could also set some state
98
00:05:15,660 --> 00:05:17,960
that renders the feedback items.
99
00:05:17,960 --> 00:05:19,260
So let's maybe do that.
100
00:05:19,260 --> 00:05:22,310
Let's import useState from react,
101
00:05:22,310 --> 00:05:26,243
and let's register some state here by calling useState.
102
00:05:27,220 --> 00:05:29,530
And let's say initially we have an empty array
103
00:05:30,616 --> 00:05:33,150
for our feedbackItems state.
104
00:05:33,150 --> 00:05:37,100
And then a setFeedbackItems updating function.
105
00:05:37,100 --> 00:05:38,240
So that could be state
106
00:05:38,240 --> 00:05:40,760
which we now use in the homepage component.
107
00:05:40,760 --> 00:05:43,380
And now I wanna set my state whenever I did
108
00:05:43,380 --> 00:05:45,400
fetch my feedback data.
109
00:05:45,400 --> 00:05:48,410
So then here in the loadFeedbackHandler,
110
00:05:48,410 --> 00:05:50,990
instead of logging the feedback to the console,
111
00:05:50,990 --> 00:05:55,760
I'll call setFeedbackItems to update that feedback state.
112
00:05:55,760 --> 00:05:59,460
And I want to update it with that data that was fetched.
113
00:05:59,460 --> 00:06:01,960
Now, keep in mind that the data we're sending back
114
00:06:01,960 --> 00:06:04,620
will be an object with a feedback property
115
00:06:04,620 --> 00:06:07,170
which holds the actual data parsed
116
00:06:07,170 --> 00:06:09,050
from the feedback JSON file.
117
00:06:09,050 --> 00:06:11,600
And therefore it's this feedback property
118
00:06:11,600 --> 00:06:12,690
which will give us access
119
00:06:12,690 --> 00:06:16,060
to that feedback array stored in that file.
120
00:06:16,060 --> 00:06:19,570
Hence, when we work with our response data on the front end,
121
00:06:19,570 --> 00:06:24,000
we want to set data.feedback as our feedback items
122
00:06:24,000 --> 00:06:27,640
because that is then accessing that feedback property
123
00:06:27,640 --> 00:06:30,880
which is being set on the response and which therefore
124
00:06:30,880 --> 00:06:34,223
does hold those feedback items in that array.
125
00:06:35,700 --> 00:06:37,440
And now we're setting that state,
126
00:06:37,440 --> 00:06:40,620
and we can now use that state in our homepage component
127
00:06:40,620 --> 00:06:44,380
below the button to simply output an unordered list
128
00:06:44,380 --> 00:06:48,240
of feedback items
129
00:06:48,240 --> 00:06:53,240
which we map to list items where I then, for example,
130
00:06:53,550 --> 00:06:58,550
simply output item.text, because my feedback items
131
00:06:59,040 --> 00:07:03,220
as stored in feedback.json do have a text property
132
00:07:03,220 --> 00:07:06,110
and these are the items we're working with here.
133
00:07:06,110 --> 00:07:08,330
So we can output the text here.
134
00:07:08,330 --> 00:07:10,430
And since we're mapping, also set a key
135
00:07:10,430 --> 00:07:14,943
to item.id as a unique identifier per item.
136
00:07:15,900 --> 00:07:19,060
With all that implemented, if we save everything again,
137
00:07:19,060 --> 00:07:20,730
if I click load feedback,
138
00:07:20,730 --> 00:07:23,400
you see that data shows up here.
139
00:07:23,400 --> 00:07:26,360
And if I reload the page and open the network tab
140
00:07:26,360 --> 00:07:28,280
you see that if I click load feedback,
141
00:07:28,280 --> 00:07:30,830
a request is sent to feedback.
142
00:07:30,830 --> 00:07:35,830
It's a get request to my domain slash API slash feedback
143
00:07:36,080 --> 00:07:38,200
and there on the response you see
144
00:07:38,200 --> 00:07:41,420
we got that feedback data as JSON.
145
00:07:41,420 --> 00:07:44,920
So that is how we can then also send a get request
146
00:07:44,920 --> 00:07:46,720
to a API route.
147
00:07:46,720 --> 00:07:48,110
And the special thing here is
148
00:07:48,110 --> 00:07:50,670
that we do this behind the scenes
149
00:07:50,670 --> 00:07:54,163
with JavaScript on the already loaded page.
11759
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.