Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,200 --> 00:00:04,000
Back in the App component.
2
00:00:04,000 --> 00:00:06,364
I now wanna use my custom hook
3
00:00:06,364 --> 00:00:09,370
and therefore first of all, we have to import it.
4
00:00:09,370 --> 00:00:11,057
So I import useHTTP
5
00:00:12,138 --> 00:00:13,340
from
6
00:00:13,340 --> 00:00:14,173
hooks
7
00:00:14,173 --> 00:00:15,453
use-HTTP.
8
00:00:16,450 --> 00:00:19,750
Then we can get rid of the, isLoading and the error states
9
00:00:19,750 --> 00:00:22,220
because that's now a state which will be managed
10
00:00:22,220 --> 00:00:23,470
by the custom hook.
11
00:00:23,470 --> 00:00:26,233
So we can just call, useHTTP here.
12
00:00:27,160 --> 00:00:29,970
Let me actually call this here after
13
00:00:29,970 --> 00:00:32,133
initializing the Tasks state.
14
00:00:33,150 --> 00:00:36,420
Now the custom hook needs some arguments
15
00:00:36,420 --> 00:00:39,960
because we expect two parameters here, the requestConfig
16
00:00:39,960 --> 00:00:43,010
and a function that is applied to that data
17
00:00:43,010 --> 00:00:43,910
which we get back.
18
00:00:45,570 --> 00:00:47,910
So therefore we should pass that in.
19
00:00:47,910 --> 00:00:50,600
And for the requestConfig we pass in an object
20
00:00:50,600 --> 00:00:51,433
with
21
00:00:51,433 --> 00:00:53,370
a URL property
22
00:00:53,370 --> 00:00:54,880
because inside of the custom hook
23
00:00:54,880 --> 00:00:58,720
we are accessing a URL property here.
24
00:00:58,720 --> 00:01:02,550
And we then also later access method, headers, and body
25
00:01:02,550 --> 00:01:05,580
and therefore for the URL in the App component.
26
00:01:05,580 --> 00:01:08,453
I will pass in this String here.
27
00:01:10,180 --> 00:01:11,730
Now in the custom hook.
28
00:01:11,730 --> 00:01:14,950
We also then expect the method, headers and body.
29
00:01:14,950 --> 00:01:18,650
And the thing is that for App JS,
30
00:01:18,650 --> 00:01:20,342
I just wanna get data
31
00:01:20,342 --> 00:01:23,050
and therefore I wanna send a getRequest
32
00:01:23,050 --> 00:01:24,870
I don't need any headers
33
00:01:24,870 --> 00:01:27,061
and I don't need a body.
34
00:01:27,061 --> 00:01:29,600
And to be flexible enough
35
00:01:29,600 --> 00:01:33,280
and to not force all components to then pass
36
00:01:33,280 --> 00:01:36,730
in some dummy data or anything like that, I will go back
37
00:01:36,730 --> 00:01:39,700
to the custom hook and tweak this configuration here
38
00:01:39,700 --> 00:01:42,170
for the fetchRequest a bit.
39
00:01:42,170 --> 00:01:43,570
And in the case of the method here
40
00:01:43,570 --> 00:01:47,110
check if requestConfig method is set
41
00:01:48,010 --> 00:01:50,330
and only if it is set, I apply it here
42
00:01:50,330 --> 00:01:53,003
and otherwise I set this to GET as a default.
43
00:01:54,300 --> 00:01:58,360
For the headers I will check if headers are provided
44
00:01:58,360 --> 00:02:01,000
on the requestConfig, and if they are
45
00:02:01,000 --> 00:02:03,210
I of course will apply them.
46
00:02:03,210 --> 00:02:05,810
Otherwise I'll set headers to an empty object
47
00:02:07,350 --> 00:02:11,450
and for the body, all check if requestConfig body is set
48
00:02:11,450 --> 00:02:14,160
in which case I will stringify it
49
00:02:14,160 --> 00:02:16,930
so transform it to JSON I mean,
50
00:02:16,930 --> 00:02:20,133
but if we got no body I'll set this to null here.
51
00:02:21,860 --> 00:02:25,530
Now with that, the custom hooks should be flexible enough
52
00:02:25,530 --> 00:02:26,625
so that
53
00:02:26,625 --> 00:02:28,230
useHTTP
54
00:02:28,230 --> 00:02:30,963
can just pass in an object that looks like this.
55
00:02:33,340 --> 00:02:34,660
Now that's not all though.
56
00:02:34,660 --> 00:02:37,480
We also need to provide a second argument
57
00:02:37,480 --> 00:02:38,730
which is that function
58
00:02:38,730 --> 00:02:42,693
which receives the data here in the end.
59
00:02:43,860 --> 00:02:46,510
So therefore I will define a function here.
60
00:02:46,510 --> 00:02:49,240
We could define it in line and the argument list
61
00:02:49,240 --> 00:02:50,680
but to make it a bit more readable
62
00:02:50,680 --> 00:02:54,725
I will define it here before I call useHTTP.
63
00:02:54,725 --> 00:02:58,050
And it will add a function which I'll name
64
00:02:58,962 --> 00:03:00,212
transformTasks,
65
00:03:01,610 --> 00:03:02,820
here
66
00:03:02,820 --> 00:03:05,180
I then expect to get my
67
00:03:05,180 --> 00:03:06,770
tasks object
68
00:03:09,630 --> 00:03:11,803
and inside of transformTasks.
69
00:03:12,800 --> 00:03:15,360
I then wanna apply the transformation logic
70
00:03:15,360 --> 00:03:19,770
which we had in use-HTTP JS before I deleted it there.
71
00:03:19,770 --> 00:03:20,843
But I still have it down here
72
00:03:20,843 --> 00:03:24,890
in App JS because I haven't deleted this code yet.
73
00:03:24,890 --> 00:03:29,890
So it's in the end, this logic lines, 32-36 here in my case
74
00:03:30,140 --> 00:03:33,593
which I wanna copy and add here into transformTasks.
75
00:03:35,020 --> 00:03:38,460
And it's the tasks object through which I wanna loop here
76
00:03:38,460 --> 00:03:42,050
with a for in loop and which I use down there.
77
00:03:42,050 --> 00:03:45,320
And with that, we transform all the tasks from objects
78
00:03:45,320 --> 00:03:47,420
which we get back from firebase
79
00:03:47,420 --> 00:03:51,070
into objects that have the structure and format
80
00:03:51,070 --> 00:03:53,370
we need for our front-end.
81
00:03:53,370 --> 00:03:55,630
And then we set our tasks state
82
00:03:55,630 --> 00:03:59,800
which we can still do since we still have setTasks here.
83
00:03:59,800 --> 00:04:02,303
And we set our loaded tasks like this,
84
00:04:03,280 --> 00:04:06,470
and now it's the transformTasks function,
85
00:04:06,470 --> 00:04:08,620
a pointer at this function
86
00:04:08,620 --> 00:04:12,160
which be pass as a second argument to use-HTTP.
87
00:04:13,970 --> 00:04:16,800
And then this function will be called
88
00:04:16,800 --> 00:04:21,800
for us by the custom hook whenever we got a response
89
00:04:21,940 --> 00:04:24,240
and this is the best of both worlds with that
90
00:04:24,240 --> 00:04:26,560
we have the main logic in the custom hook
91
00:04:26,560 --> 00:04:29,862
but the data specific logic into component
92
00:04:29,862 --> 00:04:31,340
where we need the data
93
00:04:32,670 --> 00:04:35,045
that alone still won't do the trick.
94
00:04:35,045 --> 00:04:39,170
UseHTTP does not just require parameters
95
00:04:39,170 --> 00:04:41,000
it also returned something.
96
00:04:41,000 --> 00:04:44,270
It returns this object with the loading and error states
97
00:04:44,270 --> 00:04:47,630
and the a pointer at the sendRequest function,
98
00:04:47,630 --> 00:04:50,170
which we ultimately will need to call
99
00:04:50,170 --> 00:04:51,653
to trigger that request.
100
00:04:52,500 --> 00:04:53,497
So in App JS,
101
00:04:53,497 --> 00:04:54,570
I
102
00:04:54,570 --> 00:04:56,670
will get back my HTTP
103
00:04:56,670 --> 00:04:57,560
data here.
104
00:04:57,560 --> 00:05:00,140
You can name this constant however you want
105
00:05:00,140 --> 00:05:01,490
and it will de-structure it
106
00:05:03,060 --> 00:05:05,480
by pointing at httpData.
107
00:05:05,480 --> 00:05:10,480
And we can pull out isLoading error and sendRequest.
108
00:05:10,951 --> 00:05:15,510
And of course we can also do the de-structuring right here
109
00:05:15,510 --> 00:05:17,053
and save that extra line.
110
00:05:19,080 --> 00:05:22,260
Now I will also assign an alias here
111
00:05:22,260 --> 00:05:24,900
which is something we can do in JavaScript
112
00:05:24,900 --> 00:05:27,870
by adding a colon here in this de-structuring syntax
113
00:05:27,870 --> 00:05:29,950
and giving this a different name
114
00:05:29,950 --> 00:05:31,883
and I will name it fetchTasks.
115
00:05:32,800 --> 00:05:35,690
So we're still pointing at this sendRequest function
116
00:05:35,690 --> 00:05:36,730
from the custom hook.
117
00:05:36,730 --> 00:05:38,550
I'm just renaming it here
118
00:05:38,550 --> 00:05:40,250
inside of this component function.
119
00:05:41,530 --> 00:05:44,896
And with that, I will delete the old fetchTasks function
120
00:05:44,896 --> 00:05:47,470
in the App JS file.
121
00:05:47,470 --> 00:05:49,750
I will delete it like this
122
00:05:49,750 --> 00:05:51,930
but I will keep useEffect here
123
00:05:51,930 --> 00:05:54,403
where I still call fetchTasks.
124
00:05:55,870 --> 00:05:58,560
Now, here, however, I should add fetchTasks
125
00:05:58,560 --> 00:06:00,000
as a dependency now,
126
00:06:00,000 --> 00:06:01,750
we should have done this before
127
00:06:01,750 --> 00:06:04,060
but before it wasn't really an issue
128
00:06:04,060 --> 00:06:06,518
because in the old fetchTasks function
129
00:06:06,518 --> 00:06:10,020
I was only calling state updating functions
130
00:06:10,020 --> 00:06:12,940
which are guaranteed by React to never change
131
00:06:12,940 --> 00:06:16,880
and React to noticed this and didn't warn me before
132
00:06:17,910 --> 00:06:21,440
but React doesn't know does fetchTasks function
133
00:06:21,440 --> 00:06:23,910
so this sendRequest function at the end.
134
00:06:23,910 --> 00:06:25,608
It doesn't know what's going on in there.
135
00:06:25,608 --> 00:06:27,380
And therefore we have to add it
136
00:06:27,380 --> 00:06:30,134
as a dependency to rerun this effect.
137
00:06:30,134 --> 00:06:32,600
Whenever fetchTasks changes
138
00:06:34,080 --> 00:06:36,610
at the moment this would be a problem though.
139
00:06:36,610 --> 00:06:38,825
And therefore I will delete this dependency.
140
00:06:38,825 --> 00:06:43,100
We will re-add it later because this is not a good practice
141
00:06:43,100 --> 00:06:46,790
but we will avoid this dependency for the moment
142
00:06:46,790 --> 00:06:49,740
because it would create an infinite loop right now.
143
00:06:49,740 --> 00:06:50,933
And we don't want that.
144
00:06:51,820 --> 00:06:53,010
And therefore with that
145
00:06:53,010 --> 00:06:56,170
we now restructured the App component.
146
00:06:56,170 --> 00:06:59,400
We still got access to the isLoading and error states
147
00:06:59,400 --> 00:07:01,370
which we pass on to Tasks
148
00:07:01,370 --> 00:07:03,730
to the Tasks component down there.
149
00:07:03,730 --> 00:07:06,760
And we still get access to fetchTasks
150
00:07:06,760 --> 00:07:10,742
but the logic for sending that request and handling errors
151
00:07:10,742 --> 00:07:13,663
and so on is now part of the custom hook.
152
00:07:14,700 --> 00:07:16,810
And therefore, if we save everything now
153
00:07:17,840 --> 00:07:19,620
this should work again.
154
00:07:19,620 --> 00:07:22,940
And if I reload it still loads all the tasks.
155
00:07:22,940 --> 00:07:24,500
And if I add a new task
156
00:07:26,010 --> 00:07:27,583
that also still works.
157
00:07:28,820 --> 00:07:32,650
So that's now our custom hook being used.
158
00:07:32,650 --> 00:07:34,860
It isn't finished the yet though
159
00:07:34,860 --> 00:07:37,040
because as I mentioned, for example, here
160
00:07:37,040 --> 00:07:40,100
we're not using it in a best practice way.
161
00:07:40,100 --> 00:07:42,943
Let's therefore do that in the next lecture.
12115
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.