1
00:00:00,960 --> 00:00:02,550
-: Our user now gets redirected over

2
00:00:02,550 --> 00:00:05,400
to the feature route after they successfully sign up.

3
00:00:05,400 --> 00:00:08,520
But right now we're not showing anything on this page.

4
00:00:08,520 --> 00:00:10,140
So in this section, I think we should put

5
00:00:10,140 --> 00:00:13,230
in some kind of placeholder feature component

6
00:00:13,230 --> 00:00:15,360
and then make sure that you are not able to visit it

7
00:00:15,360 --> 00:00:18,270
unless you're actually signed into our application.

8
00:00:18,270 --> 00:00:19,830
To get started, I'll flip back over

9
00:00:19,830 --> 00:00:20,970
to my code editor,

10
00:00:20,970 --> 00:00:22,590
and inside my components directory

11
00:00:22,590 --> 00:00:26,703
I'm gonna make a new file called feature.js.

12
00:00:27,780 --> 00:00:30,240
Now remember, the feature component really just

13
00:00:30,240 --> 00:00:32,880
represents any component that you might want to have inside

14
00:00:32,880 --> 00:00:35,250
of your application that you want to be locked down.

15
00:00:35,250 --> 00:00:36,150
So there's nothing special

16
00:00:36,150 --> 00:00:38,793
about calling this feature or anything like that.

17
00:00:40,230 --> 00:00:42,540
Now, inside this component at the very top

18
00:00:42,540 --> 00:00:47,230
I will import React and Component, from React

19
00:00:49,020 --> 00:00:51,000
and I'll define class feature

20
00:00:51,000 --> 00:00:54,213
which will extend component.

21
00:00:55,440 --> 00:00:57,900
Inside there I'll define the render method.

22
00:00:57,900 --> 00:01:00,420
I'll return a div,

23
00:01:00,420 --> 00:01:03,460
with just something that says this is the feature

24
00:01:08,490 --> 00:01:11,280
and then I will do an export default feature

25
00:01:11,280 --> 00:01:13,290
at the bottom of the file.

26
00:01:13,290 --> 00:01:15,000
We made this a class-based component

27
00:01:15,000 --> 00:01:16,440
because we're going to eventually hook

28
00:01:16,440 --> 00:01:18,510
up a lifecycle method to it to make sure

29
00:01:18,510 --> 00:01:20,670
that anytime we show the feature component, we

30
00:01:20,670 --> 00:01:22,590
will attempt to fetch some secret data

31
00:01:22,590 --> 00:01:24,180
from our backend API.

32
00:01:24,180 --> 00:01:27,000
But right now, let's just get this thing on the screen.

33
00:01:27,000 --> 00:01:29,460
Once I've created this component, I'll then go into

34
00:01:29,460 --> 00:01:32,640
my SRC index.js file,

35
00:01:32,640 --> 00:01:34,533
where I will import that component.

36
00:01:36,660 --> 00:01:41,610
So import feature from components feature

37
00:01:41,610 --> 00:01:43,260
and then I'm going to create a new route

38
00:01:43,260 --> 00:01:45,273
inside of my route listings.

39
00:01:47,220 --> 00:01:49,440
So I'm gonna add a third route,

40
00:01:49,440 --> 00:01:52,140
with a path of feature,

41
00:01:52,140 --> 00:01:53,430
and anytime someone goes there

42
00:01:53,430 --> 00:01:56,643
we'll show the feature component.

43
00:02:01,530 --> 00:02:03,120
All right, so that looks good.

44
00:02:03,120 --> 00:02:04,683
Quick test inside the browser,

45
00:02:05,610 --> 00:02:06,783
there's the reload.

46
00:02:11,250 --> 00:02:13,020
And, okay, very good.

47
00:02:13,020 --> 00:02:14,610
So now we've got something to show here.

48
00:02:14,610 --> 00:02:15,960
Let's continue in the next section.

49
00:02:15,960 --> 00:02:16,793
And we're gonna think

50
00:02:16,793 --> 00:02:18,840
about creating a middleware that's going to,

51
00:02:18,840 --> 00:02:20,100
or some amount of middleware,

52
00:02:20,100 --> 00:02:21,870
but a higher order component that's gonna lock

53
00:02:21,870 --> 00:02:24,420
down users' access to this page right here

54
00:02:24,420 --> 00:02:26,010
if they are not signed in.

55
00:02:26,010 --> 00:02:28,460
So quick break and I'll see you in just a minute.