1
00:00:00,650 --> 00:00:03,410
In the last video we put together our language story component.

2
00:00:03,540 --> 00:00:08,370
The next thing we're going to do is import this into our app component and render the language store

3
00:00:08,370 --> 00:00:10,560
itself by rendering the language store.

4
00:00:10,560 --> 00:00:12,960
We're not actually putting anything on the screen.

5
00:00:12,960 --> 00:00:18,900
We're just implementing the Context object inside of here and making the current state and the ability

6
00:00:18,900 --> 00:00:23,040
to change it available to other components inside of our component hierarchy.

7
00:00:23,040 --> 00:00:26,250
So I'm going to change on over to my outtalk J.S. file.

8
00:00:26,250 --> 00:00:30,960
I'm going to find the current import statement that we have for the language context right here rather

9
00:00:30,960 --> 00:00:32,870
than importing the Context object.

10
00:00:32,910 --> 00:00:36,240
We want to import that component that we just created.

11
00:00:36,240 --> 00:00:40,950
We're going to show this component exactly one time inside of our application because we only want one

12
00:00:40,950 --> 00:00:45,440
copy of the currently selected language to be floating around our app.

13
00:00:45,480 --> 00:00:53,300
So inside the uptalk J.S. file I want to change that import statement to curly braces language store

14
00:00:53,390 --> 00:00:54,470
like so.

15
00:00:54,470 --> 00:01:00,440
Remember we are using the curly braces here because we are trying to import a named export value.

16
00:01:00,740 --> 00:01:05,840
So there is no export default here it just says export which means to import it we have to use those

17
00:01:05,840 --> 00:01:09,880
curly braces and then list out the exact name of the variable that we're trying to import.

18
00:01:11,110 --> 00:01:17,320
So now inside of my render method I'm going to find where we previously had language contexts so we're

19
00:01:17,320 --> 00:01:22,870
no longer going to set up our provider inside of here because the app component is no longer responsible

20
00:01:23,020 --> 00:01:27,160
for maintaining our business logic or our application data.

21
00:01:27,160 --> 00:01:33,830
So I'm going to remove the provider and instead of going to wrap user create or see me on I'm going

22
00:01:33,830 --> 00:01:40,690
to wrap user create We're going to actually implement this little bit higher I'm going to wrap everything

23
00:01:40,690 --> 00:01:47,960
inside that div with language store like so.

24
00:01:47,990 --> 00:01:48,710
So you might be curious.

25
00:01:48,740 --> 00:01:49,910
What do I hesitate there.

26
00:01:49,910 --> 00:01:51,530
Well I made a little bit of a mistake.

27
00:01:51,530 --> 00:01:57,890
Remember we want both user create and a language selector component to have access to the data inside

28
00:01:57,890 --> 00:02:03,440
of a language store user create wants to get the currently selected language language selector wants

29
00:02:03,440 --> 00:02:08,150
to get that callback function it wants to get the ability to change the currently selected language.

30
00:02:08,180 --> 00:02:14,420
So that's why we have to wrap both the language selector and user create with this new language or component.

31
00:02:14,430 --> 00:02:20,190
Now we're going to continue to do a little bit more of a refactor to our outgas file the js file is

32
00:02:20,190 --> 00:02:23,230
no longer in charge of maintaining the currently selected language.

33
00:02:23,340 --> 00:02:27,440
So we will remove this state initialization at the top the apt.

34
00:02:27,550 --> 00:02:32,580
J.S. file no longer needs the ability to change the currently selected language so we will remove that

35
00:02:32,580 --> 00:02:34,170
callback right there as well.

36
00:02:34,680 --> 00:02:39,480
And then finally the language selector component is not going to get the ability to change the currently

37
00:02:39,480 --> 00:02:41,860
selected language from the app.

38
00:02:41,940 --> 00:02:47,180
Instead the language selector is going to get this callback from our context object instead.

39
00:02:47,340 --> 00:02:52,350
So we can delete that Propp right there because it's not going to get that callback from the app component

40
00:02:52,350 --> 00:02:54,060
anymore.

41
00:02:54,060 --> 00:02:54,370
OK.

42
00:02:54,420 --> 00:02:55,590
So I going to save this.

43
00:02:55,830 --> 00:02:59,820
I'm going to flip back over to my browser really quickly and you might notice that we have a little

44
00:02:59,940 --> 00:03:01,430
error message over here.

45
00:03:02,350 --> 00:03:06,090
I think I probably made a little typo.

46
00:03:06,130 --> 00:03:06,670
Yes I did.

47
00:03:06,670 --> 00:03:11,940
So in spite of the language store component you'll notice we reference on language change right here.

48
00:03:11,950 --> 00:03:14,950
That was my mistake it should be whanged on language change.

49
00:03:14,950 --> 00:03:18,010
This starts on language change like so

50
00:03:21,680 --> 00:03:21,930
OK.

51
00:03:21,940 --> 00:03:22,600
That should be better.

52
00:03:22,600 --> 00:03:24,310
Let's try saving this now.

53
00:03:24,820 --> 00:03:26,840
And now we can see our application running.

54
00:03:26,980 --> 00:03:28,620
Now these buttons are not going to work.

55
00:03:28,630 --> 00:03:31,020
And if you click on them you're going to see an error message.

56
00:03:31,030 --> 00:03:32,620
So we still have a little bit more work to do.

57
00:03:32,620 --> 00:03:37,900
So let's take a quick pause right here in the next video we're going to wire up our language selector

58
00:03:37,900 --> 00:03:43,090
component to that new context object and that's when you'll start to get a better idea of what's going

59
00:03:43,090 --> 00:03:43,800
on here.

60
00:03:43,810 --> 00:03:45,930
So quick pause and I'll see you in just a minute on.