1 00:00:01,200 --> 00:00:03,719 -: In the last section, we created our feature component 2 00:00:03,719 --> 00:00:06,840 but at present, anyone can get access to this thing. 3 00:00:06,840 --> 00:00:09,480 Even if they are not signed into our application. 4 00:00:09,480 --> 00:00:11,430 We're gonna fix that right now by adding 5 00:00:11,430 --> 00:00:14,490 in a higher order component that's gonna restrict access 6 00:00:14,490 --> 00:00:16,390 to this page, if you're not signed in. 7 00:00:17,430 --> 00:00:19,260 To implement this, we're going to reuse 8 00:00:19,260 --> 00:00:21,570 the exact same higher order component that 9 00:00:21,570 --> 00:00:23,760 we created earlier in the course. 10 00:00:23,760 --> 00:00:26,040 Now if you've not gone through that other section yet, 11 00:00:26,040 --> 00:00:27,750 that's totally fine. 12 00:00:27,750 --> 00:00:28,950 In the next video 13 00:00:28,950 --> 00:00:31,620 I'm gonna put the actual copy-pasteable code 14 00:00:31,620 --> 00:00:33,690 for this higher order component. 15 00:00:33,690 --> 00:00:35,100 So if you've not yet gone through that 16 00:00:35,100 --> 00:00:37,230 higher order component section, no problem. 17 00:00:37,230 --> 00:00:40,170 Pause the video right here, go to that next section, 18 00:00:40,170 --> 00:00:41,520 copy-paste all that code 19 00:00:41,520 --> 00:00:44,070 and then come back to this section. 20 00:00:44,070 --> 00:00:46,353 Otherwise, we will get started right away. 21 00:00:47,460 --> 00:00:48,990 So, I'm gonna first get started by creating 22 00:00:48,990 --> 00:00:51,420 a new file for my higher order component, 23 00:00:51,420 --> 00:00:53,520 inside the components directory. 24 00:00:53,520 --> 00:00:58,520 I'll make a new file called "require-off-dot-j-s" 25 00:00:58,620 --> 00:01:00,930 And remember we're using a lowercase R here 26 00:01:00,930 --> 00:01:03,450 because the convention is to use a lowercase character, 27 00:01:03,450 --> 00:01:06,630 if we are exporting by default, a function. 28 00:01:06,630 --> 00:01:08,700 Require off. There we go. 29 00:01:08,700 --> 00:01:11,880 So now inside of here, I'm gonna grab all that code 30 00:01:11,880 --> 00:01:14,760 from the higher order component that I had before 31 00:01:14,760 --> 00:01:16,920 and I'm going to copy-paste it 32 00:01:16,920 --> 00:01:18,690 into that new file I just created. 33 00:01:18,690 --> 00:01:20,850 So here's my old project over here. 34 00:01:20,850 --> 00:01:24,120 I'm copy-pasting everything out of require off 35 00:01:24,120 --> 00:01:27,570 and I'm putting it into that new require off file. 36 00:01:27,570 --> 00:01:30,660 Again, if you do not have this code handy, no problem. 37 00:01:30,660 --> 00:01:32,880 Just go into the next section, you'll find all the 38 00:01:32,880 --> 00:01:36,063 code for it and you could copy paste it over to your editor. 39 00:01:37,230 --> 00:01:39,060 So once I've got that inside of here, 40 00:01:39,060 --> 00:01:42,030 I then need to do just a little bit of reformatting 41 00:01:42,030 --> 00:01:44,220 to accommodate for some of the different property names 42 00:01:44,220 --> 00:01:46,650 that we used on our project. 43 00:01:46,650 --> 00:01:49,100 So first I'm gonna scroll down towards the bottom 44 00:01:50,550 --> 00:01:53,400 and I'll find the "map-State-To-Props" function. 45 00:01:53,400 --> 00:01:55,710 So when we put this higher order component together 46 00:01:55,710 --> 00:01:58,200 we add a single off piece of state 47 00:01:58,200 --> 00:01:59,797 and that was a bullion that said, 48 00:01:59,797 --> 00:02:02,850 "Yes, we are signed in or no we are not." 49 00:02:02,850 --> 00:02:03,870 But this time around, 50 00:02:03,870 --> 00:02:05,700 our off piece of state, right here, 51 00:02:05,700 --> 00:02:10,699 returns an object that has an authenticated property. 52 00:02:10,860 --> 00:02:13,620 And we want to reference that authenticated property 53 00:02:13,620 --> 00:02:16,113 to decide whether or not the user is signed in. 54 00:02:17,040 --> 00:02:18,930 So in total, this entire line, right here, 55 00:02:18,930 --> 00:02:21,960 we're going to return an object with an off property 56 00:02:21,960 --> 00:02:25,707 that's coming from "state-dot-off-dot-authenticated". 57 00:02:27,180 --> 00:02:28,620 Okay, and that's it. 58 00:02:28,620 --> 00:02:30,513 No other changes required. 59 00:02:31,470 --> 00:02:33,450 So if nothing else, this should be a really 60 00:02:33,450 --> 00:02:36,390 good demonstration that, in general, higher order components 61 00:02:36,390 --> 00:02:40,710 are easily reusable on other projects you might create. 62 00:02:40,710 --> 00:02:42,480 So here's some higher order component that we 63 00:02:42,480 --> 00:02:44,940 created much earlier for a different project, 64 00:02:44,940 --> 00:02:47,430 and we were able to reuse the entire thing 65 00:02:47,430 --> 00:02:50,030 on this new project that we're working on right now. 66 00:02:51,780 --> 00:02:53,190 So now to make use of this, 67 00:02:53,190 --> 00:02:56,640 I'll flip back over to my "feature-dot-j-s" file. 68 00:02:56,640 --> 00:02:57,670 I will import 69 00:02:59,100 --> 00:03:03,423 the "require-off" higher order component from "require-off" 70 00:03:04,830 --> 00:03:06,960 and then I'll make use of it down here at the bottom, 71 00:03:06,960 --> 00:03:09,750 by wrapping our "export-default" statement. 72 00:03:09,750 --> 00:03:12,933 So I'll say "require-off" like so. 73 00:03:14,160 --> 00:03:15,510 Okay, and that should be it. 74 00:03:15,510 --> 00:03:18,180 So now if someone tries to visit our feature route 75 00:03:18,180 --> 00:03:20,760 it should be kicked out and thrown away, 76 00:03:20,760 --> 00:03:23,520 back to some other page inside of our application. 77 00:03:23,520 --> 00:03:27,213 Or in this case we'll send them back to our root route. 78 00:03:28,320 --> 00:03:30,990 So I'm gonna flip back over to my browser and you'll notice 79 00:03:30,990 --> 00:03:32,970 that I've already been redirected back over 80 00:03:32,970 --> 00:03:34,830 to local host 3000. 81 00:03:34,830 --> 00:03:37,440 If I now try to go back to the feature link, 82 00:03:37,440 --> 00:03:39,097 yep. You'll see slash feature says, 83 00:03:39,097 --> 00:03:42,003 "Nope, you can't go here" and it tries to kick us away. 84 00:03:43,110 --> 00:03:45,270 However, if I go to sign up, because remember, 85 00:03:45,270 --> 00:03:47,730 we don't have the idea of signing in just yet, 86 00:03:47,730 --> 00:03:49,773 and if I sign up for a new account, 87 00:03:52,170 --> 00:03:54,630 I'll then be redirected over to the feature route 88 00:03:54,630 --> 00:03:56,163 and everything is good to go. 89 00:03:57,030 --> 00:03:58,950 Okay, definitely good progress there. 90 00:03:58,950 --> 00:04:01,850 Let's take a quick pause and continue in the next section.