1
00:00:00,760 --> 00:00:03,610
Were you able to complete
the challenge on your own?

2
00:00:03,610 --> 00:00:07,936
Nice job, if not, no worries,
I'll show you how I solved it.

3
00:00:07,936 --> 00:00:13,129
First, in Authenticated.js,
we'll import useContext along with React.

4
00:00:18,350 --> 00:00:22,246
Then, we'll import the context directly
from the file it's created in.

5
00:00:32,450 --> 00:00:36,796
The useContext hook takes the context
object as an argument and

6
00:00:36,796 --> 00:00:38,930
returns the current context.

7
00:00:43,210 --> 00:00:47,893
Inside our component, let's assign
the context to a variable by setting it

8
00:00:47,893 --> 00:00:52,888
equal to the useContext hook with the
context object, passed in as an argument.

9
00:01:05,784 --> 00:01:08,379
We use Context.Context here, so

10
00:01:08,379 --> 00:01:13,370
we can access the context
object in the context file.

11
00:01:13,370 --> 00:01:17,068
Let's remove the props here since we
don't need these anymore in the function

12
00:01:17,068 --> 00:01:18,030
component, Save.

13
00:01:19,540 --> 00:01:24,606
Back in AppJS, we can remove the call
to withContext that takes authenticated

14
00:01:24,606 --> 00:01:29,613
as an argument and pass the authenticated
component into our PrivateRoute.

15
00:01:40,100 --> 00:01:45,037
When we refresh our app in the browser,
our header still displays

16
00:01:45,037 --> 00:01:49,631
the name of the current user and
our code is now a bit cleaner.

17
00:01:49,631 --> 00:01:52,528
Now, for the next part of this challenge,

18
00:01:52,528 --> 00:01:56,562
the UserSignUp component is
currently a class component.

19
00:01:56,562 --> 00:01:59,750
You will need to refactor it to
a function component that uses hooks.

20
00:02:01,080 --> 00:02:04,192
The UserSignUp component uses state,
context and

21
00:02:04,192 --> 00:02:08,860
the history object,
which hooks do you think you'll need?

22
00:02:08,860 --> 00:02:14,121
If you guessed useState and useContext,
you have a good grasp on the React hooks

23
00:02:14,121 --> 00:02:19,397
naming conventions, you're also well
on your way to solving this challenge.

24
00:02:19,397 --> 00:02:23,615
It's important to keep in mind that when
you convert the component from a class to

25
00:02:23,615 --> 00:02:28,500
a function, you'll no longer have access
to the history object via history prop.

26
00:02:28,500 --> 00:02:33,106
React router has a special hook you
can use to access history from inside

27
00:02:33,106 --> 00:02:35,728
a function, it's called useHistory.

28
00:02:35,728 --> 00:02:39,305
And I've posted information about
it in the Teachers Notes to

29
00:02:39,305 --> 00:02:42,536
help you with this next challenge,
be sure to review and

30
00:02:42,536 --> 00:02:47,726
use these three hooks to convert
UserSignUp into a function component.

31
00:02:47,726 --> 00:02:50,056
In the next video,
I'll show you my solution.