1 00:00:00,580 --> 00:00:04,830 In the last video we started talking about how we were going to create a language store component the 2 00:00:04,850 --> 00:00:09,890 language store is going to contain all of our business logic and our data and make it available to other 3 00:00:09,890 --> 00:00:14,530 components inside of our component hierarchy over the context system. 4 00:00:14,540 --> 00:00:18,200 So in this video we're going to start to create this language store component. 5 00:00:18,200 --> 00:00:22,100 We're going to go a little bit light on the description of exactly what's happening because I think 6 00:00:22,130 --> 00:00:25,440 everything's going to be a lot more clear once you see the completed example. 7 00:00:25,610 --> 00:00:27,420 So let's get to it. 8 00:00:27,470 --> 00:00:30,710 I'm going to open up my code editor and I'll find the language context. 9 00:00:30,800 --> 00:00:31,820 Yes file. 10 00:00:31,820 --> 00:00:36,510 So inside of here we're going to continue to create this context object and export it. 11 00:00:36,680 --> 00:00:40,840 But in addition we are also going to create this language store component. 12 00:00:41,150 --> 00:00:43,060 So inside of language context. 13 00:00:43,550 --> 00:00:48,710 I'm going to first remove the export default statement right there and I'm going to instead assign it 14 00:00:48,710 --> 00:00:52,280 to a variable called context like so. 15 00:00:52,280 --> 00:00:56,000 Now notice that this is defined with a capital C that is very important. 16 00:00:56,000 --> 00:00:59,220 Please make sure that you use a capital C as well. 17 00:01:00,160 --> 00:01:06,940 And then after that I'm going to declare a new class based component called language store and that's 18 00:01:06,940 --> 00:01:14,610 going to extend re-act component so inside of this class right here we're going to set up some state 19 00:01:14,610 --> 00:01:18,090 property that's going to maintain the currently selected language. 20 00:01:18,120 --> 00:01:22,860 We're also going to implement a callback function inside there that gives other components the ability 21 00:01:22,860 --> 00:01:28,350 to change that currently selected language so inside of language store I'm going to set up my state 22 00:01:28,350 --> 00:01:33,350 object and I'm going to say language is by default English. 23 00:01:33,630 --> 00:01:38,190 And then after that I'm going to implement a callback function that we can pass off to other components 24 00:01:38,340 --> 00:01:40,880 so they can change the state property. 25 00:01:40,920 --> 00:01:46,220 So I'll say on language change this is going to be a callback function. 26 00:01:46,220 --> 00:01:50,750 So I'm not going to define it as an arrow function will say that this is going to get defined. 27 00:01:50,760 --> 00:01:54,560 Or c me cold with the new language as an argument. 28 00:01:54,780 --> 00:02:00,890 And so we will call inside of a distraught set state language like so. 29 00:02:01,020 --> 00:02:03,910 OK so this right here is all of our business logic. 30 00:02:03,950 --> 00:02:05,550 It's our current set of data. 31 00:02:05,600 --> 00:02:07,580 The current selected language. 32 00:02:07,670 --> 00:02:11,960 And we also have the ability to change the currently selected language as well. 33 00:02:11,960 --> 00:02:16,370 So now the next thing we're going to do is define our render method inside the render method. 34 00:02:16,370 --> 00:02:19,120 We're going to set up a language context provider. 35 00:02:19,400 --> 00:02:24,140 And as the Value property we're going to pass off the currently selected language and that callback 36 00:02:24,140 --> 00:02:25,980 we just created as well. 37 00:02:26,000 --> 00:02:30,470 So this render method with the provider is how we're going to share their current data and with the 38 00:02:30,470 --> 00:02:34,010 ability to change it with other components inside of our application. 39 00:02:35,630 --> 00:02:42,630 So in my render method I'm going to return context with a capital C right here. 40 00:02:42,640 --> 00:02:48,450 MEMBER We assign that context we created to capital C context dot provider. 41 00:02:48,730 --> 00:02:53,390 The value is going to be the combination of everything out of our state object. 42 00:02:53,560 --> 00:02:55,840 And this callback function as well. 43 00:02:55,840 --> 00:03:01,180 So the value is our all of our data and the ability to change that data as well. 44 00:03:01,180 --> 00:03:07,060 So as my value I'm going to put in a empty object inside of here and I'm going to add in all the different 45 00:03:07,060 --> 00:03:08,500 values from my state object. 46 00:03:08,530 --> 00:03:11,480 So say dot dot dot dot dot state. 47 00:03:11,590 --> 00:03:15,300 Remember the syntax right here very similar to what we did with redux earlier. 48 00:03:15,340 --> 00:03:17,330 We are creating a new object. 49 00:03:17,440 --> 00:03:22,270 We're taking all the values out of our current state object and adding them into that object. 50 00:03:22,570 --> 00:03:27,460 And then in addition we're also going to take this callback function and add it in there as well. 51 00:03:27,610 --> 00:03:29,800 So on language change 52 00:03:34,540 --> 00:03:43,630 then going to close off that provider tag like so now the language store is going to be used or rendered 53 00:03:43,660 --> 00:03:45,930 at some location inside of application. 54 00:03:45,970 --> 00:03:51,430 Remember any time that we place a provider only the components underneath it or only the components 55 00:03:51,430 --> 00:03:57,610 that get wrapped by this provider will have access to the context that is implemented by this provider. 56 00:03:57,610 --> 00:04:02,350 So essentially we need to make sure that this language store component is going to wrap all of these 57 00:04:02,350 --> 00:04:07,600 different components when it finally gets rendered to do so inside of the provider tag. 58 00:04:07,600 --> 00:04:14,260 We're going to place a set of curly braces and reference this prop's dots children. 59 00:04:14,330 --> 00:04:15,360 So what's going on here. 60 00:04:15,470 --> 00:04:19,790 Well a quick reminder back to like the first section of this course one of the things that we learned 61 00:04:19,850 --> 00:04:24,380 very early on was that we could create our own components are going to show you down here is a quick 62 00:04:24,380 --> 00:04:27,530 example I'm going to delete this really quickly so you don't have to write this out if you don't want 63 00:04:27,530 --> 00:04:28,250 to. 64 00:04:28,250 --> 00:04:31,270 We saw that we could create our own components like say language store 65 00:04:35,350 --> 00:04:44,530 and we could pass our own component some amount of GSX like say a div or a form or even another component 66 00:04:44,530 --> 00:04:51,190 that we create like say language selector or whatever it might be whenever we passed some GSX to a component 67 00:04:51,190 --> 00:04:58,330 we creates these components right here show up inside of that parent component on Propp start children. 68 00:04:58,330 --> 00:05:03,280 So this right here is what's going to make sure that we can render some components inside of our language 69 00:05:03,280 --> 00:05:03,970 store. 70 00:05:04,240 --> 00:05:08,860 And so all the components are rendered inside of it are going to have access to this context object 71 00:05:08,860 --> 00:05:10,610 that we just implemented. 72 00:05:12,110 --> 00:05:13,330 All right. 73 00:05:13,440 --> 00:05:15,320 Now one other quick thing I want to mention here. 74 00:05:15,330 --> 00:05:18,670 Why did we use a capital C on the variable context. 75 00:05:18,820 --> 00:05:24,930 Well anytime that we create a component ourselves and tried to render it out using GSX we have to use 76 00:05:24,930 --> 00:05:26,800 a capital C for that variable. 77 00:05:26,850 --> 00:05:33,300 If you use a lowercase like so like a lowercase context re-act is going to think that this is a normal 78 00:05:33,330 --> 00:05:38,530 vanilla HDL element that you're trying to render out like say a div or a form or a span or whatever. 79 00:05:38,700 --> 00:05:41,490 So any component we create has to have a capital letter. 80 00:05:41,700 --> 00:05:45,510 That's why we used capital C context OK. 81 00:05:45,520 --> 00:05:48,510 So that's all we have to do for the language store class. 82 00:05:48,510 --> 00:05:52,840 It's not the last we do inside this file is make sure that we export the language store and make it 83 00:05:52,840 --> 00:05:55,620 available to other files inside of our application. 84 00:05:55,630 --> 00:06:01,330 We also have to continue to export this context object as well. 85 00:06:01,330 --> 00:06:03,650 And I'll tell you why that is in just a moment. 86 00:06:03,670 --> 00:06:07,360 So first I'm going to export our class language store. 87 00:06:07,360 --> 00:06:09,640 Notice how I only use the word export here. 88 00:06:09,700 --> 00:06:13,270 So we've set up language store as a named export. 89 00:06:13,360 --> 00:06:17,260 That means that anytime that we try to import it we're going to have to use the curly braces and say 90 00:06:17,260 --> 00:06:20,890 like language store like so. 91 00:06:21,160 --> 00:06:26,110 In addition at the bottom of the file I'm also going to export default context as well. 92 00:06:26,140 --> 00:06:28,180 Just as we did previously. 93 00:06:28,180 --> 00:06:34,270 So now any time we import the language context file we will either write out import contexts or really 94 00:06:34,330 --> 00:06:39,580 language context because for a different export we can rename it when we import it or we will write 95 00:06:39,580 --> 00:06:44,510 out import language store if we want the component itself. 96 00:06:46,150 --> 00:06:50,800 So those are the two things that we can now import from this file. 97 00:06:50,800 --> 00:06:53,780 All right so that is our language store component. 98 00:06:53,920 --> 00:06:59,140 It encapsulates all the data of around the currently selected language and it also implements the ability 99 00:06:59,140 --> 00:07:01,900 to change that data as well. 100 00:07:01,900 --> 00:07:05,440 So now that we've put this component together we'll take a quick pause right here and when we come back 101 00:07:05,440 --> 00:07:08,000 the next section will figure out how to make use of it. 102 00:07:08,020 --> 00:07:09,890 So quick break and I'll see you in just a moment.