1
00:00:00,520 --> 00:00:05,570
In the last video we wrapped our language store component around language selector and user create.

2
00:00:05,640 --> 00:00:10,800
We did this because we needed to make sure that the language selector and user create both had the ability

3
00:00:10,830 --> 00:00:14,760
to access data or change data inside the language store.

4
00:00:14,760 --> 00:00:18,830
Now remember it's not actually user create that needs to access data or change data.

5
00:00:18,870 --> 00:00:22,380
It is the components nested inside of user create that needs to.

6
00:00:22,680 --> 00:00:27,150
We're not going to open up our language selector and make sure that we wire up a callback function to

7
00:00:27,150 --> 00:00:32,130
it that will allow the language selector to change the currently selected language through our language

8
00:00:32,130 --> 00:00:32,660
store.

9
00:00:33,600 --> 00:00:36,410
All right so I going to find my language selector.

10
00:00:36,840 --> 00:00:45,900
And then at the top I'm going to import our language context from up one directory contex language context

11
00:00:45,990 --> 00:00:46,980
like so.

12
00:00:46,980 --> 00:00:51,440
Now notice in this case we got the default export from language context.

13
00:00:51,510 --> 00:00:55,790
So this right here is that same context object that we've been talking about for a pretty good while.

14
00:00:56,070 --> 00:01:03,440
We can access that context object inside of our language selector by either wiring it up to this context

15
00:01:03,440 --> 00:01:07,230
through that context type's property or by setting up the consumer.

16
00:01:07,230 --> 00:01:13,530
Now in the case of our language selector component this thing doesn't need to access any other context

17
00:01:13,530 --> 00:01:14,210
object.

18
00:01:14,220 --> 00:01:18,230
So for this one we'll use the this context approach.

19
00:01:18,910 --> 00:01:19,250
OK.

20
00:01:19,260 --> 00:01:25,980
So inside my class I'll say static context type is language context like so.

21
00:01:26,380 --> 00:01:30,370
So remember that's going to hook up our language selector to the language context.

22
00:01:30,600 --> 00:01:35,900
So now inside of your we can console log this context like so.

23
00:01:36,220 --> 00:01:41,750
And we should see some information coming out of our language store.

24
00:01:43,230 --> 00:01:48,590
Specifically everything inside the state object and the On Language Change callback as well.

25
00:01:48,600 --> 00:01:51,550
Let's try flipping back over to our code or see me to our browser.

26
00:01:51,600 --> 00:01:54,780
Now we should see that console log right here.

27
00:01:54,780 --> 00:01:57,770
So this is what we are getting from the language store.

28
00:01:57,780 --> 00:02:02,520
We've got the currently selected language and we've also got the callback to change that language as

29
00:02:02,520 --> 00:02:03,920
well.

30
00:02:03,930 --> 00:02:10,080
So now inside of the language selector I'm going to remove that console log that we just added And now

31
00:02:10,080 --> 00:02:13,900
we are going to make sure that we change our currently selected language.

32
00:02:13,920 --> 00:02:20,130
Any time a user clicks on a flag by changing the callback right here so our callback to change language

33
00:02:20,190 --> 00:02:22,250
is no longer present on the Propp subject.

34
00:02:22,260 --> 00:02:25,160
It's no longer being passed in from our app component.

35
00:02:25,380 --> 00:02:32,490
Instead it is located on our context property so we can modify both those to be this context not on

36
00:02:32,490 --> 00:02:33,720
language change.

37
00:02:33,780 --> 00:02:40,930
Now really quickly let's add that console log back in and then we'll save this and test it out inside

38
00:02:40,940 --> 00:02:42,770
the browser really quickly.

39
00:02:42,800 --> 00:02:47,860
So if I now click on these two flags up here I'll see that the language is correctly changing.

40
00:02:48,350 --> 00:02:50,530
OK so that's definitely working out pretty well.

41
00:02:50,540 --> 00:02:51,910
So let's take another quick break.

42
00:02:52,040 --> 00:02:56,390
When we come back in the next section we're going to move over to our button and our field components

43
00:02:56,570 --> 00:03:01,610
and make sure that they access this data off the new contex property as opposed to the previous kind

44
00:03:01,610 --> 00:03:03,950
of language context they were using.

45
00:03:03,950 --> 00:03:05,780
So a quick pause and I'll see you in just a minute.