Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,150 --> 00:00:03,790
Now, we don't just have the quotes,
2
00:00:03,790 --> 00:00:05,490
we also have the comments.
3
00:00:05,490 --> 00:00:08,500
And here we're not really sending
4
00:00:08,500 --> 00:00:11,340
or storing or using any comments.
5
00:00:11,340 --> 00:00:13,883
That's the last thing I wanna change here.
6
00:00:14,760 --> 00:00:18,950
For this we can start in this comments component here.
7
00:00:18,950 --> 00:00:20,830
There we have this button
8
00:00:20,830 --> 00:00:23,060
which allows us to start adding comments,
9
00:00:23,060 --> 00:00:26,590
and that will then render this new comment form here.
10
00:00:26,590 --> 00:00:29,130
Now, this new comment form here
11
00:00:29,130 --> 00:00:32,040
actually has this submit form handler,
12
00:00:32,040 --> 00:00:37,040
where we wanna, well, send our comment data to a server.
13
00:00:37,300 --> 00:00:38,800
And therefore we can do that.
14
00:00:38,800 --> 00:00:43,320
We can import the use HTTP hook again
15
00:00:43,320 --> 00:00:47,850
from going up to hooks, use HTTP,
16
00:00:47,850 --> 00:00:52,850
and import a function from that API file, to be precise,
17
00:00:53,600 --> 00:00:57,963
it's the add comment function.
18
00:00:58,860 --> 00:01:01,200
And then here in the new comment form component
19
00:01:01,200 --> 00:01:05,820
we can call our custom hook and pass, add comment to it,
20
00:01:05,820 --> 00:01:08,230
so a pointer at this function.
21
00:01:08,230 --> 00:01:12,840
And then just get back the send request function
22
00:01:12,840 --> 00:01:14,253
and the status.
23
00:01:15,690 --> 00:01:16,640
And then here,
24
00:01:16,640 --> 00:01:20,800
I wanna send my request in the submit form handler.
25
00:01:20,800 --> 00:01:23,600
Now, this request, which we're sending here,
26
00:01:23,600 --> 00:01:26,910
this add comment function wants to comment data
27
00:01:26,910 --> 00:01:30,510
and the quote ID to which this comment belongs,
28
00:01:30,510 --> 00:01:34,660
because every comment is mapped to a specific quote.
29
00:01:34,660 --> 00:01:37,780
Now, therefore in this new comment component here,
30
00:01:37,780 --> 00:01:42,000
for a send request, here to send request,
31
00:01:42,000 --> 00:01:44,650
I wanna pass an object with my comment data,
32
00:01:44,650 --> 00:01:46,580
and here I'll keep it simple in a comment,
33
00:01:46,580 --> 00:01:48,210
we'll just have a text field
34
00:01:48,210 --> 00:01:51,190
which then holds this entered text
35
00:01:51,190 --> 00:01:56,190
which we can get like this by adding an enter text constant
36
00:01:56,420 --> 00:02:00,700
where I get the entered text from my comment text ref.
37
00:02:00,700 --> 00:02:04,193
So from this ref, which is connected to this text area here,
38
00:02:05,542 --> 00:02:07,330
and then there with.current.value
39
00:02:07,330 --> 00:02:09,009
we can get the entered value,
40
00:02:09,009 --> 00:02:12,453
and that's then the text which I send with my request.
41
00:02:13,560 --> 00:02:15,940
With that, the status will also change.
42
00:02:15,940 --> 00:02:18,200
It will change to pending
43
00:02:18,200 --> 00:02:20,450
as long as the request is on its way.
44
00:02:20,450 --> 00:02:24,220
And we can utilize this to output some loading spinner here.
45
00:02:24,220 --> 00:02:25,730
Instead of the form,
46
00:02:25,730 --> 00:02:30,730
we can check if status is equal to pending.
47
00:02:32,320 --> 00:02:33,540
And if that's the case,
48
00:02:33,540 --> 00:02:36,650
then I output a div here with a class name
49
00:02:36,650 --> 00:02:40,903
of centered and the loading spinner inside of it.
50
00:02:42,400 --> 00:02:44,240
So now we'll show a little loading spinner
51
00:02:44,240 --> 00:02:47,793
on top of this form, as long as the request is on its way.
52
00:02:48,720 --> 00:02:50,420
Now, once the request is done,
53
00:02:50,420 --> 00:02:53,870
I wanna notify the comments component,
54
00:02:53,870 --> 00:02:56,430
so the parent component of this component
55
00:02:56,430 --> 00:02:59,250
that we're done adding a comment.
56
00:02:59,250 --> 00:03:02,353
For this, we can use the use effect hook here,
57
00:03:03,740 --> 00:03:05,750
and register a new effect
58
00:03:05,750 --> 00:03:08,820
in this new comment form component.
59
00:03:08,820 --> 00:03:10,610
And the fact which should trigger
60
00:03:10,610 --> 00:03:13,350
whenever our status changes.
61
00:03:13,350 --> 00:03:14,760
And here I'll simply check
62
00:03:14,760 --> 00:03:18,100
if the status is equal to complete it.
63
00:03:18,100 --> 00:03:19,440
And we also might wanna check
64
00:03:19,440 --> 00:03:21,280
if we don't have an error here,
65
00:03:21,280 --> 00:03:25,040
simply by also using this error data piece which we get.
66
00:03:25,040 --> 00:03:27,490
So here, I'll also add this as a dependency
67
00:03:27,490 --> 00:03:32,050
and check that we're done and we don't have an error.
68
00:03:32,050 --> 00:03:35,600
And then in here, I wanna call a function
69
00:03:35,600 --> 00:03:37,940
which I expect to get fruit props
70
00:03:37,940 --> 00:03:39,943
to notify the parent component,
71
00:03:39,943 --> 00:03:42,860
with just this comments component, about the fact
72
00:03:42,860 --> 00:03:45,290
that we're done adding a new comment,
73
00:03:45,290 --> 00:03:48,520
and data should re-fetch comments therefore.
74
00:03:48,520 --> 00:03:53,520
We can do this by extracting a prop from our props,
75
00:03:53,630 --> 00:03:57,513
maybe a prop named on added comment,
76
00:03:58,460 --> 00:04:01,200
and then calling this here as a function,
77
00:04:01,200 --> 00:04:05,290
and adding it as a dependency to this array of dependencies.
78
00:04:05,290 --> 00:04:07,580
So I expect that on this prop,
79
00:04:07,580 --> 00:04:10,010
I get a function and I call this function
80
00:04:10,010 --> 00:04:12,360
once we're done adding a comment.
81
00:04:12,360 --> 00:04:15,720
And then we can do whatever we wanna do when that happens
82
00:04:15,720 --> 00:04:17,300
in the parent component,
83
00:04:17,300 --> 00:04:20,483
which does define that function we get here.
84
00:04:22,010 --> 00:04:23,830
Now, before that'll work though,
85
00:04:23,830 --> 00:04:26,070
there's one more thing we have to do here
86
00:04:26,070 --> 00:04:28,430
on send request, actually.
87
00:04:28,430 --> 00:04:31,270
We're sending a request with our comment data,
88
00:04:31,270 --> 00:04:36,080
but keep in mind that add comment also wants the quote ID.
89
00:04:36,080 --> 00:04:40,010
So we also need to send the quote ID along.
90
00:04:40,010 --> 00:04:43,750
And for getting access to this ID, we got two options.
91
00:04:43,750 --> 00:04:45,980
We can use the use parents hook
92
00:04:45,980 --> 00:04:49,150
which we import from react router dom.
93
00:04:49,150 --> 00:04:50,440
This gives us access
94
00:04:50,440 --> 00:04:53,370
to the currently active params in the URL.
95
00:04:53,370 --> 00:04:55,880
And we can use this in any component.
96
00:04:55,880 --> 00:04:59,310
So also in this nested form component.
97
00:04:59,310 --> 00:05:01,715
And that would then give us quick and easy access
98
00:05:01,715 --> 00:05:03,893
to the active quote ID.
99
00:05:05,380 --> 00:05:07,700
It of course means that we're now only able
100
00:05:07,700 --> 00:05:10,410
to use this new comment form component
101
00:05:10,410 --> 00:05:15,410
in a place where the URL will contain that quote ID.
102
00:05:15,810 --> 00:05:18,840
We can't embed it anywhere else in the page
103
00:05:18,840 --> 00:05:22,930
where the URL might not include that quote ID.
104
00:05:22,930 --> 00:05:26,740
So that's a restriction which we now add to this component,
105
00:05:26,740 --> 00:05:28,860
and that might be fine.
106
00:05:28,860 --> 00:05:31,650
We can make this component more reusable
107
00:05:31,650 --> 00:05:36,520
and independent from the URL if we not use, use params,
108
00:05:36,520 --> 00:05:40,890
but instead expect to get that quote ID through props.
109
00:05:40,890 --> 00:05:42,950
And that's simply an alternative,
110
00:05:42,950 --> 00:05:44,170
and it simply depends
111
00:05:44,170 --> 00:05:47,900
on how flexible you wanna make that component.
112
00:05:47,900 --> 00:05:51,820
If it should be super flexible, you wanna use props.
113
00:05:51,820 --> 00:05:54,650
If you're fine with restricting it
114
00:05:54,650 --> 00:05:57,310
to be used in places where the URL
115
00:05:57,310 --> 00:06:00,250
contains that ID only, that's fine as well.
116
00:06:00,250 --> 00:06:02,120
If that restriction is okay,
117
00:06:02,120 --> 00:06:05,160
and if you never used that component anywhere else,
118
00:06:05,160 --> 00:06:08,570
then using use params is of course fine.
119
00:06:08,570 --> 00:06:11,930
Here I'll go for the props solution.
120
00:06:11,930 --> 00:06:15,000
And hence, when I sent the request,
121
00:06:15,000 --> 00:06:19,070
I will add a second argument here
122
00:06:19,070 --> 00:06:23,090
to this send request function and pass props,
123
00:06:23,090 --> 00:06:25,870
quote ID as a value.
124
00:06:25,870 --> 00:06:30,100
And now I of course expect to get the quote ID as a prop,
125
00:06:30,100 --> 00:06:34,690
just as I expect to get a on added comment prop.
126
00:06:34,690 --> 00:06:35,860
And hence, now we can go
127
00:06:35,860 --> 00:06:39,830
to the comments JS file and add those props.
128
00:06:39,830 --> 00:06:43,000
Here when I render the new comments form,
129
00:06:43,000 --> 00:06:45,420
I wanna set the quote ID prop
130
00:06:45,420 --> 00:06:49,240
and the on added comment prop.
131
00:06:49,240 --> 00:06:52,840
The on added comment prop should point at a function,
132
00:06:52,840 --> 00:06:55,830
which is executed when a comment was added.
133
00:06:55,830 --> 00:06:59,750
The quote ID prop should forward the, well, quote ID.
134
00:06:59,750 --> 00:07:01,740
Now, let's start with the quote ID.
135
00:07:01,740 --> 00:07:03,850
For that in this comments component,
136
00:07:03,850 --> 00:07:08,570
I can use use params, and here, that should be fine
137
00:07:08,570 --> 00:07:12,540
because I know that I will always only use this component
138
00:07:12,540 --> 00:07:16,233
in a place where the URL contains my parameter.
139
00:07:17,080 --> 00:07:20,080
And then here I get the params by calling use params.
140
00:07:20,080 --> 00:07:23,740
Of course, you need to import use params as well.
141
00:07:23,740 --> 00:07:26,560
And then we can pass the quote ID,
142
00:07:26,560 --> 00:07:29,883
simply by accessing params.quote ID, like this.
143
00:07:30,990 --> 00:07:35,450
Now, for on added comment, we can add a new function,
144
00:07:35,450 --> 00:07:39,373
the added comment handler function,
145
00:07:40,540 --> 00:07:43,300
and I'll pass a pointer at this function
146
00:07:43,300 --> 00:07:45,083
as a value for this prop.
147
00:07:46,200 --> 00:07:48,080
Now we just need to add more logic
148
00:07:48,080 --> 00:07:49,930
to this comments function.
149
00:07:49,930 --> 00:07:54,930
To be precise, I wanna add logic for fetching my comments,
150
00:07:55,140 --> 00:07:58,983
fetching the comments for a given quote ID to be precise.
151
00:07:59,920 --> 00:08:04,040
Now, to fetch the comments for a specific quote ID,
152
00:08:04,040 --> 00:08:06,610
we again can use the HTTP hook
153
00:08:06,610 --> 00:08:10,260
and a function provided in the API file.
154
00:08:10,260 --> 00:08:15,260
So I'll import use HTTP from going up, going up, hooks,
155
00:08:16,000 --> 00:08:20,250
use HTTP, and I'll import a function from going up,
156
00:08:20,250 --> 00:08:23,750
going up, lib API.
157
00:08:23,750 --> 00:08:27,363
And the function which I wanna use here is get all comments.
158
00:08:28,680 --> 00:08:30,940
Now, as we did it many times before,
159
00:08:30,940 --> 00:08:34,480
we can call our custom hook and pass a pointer
160
00:08:34,480 --> 00:08:38,830
at the request function, it should eventually execute to it.
161
00:08:38,830 --> 00:08:41,393
And then simply extract some data here.
162
00:08:42,429 --> 00:08:46,280
I get my send request function
163
00:08:46,280 --> 00:08:50,650
and my status and the data, which are my loaded comments.
164
00:08:50,650 --> 00:08:54,400
And we could also get the error to add error handling.
165
00:08:54,400 --> 00:08:57,510
But since this is already becoming a bit more complex here,
166
00:08:57,510 --> 00:08:59,970
I'll focus on the core functionality
167
00:08:59,970 --> 00:09:03,313
and on working with that data and sending that request.
168
00:09:04,210 --> 00:09:06,330
So these are the data pieces
169
00:09:06,330 --> 00:09:10,870
which I extract from the return value of my custom hook.
170
00:09:10,870 --> 00:09:14,290
Now, I wanna send a request to fetch my comments
171
00:09:14,290 --> 00:09:19,290
whenever this component loaded or changed.
172
00:09:19,720 --> 00:09:24,720
Hence we can again use, use effect, and register.
173
00:09:26,130 --> 00:09:27,443
And effect here.
174
00:09:29,380 --> 00:09:31,780
And the effect function
175
00:09:31,780 --> 00:09:34,970
should send a request to load our comments.
176
00:09:34,970 --> 00:09:37,203
So I wanna call send request here.
177
00:09:38,740 --> 00:09:41,670
Now, this get all comments function needs to know
178
00:09:41,670 --> 00:09:44,700
for which quote ID comments should be fetched.
179
00:09:44,700 --> 00:09:49,010
So we need to pass that data to that send request function.
180
00:09:49,010 --> 00:09:51,210
Now, we get the quote ID from the params,
181
00:09:51,210 --> 00:09:54,060
and hence we could use params.quote ID here,
182
00:09:54,060 --> 00:09:57,200
but then we would need to add params as a whole
183
00:09:57,200 --> 00:09:58,690
to our dependencies here.
184
00:09:58,690 --> 00:10:00,610
I wanna avoid this to avoid
185
00:10:00,610 --> 00:10:03,660
unnecessary re-executions off this effect.
186
00:10:03,660 --> 00:10:06,780
And hence I'll use object de-structuring here
187
00:10:06,780 --> 00:10:08,343
to get the quote ID,
188
00:10:09,290 --> 00:10:11,810
and then just pass quote ID here
189
00:10:11,810 --> 00:10:14,253
and pass quote ID as a dependency.
190
00:10:15,950 --> 00:10:18,410
Send request now, also is a dependency
191
00:10:18,410 --> 00:10:20,470
because we're using this here in this effect.
192
00:10:20,470 --> 00:10:24,000
And with that, we will be sending that request.
193
00:10:24,000 --> 00:10:28,070
So now to handle the fetch comments and the status,
194
00:10:28,070 --> 00:10:31,380
we can start by checking the current status,
195
00:10:31,380 --> 00:10:32,800
and check if the status is equal
196
00:10:32,800 --> 00:10:37,230
to pending here in this comments component,
197
00:10:37,230 --> 00:10:40,370
in which case I wanna show a loading spinner
198
00:10:40,370 --> 00:10:44,030
but I don't wanna return a loading spinner.
199
00:10:44,030 --> 00:10:46,730
Instead, I wanna show a loading spinner as part
200
00:10:46,730 --> 00:10:51,240
of the overall JSX content, which has returned down there.
201
00:10:51,240 --> 00:10:54,100
Because I actually don't wanna remove the form,
202
00:10:54,100 --> 00:10:57,860
for example, or remove this add a comment button,
203
00:10:57,860 --> 00:11:01,110
just because we're now waiting for comments.
204
00:11:01,110 --> 00:11:03,200
But I don't wanna show this paragraph
205
00:11:03,200 --> 00:11:04,800
if we're loading comments.
206
00:11:04,800 --> 00:11:06,650
Instead, I wanna show a loading spinner.
207
00:11:06,650 --> 00:11:08,150
And if we got comments later,
208
00:11:08,150 --> 00:11:11,120
then I wanna show my comments list here.
209
00:11:11,120 --> 00:11:15,650
And therefore I'll add a little variable here, comments,
210
00:11:15,650 --> 00:11:20,000
which initially has no value, which I'll assign a value to.
211
00:11:20,000 --> 00:11:23,370
And you know that you can store JSX and comments as well.
212
00:11:23,370 --> 00:11:26,480
In the end, JSX is just a regular value
213
00:11:26,480 --> 00:11:28,590
in your JavaScript code.
214
00:11:28,590 --> 00:11:33,590
So we can store a div year in this comments variable,
215
00:11:33,980 --> 00:11:36,410
give it a class name of centered
216
00:11:36,410 --> 00:11:39,490
and add a loading spinner here in this div.
217
00:11:39,490 --> 00:11:40,920
And of course you need to therefore
218
00:11:40,920 --> 00:11:43,443
import this loading spinner component.
219
00:11:45,962 --> 00:11:48,440
Now we've got this comments variable set here.
220
00:11:48,440 --> 00:11:50,670
We'll use it soon.
221
00:11:50,670 --> 00:11:53,160
If we're not in pending status,
222
00:11:53,160 --> 00:11:57,380
I wanna check if the status is equal to completed.
223
00:11:57,380 --> 00:11:59,750
So we're done fetching comments,
224
00:11:59,750 --> 00:12:03,010
and we do have loaded comments.
225
00:12:03,010 --> 00:12:04,493
So we do have data.
226
00:12:06,160 --> 00:12:11,160
Then I wanna set my comments equal to comments list.
227
00:12:11,190 --> 00:12:14,690
And that's a component which I have to import here.
228
00:12:14,690 --> 00:12:19,690
Comments list from./comments list here.
229
00:12:20,660 --> 00:12:23,670
It's simply another predefined component
230
00:12:23,670 --> 00:12:26,810
I provided to you earlier in this course,
231
00:12:26,810 --> 00:12:28,110
at the beginning of this course
232
00:12:28,110 --> 00:12:30,973
as part of the starting project, to be precise.
233
00:12:31,870 --> 00:12:34,140
That's now the component I wanna output here,
234
00:12:34,140 --> 00:12:36,070
if we do have comments.
235
00:12:36,070 --> 00:12:38,640
And this component wants a comments prop,
236
00:12:38,640 --> 00:12:41,193
to which I'll pass my loaded comments.
237
00:12:43,300 --> 00:12:46,280
Now, maybe we also don't have any comments yet.
238
00:12:46,280 --> 00:12:49,593
For this I'll check if the status is completed,
239
00:12:50,630 --> 00:12:55,630
and we don't have any loaded comments or loaded comments
240
00:12:56,630 --> 00:12:58,980
length is equal to zero.
241
00:12:58,980 --> 00:13:00,400
And therefore up here, by the way,
242
00:13:00,400 --> 00:13:03,960
I should also check if we have loaded comments
243
00:13:03,960 --> 00:13:07,253
and loaded comments length is greater than zero.
244
00:13:08,510 --> 00:13:10,250
That's how this check should look like.
245
00:13:10,250 --> 00:13:13,260
Here, we're then checking if we don't have any comments.
246
00:13:13,260 --> 00:13:17,810
And in this case, comments will be set equal to a paragraph,
247
00:13:17,810 --> 00:13:21,200
which I'll give a class of centered where I say
248
00:13:21,200 --> 00:13:26,093
no comments were added yet like this.
249
00:13:27,330 --> 00:13:29,590
And now with div we got different values
250
00:13:29,590 --> 00:13:31,120
in this comments variable,
251
00:13:31,120 --> 00:13:34,900
and we can now use this comments variable down there,
252
00:13:34,900 --> 00:13:35,893
just like this.
253
00:13:37,580 --> 00:13:40,420
If we now save this, if I reload,
254
00:13:40,420 --> 00:13:42,790
you'll see a loading spinner briefly down there
255
00:13:42,790 --> 00:13:46,260
whilst it's fetching comments, and then it's done.
256
00:13:46,260 --> 00:13:47,953
Now, if I add a comment,
257
00:13:48,950 --> 00:13:52,330
we don't see that comment here yet, but if I reload,
258
00:13:52,330 --> 00:13:55,420
it should be there because it was stored here
259
00:13:55,420 --> 00:13:59,760
but it was stored under an ID undefined.
260
00:13:59,760 --> 00:14:03,530
So I somehow did not use the quote ID correctly
261
00:14:03,530 --> 00:14:05,350
in the comment form.
262
00:14:05,350 --> 00:14:07,340
Let's see why that's not working.
263
00:14:07,340 --> 00:14:10,940
I am passing my quote ID to the new comment form,
264
00:14:10,940 --> 00:14:13,160
this quote ID prop.
265
00:14:13,160 --> 00:14:17,630
With params quote ID, we could also just use quote ID here
266
00:14:17,630 --> 00:14:21,400
because I'm using object de-structuring on params up there.
267
00:14:21,400 --> 00:14:24,470
But it looks like I'm not using this ID correctly
268
00:14:24,470 --> 00:14:29,450
in the new comment form when I'm sending my request here.
269
00:14:29,450 --> 00:14:32,690
I'm reaching out to props.quote ID.
270
00:14:32,690 --> 00:14:35,830
And actually here, we should change that at comment function
271
00:14:35,830 --> 00:14:39,680
the API fall a bit, and just expect data here,
272
00:14:39,680 --> 00:14:44,363
and then access data.quote ID here and data.comment data,
273
00:14:45,220 --> 00:14:47,730
or maybe name it request data.
274
00:14:47,730 --> 00:14:50,200
And then access request data.quote ID,
275
00:14:50,200 --> 00:14:52,763
and requested data.comment data.
276
00:14:54,230 --> 00:14:58,230
And now in the new comment component,
277
00:14:58,230 --> 00:15:03,230
when we sent that request, we should send one object here
278
00:15:05,500 --> 00:15:10,500
which has a comment data field, because in this API file
279
00:15:10,710 --> 00:15:14,363
we just worked on, we're extracting a comment data field,
280
00:15:15,470 --> 00:15:19,700
and which then also has a quote ID field with the quote ID.
281
00:15:19,700 --> 00:15:22,570
So here we should also add a quote ID field
282
00:15:22,570 --> 00:15:24,453
and store the quote ID in there.
283
00:15:26,340 --> 00:15:27,970
That's a little change we need to make
284
00:15:27,970 --> 00:15:29,970
on this API function to ensure
285
00:15:29,970 --> 00:15:32,650
that all the data is used correctly.
286
00:15:32,650 --> 00:15:36,700
A little error I had in this function at the beginning.
287
00:15:36,700 --> 00:15:37,830
But now with that,
288
00:15:37,830 --> 00:15:41,790
if we reload and then try sending this again.
289
00:15:41,790 --> 00:15:45,110
If we reload again, our comment is here,
290
00:15:45,110 --> 00:15:50,053
and we see it's stored under the correct ID here.
291
00:15:51,810 --> 00:15:54,680
Now, we're still not 100% there yet.
292
00:15:54,680 --> 00:15:56,500
One change we should also make
293
00:15:56,500 --> 00:15:58,790
is that in the comments component,
294
00:15:58,790 --> 00:16:01,190
this added comment handler function here,
295
00:16:01,190 --> 00:16:04,120
should be wrapped by use call back,
296
00:16:04,120 --> 00:16:06,393
a hook we need to import from react.
297
00:16:07,550 --> 00:16:11,090
We should wrap this function with it,
298
00:16:11,090 --> 00:16:13,620
and provide an empty dependencies array here
299
00:16:13,620 --> 00:16:17,530
because added comment handler is passed
300
00:16:17,530 --> 00:16:21,450
to the new comment form through the on added comment prop.
301
00:16:21,450 --> 00:16:26,100
And there we used that prop as a dependency for an effect.
302
00:16:26,100 --> 00:16:29,810
If we don't use use callback, this function
303
00:16:29,810 --> 00:16:32,000
which we use here in the end will be recreated
304
00:16:32,000 --> 00:16:34,800
whenever the parent component re-renders.
305
00:16:34,800 --> 00:16:37,150
And that could create an infinite loop here
306
00:16:37,150 --> 00:16:38,670
which we wanna avoid.
307
00:16:38,670 --> 00:16:41,970
So wrapping this with use callback is important.
308
00:16:41,970 --> 00:16:43,860
I did introduce use callback
309
00:16:43,860 --> 00:16:46,700
and why we use it early in the course.
310
00:16:46,700 --> 00:16:49,960
It simply ensures that this function is not recreated
311
00:16:49,960 --> 00:16:53,620
all the time when this component is reevaluated,
312
00:16:53,620 --> 00:16:57,040
and that avoids unnecessary re-render cycles
313
00:16:57,040 --> 00:16:58,403
and infinite loops.
314
00:16:59,970 --> 00:17:01,440
And I got another thing related
315
00:17:01,440 --> 00:17:04,520
to this added comment handler function.
316
00:17:04,520 --> 00:17:07,089
Of course we wanna add some logic here.
317
00:17:07,089 --> 00:17:09,109
Whenever a comment was added,
318
00:17:09,109 --> 00:17:11,530
the comments should be updated here.
319
00:17:11,530 --> 00:17:14,290
And for this, we could send a new request.
320
00:17:14,290 --> 00:17:17,349
So we can call, send request again here,
321
00:17:17,349 --> 00:17:19,250
and again, use our quote ID,
322
00:17:19,250 --> 00:17:21,940
and therefore add send request
323
00:17:21,940 --> 00:17:26,940
and quote ID as dependencies for this use callback hook.
324
00:17:27,050 --> 00:17:29,960
So that this function wrap by use callback
325
00:17:29,960 --> 00:17:34,070
would be recreated if the send request function changes
326
00:17:34,070 --> 00:17:36,770
or if the quote ID changes.
327
00:17:36,770 --> 00:17:38,820
And with all of that,
328
00:17:38,820 --> 00:17:43,820
if I now save that and I add another comment here,
329
00:17:45,300 --> 00:17:48,253
we see that it's loaded automatically down there.
330
00:17:49,850 --> 00:17:51,650
And now that's looking good.
331
00:17:51,650 --> 00:17:52,483
And with that,
332
00:17:52,483 --> 00:17:56,020
we added all this data fetching functionality as well,
333
00:17:56,020 --> 00:17:58,070
which was another good practice
334
00:17:58,070 --> 00:18:00,270
of all these core mechanisms,
335
00:18:00,270 --> 00:18:03,470
which we learned about earlier in the course already,
336
00:18:03,470 --> 00:18:06,340
sending HTTP requests and so on.
337
00:18:06,340 --> 00:18:10,470
And with that we've finished this demo application.
338
00:18:10,470 --> 00:18:14,660
Now we're able to add quotes here, like this.
339
00:18:17,320 --> 00:18:19,300
We're able to view our quotes,
340
00:18:19,300 --> 00:18:21,250
to view the comments for quotes,
341
00:18:21,250 --> 00:18:25,150
and leave new comments like we did it before.
342
00:18:25,150 --> 00:18:28,620
We added this sorting functionality with query params,
343
00:18:28,620 --> 00:18:31,720
and we simply worked with react router.
344
00:18:31,720 --> 00:18:35,190
And you now know how you can give the user the illusion
345
00:18:35,190 --> 00:18:38,283
of a multi-page app in a single page app.
27755
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.