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:03,100
Now at the moment,
2
00:00:03,100 --> 00:00:05,420
I'm sending this Http request
3
00:00:05,420 --> 00:00:07,800
and I'm not doing anything with the response
4
00:00:07,800 --> 00:00:11,060
and I'm also not handling potential errors.
5
00:00:11,060 --> 00:00:14,750
That's of course something which we might wanna avoid.
6
00:00:14,750 --> 00:00:17,910
Now, to handle the response and potential errors,
7
00:00:17,910 --> 00:00:19,510
I edit a new component,
8
00:00:19,510 --> 00:00:21,840
which you'll find attached in a zip file,
9
00:00:21,840 --> 00:00:23,170
the notification component
10
00:00:23,170 --> 00:00:25,653
which you should put into your UI folder.
11
00:00:26,640 --> 00:00:28,130
It's a simple component
12
00:00:28,130 --> 00:00:30,440
that displays a title and the message
13
00:00:30,440 --> 00:00:33,210
and that can assume different CSS classes
14
00:00:33,210 --> 00:00:35,220
based on a status prop.
15
00:00:35,220 --> 00:00:37,980
And then it's simply a little a bar at the top
16
00:00:37,980 --> 00:00:39,180
which will show up,
17
00:00:39,180 --> 00:00:42,020
which can either say something like sending request,
18
00:00:42,020 --> 00:00:45,280
or once it's done it can tell us if it was a success
19
00:00:45,280 --> 00:00:47,410
or if we have an error.
20
00:00:47,410 --> 00:00:51,170
Now, to use it with our current approach in App.js,
21
00:00:51,170 --> 00:00:55,760
here on fetch, we can simply add then or we use async await.
22
00:00:55,760 --> 00:00:57,560
Since we were in use effect though,
23
00:00:57,560 --> 00:01:00,140
we should not add async here,
24
00:01:00,140 --> 00:01:02,890
but instead wrapped us in a separate fetch then
25
00:01:02,890 --> 00:01:04,730
and that's actually what I'll do here
26
00:01:04,730 --> 00:01:06,310
so I'll add a new function here.
27
00:01:06,310 --> 00:01:10,860
Instead of user fact send cart data.
28
00:01:10,860 --> 00:01:15,760
It's a simple function which will hold this code
29
00:01:15,760 --> 00:01:18,250
but it's now asynchronous.
30
00:01:18,250 --> 00:01:21,930
So we can await this to get our response.
31
00:01:21,930 --> 00:01:24,050
And then when we get the response here
32
00:01:24,050 --> 00:01:28,860
we can get our response data
33
00:01:28,860 --> 00:01:33,763
by waiting response dot Jason like this.
34
00:01:34,900 --> 00:01:39,200
And we can also check if the response maybe not okay.
35
00:01:39,200 --> 00:01:41,440
And if it's not okay, we have an errors.
36
00:01:41,440 --> 00:01:45,830
So then we might want to throw a new error here.
37
00:01:45,830 --> 00:01:50,250
Where we say, sending cart data failed
38
00:01:50,250 --> 00:01:51,513
or anything like this.
39
00:01:52,550 --> 00:01:54,560
If we make it past this line
40
00:01:54,560 --> 00:01:56,880
however we know that we were successful.
41
00:01:56,880 --> 00:01:58,550
And then we know that we,
42
00:01:58,550 --> 00:02:02,990
well should show that success notification.
43
00:02:02,990 --> 00:02:04,840
And actually we also want to show
44
00:02:04,840 --> 00:02:06,840
the notification right from the start
45
00:02:06,840 --> 00:02:08,870
when we start sending.
46
00:02:08,870 --> 00:02:11,650
Now for this we could import use state
47
00:02:11,650 --> 00:02:15,160
and set up some local state and this component,
48
00:02:15,160 --> 00:02:19,340
some is loading state and maybe an error state.
49
00:02:19,340 --> 00:02:21,710
And we set dose States
50
00:02:21,710 --> 00:02:25,540
as part of our Http requests cycle here.
51
00:02:25,540 --> 00:02:28,430
And we then use those states to conditionally
52
00:02:28,430 --> 00:02:30,550
rendered the notification component
53
00:02:30,550 --> 00:02:33,300
with the appropriate content.
54
00:02:33,300 --> 00:02:34,700
We could do all of that,
55
00:02:34,700 --> 00:02:36,370
there would be nothing wrong with that
56
00:02:36,370 --> 00:02:39,470
and it would be a good way of handling this.
57
00:02:39,470 --> 00:02:43,980
But since we already have a UI slice here in Redux
58
00:02:43,980 --> 00:02:46,030
why not use that?
59
00:02:46,030 --> 00:02:48,300
Why don't we add more to the state
60
00:02:48,300 --> 00:02:50,350
we're managing here with Redux
61
00:02:50,350 --> 00:02:52,440
and we managed the notification,
62
00:02:52,440 --> 00:02:55,920
which we're showing with help of Redux now.
63
00:02:55,920 --> 00:02:58,830
For this I'll add a notification property
64
00:02:58,830 --> 00:03:02,250
to initial state and I'll set it to null initially,
65
00:03:02,250 --> 00:03:04,943
so that initially we have no notification.
66
00:03:05,850 --> 00:03:08,730
But then we can add a new reducer
67
00:03:08,730 --> 00:03:11,740
which we could call set notification
68
00:03:11,740 --> 00:03:14,600
or show notification maybe,
69
00:03:14,600 --> 00:03:16,610
where we get our state
70
00:03:16,610 --> 00:03:18,780
and where we also use the action
71
00:03:18,780 --> 00:03:21,600
because I expect some action payload here
72
00:03:21,600 --> 00:03:25,050
because the kind of notification that should be shown
73
00:03:25,050 --> 00:03:27,913
should be encoded in the action as a payload.
74
00:03:28,820 --> 00:03:31,440
And we then there for a set state notification equal
75
00:03:31,440 --> 00:03:33,120
to an object let's say,
76
00:03:33,120 --> 00:03:34,640
of course the exact structure
77
00:03:34,640 --> 00:03:37,010
is up to you since it's your code.
78
00:03:37,010 --> 00:03:38,840
But also to an object
79
00:03:38,840 --> 00:03:41,060
where I have a status key
80
00:03:41,060 --> 00:03:43,560
which I expect to get from my action payload.
81
00:03:43,560 --> 00:03:47,050
Let's say dear, we all expect the status property
82
00:03:47,050 --> 00:03:48,610
and status could be something
83
00:03:48,610 --> 00:03:51,653
like pending error and success.
84
00:03:52,490 --> 00:03:55,330
And then we also expect a title let's say
85
00:03:55,330 --> 00:04:00,020
which we also get from the action payload and a message
86
00:04:00,020 --> 00:04:01,600
which we all know I expect
87
00:04:01,600 --> 00:04:04,240
as a property on the action payload.
88
00:04:04,240 --> 00:04:07,123
So we set our notification to such an object.
89
00:04:08,450 --> 00:04:12,400
Now we want to dispatch does show notification action
90
00:04:12,400 --> 00:04:14,740
when we start sending the data
91
00:04:14,740 --> 00:04:18,053
when we're done with the data and if we have an error.
92
00:04:19,050 --> 00:04:24,050
So therefore we can import use dispatch from React Redux
93
00:04:24,410 --> 00:04:27,190
to get access to that dispatch function
94
00:04:27,190 --> 00:04:29,910
by executing use dispatch.
95
00:04:29,910 --> 00:04:34,910
And we import our UI actions from store, UI slice.
96
00:04:40,310 --> 00:04:44,550
And then, and here in user fact, when we sent the card data
97
00:04:44,550 --> 00:04:49,550
we initially dispatch UI action start show notification
98
00:04:50,270 --> 00:04:53,140
and pass an object to show notification
99
00:04:53,140 --> 00:04:56,060
where we set the status to pending let's say,
100
00:04:56,060 --> 00:04:57,340
because we're currently saying
101
00:04:57,340 --> 00:05:01,520
sending the request, the title to sending maybe
102
00:05:02,940 --> 00:05:07,940
and let's say the message to sending cart data.
103
00:05:09,260 --> 00:05:13,173
That could be the, the notification we wanna set now.
104
00:05:14,150 --> 00:05:17,510
Now I also want to dispatch an action once we're done.
105
00:05:17,510 --> 00:05:19,900
So once we got the response data.
106
00:05:19,900 --> 00:05:23,480
I actually don't care about the response data in this case,
107
00:05:23,480 --> 00:05:25,060
because for sending the card
108
00:05:25,060 --> 00:05:27,220
I'm not interested in any response.
109
00:05:27,220 --> 00:05:30,170
So we don't even need to get to the response data
110
00:05:30,170 --> 00:05:33,520
instead knowing that we don't have an error is enough.
111
00:05:33,520 --> 00:05:36,630
So then I want to dispatch a new notification
112
00:05:36,630 --> 00:05:38,930
where the status is success
113
00:05:38,930 --> 00:05:41,350
and it should be success because I'm using
114
00:05:41,350 --> 00:05:43,650
that instead of the notification component
115
00:05:43,650 --> 00:05:47,310
then to adjust the CSS classes.
116
00:05:47,310 --> 00:05:49,400
So I'll set it to success,
117
00:05:49,400 --> 00:05:51,970
have a title of success maybe.
118
00:05:51,970 --> 00:05:56,003
And then we could say sent cart data successfully.
119
00:05:57,680 --> 00:06:00,560
Now, if we have an error, I also wanna dispatch
120
00:06:00,560 --> 00:06:03,810
and I'll do that instead of throwing an error
121
00:06:03,810 --> 00:06:08,320
I'll instead dispatch a new action where I say error
122
00:06:09,370 --> 00:06:11,630
and then have error here as well.
123
00:06:11,630 --> 00:06:16,630
And here we could say, sending cart data failed, like this.
124
00:06:17,310 --> 00:06:20,560
Now this will not handle all kinds of errors though
125
00:06:20,560 --> 00:06:22,520
because we could also have an error
126
00:06:22,520 --> 00:06:24,600
from some other part in this code
127
00:06:24,600 --> 00:06:28,120
instead of just having an invalid response status.
128
00:06:28,120 --> 00:06:30,320
And therefore I'll actually cut this
129
00:06:30,320 --> 00:06:32,600
and go back to throw new error
130
00:06:33,760 --> 00:06:37,750
and simply go below this send cart data function
131
00:06:37,750 --> 00:06:40,683
which we defined, executed here,
132
00:06:42,180 --> 00:06:46,190
and then call catchier to catch any errors
133
00:06:46,190 --> 00:06:49,720
that might be thrown from inside this function.
134
00:06:49,720 --> 00:06:51,570
Since it's an async function,
135
00:06:51,570 --> 00:06:54,980
this send cart data function returns a promise,
136
00:06:54,980 --> 00:06:56,990
so we can call catch on it.
137
00:06:56,990 --> 00:07:00,060
We catch any errors we might be getting here.
138
00:07:00,060 --> 00:07:05,060
And I then dispatch my show notification action
139
00:07:05,210 --> 00:07:07,880
with the error in here.
140
00:07:07,880 --> 00:07:11,523
And that then handles all kinds of errors that could occur.
141
00:07:12,870 --> 00:07:15,790
Now I'm getting some yellow squiggly lines here
142
00:07:15,790 --> 00:07:19,300
because cart is no longer the only dependency year.
143
00:07:19,300 --> 00:07:24,160
The dispatch function is actually also a dependency now.
144
00:07:24,160 --> 00:07:28,350
The dispatch function created by use dispatch.
145
00:07:28,350 --> 00:07:31,410
We can safely add it to the dependencies array
146
00:07:31,410 --> 00:07:33,870
because React Redux will ensure
147
00:07:33,870 --> 00:07:36,880
that this is a function which will never change.
148
00:07:36,880 --> 00:07:40,460
So this patch will never trigger this effect
149
00:07:40,460 --> 00:07:44,050
to rerun only card changes will.
150
00:07:44,050 --> 00:07:46,810
Nonetheless for completeness sake we should add it
151
00:07:46,810 --> 00:07:49,380
to get rid of these yellow squiggly lines.
152
00:07:49,380 --> 00:07:53,020
And now we are dispatching different notification states
153
00:07:53,020 --> 00:07:55,993
depending on the current status we have.
154
00:07:57,110 --> 00:08:00,070
With all those changes made, we can save this
155
00:08:00,070 --> 00:08:05,070
and we now just need to use this new notification UI state.
156
00:08:05,330 --> 00:08:07,890
And I also want to use data and app JS.
157
00:08:07,890 --> 00:08:10,320
I already import you as selector.
158
00:08:10,320 --> 00:08:15,320
And now I just want to also select my notification status
159
00:08:16,630 --> 00:08:19,360
with use selector from the state.
160
00:08:19,360 --> 00:08:23,160
So we're drilling into state dot UI dot notification.
161
00:08:23,160 --> 00:08:26,090
I get that notification property.
162
00:08:26,090 --> 00:08:29,050
And that's either null initially,
163
00:08:29,050 --> 00:08:33,480
or it's an object as set by us as this patched by us
164
00:08:33,480 --> 00:08:36,090
and therefore now we can use notification
165
00:08:36,090 --> 00:08:39,419
to conditionally rendered a notification component
166
00:08:39,419 --> 00:08:41,799
and to then provide extra data
167
00:08:41,799 --> 00:08:43,443
to the notification component.
168
00:08:44,800 --> 00:08:46,960
Now for rendering the notification component,
169
00:08:46,960 --> 00:08:50,130
I'll start by importing fragment from React
170
00:08:50,130 --> 00:08:52,480
because I want to render the notification components
171
00:08:52,480 --> 00:08:55,080
side-by-side to layout
172
00:08:55,080 --> 00:08:59,930
since adjacent JSX isn't allowed I'll use fragment
173
00:08:59,930 --> 00:09:01,910
and wrap that around layout
174
00:09:01,910 --> 00:09:05,600
so that here we can then add notification.
175
00:09:05,600 --> 00:09:08,380
And of course they offer import the notification
176
00:09:08,380 --> 00:09:10,570
component import notification
177
00:09:10,570 --> 00:09:14,280
from slash components, UI notification
178
00:09:15,720 --> 00:09:19,110
and only render notification if we have a notification.
179
00:09:19,110 --> 00:09:21,970
So now I'll check if notification is truthy
180
00:09:21,970 --> 00:09:24,720
and only if it is I render notification.
181
00:09:24,720 --> 00:09:28,810
And then I set the status equal to notification dot status.
182
00:09:28,810 --> 00:09:32,820
I set the title equal to notification dot title
183
00:09:32,820 --> 00:09:34,240
and I'll set the message equal
184
00:09:34,240 --> 00:09:35,693
to notification dot message.
185
00:09:38,690 --> 00:09:42,170
With all that's done if we now save that code,
186
00:09:42,170 --> 00:09:46,290
I get an error, cannot read property UI of undefined.
187
00:09:46,290 --> 00:09:48,910
Yeah, because here I'm using use states.
188
00:09:48,910 --> 00:09:51,670
I auto completed that incorrectly.
189
00:09:51,670 --> 00:09:54,040
That would be used selector.
190
00:09:54,040 --> 00:09:56,123
We don't need use state here.
191
00:09:57,240 --> 00:10:00,223
So let's switch this to use selectors save again.
192
00:10:01,070 --> 00:10:03,680
And now we have the notification right
193
00:10:03,680 --> 00:10:05,890
from the start when I reload.
194
00:10:05,890 --> 00:10:08,040
The reason for this is that initially
195
00:10:08,040 --> 00:10:10,480
sends a cart to request
196
00:10:10,480 --> 00:10:12,700
if I reload and I have the network tab open
197
00:10:12,700 --> 00:10:16,730
we see there's a cart request being sent to firebase.
198
00:10:16,730 --> 00:10:20,650
So the good thing is we see the pending state briefly
199
00:10:20,650 --> 00:10:21,890
and then the success States.
200
00:10:21,890 --> 00:10:23,540
So that works.
201
00:10:23,540 --> 00:10:25,180
But of course we don't want to send
202
00:10:25,180 --> 00:10:27,350
the cart stayed right at the beginning
203
00:10:27,350 --> 00:10:30,380
because dead will then always override our existing cart
204
00:10:30,380 --> 00:10:34,270
on the backend with an empty cart when the app loads.
205
00:10:34,270 --> 00:10:36,900
Working around that as simple in app JS
206
00:10:36,900 --> 00:10:38,740
I just want to make sure
207
00:10:38,740 --> 00:10:40,500
that we don't send the cart
208
00:10:40,500 --> 00:10:42,683
when this runs for the first time.
209
00:10:43,700 --> 00:10:45,400
And for implementing this
210
00:10:45,400 --> 00:10:49,850
we could add a variable here outside of our function
211
00:10:50,840 --> 00:10:54,563
maybe name it is initial and set it to true.
212
00:10:56,090 --> 00:10:58,530
And I define it outside of my component function
213
00:10:58,530 --> 00:11:00,450
so that this does not change.
214
00:11:00,450 --> 00:11:02,130
And it's not re initialized
215
00:11:02,130 --> 00:11:04,150
if the component renders again,
216
00:11:04,150 --> 00:11:05,660
instead this will be initialized
217
00:11:05,660 --> 00:11:08,373
when this file is parsed for the first time.
218
00:11:09,460 --> 00:11:11,820
So when my application started therefore
219
00:11:11,820 --> 00:11:13,520
and that's exactly what I want
220
00:11:13,520 --> 00:11:16,160
and we can use his initial here
221
00:11:16,160 --> 00:11:20,150
to check if his initial
222
00:11:20,150 --> 00:11:22,470
and if that's the case I'll return.
223
00:11:22,470 --> 00:11:26,170
I'll not continue so I'll not send my cart data.
224
00:11:26,170 --> 00:11:28,080
However, I don't just want to do that
225
00:11:28,080 --> 00:11:31,030
but I now also want to set his initial two false
226
00:11:31,970 --> 00:11:34,030
so that this will never happen again
227
00:11:34,030 --> 00:11:36,450
but it only blocks this cart data
228
00:11:36,450 --> 00:11:40,020
from being sent the first time this effect executes
229
00:11:40,020 --> 00:11:41,933
so when the application started.
230
00:11:43,030 --> 00:11:45,350
With that addition made here,
231
00:11:45,350 --> 00:11:48,170
if I reload we don't see the notification.
232
00:11:48,170 --> 00:11:50,520
We're not sending that cart request
233
00:11:50,520 --> 00:11:52,270
but if I add something to my cart,
234
00:11:52,270 --> 00:11:53,770
we have the pending state
235
00:11:53,770 --> 00:11:58,020
and then the success state, and that works just fine.
236
00:11:58,020 --> 00:12:00,660
Now let's also test the error state
237
00:12:00,660 --> 00:12:05,660
by removing dot Jason and therefore breaking that.
238
00:12:05,740 --> 00:12:08,040
If we now save this and reload
239
00:12:08,040 --> 00:12:10,823
if I add to cart, we see the error state.
240
00:12:11,780 --> 00:12:14,290
So that is working exactly as it should.
241
00:12:14,290 --> 00:12:16,883
And therefore let's bring back dot Jason.
242
00:12:18,090 --> 00:12:22,003
Now, if we reload, we can send data to the cart again.
243
00:12:23,080 --> 00:12:25,200
So that is working, but of course we're never
244
00:12:25,200 --> 00:12:27,370
fetching that card from firebase
245
00:12:27,370 --> 00:12:28,970
and therefore after a reload
246
00:12:28,970 --> 00:12:31,570
we still start with an empty cart again
247
00:12:31,570 --> 00:12:34,270
because we're not using that firebase data.
248
00:12:34,270 --> 00:12:37,450
And of course, that's only one way of handling it
249
00:12:37,450 --> 00:12:41,560
putting all that side-effect logic into our component
250
00:12:41,560 --> 00:12:45,120
and that's perfectly fine, but there is an alternative.
251
00:12:45,120 --> 00:12:47,543
And of course we also want to fetch data.
19825
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.