1 00:00:01,140 --> 00:00:02,340 Instructor: In this section we're gonna move on 2 00:00:02,340 --> 00:00:03,330 to step number three, 3 00:00:03,330 --> 00:00:05,280 where we take all the reusable logic 4 00:00:05,280 --> 00:00:07,350 that we had created in step number one 5 00:00:07,350 --> 00:00:10,590 and move it over to our higher order component file. 6 00:00:10,590 --> 00:00:11,940 So, I'm gonna get started 7 00:00:11,940 --> 00:00:14,940 by opening up my CommentBox.js file, 8 00:00:14,940 --> 00:00:17,670 and I'm gonna highlight these three methods right here. 9 00:00:17,670 --> 00:00:21,780 So, componentDidMount, DidUpdate and shouldNavigateAway. 10 00:00:21,780 --> 00:00:23,430 It's gonna take all three of these. 11 00:00:23,430 --> 00:00:26,370 I'm gonna cut them and I'm gonna paste them 12 00:00:26,370 --> 00:00:29,370 over inside of our higher order component. 13 00:00:29,370 --> 00:00:31,278 So, inside of this class right here, this is that component 14 00:00:31,278 --> 00:00:34,713 that we're kind of injecting into our hierarchy. 15 00:00:35,610 --> 00:00:36,900 So, right about the render method 16 00:00:36,900 --> 00:00:38,493 I'll add all three of those in. 17 00:00:41,040 --> 00:00:42,060 One thing to recall, 18 00:00:42,060 --> 00:00:44,280 is that these are not the only pieces of code 19 00:00:44,280 --> 00:00:46,800 that are truly reusable and need to be extracted 20 00:00:46,800 --> 00:00:49,680 over to the requireAuth higher order component. 21 00:00:49,680 --> 00:00:51,330 Back inside of CommentBox, 22 00:00:51,330 --> 00:00:54,030 we also had that mapStateToProps function 23 00:00:54,030 --> 00:00:55,350 down here at the bottom. 24 00:00:55,350 --> 00:00:56,970 So, in order to properly handle 25 00:00:56,970 --> 00:00:58,560 all this authentication stuff. 26 00:00:58,560 --> 00:01:00,150 The component needs to know 27 00:01:00,150 --> 00:01:02,760 whether or not the user is authenticated. 28 00:01:02,760 --> 00:01:05,069 So, I'm also gonna take this right here. 29 00:01:05,069 --> 00:01:07,800 I'm gonna cut it and I'm not gonna forget, 30 00:01:07,800 --> 00:01:10,050 don't forget, we have mapStateToProps right here. 31 00:01:10,050 --> 00:01:13,080 We don't have a mapStateToProps function anymore. 32 00:01:13,080 --> 00:01:15,393 So, I'm gonna replace this with null. 33 00:01:17,370 --> 00:01:18,300 I'll then move back over 34 00:01:18,300 --> 00:01:21,030 to the requireAuth higher order component 35 00:01:21,030 --> 00:01:23,280 and then I'll define mapStateToProps 36 00:01:23,280 --> 00:01:24,990 where we normally would, 37 00:01:24,990 --> 00:01:27,480 inside of any normal component, 38 00:01:27,480 --> 00:01:30,450 right after our class definition. 39 00:01:30,450 --> 00:01:32,010 So, right after the class definition 40 00:01:32,010 --> 00:01:33,750 and right above the return statement, 41 00:01:33,750 --> 00:01:36,960 I will add in mapStateToProps. 42 00:01:36,960 --> 00:01:39,030 And then the last thing we need to do, 43 00:01:39,030 --> 00:01:41,820 we are going to want to hook up mapStateToProps 44 00:01:41,820 --> 00:01:43,830 to this new ComposedComponent thing. 45 00:01:43,830 --> 00:01:45,600 And in order to do that 46 00:01:45,600 --> 00:01:48,480 we need to grab that connect function. 47 00:01:48,480 --> 00:01:53,340 So at the top, I'm going to make sure I import, connect, 48 00:01:53,340 --> 00:01:56,043 from, react-redux, like so. 49 00:01:58,680 --> 00:02:00,240 Now that we have connect inside of here, 50 00:02:00,240 --> 00:02:03,660 we're gonna make sure that we wire up mapStateToProps 51 00:02:03,660 --> 00:02:05,280 to the ComposedComponent, 52 00:02:05,280 --> 00:02:07,170 which is the class that we just created 53 00:02:07,170 --> 00:02:09,120 inside this function. 54 00:02:09,120 --> 00:02:12,460 So right here, we'll say, "connect" with mapStateToProps 55 00:02:14,310 --> 00:02:16,433 and we'll wire it up to the ComposedComponent. 56 00:02:17,599 --> 00:02:20,040 Okay, so that is it for step number three right here. 57 00:02:20,040 --> 00:02:20,873 That's all we had to do. 58 00:02:20,873 --> 00:02:22,620 We just move that reusable logic 59 00:02:22,620 --> 00:02:24,660 over to the higher order component. 60 00:02:24,660 --> 00:02:26,880 But to give you just a little bit further definition 61 00:02:26,880 --> 00:02:29,370 or explanation as to what's going on, 62 00:02:29,370 --> 00:02:31,920 now, any time that we call 63 00:02:31,920 --> 00:02:33,900 this higher order component function 64 00:02:33,900 --> 00:02:37,470 and pass in a child component class, 65 00:02:37,470 --> 00:02:40,424 we then create a new class called ComposedComponent 66 00:02:40,424 --> 00:02:43,113 that has all of this functionality tied to it. 67 00:02:44,370 --> 00:02:47,070 The ComposedComponent class will attempt to render 68 00:02:47,070 --> 00:02:48,960 the child component, 69 00:02:48,960 --> 00:02:50,760 but before any of that stuff happens, 70 00:02:50,760 --> 00:02:53,100 or in addition to rendering that child component, 71 00:02:53,100 --> 00:02:55,200 we're also now going to be executing 72 00:02:55,200 --> 00:02:58,290 the componentDidMount and the componentDidUpdate. 73 00:02:58,290 --> 00:02:59,850 So now, our higher order component 74 00:02:59,850 --> 00:03:02,160 has 100% of the knowledge that it needs 75 00:03:02,160 --> 00:03:03,990 to decide whether or not the user 76 00:03:03,990 --> 00:03:07,350 should be able to see this route, or see this component, 77 00:03:07,350 --> 00:03:10,110 or whether or not it needs to navigate our user away 78 00:03:10,110 --> 00:03:12,410 to some other route inside of our application. 79 00:03:13,320 --> 00:03:14,730 Okay, so that's step number three. 80 00:03:14,730 --> 00:03:16,080 We're all done. 81 00:03:16,080 --> 00:03:18,480 Now step number four is a very critical step. 82 00:03:18,480 --> 00:03:19,650 So, let's take a pause right now. 83 00:03:19,650 --> 00:03:21,120 We're gonna come back to the next section 84 00:03:21,120 --> 00:03:24,030 and we'll talk about exactly what this means right here. 85 00:03:24,030 --> 00:03:26,580 So, quick break, and I'll see you in just a minute.