Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,100 --> 00:00:04,170
Now, with all of that,
2
00:00:04,170 --> 00:00:06,540
the base application is finished
3
00:00:06,540 --> 00:00:09,880
at least regarding the routing functionality.
4
00:00:09,880 --> 00:00:13,360
Now what's missing is actual data for the quotes
5
00:00:13,360 --> 00:00:15,350
and or for the comments.
6
00:00:15,350 --> 00:00:16,860
And that's what I wanna focus on
7
00:00:16,860 --> 00:00:19,490
for the rest of this module.
8
00:00:19,490 --> 00:00:22,820
We're not going to learn about new React router features,
9
00:00:22,820 --> 00:00:25,680
but we are going to learn how we can fetch data
10
00:00:25,680 --> 00:00:30,680
and send data in a React application that uses React router.
11
00:00:30,750 --> 00:00:33,470
And therefore let's dive right in.
12
00:00:33,470 --> 00:00:36,750
Now attached you'll find a sip file, which you can extract,
13
00:00:36,750 --> 00:00:41,750
which holds two folders: a hooks and a lib folder,
14
00:00:41,930 --> 00:00:44,920
and you should add those folders side by side,
15
00:00:44,920 --> 00:00:47,403
to your components and pages folders.
16
00:00:48,570 --> 00:00:53,427
Now the hooks folder holds a custom HTTP hook,
17
00:00:54,450 --> 00:00:56,260
which I just built here for you
18
00:00:56,260 --> 00:00:59,390
since we learned about custom hooks and use reducer,
19
00:00:59,390 --> 00:01:02,500
which I use in there before in this course,
20
00:01:02,500 --> 00:01:04,540
and hence I wanna save some time here
21
00:01:04,540 --> 00:01:06,563
and really focus on the routing part.
22
00:01:07,540 --> 00:01:10,670
And the API JS file in the lib folder,
23
00:01:10,670 --> 00:01:14,960
that's simply holds some functions that will send requests
24
00:01:14,960 --> 00:01:19,550
to Firebase, which I will again use as a dummy backend.
25
00:01:19,550 --> 00:01:23,820
Here you just need to insert your own Firebase URL
26
00:01:23,820 --> 00:01:26,960
because mine which is in here at the moment,
27
00:01:26,960 --> 00:01:30,470
won't work for you because I will have taken down
28
00:01:30,470 --> 00:01:33,670
my Firebase project when you're viewing this.
29
00:01:33,670 --> 00:01:37,110
So here, just as we did it earlier in the course,
30
00:01:37,110 --> 00:01:40,840
you need to go to Firebase and log in there,
31
00:01:40,840 --> 00:01:43,680
and then there simply create a new project.
32
00:01:43,680 --> 00:01:46,400
If this is all brand new, definitely check out
33
00:01:46,400 --> 00:01:51,040
the HTTP course section first, create a new project in here,
34
00:01:51,040 --> 00:01:52,230
and then they are make sure
35
00:01:52,230 --> 00:01:54,490
you activate the real-time database there,
36
00:01:54,490 --> 00:01:57,860
create a new real time database in test mode
37
00:01:57,860 --> 00:01:59,150
when you're creating it,
38
00:01:59,150 --> 00:02:04,150
and then use this URL here as your Firebase domain.
39
00:02:05,230 --> 00:02:09,289
Make sure you delete that trailing slash at the end though.
40
00:02:09,289 --> 00:02:12,330
And with that, you'll be able to use these functions
41
00:02:12,330 --> 00:02:15,270
to send requests and use them in conjunction
42
00:02:15,270 --> 00:02:17,360
with this custom HTTP hook
43
00:02:17,360 --> 00:02:21,840
to reuse certain functionality across components.
44
00:02:21,840 --> 00:02:24,690
Again, these are all things we covered earlier
45
00:02:24,690 --> 00:02:28,640
in the course already and it's not route specific at all.
46
00:02:28,640 --> 00:02:31,477
Now we can get started in the new quote page
47
00:02:31,477 --> 00:02:33,980
because we will be able to see some quotes
48
00:02:33,980 --> 00:02:35,800
if we're able to add quotes,
49
00:02:35,800 --> 00:02:39,820
hence here in the new quote page in add quote handler,
50
00:02:39,820 --> 00:02:43,830
I wanna make sure that we actually do send our request
51
00:02:43,830 --> 00:02:46,280
to add a new quote.
52
00:02:46,280 --> 00:02:50,460
And for this, we can import the use HTTP hook,
53
00:02:50,460 --> 00:02:55,460
which I provided to you from the hooks folder,
54
00:02:55,850 --> 00:02:58,560
and call that hook here.
55
00:02:58,560 --> 00:03:02,763
Whoops, use HTTP inside of that new quote component.
56
00:03:04,210 --> 00:03:08,130
Now this hook works such that it wants a function
57
00:03:08,130 --> 00:03:12,700
that can be called by this hook to send the actual request,
58
00:03:12,700 --> 00:03:16,560
and that will be one of the functions to find in API JS.
59
00:03:16,560 --> 00:03:18,120
These are different functions
60
00:03:18,120 --> 00:03:21,133
for sending different kinds of requests to Firebase.
61
00:03:22,010 --> 00:03:24,720
Then this hook also wants to know whether it should start
62
00:03:24,720 --> 00:03:27,300
in loading state or not, which can be helpful
63
00:03:27,300 --> 00:03:31,030
if we work on a component that sends a request right away,
64
00:03:31,030 --> 00:03:35,460
and then this custom hook will return a function
65
00:03:35,460 --> 00:03:39,360
which became call to actually start sending that request,
66
00:03:39,360 --> 00:03:43,040
and some HTTP state, which actually is an object
67
00:03:43,040 --> 00:03:45,320
with the current status of the request
68
00:03:45,320 --> 00:03:48,950
if it's on its way, if it succeeded, or if it failed,
69
00:03:48,950 --> 00:03:51,110
with the response state off the request
70
00:03:51,110 --> 00:03:53,003
and maybe some error data.
71
00:03:54,160 --> 00:03:56,850
And hence here in the new quote component
72
00:03:56,850 --> 00:03:59,200
when I call use HTTP,
73
00:03:59,200 --> 00:04:03,070
I wanna actually import a function for sending the request
74
00:04:03,070 --> 00:04:07,210
which we get from this lip folder and there the API file.
75
00:04:07,210 --> 00:04:09,523
And here it's the add quote function.
76
00:04:11,300 --> 00:04:14,650
Now, if we have a look at this function, add quote,
77
00:04:14,650 --> 00:04:16,200
it's this function here,
78
00:04:16,200 --> 00:04:19,550
a function where I send a post request to Firebase,
79
00:04:19,550 --> 00:04:23,570
to a quotes node, where I simply add the quote data
80
00:04:23,570 --> 00:04:26,210
and sent this and store this in Firebase.
81
00:04:26,210 --> 00:04:27,650
And then we've got some error handling
82
00:04:27,650 --> 00:04:30,333
and data extraction code down there and that's it.
83
00:04:31,570 --> 00:04:34,130
So now in new quote JS,
84
00:04:34,130 --> 00:04:38,143
it's this add quote function which I pass to use HTTP.
85
00:04:39,050 --> 00:04:41,310
However, we just point at this function,
86
00:04:41,310 --> 00:04:43,390
we don't execute it here.
87
00:04:43,390 --> 00:04:44,540
It's this custom hook
88
00:04:44,540 --> 00:04:48,340
which will internally execute this function.
89
00:04:48,340 --> 00:04:50,520
And then this hook returns an object,
90
00:04:50,520 --> 00:04:53,980
and hence we can use object de-structuring to get some data
91
00:04:53,980 --> 00:04:55,920
out of this object.
92
00:04:55,920 --> 00:04:58,850
For example, to send request function,
93
00:04:58,850 --> 00:05:00,510
which this hook we'll return,
94
00:05:00,510 --> 00:05:02,070
which is and actually the function
95
00:05:02,070 --> 00:05:05,210
we have to call to start sending this request,
96
00:05:05,210 --> 00:05:07,600
and the status of this request.
97
00:05:07,600 --> 00:05:09,060
We could extract more data
98
00:05:09,060 --> 00:05:11,890
but that's all the data we need here.
99
00:05:11,890 --> 00:05:14,050
And then here in add quote handler,
100
00:05:14,050 --> 00:05:18,480
we can call send request, and pass the quote data to it.
101
00:05:18,480 --> 00:05:22,290
And that will then actually send this add quote request.
102
00:05:22,290 --> 00:05:23,960
Now I then wanna navigate a way
103
00:05:23,960 --> 00:05:26,370
once we're done sending this request,
104
00:05:26,370 --> 00:05:30,550
and therefore I will actually also import another hook
105
00:05:30,550 --> 00:05:35,450
from React, the use effect hook from React itself
106
00:05:35,450 --> 00:05:38,470
so that we can define a side effect here,
107
00:05:38,470 --> 00:05:40,380
a side effect function,
108
00:05:40,380 --> 00:05:43,730
which should be triggered whenever the status changes.
109
00:05:43,730 --> 00:05:46,800
And here, I then want to check
110
00:05:46,800 --> 00:05:49,750
if the status is equal to completed,
111
00:05:49,750 --> 00:05:51,640
which is one possible value
112
00:05:51,640 --> 00:05:53,560
I'm setting here in my custom hook.
113
00:05:53,560 --> 00:05:55,340
I'm setting the status to completed
114
00:05:55,340 --> 00:05:58,593
if we have a success or an error response.
115
00:06:00,150 --> 00:06:03,730
And here I wanna check if the status is completed,
116
00:06:03,730 --> 00:06:06,390
in which case I wanna navigate a way.
117
00:06:06,390 --> 00:06:08,860
We could also check if we do have an error
118
00:06:08,860 --> 00:06:11,160
and only navigate if we don't have an error,
119
00:06:11,160 --> 00:06:13,030
but to keep things a bit simpler here,
120
00:06:13,030 --> 00:06:15,620
I'll not add this extra check.
121
00:06:15,620 --> 00:06:19,240
Instead, here I then navigate away with this history object
122
00:06:19,240 --> 00:06:22,000
by pushing or replacing,
123
00:06:22,000 --> 00:06:24,040
depending on whether you want to allow
124
00:06:24,040 --> 00:06:26,180
the user to come back or not,
125
00:06:26,180 --> 00:06:28,420
to /quotes.
126
00:06:28,420 --> 00:06:30,130
And since I'm using history in here,
127
00:06:30,130 --> 00:06:33,420
that's not also a dependency of this affect function,
128
00:06:33,420 --> 00:06:37,850
but history, this history object won't actually change.
129
00:06:37,850 --> 00:06:41,720
Still we should add it to this array of dependencies.
130
00:06:41,720 --> 00:06:43,138
With that, we navigate a way
131
00:06:43,138 --> 00:06:48,138
as soon as the request completed and I don't push here
132
00:06:48,230 --> 00:06:50,450
in add quote handler.
133
00:06:50,450 --> 00:06:53,210
Now we can also use the status to set
134
00:06:53,210 --> 00:06:56,880
the is loading prop on the quote form,
135
00:06:56,880 --> 00:07:00,210
and set this to true if status is equal to pending,
136
00:07:00,210 --> 00:07:03,493
which is another status value set in the custom hook.
137
00:07:04,500 --> 00:07:07,780
The quote form has this is loading prop
138
00:07:07,780 --> 00:07:11,640
which is used to render some loading spinner.
139
00:07:11,640 --> 00:07:15,870
And with this, if I now go back here,
140
00:07:15,870 --> 00:07:17,913
if I now go back to add quote,
141
00:07:19,870 --> 00:07:22,500
and I start adding this, if I click Add quote,
142
00:07:22,500 --> 00:07:25,430
we see the loading spinner and then we're redirected.
143
00:07:25,430 --> 00:07:28,010
And on Firebase, we now have to quotes note
144
00:07:28,010 --> 00:07:29,983
with a newly added quote.
145
00:07:31,740 --> 00:07:34,480
Now of course we wanna fetch our actual quotes
146
00:07:34,480 --> 00:07:37,420
and display them here on the quote list component
147
00:07:37,420 --> 00:07:40,100
instead of using the dummy quotes.
148
00:07:40,100 --> 00:07:42,310
Therefore on this all quotes page
149
00:07:42,310 --> 00:07:45,090
I now also wanna send the request.
150
00:07:45,090 --> 00:07:49,380
So here, we can also import use HTTP
151
00:07:49,380 --> 00:07:51,483
from our custom hook here,
152
00:07:53,770 --> 00:07:57,520
and also import one of the functions from the API file.
153
00:07:57,520 --> 00:08:00,520
So from lib API.
154
00:08:00,520 --> 00:08:04,280
And here to function which I want to use,
155
00:08:04,280 --> 00:08:07,783
is the get all quotes function.
156
00:08:10,260 --> 00:08:12,400
Now this function will in the end
157
00:08:12,400 --> 00:08:14,620
just well, do what the name implies.
158
00:08:14,620 --> 00:08:17,420
It gets all the quotes and then just transforms them
159
00:08:17,420 --> 00:08:19,193
into an array which we can use.
160
00:08:22,900 --> 00:08:26,410
Now in the all quotes component function,
161
00:08:26,410 --> 00:08:29,040
we can therefore call our custom hook,
162
00:08:29,040 --> 00:08:32,549
and pass a pointer at get all quotes to it.
163
00:08:32,549 --> 00:08:35,690
Also sets true here as a second argument,
164
00:08:35,690 --> 00:08:39,039
that controls that we start in loading state
165
00:08:39,039 --> 00:08:41,480
and that therefore a status is pending
166
00:08:41,480 --> 00:08:42,530
right from the start.
167
00:08:43,720 --> 00:08:46,660
And then we can extract some data here.
168
00:08:46,660 --> 00:08:49,740
And here we can get the send request function
169
00:08:49,740 --> 00:08:52,440
to actually send the request,
170
00:08:52,440 --> 00:08:57,010
we can get the status, we can get the data,
171
00:08:57,010 --> 00:08:59,620
and I will assign an alias here,
172
00:08:59,620 --> 00:09:01,190
loaded quotes.
173
00:09:01,190 --> 00:09:03,680
So that's the actually the constant name
174
00:09:03,680 --> 00:09:06,143
by which we can access the loaded data.
175
00:09:07,260 --> 00:09:08,983
And we get an error maybe.
176
00:09:10,870 --> 00:09:14,390
That's now how we can use this custom hook.
177
00:09:14,390 --> 00:09:17,010
And now we need to use the use effect hook
178
00:09:17,010 --> 00:09:21,380
to actually send that request when that component loads.
179
00:09:21,380 --> 00:09:26,093
So from React I import use effect here.
180
00:09:27,060 --> 00:09:30,370
And then here we can call, use effect
181
00:09:30,370 --> 00:09:31,893
trigger a function,
182
00:09:32,760 --> 00:09:36,320
and simply call send request here.
183
00:09:36,320 --> 00:09:39,090
And therefore send request is now a dependency
184
00:09:39,090 --> 00:09:42,123
we should add here like this.
185
00:09:43,670 --> 00:09:45,270
So now we will send the request
186
00:09:45,270 --> 00:09:48,610
whenever this component renders in the end.
187
00:09:48,610 --> 00:09:51,000
Now we can handle the different states
188
00:09:51,000 --> 00:09:54,860
and check if the status is equal to pending,
189
00:09:54,860 --> 00:09:57,220
so if we're still loading,
190
00:09:57,220 --> 00:10:01,550
then we can return a div with a class name off centered
191
00:10:02,420 --> 00:10:05,070
and in the output the loading spinner,
192
00:10:05,070 --> 00:10:08,667
which is a component you can import from components,
193
00:10:08,667 --> 00:10:10,233
UI loading spinner.
194
00:10:11,860 --> 00:10:14,120
And that will then show such a loading spinner
195
00:10:14,120 --> 00:10:17,073
whenever we are waiting for the quotes.
196
00:10:18,240 --> 00:10:20,440
We can check if we have an error
197
00:10:20,440 --> 00:10:22,780
so we made it past this loading check,
198
00:10:22,780 --> 00:10:25,390
but now we check if we have an error maybe.
199
00:10:25,390 --> 00:10:26,460
And if that's the case,
200
00:10:26,460 --> 00:10:29,300
I'll return a paragraph with a class name off
201
00:10:29,300 --> 00:10:31,600
centered and focused.
202
00:10:31,600 --> 00:10:35,400
Again, these are global classes defined here
203
00:10:35,400 --> 00:10:37,203
in this index CSS file.
204
00:10:39,170 --> 00:10:41,740
And then I will just output error here,
205
00:10:41,740 --> 00:10:43,973
which will be the actual error message.
206
00:10:46,080 --> 00:10:49,460
And thereafter I'll check if we maybe are not loading,
207
00:10:49,460 --> 00:10:53,380
and we don't have an error, but maybe we have no quotes.
208
00:10:53,380 --> 00:10:57,120
And therefore here I'll check if the status is completed,
209
00:10:57,120 --> 00:11:02,120
but we also have no loaded quotes
210
00:11:02,230 --> 00:11:07,070
or loaded quotes has a length of C rows
211
00:11:07,070 --> 00:11:09,110
so we will have an empty array.
212
00:11:09,110 --> 00:11:10,760
And if even that is the case,
213
00:11:10,760 --> 00:11:12,770
and we're done sending the request,
214
00:11:12,770 --> 00:11:17,770
then I wanna return to no quotes found component,
215
00:11:18,960 --> 00:11:22,303
which is a component I already defined for you here.
216
00:11:24,250 --> 00:11:25,570
And that's therefore a component
217
00:11:25,570 --> 00:11:27,127
which we need to import here,
218
00:11:27,127 --> 00:11:31,250
the no quotes found component from components,
219
00:11:31,250 --> 00:11:34,253
quotes, no quotes found.
220
00:11:36,140 --> 00:11:38,593
So I'll then output that component.
221
00:11:39,980 --> 00:11:42,130
And if we make it past all these checks
222
00:11:42,130 --> 00:11:43,950
then we know we don't have an error,
223
00:11:43,950 --> 00:11:46,180
we're not loading, and we do have quotes,
224
00:11:46,180 --> 00:11:49,380
and then I wanna output my loaded quotes here
225
00:11:49,380 --> 00:11:51,003
instead of the dummy quotes.
226
00:11:52,210 --> 00:11:54,548
And that means that now we can also get rid
227
00:11:54,548 --> 00:11:56,803
of this dummy quotes array.
228
00:11:57,972 --> 00:11:59,840
And with that, if I reload,
229
00:11:59,840 --> 00:12:01,370
we see the loading spinner briefly,
230
00:12:01,370 --> 00:12:05,600
and then we see the quotes. If I clear that quote here,
231
00:12:05,600 --> 00:12:06,703
if I delete it,
232
00:12:07,770 --> 00:12:12,770
on Firebase, then we have the no quote found text
233
00:12:12,970 --> 00:12:14,740
and this Add a quote button
234
00:12:14,740 --> 00:12:17,053
which at the moment doesn't work though.
235
00:12:17,940 --> 00:12:20,640
Because and is no quotes found component
236
00:12:20,640 --> 00:12:23,850
there I'm outputting a regular anchor tag.
237
00:12:23,850 --> 00:12:28,190
And this should actually be a link to this new quote page.
238
00:12:28,190 --> 00:12:29,660
And since it should be a link,
239
00:12:29,660 --> 00:12:32,672
I don't wanna use an anchor tag, but as we learned it,
240
00:12:32,672 --> 00:12:35,650
used the link component
241
00:12:35,650 --> 00:12:37,713
from React router dom.
242
00:12:38,570 --> 00:12:42,320
And then here we add link
243
00:12:42,320 --> 00:12:46,443
and set to to prop to new quote.
244
00:12:47,440 --> 00:12:51,820
So to does path, which that loads us
245
00:12:51,820 --> 00:12:54,083
this new quote component.
246
00:12:55,593 --> 00:12:57,070
And with that we can click this link
247
00:12:57,070 --> 00:12:58,593
and we're taken to this forum.
248
00:12:59,610 --> 00:13:04,023
And now I can again add that and we display it here.
249
00:13:05,000 --> 00:13:07,230
Now we all wanna fetch the quote data
250
00:13:07,230 --> 00:13:09,723
on that quote detail page of course.
251
00:13:11,000 --> 00:13:14,450
And for that we can go to that quote detail page.
252
00:13:14,450 --> 00:13:17,170
Here on that quote detail page
253
00:13:17,170 --> 00:13:22,170
we also wanna use the custom HTTP hook.
254
00:13:23,040 --> 00:13:26,760
So we import that from hooks use HTTP.
255
00:13:26,760 --> 00:13:31,480
And from that API file, I also wanna import a function
256
00:13:31,480 --> 00:13:34,300
which will send the actual request,
257
00:13:34,300 --> 00:13:37,433
here it start get single quote function.
258
00:13:38,470 --> 00:13:40,470
And then in the quote detail component
259
00:13:40,470 --> 00:13:43,290
we wanna call our custom hook,
260
00:13:43,290 --> 00:13:46,993
and pass a pointer at that gets single quote function to it.
261
00:13:47,940 --> 00:13:49,960
Also start in loading mode
262
00:13:49,960 --> 00:13:53,260
and therefore past true as a second argument,
263
00:13:53,260 --> 00:13:55,670
and then use object de-structuring
264
00:13:55,670 --> 00:13:58,460
to use the data returned by the hook.
265
00:13:58,460 --> 00:14:01,700
Here we still get the send request function,
266
00:14:01,700 --> 00:14:05,600
the status of the request, some data which all LES
267
00:14:05,600 --> 00:14:09,173
to loaded quote and maybe an error.
268
00:14:11,350 --> 00:14:14,670
Now we will no longer get to selected quote like this
269
00:14:14,670 --> 00:14:17,963
because we will no longer use the dummy quotes here.
270
00:14:18,820 --> 00:14:21,880
Instead, we wanna send the request when this component loads
271
00:14:21,880 --> 00:14:25,253
and therefore again, I'll import use effect from React,
272
00:14:26,350 --> 00:14:28,830
and then call it here and define a function
273
00:14:28,830 --> 00:14:32,320
that should be called, when this component loads.
274
00:14:32,320 --> 00:14:35,150
And here we call, send request.
275
00:14:35,150 --> 00:14:37,853
And we therefor add send request as a dependency.
276
00:14:39,270 --> 00:14:41,370
Now the important thing to note though,
277
00:14:41,370 --> 00:14:43,690
is that the get single quote function
278
00:14:43,690 --> 00:14:46,610
wants to quote ID as an argument
279
00:14:46,610 --> 00:14:49,810
because it needs to know for which quote ID
280
00:14:49,810 --> 00:14:51,113
it should fetch the data.
281
00:14:51,970 --> 00:14:55,890
Therefore we actually need to pass that ID here
282
00:14:55,890 --> 00:14:57,363
to send request.
283
00:14:58,410 --> 00:15:00,730
But getting that ID isn't too difficult
284
00:15:00,730 --> 00:15:03,080
because we got access to our parents here.
285
00:15:03,080 --> 00:15:07,210
So we can get our vote ID out of the parents
286
00:15:07,210 --> 00:15:09,040
with object de-structuring
287
00:15:09,040 --> 00:15:13,040
so that we can pass quote ID as argument here.
288
00:15:13,040 --> 00:15:16,370
And now we also need to add it to this dependencies array,
289
00:15:16,370 --> 00:15:19,920
and that's also why I'm using object de-structuring here
290
00:15:19,920 --> 00:15:23,020
because that allows me to just pass to quote ID
291
00:15:23,020 --> 00:15:26,600
as a dependency instead of the entire parents object,
292
00:15:26,600 --> 00:15:29,400
which would mean that whenever any parameter changes
293
00:15:29,400 --> 00:15:31,390
this effect would rerun.
294
00:15:31,390 --> 00:15:34,390
Here we only have one parameter but still,
295
00:15:34,390 --> 00:15:35,940
if we potentially had more
296
00:15:35,940 --> 00:15:38,600
we could rerun this effect unexpectedly
297
00:15:38,600 --> 00:15:41,180
and therefore using object de-structuring
298
00:15:41,180 --> 00:15:45,233
to be as precise as possible is definitely a good idea.
299
00:15:46,490 --> 00:15:48,380
So now with that, we're sending a request
300
00:15:48,380 --> 00:15:49,973
to get a single quote.
301
00:15:50,930 --> 00:15:54,530
Now we can again check our different states here.
302
00:15:54,530 --> 00:15:57,923
We can check if the status is equal to,
303
00:15:58,760 --> 00:16:03,170
pending, so we're loading, we're waiting for the response,
304
00:16:03,170 --> 00:16:05,840
and then I'll return a div for the class name off
305
00:16:05,840 --> 00:16:08,140
centered again, in which output
306
00:16:08,140 --> 00:16:10,680
this loading spinner a component,
307
00:16:10,680 --> 00:16:13,080
which we again have to import of course
308
00:16:13,080 --> 00:16:15,943
from the UI folder in the components folder.
309
00:16:18,420 --> 00:16:20,640
And if we made it past this check
310
00:16:20,640 --> 00:16:22,950
and we know that we're no longer loading,
311
00:16:22,950 --> 00:16:25,250
I wanna check if we may be having an error,
312
00:16:25,250 --> 00:16:27,770
in which case I want to return a paragraph
313
00:16:27,770 --> 00:16:29,890
with a class name of centered,
314
00:16:29,890 --> 00:16:32,713
where I output that error message.
315
00:16:34,350 --> 00:16:35,950
And I also wanna handle the case
316
00:16:35,950 --> 00:16:37,790
if you maybe didn't find a quote.
317
00:16:37,790 --> 00:16:41,800
So I will check if we not have a loaded quote,
318
00:16:41,800 --> 00:16:45,610
which is the actual quote data returned by this custom hook,
319
00:16:45,610 --> 00:16:48,680
in which case I say no quote found.
320
00:16:48,680 --> 00:16:51,620
But if we do have a quote, then I wanna use that
321
00:16:51,620 --> 00:16:53,730
and I'll use the load of quote down there
322
00:16:53,730 --> 00:16:55,573
to output my quote data.
323
00:16:57,110 --> 00:17:00,520
So with that, I'm able to load this quote.
324
00:17:00,520 --> 00:17:02,160
One thing I just wanna fine-tune
325
00:17:02,160 --> 00:17:03,770
here I actually wanna check
326
00:17:03,770 --> 00:17:05,810
note if I don't have a loaded quote,
327
00:17:05,810 --> 00:17:08,450
because of the way this get single quote function works
328
00:17:08,450 --> 00:17:10,923
I'll always have a quote object.
329
00:17:12,220 --> 00:17:16,000
But instead I will just check if the loaded quote
330
00:17:16,000 --> 00:17:18,710
maybe doesn't have a text.
331
00:17:18,710 --> 00:17:22,500
So if that is undefined or falsey.
332
00:17:22,500 --> 00:17:23,839
That's the better check
333
00:17:23,839 --> 00:17:25,963
for checking if we don't have a quote.
334
00:17:28,119 --> 00:17:31,533
And now with that we're offloading the quote detailed data.
26607
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.