1 00:00:02,170 --> 00:00:04,350 The layout component has been adjusted, 2 00:00:04,360 --> 00:00:12,430 what about withErrorHandler? Now withErrorHandler is a higher order component that returns a 3 00:00:12,430 --> 00:00:13,570 class-based component 4 00:00:13,570 --> 00:00:16,420 and I want to convert this class-based component. 5 00:00:16,420 --> 00:00:22,690 So here, I'll just return an anonymous functional component, so a function that receives props and will 6 00:00:22,690 --> 00:00:24,740 in the end return JSX, 7 00:00:24,760 --> 00:00:29,690 so get rid of that render method here and have one closing curly brace down there 8 00:00:29,920 --> 00:00:34,340 and now in here, we're also using componentWillMount and willUnmount 9 00:00:34,570 --> 00:00:39,400 and we're also using state. This will all not work in our functional component. 10 00:00:39,400 --> 00:00:45,550 So for the state, we'll need to use the useState hook and for componentWillMount and 11 00:00:45,630 --> 00:00:46,280 componentWillUnmount, 12 00:00:46,420 --> 00:00:49,300 we'll have to use the useEffect hook. 13 00:00:49,300 --> 00:00:50,700 Now let's start with the state. 14 00:00:50,740 --> 00:00:57,800 This manages our error and it starts with null here, so let's actually useState here and pass in 15 00:00:57,850 --> 00:00:58,820 null 16 00:00:59,080 --> 00:01:08,910 and let's extract error and setError here. Now for componentWillUnmount, we can't use 17 00:01:08,960 --> 00:01:14,960 useEffect because that will always run after the render cycle and we want to execute this code before 18 00:01:14,990 --> 00:01:16,880 we render our content. 19 00:01:16,910 --> 00:01:18,760 Well, what could be the solution here? 20 00:01:20,060 --> 00:01:21,800 It's actually straightforward. 21 00:01:22,010 --> 00:01:26,690 Since you want to execute that code before your JSX code gets rendered, 22 00:01:26,720 --> 00:01:33,830 you just can remove componentWillUnmount and you're done because our JSX code gets rendered 23 00:01:33,830 --> 00:01:34,810 down there, 24 00:01:34,820 --> 00:01:36,400 this code runs up here, 25 00:01:36,440 --> 00:01:42,530 it does run before the JSX code is reached. Now the only thing I want to change is the request interceptor 26 00:01:42,530 --> 00:01:49,550 here, I'll store this in a constant and not in some property of our class which we don't have here and 27 00:01:49,550 --> 00:01:51,240 the rest can almost stay the same 28 00:01:51,260 --> 00:01:57,780 but of course here where I want to set error to null, I will call setError and set this to null 29 00:01:58,160 --> 00:02:05,510 and here where I want to set it to the error object I'm getting, I'll call setError and pass in that 30 00:02:05,540 --> 00:02:06,810 error object. 31 00:02:06,890 --> 00:02:13,070 Now to avoid naming clashes here and confusion, I'll rename this argument I get here to just err and 32 00:02:13,070 --> 00:02:14,460 I will set err 33 00:02:14,520 --> 00:02:16,030 here in setError. 34 00:02:17,810 --> 00:02:21,950 Now for componentWillUnmount, we can use useEffect. 35 00:02:22,190 --> 00:02:28,370 We can use useEffect because in the function we pass into this, if we return a function there, that will 36 00:02:28,370 --> 00:02:36,290 be our clean up function. So we can pass our cleanup work into this return function there and remove 37 00:02:36,320 --> 00:02:40,270 one curly brace. Now there is one important thing though, 38 00:02:40,490 --> 00:02:46,130 if you want to run this on unmounting, you have to pass a second argument to useEffect which is this 39 00:02:46,190 --> 00:02:52,070 empty array of elements because again React will check all the elements you pass here and only when 40 00:02:52,070 --> 00:02:58,370 they change, when their values change, it will rerun your useEffect function and also your useEffect 41 00:02:58,370 --> 00:03:00,100 clean up function here. 42 00:03:00,110 --> 00:03:05,180 Now if you pass an empty array, these will never change and therefore React will run your main function 43 00:03:05,180 --> 00:03:10,100 content when the component mounts and your cleanup function when it unmounts. 44 00:03:10,100 --> 00:03:17,450 But actually here, this would work but we could also say that we want to rerun this effect and therefore 45 00:03:17,600 --> 00:03:19,540 clean up our interceptors 46 00:03:19,640 --> 00:03:25,960 whenever our request or response interceptor here changes and there by the way, you should remove the 47 00:03:25,970 --> 00:03:31,950 this keyword because I want to refer to my constants here, not to some class property we don't have anymore. 48 00:03:32,240 --> 00:03:37,370 Now since we want to clean up when any of these two changes, we can also passt request interceptor 49 00:03:37,460 --> 00:03:45,140 and response interceptor as arguments or as elements here in this array to useEffect and this is 50 00:03:45,140 --> 00:03:50,750 then a set up we can definitely use because this ensures that we clean this up whenever our interceptors 51 00:03:50,750 --> 00:03:51,740 change. 52 00:03:51,890 --> 00:03:58,170 Now for the errorConfirmedHandler, I'll add const to make this a function inside of the functional component 53 00:03:58,400 --> 00:04:01,520 and when I call set state to set the error to null, 54 00:04:01,520 --> 00:04:09,070 I will call setError and pass null. Now last but not least down here in the JSX code, 55 00:04:09,070 --> 00:04:16,990 when I use this state error, I'll just use error in all these places because we do extract error up here 56 00:04:16,990 --> 00:04:18,030 from useState, 57 00:04:18,100 --> 00:04:25,620 so I'm using that down here now and this will hold the error we set with setError in our place here. 58 00:04:25,660 --> 00:04:33,010 Now regarding the function I pass to modal closed, that is passed without this because it's now just 59 00:04:33,010 --> 00:04:38,280 a function in this function body and for the props I pass to the wrapped component, 60 00:04:38,350 --> 00:04:43,210 these are passed without this because I'm not referring to a property of my class here but to 61 00:04:43,210 --> 00:04:45,620 the props we're getting as an argument there. 62 00:04:48,070 --> 00:04:51,520 With that, we should have an error handler that works again, 63 00:04:52,000 --> 00:04:59,230 so let's actually try this. Now to try that, I'm in Firebase here and there for the rules where I fetched 64 00:04:59,230 --> 00:05:05,980 my ingredient data, I'll set read access to false and this will therefore prevent us from reading our 65 00:05:05,980 --> 00:05:06,660 ingredients 66 00:05:06,670 --> 00:05:13,020 and now when I load, we indeed see that error modal which I can dismiss. 67 00:05:13,020 --> 00:05:14,610 So this works as before, 68 00:05:14,640 --> 00:05:19,770 now with our functional component in the hooks and of course now we can also set this back to true 69 00:05:19,940 --> 00:05:23,170 so that we can load the ingredients again. 70 00:05:23,220 --> 00:05:23,760 Here we go.