1
00:00:00,360 --> 00:00:04,210
We've always starts setting up any of the components in the dashboard.

2
00:00:04,330 --> 00:00:08,220
I would want to work on our global state, essentially.

3
00:00:08,300 --> 00:00:15,620
I would want to lift up the user state, whether that is the user info, the followers or the repos

4
00:00:15,960 --> 00:00:16,710
in one place.

5
00:00:17,520 --> 00:00:21,630
And that way I can access that information all throughout my application.

6
00:00:22,180 --> 00:00:23,220
I know how to do that.

7
00:00:23,280 --> 00:00:27,360
We are going to use context API, which you're familiar.

8
00:00:27,450 --> 00:00:29,940
This is going to be a nice refresher.

9
00:00:30,420 --> 00:00:36,690
If not, well, you'll learn everything that there is to know about the context API in order to set

10
00:00:36,690 --> 00:00:36,990
it up.

11
00:00:37,020 --> 00:00:39,720
We would need to navigate to a context.

12
00:00:39,770 --> 00:00:40,200
Yes.

13
00:00:40,780 --> 00:00:46,020
So notice we have the source folder then in there we have the complex folder.

14
00:00:46,260 --> 00:00:50,810
In there we have the mock data, which we're gonna cover a little bit later on.

15
00:00:50,850 --> 00:00:55,180
Also, we have the complex drafts so bravely navigate to a context.

16
00:00:55,280 --> 00:01:00,510
Yes, at the moment I fully understand that none of these imports make sense.

17
00:01:00,810 --> 00:01:05,310
Don't worry, we're gonna get there and we will need to set up our context.

18
00:01:05,870 --> 00:01:11,010
And the way we set up context is by using create context method.

19
00:01:11,280 --> 00:01:13,920
So first, we need to come up with some kind of variable.

20
00:01:14,730 --> 00:01:19,890
So in this case, I'm going to go with geared Hobb and line context.

21
00:01:20,340 --> 00:01:22,350
That is my name and I'm going to use a react.

22
00:01:22,740 --> 00:01:24,130
So my import than Dopp.

23
00:01:24,400 --> 00:01:28,290
And then the method name is create context.

24
00:01:28,950 --> 00:01:30,630
So you invoke the method.

25
00:01:31,080 --> 00:01:32,280
And now we have our context.

26
00:01:32,850 --> 00:01:36,870
Now, the moment we do that, we have access to two components.

27
00:01:37,230 --> 00:01:42,090
We have access to the provider as well as the consumer.

28
00:01:43,350 --> 00:01:48,660
We can create them or we can access them, I guess, via just type in GitHub context.

29
00:01:48,690 --> 00:01:54,210
So whatever is the name and then dot and then whether the provider or the consumer.

30
00:01:54,720 --> 00:02:01,680
Now I can tell you right away that we have an arrival of Euge context took, which we are going to use.

31
00:02:02,070 --> 00:02:04,920
Now we can just skip on usually the consumer.

32
00:02:05,400 --> 00:02:09,660
So essentially what we're looking for, he is just the provider.

33
00:02:10,140 --> 00:02:17,090
Now, the thing is, I don't want to wrap my application using Grupp context provider directly.

34
00:02:17,180 --> 00:02:17,490
Why?

35
00:02:17,880 --> 00:02:19,590
Because I would want to set up more logic.

36
00:02:19,720 --> 00:02:23,370
That's why I'm going to set up a separate component in here.

37
00:02:23,380 --> 00:02:32,310
I'm going to say cost and then get hub gate hub provi there Mike show so and then eventually we'll render

38
00:02:32,730 --> 00:02:33,460
all our application.

39
00:02:33,530 --> 00:02:34,970
So that's why we're passing the children.

40
00:02:34,980 --> 00:02:35,400
Don't worry.

41
00:02:35,790 --> 00:02:37,320
We'll talk to them in a second.

42
00:02:38,190 --> 00:02:44,970
And then from this component, I would want to return my GitHub context dot provider.

43
00:02:45,610 --> 00:02:51,300
So the component that I'm getting, once I set up the context again, please don't mix and match.

44
00:02:51,690 --> 00:02:58,260
This is a context and then this is a separate component that we're just using because there's going

45
00:02:58,260 --> 00:03:00,120
to be more logic in there.

46
00:03:00,630 --> 00:03:02,430
We're not just going to wrap our application.

47
00:03:02,790 --> 00:03:05,100
There is going to be also some functionality in here.

48
00:03:05,570 --> 00:03:12,380
Well, that's why from the get up provider component, we are returning a GitHub context.

49
00:03:12,450 --> 00:03:14,550
So get hub context.

50
00:03:14,610 --> 00:03:19,620
And then remember, it was DOT because we want access the provider a notice right away.

51
00:03:20,010 --> 00:03:21,570
It gives us these options.

52
00:03:21,570 --> 00:03:26,220
So we go with a provider and then we wrap all our application.

53
00:03:26,670 --> 00:03:27,420
That's why.

54
00:03:27,720 --> 00:03:29,220
Notice how we have the children.

55
00:03:29,610 --> 00:03:36,420
So what I'm saying I, I'm wrapping the whole application and the whole application is going to be children,

56
00:03:37,170 --> 00:03:37,580
man.

57
00:03:37,730 --> 00:03:39,660
Our just want around their children as well.

58
00:03:40,080 --> 00:03:40,950
If you won't do that.

59
00:03:41,400 --> 00:03:46,920
Well, since we're wrapping the whole application in to get a provider, nothing is going to be rendered.

60
00:03:47,120 --> 00:03:47,340
Okay.

61
00:03:47,880 --> 00:03:51,420
Now, what's really important is that this provider has the value prop.

62
00:03:52,110 --> 00:03:57,930
So whatever we pass in the value is gonna be accessible all throughout our application.

63
00:03:58,020 --> 00:04:01,590
Again, eventually there's going to be way more functionality.

64
00:04:01,630 --> 00:04:04,370
But the moment I just want to render hello.

65
00:04:05,130 --> 00:04:10,320
So I'm just gonna say, yeah, pass in the hello string in the value, so I'll save it.

66
00:04:10,710 --> 00:04:12,630
And now we need to export these two things.

67
00:04:12,960 --> 00:04:15,120
We need to export get up context.

68
00:04:15,420 --> 00:04:18,990
So our whole context as well as the provider.

69
00:04:19,500 --> 00:04:20,170
Why we need that?

70
00:04:20,200 --> 00:04:21,750
Well, because you use context.

71
00:04:21,890 --> 00:04:28,870
The hope that we're gonna use in order to access this data is looking for the main context, are giving

72
00:04:28,870 --> 00:04:29,370
up context.

73
00:04:29,970 --> 00:04:34,110
And then in order to wrap our application in the provider.

74
00:04:34,530 --> 00:04:41,250
We also need to import get a provider somewhere in the road so we can wrap our whole application.

75
00:04:41,830 --> 00:04:42,690
And then, of course, do that.

76
00:04:43,590 --> 00:04:48,390
In our case, we're only going to use get provider once, but then each and every time we need to have

77
00:04:48,780 --> 00:04:52,570
access to the data that we have at the moment is just low.

78
00:04:52,950 --> 00:04:54,820
Then of course we'll use giddap context.

79
00:04:55,310 --> 00:04:59,690
So here at the bottom, I'm going to go with export and then I'm exporting.

80
00:04:59,770 --> 00:05:02,190
Two things I'm exporting get provider.

81
00:05:02,860 --> 00:05:06,280
Show the component not to get up context provider.

82
00:05:06,700 --> 00:05:10,750
That's the one that we're returning from to get a provider as well as our main context.

83
00:05:10,870 --> 00:05:13,430
Which, of course, is GitHub context.

84
00:05:13,930 --> 00:05:15,880
And once we export these two things.

85
00:05:16,780 --> 00:05:20,950
Now, of course, I would want to wrap my application in the get up provider.

86
00:05:21,770 --> 00:05:29,620
The way we do that is by navigating to index Jayesh and that index, Jarius, has to import.

87
00:05:30,040 --> 00:05:33,430
It has a import of Get-Out provider from the context.

88
00:05:33,440 --> 00:05:38,740
Notice how we're looking for context folder and then I'm looking for the context.

89
00:05:38,920 --> 00:05:44,320
J.S. and now Knauss, where we have react search mode in there.

90
00:05:44,770 --> 00:05:47,470
I'm going to go with my GitHub, not context.

91
00:05:47,890 --> 00:05:51,550
So we're looking for geared Hobb and LAN provider.

92
00:05:51,820 --> 00:05:52,630
That's my component.

93
00:05:53,020 --> 00:05:56,820
And let's wrap our app component once we save.

94
00:05:57,700 --> 00:05:58,780
If there are no errors.

95
00:05:59,020 --> 00:05:59,470
Beautiful.

96
00:05:59,920 --> 00:06:01,480
Everything works as expected.

97
00:06:02,080 --> 00:06:07,230
Now, the key here is that of course, now we want access that silly little hole.

98
00:06:07,590 --> 00:06:07,950
Correct.

99
00:06:08,560 --> 00:06:10,540
And we can take a look at the dashboard.

100
00:06:11,820 --> 00:06:15,960
And we can say, all right, why don't we try to access that in the info?

101
00:06:16,800 --> 00:06:19,870
Let's navigate to our info component.

102
00:06:20,140 --> 00:06:24,920
So it's going to be in the components that I'm looking for info jayesh.

103
00:06:25,450 --> 00:06:28,150
And then in the info address at the moment.

104
00:06:28,200 --> 00:06:29,740
Yeah, I have a bunch of imports.

105
00:06:29,770 --> 00:06:30,340
Beautiful.

106
00:06:30,700 --> 00:06:33,100
I have user info component.

107
00:06:33,460 --> 00:06:35,330
And then, of course, I have a bunch of styling here.

108
00:06:35,920 --> 00:06:37,270
That's why I have the wrapper.

109
00:06:37,720 --> 00:06:42,640
Now, what I would want to do is just simply see whether I have access to that.

110
00:06:42,670 --> 00:06:43,000
Hello.

111
00:06:43,450 --> 00:06:44,560
Because that's the key thing.

112
00:06:45,100 --> 00:06:50,650
If I have access to that silly little hole, that means that we can start setting up our functionality

113
00:06:51,310 --> 00:06:52,560
in our context.

114
00:06:52,750 --> 00:06:59,680
Yes, because I would want to set up all my functionality here and get help provider and then just distribute

115
00:06:59,680 --> 00:07:01,600
it all throughout my components.

116
00:07:02,020 --> 00:07:09,550
So in the info Jara's, in order to access the context, we would need to use use context.

117
00:07:10,150 --> 00:07:16,840
Now we can import that hook directly from react or we can just use react dot and then whatever is the

118
00:07:16,840 --> 00:07:17,090
hook man.

119
00:07:17,440 --> 00:07:19,180
Which is essentially what I'm going to do.

120
00:07:19,570 --> 00:07:24,690
So I'm gonna say cost and then I'm going to name this data and we're going to go with react.

121
00:07:25,330 --> 00:07:26,700
Then use context.

122
00:07:26,820 --> 00:07:30,520
OK, and now in this hook, we need to pass in our GitHub context.

123
00:07:31,010 --> 00:07:36,340
That's why it was important when we're setting up that context to export it as well.

124
00:07:36,910 --> 00:07:40,840
So we need the provider because I wanted to wrap my application.

125
00:07:41,410 --> 00:07:47,590
And then, of course, I also need my get up context because I would want to access my soul.

126
00:07:47,640 --> 00:07:48,040
Hello.

127
00:07:48,610 --> 00:07:51,230
So in the info, let's pass in our GitHub context.

128
00:07:51,340 --> 00:07:53,710
Because as you can see, priority important.

129
00:07:54,010 --> 00:07:58,900
So we're gonna go get a job and then we're looking for the context.

130
00:07:59,110 --> 00:07:59,620
Beautiful.

131
00:08:00,410 --> 00:08:02,830
Now, I don't know, we have user info.

132
00:08:03,370 --> 00:08:04,960
Why don't we take a look at our data?

133
00:08:05,370 --> 00:08:11,580
So I'm going to add a colon here and I'll just pass in the data, not words can console log at.

134
00:08:11,650 --> 00:08:14,560
We can do whatever we would want, but the molinar, we should see the.

135
00:08:14,570 --> 00:08:14,950
Hello.

136
00:08:15,150 --> 00:08:15,540
Why?

137
00:08:16,180 --> 00:08:17,710
Because we have our context right now.

138
00:08:18,160 --> 00:08:22,960
So essentially now we don't need to set up all our logic in a dashboard.

139
00:08:23,380 --> 00:08:25,210
I can setup everything in a context.

140
00:08:25,570 --> 00:08:29,350
So get a new user, get three Poes, get the followers and all that.

141
00:08:29,770 --> 00:08:32,710
And then any component that wants that info.

142
00:08:33,550 --> 00:08:35,570
Well, we simply need to import GitHub contacts.

143
00:08:36,190 --> 00:08:44,500
Then use contact stock and online, whatever data we'll spit back is gonna be available in that particular

144
00:08:44,500 --> 00:08:44,980
component.