1 00:00:01,200 --> 00:00:03,390 -: In this section we're gonna move on to step four 2 00:00:03,390 --> 00:00:05,670 of creating a higher order component. 3 00:00:05,670 --> 00:00:07,530 So the step right here says pass props 4 00:00:07,530 --> 00:00:09,420 through to ChildComponent. 5 00:00:09,420 --> 00:00:12,810 Well with just text, that's not super clear 6 00:00:12,810 --> 00:00:15,060 but we're gonna talk about what it means right now 7 00:00:15,060 --> 00:00:16,290 and as soon as I explain it to you 8 00:00:16,290 --> 00:00:19,590 I think it'll make a pretty good amount of sense. 9 00:00:19,590 --> 00:00:21,660 So we're gonna look at a diagram in just a second 10 00:00:21,660 --> 00:00:23,640 but first I want to remind you something 11 00:00:23,640 --> 00:00:26,400 about how our application is currently set up. 12 00:00:26,400 --> 00:00:28,380 If I flip back over to my code editor 13 00:00:28,380 --> 00:00:30,570 and open up my CommentBox file 14 00:00:30,570 --> 00:00:32,170 I can scroll down to the bottom, 15 00:00:33,420 --> 00:00:36,630 and down here you'll recall that we are wrapping 16 00:00:36,630 --> 00:00:40,590 our CommentBox component with the connect tag right here. 17 00:00:40,590 --> 00:00:44,970 So the connect tag is currently taking our action creators 18 00:00:44,970 --> 00:00:46,950 and it's passing them as props 19 00:00:46,950 --> 00:00:49,500 down to the CommentBox component. 20 00:00:49,500 --> 00:00:51,840 Okay, that's a really critical thing, keep in mind. 21 00:00:51,840 --> 00:00:54,540 The action creators get passed as props 22 00:00:54,540 --> 00:00:56,130 down to that CommentBox. 23 00:00:56,130 --> 00:00:58,920 So clearly the connect tag wants to communicate 24 00:00:58,920 --> 00:01:02,550 down to this component, but the CommentBox receives 25 00:01:02,550 --> 00:01:04,830 some number of props besides that, 26 00:01:04,830 --> 00:01:06,990 in addition to these action creators 27 00:01:06,990 --> 00:01:08,640 we saw it just a moment ago 28 00:01:08,640 --> 00:01:11,910 when we put together that whatever it was, 29 00:01:11,910 --> 00:01:15,210 we called it the should navigate away function, 30 00:01:15,210 --> 00:01:17,370 whatever it was, we inside that thing 31 00:01:17,370 --> 00:01:19,500 we accessed the history prop 32 00:01:19,500 --> 00:01:22,320 that is provided to us from React Router. 33 00:01:22,320 --> 00:01:24,540 So that history prop comes from the fact 34 00:01:24,540 --> 00:01:27,570 that inside of App.js, so here's App.js. 35 00:01:27,570 --> 00:01:30,990 If we go down to the render method right here 36 00:01:30,990 --> 00:01:32,940 we are showing the CommentBox component 37 00:01:32,940 --> 00:01:35,190 through the route component right here. 38 00:01:35,190 --> 00:01:38,280 So because we are rendering CommentBox through the route 39 00:01:38,280 --> 00:01:40,380 the route adds in some props 40 00:01:40,380 --> 00:01:43,950 for the count box including that history prop. 41 00:01:43,950 --> 00:01:45,360 So clearly there's kind of like 42 00:01:45,360 --> 00:01:47,760 a higher hierarchy here that's going on 43 00:01:47,760 --> 00:01:49,890 where the route is trying to get some props 44 00:01:49,890 --> 00:01:51,420 down to the CommentBox. 45 00:01:51,420 --> 00:01:53,130 And the connect function is also trying 46 00:01:53,130 --> 00:01:55,260 to get some props down there as well. 47 00:01:55,260 --> 00:01:58,983 So I took this entire hierarchy and I diagrammed it out. 48 00:02:00,210 --> 00:02:02,880 So it looks a little something like this, this diagram 49 00:02:02,880 --> 00:02:05,040 maybe without these boxes right here, maybe not. 50 00:02:05,040 --> 00:02:06,090 Maybe if we pull that over. 51 00:02:06,090 --> 00:02:07,680 Okay, that makes more sense. 52 00:02:07,680 --> 00:02:09,960 So at the very top we've got our app component 53 00:02:09,960 --> 00:02:12,180 that's showing a route component. 54 00:02:12,180 --> 00:02:15,000 The route is trying to show the CommentBox 55 00:02:15,000 --> 00:02:17,280 but it doesn't show the CommentBox directly. 56 00:02:17,280 --> 00:02:21,060 It shows a connected version of the CommentBox. 57 00:02:21,060 --> 00:02:23,130 'Cause inside that CommentBox file right now 58 00:02:23,130 --> 00:02:26,220 we are exporting the result of calling connect 59 00:02:26,220 --> 00:02:28,440 with the CommentBox component. 60 00:02:28,440 --> 00:02:30,300 So the higher order component of connect 61 00:02:30,300 --> 00:02:32,280 gets injected in here. 62 00:02:32,280 --> 00:02:34,470 Now, in a moment you and I are going to wire up 63 00:02:34,470 --> 00:02:36,750 our requireAuth higher order component 64 00:02:36,750 --> 00:02:38,580 into this hierarchy as well. 65 00:02:38,580 --> 00:02:40,110 And as I've said several times 66 00:02:40,110 --> 00:02:43,470 our higher order component is going to kind of inject itself 67 00:02:43,470 --> 00:02:46,440 above the actual CommentBox. 68 00:02:46,440 --> 00:02:49,440 Now think about what happens when we do that injection. 69 00:02:49,440 --> 00:02:52,230 When we get our higher order component inside of here. 70 00:02:52,230 --> 00:02:53,670 We have already seen 71 00:02:53,670 --> 00:02:56,910 that the route component right here has this history prop 72 00:02:56,910 --> 00:02:59,070 and it wants to make sure that history prop 73 00:02:59,070 --> 00:03:01,680 shows up inside the CommentBox. 74 00:03:01,680 --> 00:03:04,890 We've also seen that the connect function 75 00:03:04,890 --> 00:03:06,840 has that list of actions 76 00:03:06,840 --> 00:03:08,610 and it wants that list of actions 77 00:03:08,610 --> 00:03:11,610 to show up inside the CommentBox as well. 78 00:03:11,610 --> 00:03:14,670 But because you and I are going to sort of inject 79 00:03:14,670 --> 00:03:17,880 the requireAuth a higher order component inside of here, 80 00:03:17,880 --> 00:03:19,590 these props are now going to show up 81 00:03:19,590 --> 00:03:23,553 inside of our component the one you and I just created. 82 00:03:25,080 --> 00:03:28,170 So connect is gonna try to render or requireAuth component 83 00:03:28,170 --> 00:03:30,990 and it's gonna pass down that actions object 84 00:03:30,990 --> 00:03:33,930 and the history stuff from route up here as well. 85 00:03:33,930 --> 00:03:37,440 So now it's our job, your job and my job 86 00:03:37,440 --> 00:03:40,260 to make sure that these props that have been passed down 87 00:03:40,260 --> 00:03:42,660 from these parents also show up 88 00:03:42,660 --> 00:03:44,790 inside the CommentBox as well. 89 00:03:44,790 --> 00:03:47,970 You and I cannot be responsible for breaking the chain here. 90 00:03:47,970 --> 00:03:50,430 We have to make sure that whatever props 91 00:03:50,430 --> 00:03:52,380 are requireAuth component that we've now 92 00:03:52,380 --> 00:03:56,220 injected into this hierarchy receives gets passed along 93 00:03:56,220 --> 00:03:58,270 down to its ChildComponent of CommentBox. 94 00:04:00,780 --> 00:04:03,450 So that's the idea with step number four right here. 95 00:04:03,450 --> 00:04:06,600 We need to make sure that any parent props 96 00:04:06,600 --> 00:04:08,910 or any props that we receive from the parent 97 00:04:08,910 --> 00:04:11,640 down into our newly created higher order component 98 00:04:11,640 --> 00:04:15,213 get passed down to the ChildComponent of the CommentBox. 99 00:04:16,649 --> 00:04:18,870 As a quick example of this, let's, 100 00:04:18,870 --> 00:04:21,360 lemme show you what would happen if we did not do this. 101 00:04:21,360 --> 00:04:23,010 So maybe that would make a lot of sense. 102 00:04:23,010 --> 00:04:25,110 I'm gonna flip back over to my code editor 103 00:04:25,980 --> 00:04:30,060 and I'm gonna wire up the requireAuth higher order component 104 00:04:30,060 --> 00:04:31,290 to the CommentBox. 105 00:04:31,290 --> 00:04:32,850 All right, let's go through this. 106 00:04:32,850 --> 00:04:36,090 So inside of CommentBox I'm going to import 107 00:04:36,090 --> 00:04:41,090 requireAuth from components/requireAuth. 108 00:04:43,080 --> 00:04:44,940 Okay, so we're gonna import this right here 109 00:04:44,940 --> 00:04:46,950 and then we're gonna go down to the bottom of the file 110 00:04:46,950 --> 00:04:48,900 and we're going to call requireAUth 111 00:04:48,900 --> 00:04:51,630 with our CommentBox class. 112 00:04:51,630 --> 00:04:53,330 So down at the bottom of the file, 113 00:04:54,630 --> 00:04:57,910 here's CommentBox, I'm going to place requireAuth 114 00:04:59,130 --> 00:05:02,523 and I'm gonna call it with the CommentBox like so. 115 00:05:03,420 --> 00:05:05,370 So make sure you triple check your parentheses on the line 116 00:05:05,370 --> 00:05:09,060 'cause we've now got some pretty involved syntax. 117 00:05:09,060 --> 00:05:10,470 All right, so let's now save this 118 00:05:10,470 --> 00:05:11,820 and we're gonna go back to the browser 119 00:05:11,820 --> 00:05:13,590 and we're gonna see what happens 120 00:05:13,590 --> 00:05:16,110 if you and I do not attempt to pass through 121 00:05:16,110 --> 00:05:18,963 our props to the CommentBox component, all right. 122 00:05:20,280 --> 00:05:22,533 So, I'm gonna flip back over to the browser. 123 00:05:25,200 --> 00:05:28,420 I'm gonna navigate over to the post a comment component 124 00:05:29,640 --> 00:05:31,950 and I'm gonna sign in, my mistake. 125 00:05:31,950 --> 00:05:34,350 I wanna sign in first and then I'll go over there. 126 00:05:34,350 --> 00:05:36,960 So now if I enter a comment inside here, 127 00:05:36,960 --> 00:05:39,120 our component of CommentBox 128 00:05:39,120 --> 00:05:42,630 has not received the actions object. 129 00:05:42,630 --> 00:05:45,270 It has not received any of our action creators 130 00:05:45,270 --> 00:05:47,550 because you and I have not communicated them 131 00:05:47,550 --> 00:05:51,210 from requireAuth down to that CommentBox component. 132 00:05:51,210 --> 00:05:53,460 So if we now try to invoke one of those action creators 133 00:05:53,460 --> 00:05:56,550 by entering text right here and clicking on submit comment 134 00:05:56,550 --> 00:05:58,830 we're gonna this nasty air message. 135 00:05:58,830 --> 00:06:02,377 And the air message says probably something like, 136 00:06:02,377 --> 00:06:04,320 "saveComment is not a function" 137 00:06:04,320 --> 00:06:07,860 because we did not pass down those action creators. 138 00:06:07,860 --> 00:06:09,810 All right, so at this point I think you got a good idea 139 00:06:09,810 --> 00:06:11,220 I've harped on this long enough. 140 00:06:11,220 --> 00:06:12,660 So let's just do the fix. 141 00:06:12,660 --> 00:06:14,850 So this is what we do to implement step four 142 00:06:14,850 --> 00:06:15,990 on this chart right here. 143 00:06:15,990 --> 00:06:19,143 All we have to do is open up our higher order component. 144 00:06:20,400 --> 00:06:23,550 We're gonna go to that render method right here. 145 00:06:23,550 --> 00:06:26,710 And on this ChildComponent, which is really the CommentBox 146 00:06:27,600 --> 00:06:32,600 we're gonna write {...this.props}. 147 00:06:36,630 --> 00:06:39,240 So what this does right here is it takes any props 148 00:06:39,240 --> 00:06:42,750 that were passed to our higher order component 149 00:06:42,750 --> 00:06:44,460 of composed component, that's the name 150 00:06:44,460 --> 00:06:46,380 of our higher order component inside of here. 151 00:06:46,380 --> 00:06:48,420 It takes any props that it receives 152 00:06:48,420 --> 00:06:50,910 and it just passes them straight down 153 00:06:50,910 --> 00:06:53,283 to the ChildComponent of CommentBox. 154 00:06:54,120 --> 00:06:56,790 So just about every single higher order component 155 00:06:56,790 --> 00:06:59,370 that you're ever gonna create, somewhere inside there 156 00:06:59,370 --> 00:07:01,770 you're going to see this snippet right here. 157 00:07:01,770 --> 00:07:03,300 Where we try to take all the props 158 00:07:03,300 --> 00:07:05,550 that were taken from the parent or receive from the parent 159 00:07:05,550 --> 00:07:08,700 and we pass them through down to the child. 160 00:07:08,700 --> 00:07:10,590 So let's now save this. 161 00:07:10,590 --> 00:07:12,000 We'll flip back over to the browser 162 00:07:12,000 --> 00:07:15,423 and we'll test out our application again. 163 00:07:16,290 --> 00:07:20,220 So we get the reload and when the reload kicks in 164 00:07:20,220 --> 00:07:23,610 it's gonna navigate us back over to local host 3000. 165 00:07:23,610 --> 00:07:26,250 If I try to navigate over to post a comment 166 00:07:26,250 --> 00:07:28,530 I don't have any successful navigation 167 00:07:28,530 --> 00:07:30,330 'cause I'm not logged in. 168 00:07:30,330 --> 00:07:31,770 So I click on sign in. 169 00:07:31,770 --> 00:07:35,910 Now I can go over there and now if I enter in some comment 170 00:07:35,910 --> 00:07:39,990 I can click submit comment and I don't get any air message. 171 00:07:39,990 --> 00:07:41,460 Now of course, nothing appears at the bottom 172 00:07:41,460 --> 00:07:44,490 because this page is no longer showing our list of comments. 173 00:07:44,490 --> 00:07:46,200 But if I go back over to home 174 00:07:46,200 --> 00:07:49,470 I'll now see the comment up here on the list right here. 175 00:07:49,470 --> 00:07:51,990 All right, so that's it. 176 00:07:51,990 --> 00:07:55,170 That is higher order components in a nutshell. 177 00:07:55,170 --> 00:07:56,760 So any time that you start to notice 178 00:07:56,760 --> 00:08:00,600 that your components have some repetitive logic inside them 179 00:08:00,600 --> 00:08:03,990 I want you to consider going through this flow right here. 180 00:08:03,990 --> 00:08:06,930 You're going to identify all the logic 181 00:08:06,930 --> 00:08:09,810 that is reusable or should be extracted out. 182 00:08:09,810 --> 00:08:12,300 You're gonna create that higher order component file 183 00:08:12,300 --> 00:08:15,210 and add that boiler plate that we saw. 184 00:08:15,210 --> 00:08:17,400 You're gonna copy all that reusable logic 185 00:08:17,400 --> 00:08:19,380 over to the higher order component 186 00:08:19,380 --> 00:08:21,240 and then the most critical step 187 00:08:21,240 --> 00:08:23,370 that you can never forget to do 188 00:08:23,370 --> 00:08:25,860 'cause you will forget this the first time around. 189 00:08:25,860 --> 00:08:28,560 You need to make sure that any props 190 00:08:28,560 --> 00:08:29,730 that were intended to go down 191 00:08:29,730 --> 00:08:32,460 to that ChildComponent get passed through. 192 00:08:32,460 --> 00:08:34,980 You have to make sure you pass them through. 193 00:08:34,980 --> 00:08:37,980 And then you can make use of your higher order component. 194 00:08:37,980 --> 00:08:39,179 Okay. So, that's it. 195 00:08:39,179 --> 00:08:41,309 That's our authentication higher order component. 196 00:08:41,309 --> 00:08:43,409 Now I want you to know that you and I 197 00:08:43,409 --> 00:08:46,200 are going to use this higher order component right here 198 00:08:46,200 --> 00:08:48,150 later on inside the course. 199 00:08:48,150 --> 00:08:50,970 So I encourage you not to delete this file 200 00:08:50,970 --> 00:08:53,460 and if you want to change anything inside this file, 201 00:08:53,460 --> 00:08:55,620 please try to make a backup. 202 00:08:55,620 --> 00:08:57,300 If you end up changing it or throwing it away, 203 00:08:57,300 --> 00:08:58,133 that's totally fine. 204 00:08:58,133 --> 00:09:00,750 I will give you a copy later on inside the course, 205 00:09:00,750 --> 00:09:01,800 but honestly, it'd be easier 206 00:09:01,800 --> 00:09:03,930 if you just kept your own copy around. 207 00:09:03,930 --> 00:09:05,820 So now that we've gotten through higher order components 208 00:09:05,820 --> 00:09:07,500 let's take a quick pause right here 209 00:09:07,500 --> 00:09:09,450 and we'll continue in the next section.