1 00:00:00,570 --> 00:00:01,650 Instructor: So we've now wrapped up 2 00:00:01,650 --> 00:00:04,620 our authenticated higher order component. 3 00:00:04,620 --> 00:00:08,460 I just wanna do a quick wrap up and refresh our memories 4 00:00:08,460 --> 00:00:10,590 on some of the topics that we covered. 5 00:00:10,590 --> 00:00:12,240 First, we looked at a diagram, 6 00:00:12,240 --> 00:00:14,280 well we looked at a lot of diagrams, 7 00:00:14,280 --> 00:00:16,140 but the purpose of this diagram 8 00:00:16,140 --> 00:00:18,330 was just to illustrate that a higher order component 9 00:00:18,330 --> 00:00:20,040 is something that wraps a component 10 00:00:20,040 --> 00:00:21,660 that we've already created. 11 00:00:21,660 --> 00:00:24,810 So by combining a component and a higher order component, 12 00:00:24,810 --> 00:00:27,780 we get a enhanced or composed component, 13 00:00:27,780 --> 00:00:30,003 kind of interchangeable terminology there. 14 00:00:31,170 --> 00:00:32,940 The higher order component that we created, 15 00:00:32,940 --> 00:00:35,670 and this is similar to all high order components, 16 00:00:35,670 --> 00:00:36,720 is a function, 17 00:00:36,720 --> 00:00:39,470 and we called our function with the composed component. 18 00:00:41,100 --> 00:00:42,330 Inside of this function, 19 00:00:42,330 --> 00:00:46,980 we created a new class that we just call authentication, 20 00:00:46,980 --> 00:00:49,260 but we could have called this class anything we wanted to, 21 00:00:49,260 --> 00:00:51,540 it could have been absolutely anything. 22 00:00:51,540 --> 00:00:53,910 Inside of this class's render method, 23 00:00:53,910 --> 00:00:56,850 we only rendered the composed component 24 00:00:56,850 --> 00:00:58,590 or the component that got passed 25 00:00:58,590 --> 00:01:00,690 into this higher order component, 26 00:01:00,690 --> 00:01:02,160 and we also made sure to pass 27 00:01:02,160 --> 00:01:04,203 through any props here as well. 28 00:01:05,940 --> 00:01:08,460 To make use of this higher order component, 29 00:01:08,460 --> 00:01:10,050 inside of our router, 30 00:01:10,050 --> 00:01:12,210 right before we made use of the component, 31 00:01:12,210 --> 00:01:13,620 right before we tried to render it, 32 00:01:13,620 --> 00:01:15,570 or pass it off to the router at least, 33 00:01:15,570 --> 00:01:18,450 we wrapped the higher order component right here. 34 00:01:18,450 --> 00:01:20,103 Now this is in great, 35 00:01:21,030 --> 00:01:22,740 not at all similar to 36 00:01:22,740 --> 00:01:25,560 how we use our connect higher order component, 37 00:01:25,560 --> 00:01:28,050 the connect helper from React Redux. 38 00:01:28,050 --> 00:01:29,790 Let's look at header 39 00:01:29,790 --> 00:01:32,430 which is a component that we used with React Redux. 40 00:01:32,430 --> 00:01:33,930 So in this case, 41 00:01:33,930 --> 00:01:37,560 we chose to wrap our component inside of this file, 42 00:01:37,560 --> 00:01:39,821 so the big difference here, the big kind of divide 43 00:01:39,821 --> 00:01:42,600 between whether or not you want to wrap 44 00:01:42,600 --> 00:01:45,240 or make the actual call to your higher order component 45 00:01:45,240 --> 00:01:46,920 inside of your component file, 46 00:01:46,920 --> 00:01:48,210 or when it's used, 47 00:01:48,210 --> 00:01:50,880 for example, when we used resources, 48 00:01:50,880 --> 00:01:52,560 is whether or not you expect 49 00:01:52,560 --> 00:01:54,390 every instance of this component 50 00:01:54,390 --> 00:01:56,460 being used in your application 51 00:01:56,460 --> 00:01:59,490 to require your higher order component. 52 00:01:59,490 --> 00:02:00,420 So what I'm trying to say is, 53 00:02:00,420 --> 00:02:03,921 if we expected every last instance of resources 54 00:02:03,921 --> 00:02:06,210 to require authentication, 55 00:02:06,210 --> 00:02:08,190 then it would've actually made more sense 56 00:02:08,190 --> 00:02:10,470 to put this require off call 57 00:02:10,470 --> 00:02:13,560 inside of our resources component, inside of here. 58 00:02:13,560 --> 00:02:15,180 And so we could have instead, 59 00:02:15,180 --> 00:02:16,980 instead of exporting default the function, 60 00:02:16,980 --> 00:02:19,233 we could have said export default, 61 00:02:20,100 --> 00:02:21,630 and we haven't done the import at the top, 62 00:02:21,630 --> 00:02:23,790 so let's just pretend that we did, 63 00:02:23,790 --> 00:02:27,480 require off resources, 64 00:02:27,480 --> 00:02:29,580 and then we would've instead 65 00:02:29,580 --> 00:02:33,150 called this function right here resources, like so. 66 00:02:33,150 --> 00:02:35,760 So again, this would've been an alternate approach 67 00:02:35,760 --> 00:02:38,310 if we expected every instance of resources 68 00:02:38,310 --> 00:02:40,860 to require authentication. 69 00:02:40,860 --> 00:02:41,790 And I simply didn't know 70 00:02:41,790 --> 00:02:43,380 whether or not that would've been true 71 00:02:43,380 --> 00:02:45,360 inside of our application. 72 00:02:45,360 --> 00:02:46,890 Well, you know, I did, 73 00:02:46,890 --> 00:02:47,970 because I put the example together, 74 00:02:47,970 --> 00:02:48,900 but you kinda get the idea, 75 00:02:48,900 --> 00:02:50,790 I wasn't entirely sure whether or not 76 00:02:50,790 --> 00:02:53,940 that if we expanded this application in the future, 77 00:02:53,940 --> 00:02:55,890 whether or not we would be completely covered 78 00:02:55,890 --> 00:02:57,150 across the board. 79 00:02:57,150 --> 00:02:58,920 So there's a little bit more consideration there 80 00:02:58,920 --> 00:03:01,080 for where you locate that code. 81 00:03:01,080 --> 00:03:03,060 Anyways, I hope you enjoyed the section, 82 00:03:03,060 --> 00:03:04,810 and I'll catch you in the next one.