1
00:00:00,390 --> 00:00:06,420
In order to control our front end if the user has logged in or the user hasn't logged in we're gonna

2
00:00:06,420 --> 00:00:08,340
have to set up another context.

3
00:00:08,460 --> 00:00:10,960
So so far we have two contexts.

4
00:00:11,040 --> 00:00:17,320
We have one for the product as well as the card and now last one is gonna be the user where we're going

5
00:00:17,320 --> 00:00:18,700
to set up our context.

6
00:00:18,720 --> 00:00:20,700
We are gonna have some functions.

7
00:00:20,700 --> 00:00:27,840
So essentially if our log in was success then of course where we have if response is true then we're

8
00:00:27,840 --> 00:00:29,400
going to log in our user.

9
00:00:29,400 --> 00:00:34,870
And once we log in our user again then we're going to display different links in a bar.

10
00:00:34,950 --> 00:00:40,500
Then remember also in the card we have an option of either logging in or we had an option of showing

11
00:00:40,500 --> 00:00:41,850
in fact the checkout link.

12
00:00:42,150 --> 00:00:49,110
So that's another functionality we're going to control and everything else that user can or cannot do

13
00:00:49,380 --> 00:00:50,970
in our application.

14
00:00:50,970 --> 00:00:56,850
And we're gonna start again somewhat simply by just setting up a user context.

15
00:00:56,850 --> 00:01:01,970
And again since it is not our first rodeo I'm gonna try to move somewhat swiftly.

16
00:01:02,370 --> 00:01:10,300
Let me clear the console first and then we're going to import react import react from react like.

17
00:01:10,320 --> 00:01:19,440
So once we import to react next I would want to set up my user context so const user context and we're

18
00:01:19,440 --> 00:01:24,430
gonna go with react and then create context like so.

19
00:01:24,470 --> 00:01:26,100
So let's set up our context.

20
00:01:26,190 --> 00:01:29,820
Then again we have our provider as well as the consumer.

21
00:01:29,880 --> 00:01:36,720
And I'm just gonna set up a separate function a function user provider provider that is going to return

22
00:01:36,720 --> 00:01:39,060
the user context provider.

23
00:01:39,060 --> 00:01:43,860
And again we need to have children because of course they're gonna we're gonna wrap everything within

24
00:01:43,860 --> 00:01:44,690
the index.

25
00:01:44,920 --> 00:01:45,390
Yes.

26
00:01:45,720 --> 00:01:47,900
And then we would want to return.

27
00:01:48,030 --> 00:01:52,670
And then we're returning a user context provider.

28
00:01:52,770 --> 00:01:55,530
Now value's just gonna be simple user for now.

29
00:01:55,550 --> 00:01:58,550
But of course eventually it's gonna be a little bit more complicated.

30
00:01:58,590 --> 00:02:03,830
And then of course we would want to render children and I'm going to set this up as named export.

31
00:02:03,830 --> 00:02:07,570
So first I'm gonna export user provider.

32
00:02:07,740 --> 00:02:14,700
And next we're going to export user context user context like so.

33
00:02:14,840 --> 00:02:23,000
And now let's head over to index let's grab the user provider and wrap our hold up in the user provider.

34
00:02:23,050 --> 00:02:25,420
We're gonna head over to index.

35
00:02:25,470 --> 00:02:26,180
Let's find it.

36
00:02:26,190 --> 00:02:27,390
We have the index.

37
00:02:27,390 --> 00:02:30,150
Now that was the named import.

38
00:02:30,180 --> 00:02:32,490
So again let's cut copy paste.

39
00:02:32,490 --> 00:02:34,200
It's not a card provider.

40
00:02:34,200 --> 00:02:36,110
It is a user provider.

41
00:02:36,150 --> 00:02:39,360
It is coming from the user context.

42
00:02:39,360 --> 00:02:44,340
And then I would want to wrap everything the product the card as well as the app.

43
00:02:44,400 --> 00:02:48,790
So we're gonna set this up when I have a user provider.

44
00:02:48,960 --> 00:02:54,510
Let's just get it down and add a comma in the proper place.

45
00:02:54,510 --> 00:02:55,410
Let's save it.

46
00:02:55,590 --> 00:03:02,460
And then I guess in order to test it out whether everything has been set up correctly back in the logging

47
00:03:02,530 --> 00:03:14,190
we're gonna import my user context so let's import user user context from let's look right now for our

48
00:03:14,190 --> 00:03:15,310
context.

49
00:03:15,430 --> 00:03:18,240
So context then we have the user context.

50
00:03:18,650 --> 00:03:24,870
And since it is a string value somewhere within my log component maybe right after we have the comment

51
00:03:25,260 --> 00:03:31,830
I'm going to send this equal to I value and receive value is equal to react use context.

52
00:03:31,940 --> 00:03:36,410
Remember that was the hook we used and then we pass in the user context.

53
00:03:36,630 --> 00:03:45,690
So user context context once we do that let's just console log when we have as a value whether we're

54
00:03:45,700 --> 00:03:51,940
getting back or user if we are getting back the user which we do all the functionality is correct at

55
00:03:51,940 --> 00:03:58,540
least our initial one and now we can just start setting up everything within the user context.