1
00:00:02,470 --> 00:00:06,620
So with the modal converted, we're only using functional components here.

2
00:00:06,880 --> 00:00:13,090
To conclude this module, I now want to build a custom hook because in this module here, we only saw

3
00:00:13,150 --> 00:00:18,760
useState and useEffect and for a good reason, because these are the most important hooks and I hope it was

4
00:00:18,760 --> 00:00:25,300
helpful seeing them in action and seeing which roles we previously filled with class-based components

5
00:00:25,300 --> 00:00:33,010
and lifecycle hooks, they can play or how they can replace that old code. But we can also create a custom

6
00:00:33,010 --> 00:00:34,840
hook in this project actually

7
00:00:34,840 --> 00:00:40,050
and that is related to our withErrorHandler higher order component.

8
00:00:40,120 --> 00:00:46,930
Now obviously we can leave that component as it is but this entire logic I have in here, all this logic,

9
00:00:47,290 --> 00:00:53,260
we can outsource this into a custom hook actually and then we could use this hook in any component where

10
00:00:53,260 --> 00:00:57,320
we want to find out whether we had an HTTP request error or not

11
00:00:57,460 --> 00:01:00,760
and then we could decide in that component where we use that hook

12
00:01:00,760 --> 00:01:05,570
what we want to do. We don't have to show our modal, we could do anything we want.

13
00:01:05,630 --> 00:01:13,930
So I'll create a new folder which I'll name hooks and in there, I'll add my http-error-handler.js

14
00:01:13,930 --> 00:01:23,130
file. Now in there I'll import from React, not React itself because I am not rendering any JSX

15
00:01:23,130 --> 00:01:29,760
in here but I will import useState and useEffect because these are the hooks I'm using in withErrorHandler

16
00:01:29,760 --> 00:01:31,640
as well.

17
00:01:31,790 --> 00:01:40,790
Now I'll cut all that logic here in withErrorHandler and go back to the http-error-handler and

18
00:01:40,790 --> 00:01:51,020
export a default function here which will receive axios or the HTTP client, whatever you want to

19
00:01:51,020 --> 00:01:58,000
name it, you can name this argument however you want, object and in the function body, I'll paste in that

20
00:01:58,000 --> 00:02:04,780
logic we extracted from withErrorHandler. Axioss now should be replaced and all these places here with

21
00:02:04,840 --> 00:02:11,890
HTTP client and now this assumes that we could pass in any client, as long as it uses this API, so

22
00:02:11,890 --> 00:02:17,770
as long as it has an interceptors field where we can use request use and so on which will probably only

23
00:02:17,770 --> 00:02:24,760
be true for axios but nonetheless. Then I'm managing my state up here, we're setting up the interceptors,

24
00:02:24,820 --> 00:02:31,090
we're cleaning up these interceptors when they change and in the end here, I want to return an array

25
00:02:31,600 --> 00:02:39,610
where I return my error object and the errorConfirmedHandler. So I return the error we might have gone

26
00:02:39,880 --> 00:02:46,870
and a function that allows us to clear the error. And now we can import our custom hook here into

27
00:02:46,960 --> 00:02:49,680
withErrorHandler and therefore get rid of the hook

28
00:02:49,690 --> 00:02:50,980
imports there,

29
00:02:51,070 --> 00:02:51,610
so let's

30
00:02:54,040 --> 00:02:59,140
import use because your custom hooks should always start with a lowercase

31
00:02:59,170 --> 00:03:10,640
use, useHttpErrorHandler from and now go to the hooks folder and then import from that 

32
00:03:10,660 --> 00:03:15,330
http-error-handler JavaScript file without the file extension here of course.

33
00:03:15,390 --> 00:03:19,510
And now here, we can call useHttpErrorHandler

34
00:03:19,740 --> 00:03:26,100
and this function is created such that it returns this array with the error and that function to clear

35
00:03:26,100 --> 00:03:37,490
the error. So therefore I can also use, for this specific custom hook, array destructuring and get my

36
00:03:37,580 --> 00:03:42,460
error object and maybe a clearError method

37
00:03:42,800 --> 00:03:51,170
and then here I will call or assign clearError down there and well, I will leave this as error because

38
00:03:51,190 --> 00:03:54,020
I am naming this error up here too. Now

39
00:03:54,260 --> 00:03:56,890
important, I am not using array

40
00:03:56,900 --> 00:04:03,110
destructuring here because we would have to with hooks, the fact that this looks similar to how we use

41
00:04:03,170 --> 00:04:06,250
useState is simply a coincidence.

42
00:04:06,440 --> 00:04:09,820
You can return whatever you want in your custom hooks,

43
00:04:09,860 --> 00:04:11,730
you don't even have to return something,

44
00:04:11,750 --> 00:04:16,430
you can also have a hook that just does something and doesn't return anything but you could also return

45
00:04:16,460 --> 00:04:20,990
a number, text, an object, an array with five elements,

46
00:04:20,990 --> 00:04:26,360
here it just happens to be an array with two elements which looks similar to useState but has nothing

47
00:04:26,360 --> 00:04:28,760
in common otherwise.

48
00:04:28,820 --> 00:04:35,090
So now we have useHttpErrorHandler here and of course technically that will still achieve the same

49
00:04:35,150 --> 00:04:36,320
as we did before.

50
00:04:36,350 --> 00:04:42,950
By the way, we have to pass in axios, that's important because our custom hook here expects to get the

51
00:04:43,170 --> 00:04:46,870
HTTP client, so axios in our case as an argument

52
00:04:47,180 --> 00:04:52,790
but now we could use this hook here anywhere in our application and then it will always give us back

53
00:04:52,790 --> 00:04:55,800
an error object and a clearError method.

54
00:04:55,910 --> 00:05:00,740
And of course we can also keep it in our higher order component which we wrap around other components

55
00:05:00,920 --> 00:05:05,570
but if we ever have other components where we want to use that same error handling logic but we

56
00:05:05,570 --> 00:05:10,880
don't want to show a modal but let's say simply output something on the page, then we can use our hook,

57
00:05:11,180 --> 00:05:15,130
get that error object and do whatever we want to do with that error object

58
00:05:15,130 --> 00:05:17,290
in the JSX code of the component

59
00:05:17,300 --> 00:05:18,280
we're using this hook in.

60
00:05:19,010 --> 00:05:27,140
So now if we save that, let's see if it works by locking down the ingredients again in Firebase and if

61
00:05:27,140 --> 00:05:35,090
I now reload this page, I still get that error modal. So that still seems to work just fine as it did

62
00:05:35,090 --> 00:05:35,830
before,

63
00:05:35,870 --> 00:05:38,510
now with our custom hook doing its work.