Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,390 --> 00:00:03,230
We've got basics out of the way, of course.
2
00:00:03,270 --> 00:00:10,110
Let's take a look at the more complex example where we're performing some type of data matching and
3
00:00:10,110 --> 00:00:16,380
then we have the loadings that we have the error state, and then we have the final say that if everything
4
00:00:16,380 --> 00:00:22,530
weren't successful, because otherwise you're probably thinking, well, there's probably no scenario
5
00:00:22,770 --> 00:00:28,680
where we'll be statically changing this data from true false meaning.
6
00:00:28,980 --> 00:00:31,650
Of course, I would want to do it somehow dynamically.
7
00:00:31,690 --> 00:00:39,080
And one very good use case is by setting up some type of data, which we already covered in years of
8
00:00:39,100 --> 00:00:39,360
fact.
9
00:00:39,630 --> 00:00:45,240
But of course, in this case, it is just going to be a little bit different where I would want to still
10
00:00:45,240 --> 00:00:46,020
keep my loading.
11
00:00:46,230 --> 00:00:47,430
So that stays.
12
00:00:47,430 --> 00:00:49,140
We still have our set loading.
13
00:00:49,500 --> 00:00:53,010
That also can stay on line as far as you state.
14
00:00:53,490 --> 00:00:57,870
You can go with Trull initially or you can go with files.
15
00:00:58,230 --> 00:00:59,610
That is up to you.
16
00:00:59,900 --> 00:01:01,550
In my case, I'm going to go with them.
17
00:01:02,250 --> 00:01:09,780
So initially the loading will be true and then I would want to more state values and those are going
18
00:01:09,780 --> 00:01:10,760
to be error.
19
00:01:11,160 --> 00:01:13,650
So in here also is error.
20
00:01:13,650 --> 00:01:22,290
And by the way, again, this is one of those common scenarios where a convention is to use this is
21
00:01:22,290 --> 00:01:28,890
if you have some kind of boolean online or whatever, and again, there's no rule for it is just something
22
00:01:28,890 --> 00:01:36,030
that you will see, I would say somewhat a lot more people just how this is and then whatever is the
23
00:01:36,030 --> 00:01:36,330
name.
24
00:01:36,330 --> 00:01:39,240
And then, of course, we still have our set function.
25
00:01:39,600 --> 00:01:41,940
But again, it is just the naming convention.
26
00:01:42,300 --> 00:01:44,160
If you don't want, you don't need to follow it.
27
00:01:44,400 --> 00:01:49,590
And again, we're setting up a state value and by default, error will be false.
28
00:01:49,820 --> 00:01:53,430
And let me add that is in front of the loading as well.
29
00:01:53,640 --> 00:01:54,810
So is loading.
30
00:01:55,930 --> 00:02:02,350
And then set is morning, and the last one will be yuzu, and essentially, as you can already see by
31
00:02:02,350 --> 00:02:07,330
the URL, we'll just be checking for one get Abuzer.
32
00:02:07,330 --> 00:02:12,520
And if the user exists, beautiful, we'll display some data, just some very basic data.
33
00:02:12,790 --> 00:02:17,560
And if we are loading, then, of course, we'll display one content.
34
00:02:17,770 --> 00:02:20,200
Then if there is now, there's going to be another content.
35
00:02:20,210 --> 00:02:26,110
And eventually, if there is a user, then of course everything is great and the user will be displayed.
36
00:02:26,500 --> 00:02:34,180
And in here we'll have a set user and then use state and we'll go with default user.
37
00:02:34,420 --> 00:02:34,840
Awesome.
38
00:02:35,350 --> 00:02:40,780
Now, like I just said, will be performing efforts request and we already know that we would need a
39
00:02:40,780 --> 00:02:40,990
user.
40
00:02:41,380 --> 00:02:42,600
That's why it is important.
41
00:02:43,000 --> 00:02:49,900
But before we do anything, let's just decide well what we're going to display based on those values.
42
00:02:50,290 --> 00:02:53,890
And we start by loading and we'll see if.
43
00:02:54,810 --> 00:03:01,350
Is loading Astro Van just the showcase that we can add way more than just heading to, I'll just place
44
00:03:01,350 --> 00:03:02,280
a dare again.
45
00:03:02,280 --> 00:03:07,580
Let's just signals that you can have as big of a return you would want over here.
46
00:03:07,950 --> 00:03:10,880
So it just right loading and then dot, dot, dot.
47
00:03:11,100 --> 00:03:13,930
So that happens if the loading is true.
48
00:03:14,370 --> 00:03:16,440
Now, in this case, we also have the Izarra.
49
00:03:16,440 --> 00:03:16,900
Correct.
50
00:03:17,190 --> 00:03:19,410
So here we go is error.
51
00:03:19,780 --> 00:03:27,420
And again, I'll just skip a little bit by copying pasting and now say there was an error or error,
52
00:03:28,110 --> 00:03:32,330
something that was nice and short and sweet.
53
00:03:32,820 --> 00:03:35,040
So let's say that, of course, now we have loading.
54
00:03:35,040 --> 00:03:35,900
Why now?
55
00:03:35,930 --> 00:03:36,720
Because this is true.
56
00:03:36,870 --> 00:03:37,310
Correct.
57
00:03:37,560 --> 00:03:40,260
And then as far as they are, it is false to begin with.
58
00:03:40,560 --> 00:03:43,040
And then eventually we have the default cache.
59
00:03:43,500 --> 00:03:50,010
So if there is no loading, if there's no error, then of course I would want to display my user, which
60
00:03:50,010 --> 00:03:57,570
simply will be a div somewhere online where we have the heading one.
61
00:03:58,230 --> 00:04:06,060
I'll just display the user so you can probably already guess that if I set my loading to be false.
62
00:04:07,180 --> 00:04:13,330
Now, none of the first conditions are met, so we just go with the defalcation where we display our
63
00:04:13,330 --> 00:04:18,590
user, but the moment loading will be true and of course, it will be displayed.
64
00:04:19,030 --> 00:04:19,730
So that is good.
65
00:04:19,960 --> 00:04:21,690
That is going to be our return.
66
00:04:21,970 --> 00:04:28,620
So now let's set up our request in the use effect where we will control our conditions.
67
00:04:28,900 --> 00:04:31,180
So let's go with use fact.
68
00:04:31,480 --> 00:04:34,480
Let's pass in the callback function now right away.
69
00:04:34,490 --> 00:04:35,740
Set up a second argument.
70
00:04:35,930 --> 00:04:36,760
I recovered.
71
00:04:36,760 --> 00:04:37,680
Why we using it.
72
00:04:37,870 --> 00:04:43,300
So please, if you need to go back, go back to the last video of usufruct where we covered that in
73
00:04:43,300 --> 00:04:46,480
detail because I don't want to repeat myself all right away.
74
00:04:46,930 --> 00:04:52,240
This empty array, meaning it will just run once and once we do it.
75
00:04:52,240 --> 00:04:53,200
Let's run.
76
00:04:53,200 --> 00:04:55,530
Futch, let's go with you URL.
77
00:04:55,570 --> 00:05:00,420
As you can see, in this case, I'm not using as in Kuwait and I'm typing everything within a callback
78
00:05:00,420 --> 00:05:02,650
question just to showcase that.
79
00:05:02,650 --> 00:05:06,460
As always, you have multiple ways how you can achieve the same thing.
80
00:05:06,820 --> 00:05:11,440
So you don't think that you always need to use a separate function that is incorrect.
81
00:05:11,650 --> 00:05:16,660
Now, that is my preference because I find the syntax to be more straightforward, but you don't have
82
00:05:16,660 --> 00:05:16,860
to.
83
00:05:17,110 --> 00:05:23,410
And then we know that with which we have done then, because, of course, we are getting back the promise
84
00:05:23,680 --> 00:05:26,880
and then we still need to go with our Jason.
85
00:05:27,220 --> 00:05:28,630
So let's go the response.
86
00:05:29,650 --> 00:05:38,350
And now I would want to return response, Jason, online also, I could set up a catch and if there
87
00:05:38,350 --> 00:05:46,960
is error, let's just start by logging the error and there's going to be a little bit of code in here,
88
00:05:47,440 --> 00:05:50,580
because as far as the fetch, it has a gotcha.
89
00:05:50,950 --> 00:05:53,980
So now at the moment, we fetch everything, we return.
90
00:05:53,980 --> 00:05:55,450
Drayson Beautiful.
91
00:05:55,690 --> 00:05:58,340
Well, what are we doing after that?
92
00:05:58,720 --> 00:06:05,400
Well, in between we'll set up another dart event and here we should have the user.
93
00:06:05,830 --> 00:06:10,120
So let's set up our function again, user for the time being.
94
00:06:10,540 --> 00:06:13,510
Let's just log whether we're getting the user.
95
00:06:14,080 --> 00:06:15,040
So let's say right here.
96
00:06:16,450 --> 00:06:24,900
And that if we inspect, we should see a user and of course we do, so that is our object.
97
00:06:25,690 --> 00:06:29,050
So we successfully set up a request.
98
00:06:29,680 --> 00:06:34,360
So now the question is how we can start operating with these values?
99
00:06:35,080 --> 00:06:40,140
Well, first, we need to understand when are we calling this function?
100
00:06:40,630 --> 00:06:49,510
So in my case, if I set loading right away to tomorrow when I would want to change it, well, I guess
101
00:06:49,510 --> 00:06:52,160
when I get my data correct.
102
00:06:52,480 --> 00:06:58,480
So once I successfully have my user, then of course I am good to go.
103
00:06:59,360 --> 00:07:06,580
Now, if, of course, the user doesn't exist, then it's going to be a different ballgame shown here.
104
00:07:06,590 --> 00:07:09,020
Let's add curly braces like so.
105
00:07:09,410 --> 00:07:15,320
And now let's just set up a user first and then let's hide that loading.
106
00:07:15,710 --> 00:07:20,420
Now, I already know that user will be here in the logging.
107
00:07:21,240 --> 00:07:23,910
That's what I would want to actually display.
108
00:07:24,230 --> 00:07:30,980
So since the user is an object, I'll just seconds and then I'll be looking for logging that is coming
109
00:07:30,980 --> 00:07:31,910
from the user.
110
00:07:32,210 --> 00:07:33,830
And then I have two functions.
111
00:07:34,310 --> 00:07:38,980
I have set the user and then I have set loading.
112
00:07:39,380 --> 00:07:43,560
So since my initial loading is true, since it is shown.
113
00:07:43,760 --> 00:07:50,630
Now, of course once I have the user, then I would want to hide the first alstrup set user and I'll
114
00:07:50,630 --> 00:07:51,780
pass in my login.
115
00:07:52,070 --> 00:07:53,590
That's the only thing that I'm looking for.
116
00:07:53,870 --> 00:07:56,600
And then the second thing is set is loading.
117
00:07:56,870 --> 00:08:02,660
And now of course, I would want to set it equal to false y well, because I have my data correct.
118
00:08:03,020 --> 00:08:04,700
Instead of default user.
119
00:08:05,060 --> 00:08:12,710
Now I have my login, now I have the name of my user and then once I set the login then of course I
120
00:08:12,710 --> 00:08:15,030
can right away call set is loading.
121
00:08:15,800 --> 00:08:21,650
So once we'll save will notice that we'll have our initial state of loading.
122
00:08:22,280 --> 00:08:28,850
And then once we have our data, everything is exactly like we expected.
123
00:08:29,390 --> 00:08:36,350
OK, so that's the first thing that we can do with multiple returns where we have a loading site which
124
00:08:36,350 --> 00:08:42,770
is either displayed right from the get go or another way you could do it like this where you say false.
125
00:08:43,140 --> 00:08:44,870
So technically it's not displayed.
126
00:08:44,870 --> 00:08:53,380
But when you set up your fetch or right before, I guess we can set up loading, that is true.
127
00:08:53,420 --> 00:08:55,780
So that is another option that you can do.
128
00:08:56,150 --> 00:08:57,000
So let's go here.
129
00:08:57,020 --> 00:08:59,510
That is loading and we'll set it equal to true.
130
00:08:59,750 --> 00:09:05,240
And now what you'll notice first again, we have this for split second loading and then, of course,
131
00:09:05,240 --> 00:09:07,490
eventually we change the state.
132
00:09:07,820 --> 00:09:10,670
We say set is loading is actually equal to false.
133
00:09:11,000 --> 00:09:17,300
And then, of course, instead of is loading, which was true in the beginning, now we just go with
134
00:09:17,300 --> 00:09:18,190
our default one.
135
00:09:18,590 --> 00:09:20,480
OK, hopefully that is clear.
136
00:09:20,510 --> 00:09:23,270
Now, again, I'm just going to go by default.
137
00:09:23,480 --> 00:09:24,650
Cerita True.
138
00:09:24,980 --> 00:09:31,760
And then here I said set e loading defaults, which is remember, you have this option as well.
139
00:09:31,970 --> 00:09:38,120
Now, if you want to see that loading for longer, the only thing you need to do is just go to new window
140
00:09:38,330 --> 00:09:41,780
Vinograd or start a localhost and learn.
141
00:09:41,780 --> 00:09:43,850
I'm going to go with three thousand.
142
00:09:44,510 --> 00:09:49,730
And in here we can just slow down the network a little bit just so you can see.
143
00:09:50,210 --> 00:09:59,060
And we do that in network and I'm going to be looking for 3G, the first one on line once I refresh.
144
00:09:59,390 --> 00:10:02,450
Now there's going to be a loading dot, dot, dot, dot, dot.
145
00:10:02,630 --> 00:10:06,710
And then once we get the data, then of course we flip it.
146
00:10:07,040 --> 00:10:08,180
Hopefully this is clear.
147
00:10:08,420 --> 00:10:13,460
As you can see, it's not like every time we'll just do that manually changing these values.
148
00:10:13,790 --> 00:10:15,970
Notice how this is happening dynamically.
149
00:10:16,340 --> 00:10:24,920
Now, one problem with a fetch is that when you talk about this error, essentially you are not talking
150
00:10:24,920 --> 00:10:26,150
about four or four.
151
00:10:26,150 --> 00:10:29,230
For example, you're talking about the network.
152
00:10:30,200 --> 00:10:36,770
So when I'm trying to say is if I'll add here as well, technically that kind of user doesn't exist,
153
00:10:36,950 --> 00:10:40,310
but it is not going to trigger my error over here.
154
00:10:40,880 --> 00:10:49,010
OK, and this is why we'll have to do a little bit of dancing around where when we are getting the JSON
155
00:10:49,010 --> 00:10:54,770
right before that, essentially will check what is the status of our response.
156
00:10:54,800 --> 00:11:03,290
Again, this has nothing to do with react and has to do with fetch where as far as built in functionality,
157
00:11:03,410 --> 00:11:10,560
it doesn't trigger the error if the status is four or four, which means that there is no such user.
158
00:11:10,850 --> 00:11:17,600
So how we would fix it, like I said we would set up over here is because there's going to be a bit
159
00:11:17,600 --> 00:11:18,710
more functionality.
160
00:11:19,010 --> 00:11:24,530
So within the calibrations, I will check what is the status of my response.
161
00:11:24,920 --> 00:11:31,430
And if the status is between two hundred and then three hundred, then I would want to return JSON because
162
00:11:31,430 --> 00:11:32,690
I know that everything is correct.
163
00:11:32,840 --> 00:11:39,210
However, if the status is not between two and three hundred, then of course I will throw the error.
164
00:11:39,470 --> 00:11:42,920
So then eventually I'll call this set is error again.
165
00:11:43,610 --> 00:11:49,820
For example, with Axios you would have a different setup because AXA's deals with those kind of errors.
166
00:11:49,820 --> 00:11:56,960
But as far as Futch, when you talk about Kuch, you're not catching here for or for the not fun.
167
00:11:57,140 --> 00:11:58,790
You're just catching the network.
168
00:11:59,240 --> 00:12:05,270
That's why we're doing this whole setup, and like I said, I'll go with the response and then status
169
00:12:05,630 --> 00:12:11,030
and I'll see if it is bigger or equal to two hundred.
170
00:12:11,510 --> 00:12:20,720
And let's do the and operator response and status status and less than two hundred ninety nine.
171
00:12:21,270 --> 00:12:22,610
So two hundred ninety nine.
172
00:12:22,940 --> 00:12:26,600
If that is the case then I would want to return my Jason.
173
00:12:26,900 --> 00:12:32,440
So say he return and I'll look for response and then Jason.
174
00:12:32,870 --> 00:12:39,350
So if that is the case, how or if it is not a case, if it is for or for like we have over here, then
175
00:12:39,350 --> 00:12:41,840
I'll set up my house again.
176
00:12:41,840 --> 00:12:48,170
I'll have to set is lowering to force because initially in my case it is true.
177
00:12:49,120 --> 00:12:52,000
That next we would need to set is.
178
00:12:52,450 --> 00:12:57,820
So now, of course, I would want to trigger that state set is here and now.
179
00:12:57,820 --> 00:13:00,550
Of course we are setting it equal to zero.
180
00:13:00,910 --> 00:13:07,810
So now we can already guess that where we have these multiple returns, this will meet this condition.
181
00:13:08,410 --> 00:13:10,890
So is error now will be true.
182
00:13:11,380 --> 00:13:11,780
Correct.
183
00:13:12,250 --> 00:13:16,150
And once that is the case, we should see this error that up.
184
00:13:16,420 --> 00:13:21,280
And then again, it's not a reacting, but I'll also throw the error.
185
00:13:21,430 --> 00:13:29,770
So I'll say here, throw knew an error and I'll go with response and then statistics.
186
00:13:30,100 --> 00:13:32,860
Usually that's where we can find more info.
187
00:13:33,140 --> 00:13:34,440
Of course, this is not correct.
188
00:13:34,450 --> 00:13:35,840
It needs to be error.
189
00:13:36,220 --> 00:13:39,640
And once we save notice, now we have the error.
190
00:13:39,910 --> 00:13:40,870
So we have error.
191
00:13:40,920 --> 00:13:43,600
DataDot So first we were loading.
192
00:13:43,900 --> 00:13:47,380
You can clearly see that once I refresh or split second we're loading.
193
00:13:47,800 --> 00:13:56,260
And then since our YORO is incorrect, since there is no user, we are hearing the error, of course.
194
00:13:56,620 --> 00:14:01,900
And then since we're hitting the error now, we're displaying Dev and not having one with error.
195
00:14:02,110 --> 00:14:03,040
Dot, dot, dot.
196
00:14:03,250 --> 00:14:08,320
And as a side note, of course you can place here spinner's or whatever you would want.
197
00:14:08,650 --> 00:14:13,360
So once we start working on more interesting projects, you'll see how that works as well.
198
00:14:13,660 --> 00:14:20,590
But essentially the main idea is following where we can have multiple states and then depending on that
199
00:14:20,590 --> 00:14:22,970
state, we are setting up the returns.
200
00:14:22,990 --> 00:14:27,550
Again, keep in mind, you can return different components.
201
00:14:27,910 --> 00:14:33,650
You can return a bunch of HDMI elements or whatever you want.
202
00:14:34,060 --> 00:14:37,200
This is just a most basic example.
203
00:14:37,660 --> 00:14:39,370
OK, hopefully that is clear.
204
00:14:39,880 --> 00:14:43,180
Let me go back to a proper user.
205
00:14:43,390 --> 00:14:47,140
And now, as you can see, I first have the loading.
206
00:14:47,710 --> 00:14:54,640
Then since there is no error, I'm just setting up the user and removing the loading because I said
207
00:14:54,660 --> 00:14:57,580
that is loading equal to false.
19389
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.