WEBVTT 00:00.890 --> 00:01.190 Okay. 00:01.190 --> 00:08.840 So what we have here is we have a way to get the token from our API, but we need to save it somewhere. 00:08.840 --> 00:12.050 You know that we are using that token from here. 00:12.050 --> 00:15.560 So this is the token we eventually want to have it in the service. 00:15.560 --> 00:22.910 But what we want to do is we want to have that token and being available in many places in our application. 00:22.910 --> 00:24.320 So how can we do that? 00:24.320 --> 00:25.550 And that's another lesson. 00:25.580 --> 00:30.380 It doesn't have to be a token, but it's something very useful to have in a react to know how to handle 00:30.380 --> 00:30.680 this. 00:30.710 --> 00:32.120 It's a context. 00:32.120 --> 00:35.690 So what we will do in this video will enable context for this. 00:35.690 --> 00:37.610 So we will go to index here. 00:37.610 --> 00:40.850 And what we have is we have that router provider here. 00:40.850 --> 00:46.610 But we need to have a proper component because we want to start something in a component. 00:46.640 --> 00:52.550 At the moment this is like a browser router that we've created, and this is the component that we imported 00:52.550 --> 00:53.510 from that library. 00:53.510 --> 00:56.480 So I will create a my own component. 00:56.510 --> 00:57.680 I will do a function. 00:57.890 --> 00:59.810 Uh, component is just a function. 00:59.810 --> 01:10.750 So I will do router and I will name it with capital R, and then it will be a function that will return. 01:12.730 --> 01:18.010 And what we want to return is basically this one. 01:18.040 --> 01:22.180 So I will get a cut it from here and I will put it there. 01:22.210 --> 01:30.820 So basically if I will take this and if I will put it back here, basically what we've done is we just 01:30.820 --> 01:32.410 wrap it with another function. 01:32.410 --> 01:33.880 So we have router here. 01:33.910 --> 01:36.340 Router will create our router provider. 01:36.340 --> 01:37.240 This will be created. 01:37.240 --> 01:40.990 So basically we added extra layer on that. 01:40.990 --> 01:44.650 So if I will go back here you see everything is the same as it was. 01:44.650 --> 01:51.640 So going back here what I did that gives me it can I can do extra things here so I can use state and 01:51.640 --> 01:52.300 so on. 01:52.480 --> 01:57.100 But before we will do that, what I want to do is I want to create a context. 01:57.370 --> 02:01.000 So I will import another method from react. 02:01.030 --> 02:04.390 So it will be create context method. 02:04.390 --> 02:08.040 So I will take this and we'll create a context here. 02:08.040 --> 02:15.240 So I will have constant and I will say let's name it token context. 02:15.270 --> 02:16.920 It doesn't have to be for a token. 02:16.920 --> 02:18.930 And but you can name it whatever you like. 02:18.960 --> 02:26.130 But basically this is a method that will call it so token context it will be created here. 02:26.130 --> 02:28.830 So once I have that that object. 02:28.830 --> 02:37.530 So if I have that router provider here, what I can do is I can wrap it with token context provider. 02:37.530 --> 02:41.610 So basically I have a token context provider here. 02:41.610 --> 02:43.950 And I will put it like that. 02:43.950 --> 02:47.520 My router provider will be inside token provider. 02:47.520 --> 02:50.880 So that means in the token context. 02:50.880 --> 02:54.780 So we've created context and we wrap it like that. 02:54.810 --> 03:01.530 So that means everything here inside which is basically all my applications will have an access to that 03:01.530 --> 03:02.220 context. 03:02.220 --> 03:06.930 So what we can do here and that's why we put it in a separate component here. 03:06.930 --> 03:12.910 We could use a stage here and a half that way to start the token in this component. 03:12.910 --> 03:15.670 So let's import use state. 03:18.820 --> 03:21.040 And from here what I will do. 03:21.070 --> 03:22.390 We've done it many times. 03:22.390 --> 03:28.570 I will create a token and method set token like that. 03:29.260 --> 03:32.650 And then it will be use state. 03:32.650 --> 03:35.470 And we can provide a default value of null. 03:35.470 --> 03:39.040 For example we don't have a token at start. 03:39.040 --> 03:46.330 So what I can do now is I can get this and I can put put inside a provider. 03:46.330 --> 03:49.330 So in the provider I can do something like a value. 03:49.330 --> 03:56.170 And inside there I can create an object and put token and set token there. 03:56.200 --> 04:01.990 That means the value token will be available and also a method will be available inside the provider. 04:01.990 --> 04:08.680 So any component inside here, which is basically anywhere in the application, will be able to access 04:08.680 --> 04:11.520 that token and set the token method From there. 04:11.520 --> 04:17.220 So that means if we'll set the token from one of the component, it will be saved here in the router 04:17.220 --> 04:19.170 and it will be passed to the token. 04:19.170 --> 04:21.930 So other components could use that token as well. 04:21.930 --> 04:23.550 So I will save this. 04:23.610 --> 04:26.250 At the moment we have everything set up here. 04:26.250 --> 04:31.110 But what we want to do is we want to go here into our application. 04:31.110 --> 04:35.760 Wherever we had that console.log and we had that token, we want to set that token. 04:35.760 --> 04:40.140 So how can we do that to use that context from here? 04:40.140 --> 04:45.810 Basically there is a hook that is called usecontext context. 04:45.810 --> 04:49.140 And here it's similar to use state. 04:49.140 --> 04:50.340 So I will do constant. 04:50.340 --> 04:52.530 But I'm not going to do a square brackets. 04:52.530 --> 04:55.110 It has to be curly braces here. 04:55.110 --> 04:58.410 And I will have token and set token. 04:59.190 --> 05:02.160 Those are the methods that I pass in a value there. 05:02.160 --> 05:03.900 And I will have usecontext. 05:03.900 --> 05:09.630 So basically we need to tell what context we use and how can we tell. 05:09.660 --> 05:13.170 Because you might have more more than one context in your application. 05:13.190 --> 05:15.080 So we need to go back here. 05:15.080 --> 05:19.550 And when we've done that a context here we need to export it. 05:19.550 --> 05:25.940 So basically our text content is exported and we need to import that from the component. 05:25.940 --> 05:32.120 So if I would go here I will do import and basically token context. 05:32.150 --> 05:35.900 So I can copy that token context that was in default one. 05:35.900 --> 05:39.680 So I need to wrap this in a curly braces. 05:41.690 --> 05:42.590 From. 05:45.200 --> 05:51.200 And it will be one folder up index okay. 05:51.200 --> 05:56.510 So basically this is the token context that I've created here. 05:56.510 --> 06:00.500 So this is this is a rapid because we use it in the provider. 06:00.500 --> 06:02.120 That way I will export it. 06:02.120 --> 06:03.650 So I can import that here. 06:03.650 --> 06:08.480 And from the token I can say this is the token I'm using. 06:08.480 --> 06:11.960 So the context I'm using this is the context I want to use. 06:11.960 --> 06:17.200 And from that context, if you remember we actually passed this token and said token. 06:17.230 --> 06:20.260 That's why we can capture both of them here. 06:20.260 --> 06:24.040 So if I have that method, said token, I will save it here. 06:24.040 --> 06:30.100 I will use it basically whatever is coming from our API to that set token. 06:30.130 --> 06:33.670 I think I have this supposed to be capital. 06:33.670 --> 06:35.050 Let me double check if I can. 06:35.080 --> 06:35.440 Yes. 06:35.440 --> 06:37.030 So this is capital token. 06:37.030 --> 06:40.450 So set token and we use it like this. 06:41.170 --> 06:42.880 So we have a set token. 06:42.880 --> 06:46.810 But at the moment we don't have any way to check it. 06:46.840 --> 06:50.410 What if that has been working properly or not. 06:50.410 --> 06:56.410 So what we could do in this component, what I can do is I can do use effect. 06:57.850 --> 07:00.640 So that's a method we've used many times before. 07:00.640 --> 07:02.770 And I will do use effect here. 07:03.880 --> 07:06.190 Inside I will have arrow function. 07:08.860 --> 07:10.900 And I will have dependency. 07:10.930 --> 07:18.260 And basically I want to say if the token change in my if that's coming from the context, I want to 07:18.260 --> 07:19.220 do something here. 07:19.250 --> 07:25.250 So let's do console log token. 07:25.310 --> 07:29.780 So if the token will be changed I will console log it here. 07:29.810 --> 07:34.220 At the moment what is happening is we've created a context here. 07:34.220 --> 07:37.910 We also exported for other components to import to know which one. 07:37.910 --> 07:42.110 Then we have a token and set token here in our component. 07:42.110 --> 07:45.740 We provide it here in the provider as a value. 07:45.740 --> 07:49.100 That means we can go to our component here. 07:49.100 --> 07:52.850 We can use that context, the one from the index. 07:52.850 --> 07:59.570 And we have a option to access whatever we put there in the in that provider. 07:59.570 --> 08:05.900 And then we whatever we get it from API, we set it and I will have use effect just to see if I have 08:05.900 --> 08:08.300 a token in my context, I will just print it. 08:09.290 --> 08:13.880 I can also print it token like this. 08:13.880 --> 08:17.690 So it will tell me that the one that I am printing is token. 08:17.690 --> 08:20.030 So you can see here token is null. 08:20.030 --> 08:23.890 So that has been a printed straight away because I have that use effect. 08:23.890 --> 08:29.860 But if I will put username and password Christian if I will login. 08:29.860 --> 08:32.890 Now I have that token here. 08:32.890 --> 08:36.700 So you can see here the round trip of what we done. 08:36.700 --> 08:40.720 So I got a API this token from API. 08:40.750 --> 08:44.890 I've set it here to the method that is coming from the context. 08:44.920 --> 08:47.500 Here I have that context created. 08:47.500 --> 08:50.740 Here I have it this state here. 08:50.740 --> 08:55.360 So that means this token has been saved in this state. 08:55.360 --> 08:57.430 And I provided back in a provider. 08:57.430 --> 09:03.850 So that means any application that will use that context like here will also have an access to token. 09:03.850 --> 09:07.330 And we actually have that access to our token because we just printed it out. 09:07.330 --> 09:12.400 So this is how we can share more information widely in our application. 09:12.400 --> 09:19.690 If you put something in a context and you wrap this as a provider, that means you can communicate this 09:19.690 --> 09:22.750 way from component to component and pass some data.