1 00:00:00,690 --> 00:00:12,949 well in this video we are going to work that question that approach that I proposed to you in the last 2 00:00:12,949 --> 00:00:20,809 video it is worth that it was we have to be always logging not always sending the data to the backend of 3 00:00:20,809 --> 00:00:27,690 our user of our password because in the end we are working on several routes and 4 00:00:27,690 --> 00:00:36,030 at the security level we cannot allow a user who is not authenticated to go to a route, 5 00:00:36,030 --> 00:00:43,929 for example, to see tasks or to any other route within our front, then 6 00:00:43,929 --> 00:00:50,810 we should either register or log in and from there be able to access the different routes. 7 00:00:50,810 --> 00:01:00,810 The question was, how can we do this? Well, this is done through contexts. 8 00:01:00,810 --> 00:01:09,810 React allows us to create work contexts. When I create a context, two containers are automatically created. 9 00:01:09,810 --> 00:01:15,810 One is the provider, which is what I have been putting here, the provider and the consumer. 10 00:01:15,810 --> 00:01:29,629 vale el provider es el el contenedor que va a proveer a determinados hijos 11 00:01:32,629 --> 00:01:41,750 que engloba este contenedor de tener información información general que van a tener o que en algún 12 00:01:41,750 --> 00:01:49,010 moment they will need to access that information the children are worth in this case that information 13 00:01:49,010 --> 00:02:01,129 would be for example the touch the touch is a field a cookie that to which they will access the 14 00:02:01,129 --> 00:02:09,750 different routes of our front that is information shared between several children each child of 15 00:02:09,750 --> 00:02:16,569 that would be one of the routes that we have created, it is worth then for this case in particular to create 16 00:02:16,569 --> 00:02:21,370 a context comes to us very well and then the consumers because obviously it is each of those 17 00:02:21,370 --> 00:02:27,669 routes, it is worth that it is each of those children, it is worth then I put you here to try the provider is a 18 00:02:27,669 --> 00:02:34,449 component that receives a prop or a value is worth an object that will be the values ​​to share in 19 00:02:34,449 --> 00:02:45,689 our case is going to receive an object that is the user object in which the email goes, the username goes, the 20 00:02:45,689 --> 00:02:56,729 password goes, the touch goes, then all that is what the provider is going to receive, it is going to work 21 00:02:56,729 --> 00:03:03,490 on those fields and it is what will allow 22 00:03:04,509 --> 00:03:09,930 that each of those children has access that is inside the container of the 23 00:03:09,930 --> 00:03:13,969 provider then we are going to use a hook 24 00:03:13,969 --> 00:03:21,729 that is the state state what it does is say if there is a context created or not and 25 00:03:21,729 --> 00:03:26,169 what is a hook then I put it here it is worth taking it out of the documentation 26 00:03:26,169 --> 00:03:32,590 dice los hook son funciones que te permiten enganchar el estado real vale los hook vienen 27 00:03:32,590 --> 00:03:40,210 directamente están desarrollados por real y el ciclo de vida de estos componentes de función 28 00:03:40,210 --> 00:03:46,990 los uno funcionan dentro de las clases vale el problema que tengo con js y con real por tanto 29 00:03:46,990 --> 00:03:54,490 es que no puedo trabajar con clases entonces estos me permiten pues eso no enlazar enganchar 30 00:03:54,490 --> 00:04:06,650 with functions of other files or things like that, then without getting too involved 31 00:04:06,650 --> 00:04:15,409 although there is an extensive documentation and in fact react has its own created we 32 00:04:15,409 --> 00:04:22,250 the one we are going to use is the use state it is worth that the only thing that is going to tell us is that it is going to return us 33 00:04:22,250 --> 00:04:30,170 si hay un contexto creado o no vale y gracias a eso podemos saber si un usuario está logueado o no 34 00:04:31,509 --> 00:04:36,269 vale y entonces no dice tanto los componentes como sus hijos van a poder acceder a estos 35 00:04:36,269 --> 00:04:44,110 valores vale que es lo que estamos buscando vale entonces ahora nos ponemos ya a trabajar con ese 36 00:04:44,110 --> 00:04:54,930 context then the first thing I'm going to do is good I already have here started the front I also have 37 00:04:54,930 --> 00:05:02,410 the back-end with mongo ok I am now connected also to the mongo express to be able to see all 38 00:05:02,410 --> 00:05:11,529 the collections and now I get to work ok then we had the register page with the 39 00:05:11,529 --> 00:05:19,329 let them go, all this we already had done, I have the out 40 00:05:19,329 --> 00:05:26,029 that here remember that I put the function of good if this does not generate it 41 00:05:26,029 --> 00:05:32,149 well, the response visualized it and if not that it was going to generate an error, it is also 42 00:05:32,149 --> 00:05:35,870 captured and we visualized it, I have erased it because in the end it is only to visualize it 43 00:05:35,870 --> 00:05:40,649 and then it gave me a little the same and for not having more lines of code than 44 00:05:40,649 --> 00:05:48,029 necessary routes here we had the different routes from the front in the register we had already 45 00:05:48,029 --> 00:05:54,370 entered the register page which is what I tell you is worth here would be all the html code that 46 00:05:54,370 --> 00:06:07,279 generates me all this page is worth then well because the first thing I'm going to do is create myself 47 00:06:07,279 --> 00:06:16,220 within the part of the client of your src source folder another folder because in this 48 00:06:16,220 --> 00:06:24,899 case I am going to call it because context is worth context within context I am going to create a file 49 00:06:24,899 --> 00:06:35,259 that we are going to call it is a bit following all the documentation that you can see on the internet 50 00:06:37,279 --> 00:06:43,279 or what is being our development, that in the end I am following that documentation, 51 00:06:43,279 --> 00:06:49,279 I am going to create a file that is the outcontext.jsx. 52 00:06:49,279 --> 00:06:56,279 One thing that I have not told you in any of these videos is, why do we use jsx or js only? 53 00:06:56,279 --> 00:07:03,279 Well, the jsx, which you already know is the javascript.com.xml, 54 00:07:03,279 --> 00:07:09,759 vale o el tsx que es más actual más nuevo que es lo que se está usando ahora que es muy similar al 55 00:07:09,759 --> 00:07:19,279 j s x pero es contar vale pero al final bueno prácticamente vale siempre tiene tiene modificaciones 56 00:07:19,279 --> 00:07:29,480 tiene cambios pero bueno vale entonces yo me voy a crear o voy a crear un fichero jsx cuando voy 57 00:07:29,480 --> 00:07:37,160 work with the data in some way I am going to work with those key values those fields those 58 00:07:37,160 --> 00:07:43,720 collections I am going to work with them it is worth if I am going to do only functions that at no time 59 00:07:43,720 --> 00:07:49,519 they are going to work with the data is I am going to object the steps the but at no time I work 60 00:07:49,519 --> 00:07:56,759 with the data internally then with a js it is worth it and it is worth it but the xml you already know or 61 00:07:56,759 --> 00:08:02,879 as you are seeing in one of the modules of second edam because 62 00:08:05,759 --> 00:08:12,319 it is what serves us for the representation of the data is worth then in this case I am going to create a 63 00:08:12,319 --> 00:08:22,019 file that is js x is worth in this js x what I am going to do is first because we are going to import from read 64 00:08:22,019 --> 00:08:36,480 a function that is the great context, the great context, the great context is the first step 65 00:08:36,480 --> 00:08:54,009 to create that context, as I have told you before, you are not seeing the code but I put it 66 00:08:54,009 --> 00:09:18,059 ok now yes ok then I have created the file in the context folder inside I have created the 67 00:09:18,059 --> 00:09:28,700 out with text dot j s x ok I have only done this within out with text dot j s x I have imported the 68 00:09:28,700 --> 00:09:35,820 create context ok which is what I am going to need to create that context ok and we continue 69 00:09:35,820 --> 00:09:51,559 then what is the second thing that I am going to do because we are going to put ourselves here we are going to create a constant 70 00:09:51,559 --> 00:10:03,039 because we are going to call it out provider that is that provider that is created is worth a provider that 71 00:10:03,039 --> 00:10:07,840 what I told you before is worth when I create a context on the one hand a 72 00:10:07,840 --> 00:10:13,000 container is created that is a provider and on the other a container that is the consumer the 73 00:10:13,000 --> 00:10:24,159 data consumers are worth then I am going to create a provider and this is going to be the same as the create context 74 00:10:24,159 --> 00:10:37,700 ok ok then here I have already created this this context ok when I create the context that 75 00:10:37,700 --> 00:10:47,240 provider has a structure like the one that follows ok then how am I going to export it I am going to 76 00:10:47,240 --> 00:10:53,440 put the export directly and here I am going to put it also in case we need it and if not 77 00:10:53,440 --> 00:11:01,720 remove it, okay, we put the export with out provider here you are 78 00:11:07,659 --> 00:11:16,840 okay and in aux provider this is wrong this is not aux provider the first thing we create is the context 79 00:11:16,840 --> 00:11:24,519 this is context, it is worth the out context and now in the out provider what we are going to do is 80 00:11:25,820 --> 00:11:32,379 on the one hand we have to tell him what collection of children of children 81 00:11:34,720 --> 00:11:42,360 are going to be within this context, they are going to be within the context that I have just created and 82 00:11:42,360 --> 00:11:49,740 called outcontext. Outprovider is going to be related to outcontext, okay? 83 00:11:49,740 --> 00:11:59,120 So, the first thing I'm going to tell you is, okay, well, or the first thing we're going to 84 00:11:59,120 --> 00:12:09,200 to pass it is worth a collection of children ok then here we are going to pass it 85 00:12:12,299 --> 00:12:21,600 we are going to put our arrow function as always ok ok and this would be our provider 86 00:12:21,600 --> 00:12:32,879 What does the provider have? Well, this is going to work on a series of data 87 00:12:35,759 --> 00:12:43,090 and a series of data that come in this collection in this case, which ones are going to be 88 00:12:43,090 --> 00:12:51,970 because the user is worth the user with all those values ​​that are the ones we have taken from the 89 00:12:51,970 --> 00:13:23,929 form is worth and on the other hand we are going to return a context point for the idea this is ok and this is going to return 90 00:13:28,580 --> 00:13:31,759 some children we are going to put it like this 91 00:13:31,759 --> 00:13:45,799 this is what our function is going to do, the provider variable, which is the one that we are going to work on 92 00:13:45,799 --> 00:13:55,220 when we create the context, here I am relating provider with out context, it is worth with out 93 00:13:55,220 --> 00:14:02,580 context so in reality I'm not going to export it I'm always going to work on the out 94 00:14:02,580 --> 00:14:09,440 provider the out provider up here before the retum and we can put different 95 00:14:09,440 --> 00:14:13,220 arrow functions different operations that we are going to do on the data that 96 00:14:13,220 --> 00:14:21,080 we are going to collect ok and in the out provider there is a value that is values in which 97 00:14:21,080 --> 00:14:29,059 we are going to tell him what values are those that we are sharing among all the children 98 00:14:29,059 --> 00:14:36,259 among the entire collection of children, that is why the general structure is put like this, it is said that some 99 00:14:36,259 --> 00:14:44,120 children enter with a series of values ​​and in the end all the children will have access to those values, okay 100 00:14:44,120 --> 00:14:52,620 then we are going to come here again and we are going to say good with what I want to work with 101 00:14:54,200 --> 00:15:05,360 on the one hand with user it is worth using remember that it is or that it is where we are going to those values ​​of 102 00:15:05,360 --> 00:15:19,519 the users, and a set user is always passed, the variable is always passed and the set user or the 103 00:15:19,519 --> 00:15:25,820 set is passed, whatever it is, it is always the name of the variable or the object that we have passed it, 104 00:15:25,820 --> 00:15:30,379 because in this case this is not a variable, it is an object, and the set user, which is the one that we are going to 105 00:15:30,379 --> 00:15:45,620 use the one that uses the provider is worth the one that uses the create context to save values from 106 00:15:45,620 --> 00:15:53,919 this part that we are working on to the variable and use it is worth and this is going to be going to come from 107 00:15:53,919 --> 00:16:03,519 we are going to put an equal and we are going to tell it that these variables these or an object in a 108 00:16:03,519 --> 00:16:12,759 principle we are going to put both of them and this was the use of this test 109 00:16:12,759 --> 00:16:26,259 the useState to null, okay? So here I am saying, okay, believe me, I am going to use this 110 00:16:26,259 --> 00:16:34,240 variable user and the setUser that is going to come in each of the children that I am making the context 111 00:16:34,240 --> 00:16:39,340 about which I am making the context and you are going to put them both to null because we have 112 00:16:39,340 --> 00:16:46,480 done anything, it is worth then if I am creating the context but this user object remember 113 00:16:46,480 --> 00:16:51,740 that it is a collection, that is, if I have five routes I will have five users, it is worth 114 00:16:53,139 --> 00:16:59,519 I put them to null, it is worth this and use state that is also real because I am going to bring it 115 00:16:59,519 --> 00:17:09,539 and it is worth it and I would have it ok then what else do I do 116 00:17:12,700 --> 00:17:19,519 we can create ourselves or we are going to create ourselves ok once I have declared this variable 117 00:17:19,519 --> 00:17:27,940 with which I am going to work this object for this variable object I am going to declare a for example 118 00:17:27,940 --> 00:17:38,089 logged, it is worth calling it so constant logged that it will be the same we are going to pass it 119 00:17:41,470 --> 00:17:46,450 I will say some input values ​​user ok 120 00:17:48,549 --> 00:17:53,329 that is why here I also call it user you can call it with the name you want I put it 121 00:17:53,329 --> 00:17:59,549 use it because I am going to use this from here it is worth then in the home summit instead of 122 00:18:00,650 --> 00:18:12,849 calling from here with values ​​I am going to call the logged one and I am going to pass that parameter inside the user 123 00:18:12,849 --> 00:18:24,490 that value object is worth then then start using it like this ok we have this we do as 124 00:18:24,490 --> 00:18:35,089 always arrow function and here we say ok here what I want is with networks equal to remember 125 00:18:35,089 --> 00:18:50,779 the weight that is not necessary and here it will tell you the register request and use it as here I am 126 00:18:50,779 --> 00:18:57,319 using the request register when putting it directly it already tells me here it is worth calling the bet and here 127 00:18:57,319 --> 00:19:07,029 I am always telling you to put the extension ok then here it is js ok then 128 00:19:07,029 --> 00:19:14,750 put it in the extension that already notice that the real itself does not admit it to me sometimes it has given me 129 00:19:14,750 --> 00:19:22,450 some problem ok then I that you and I would put it but we are not asking for it, it is not 130 00:19:22,450 --> 00:19:28,630 restrictive, it is worth then passing the water and the water is giving me an error as always because here 131 00:19:28,630 --> 00:19:36,460 hay que pasarle el así que vale y tengo esto 132 00:19:36,460 --> 00:19:45,619 todo vale entonces una vez que tengo hecho esto si queremos podemos como el 133 00:19:45,619 --> 00:19:51,160 registro request nos devuelve un res vale 134 00:19:51,160 --> 00:19:57,599 vamos a decirle pues como siempre que nos lo visualice 135 00:19:57,599 --> 00:20:07,680 y vamos a decirle también punto y coma y ahora es cuando uso este set y user dónde estás este set 136 00:20:07,680 --> 00:20:15,099 y user vale que es un hook que al final fijaros cómo me cambia estos colores vale estos marrones 137 00:20:15,099 --> 00:20:20,799 estos no son esos esos bueno esos que esas funciones vale que le estoy llamando que son 138 00:20:20,799 --> 00:20:27,019 of the real itself then here I put the set user and I am going to pass 139 00:20:29,339 --> 00:20:42,079 those data then it is networks point data ok then this if you look at this line above all 140 00:20:42,079 --> 00:20:52,269 is the one I have here inside the request register ok then this obviously when 141 00:20:52,269 --> 00:20:59,230 I give it to the register button I am not going to run this what I am going to do is access 142 00:20:59,230 --> 00:21:09,190 logged ok then how can I access logged well then we return to this part of the 143 00:21:09,190 --> 00:21:14,769 network you see that the first part of the provider is where I work with the data and I do what I have 144 00:21:14,769 --> 00:21:21,309 to do ok and the second is what I return then in what I return in the context point provider 145 00:21:21,309 --> 00:21:33,069 I can pass an attribute that is the value is worth in the value what you are going to 146 00:21:33,069 --> 00:21:41,750 pass is what values to what values or what values will be able to share between the 147 00:21:41,750 --> 00:21:49,750 different routes because in this case it is going to be logged and it is going to be a user 148 00:21:51,930 --> 00:21:59,250 they are going to be these two then this is interesting because I do not put the export here because 149 00:21:59,250 --> 00:22:06,630 you are already with the out provider which is the function that in any case you would export, what you do 150 00:22:06,630 --> 00:22:12,990 is to say through the value to the rest of the routes it is worth to all the children who are 151 00:22:12,990 --> 00:22:18,269 inside this container what you want to share with them in this case what 152 00:22:18,269 --> 00:22:25,569 I want because the logged and I want to use it is worth I want these two okay and this would be my 153 00:22:26,849 --> 00:22:34,390 my out context file would be what generates that context for me okay well so far I have 154 00:22:34,390 --> 00:22:41,890 this file but I have not shared it or I have not used it in any other 155 00:22:41,890 --> 00:22:47,509 ok then what is the next thing I have to tell you 156 00:22:47,509 --> 00:22:54,150 well here we are talking about children what are those children ok then I'm going 157 00:22:54,150 --> 00:23:00,470 to come to app js x which is where we had all the routes already created ok 158 00:23:00,470 --> 00:23:04,150 and then what I'm going to do here is 159 00:23:06,970 --> 00:23:21,640 first we are going to import the out provider 160 00:23:21,640 --> 00:23:30,160 from context out j s x ok and now we are going to put all these routes 161 00:23:30,160 --> 00:23:35,299 we are going to include them inside that container so we are going to put the 162 00:23:35,299 --> 00:23:37,740 out 163 00:23:38,240 --> 00:23:44,859 ok this we are going to put it down 164 00:23:46,299 --> 00:23:55,559 here ok we formate and we would already have 165 00:23:55,559 --> 00:23:59,559 created this 166 00:24:00,619 --> 00:24:06,480 that container ok we see that this has stayed in blue and that 167 00:24:06,480 --> 00:24:12,859 has been to put the out provider then let's go here 168 00:24:12,859 --> 00:24:21,859 we have the context provider value and we close this 169 00:24:21,859 --> 00:24:33,819 and we pass it to him 170 00:24:33,819 --> 00:24:37,579 we are going to see what it is 171 00:24:38,839 --> 00:24:42,019 ok then 172 00:24:43,559 --> 00:25:02,059 What is the problem that I have here? I have passed the children, notice how here it has also been imported to me, when you do it in uppercase, it is another function that I can import from READ and that is not what I want, what I want is that it takes me as an entry those children, okay? 173 00:25:02,059 --> 00:25:07,920 then as in the documentation and such that what you are looking at now puts it in 174 00:25:07,920 --> 00:25:13,700 lowercase, well, put it in lowercase and then you will see that everything already works for us, it 175 00:25:13,700 --> 00:25:19,900 already works for us in principle well, so what have we done so far we have created that 176 00:25:19,900 --> 00:25:26,240 context with all the children that are all the routes, all these routes are going to share 177 00:25:26,240 --> 00:25:34,819 those data through the outprovider and the outprovider what it does to us is we have declared this 178 00:25:34,819 --> 00:25:42,500 user with its part setuser to be able to enter those data we call the register request, which is 179 00:25:42,500 --> 00:25:51,559 what we already did from the previous video with the users with the data, we saved them and then we 180 00:25:51,559 --> 00:25:59,940 we return that logged that function logged and that user is worth that variable object 181 00:26:01,180 --> 00:26:07,440 ok then we go to the request register and what is what we have to do here because on the 182 00:26:07,440 --> 00:26:31,220 side, we import, we import the car, well, in this principle, in this case, 183 00:26:33,079 --> 00:26:38,619 what I am going to do is this, I no longer want it here because it is exactly the same thing that we have put 184 00:26:38,619 --> 00:26:46,440 in the out context, it is exactly this line, then I do not want it there, which is what I am going to put 185 00:26:46,440 --> 00:27:03,970 here values ​​and I pass values ​​which is the values ​​that we have put 186 00:27:03,970 --> 00:27:09,529 inside that form is worth now 187 00:27:10,970 --> 00:27:16,329 I have this I will return to the context 188 00:27:16,329 --> 00:27:20,210 and then as I have this code 189 00:27:20,849 --> 00:27:25,809 I would have to be going through the request register all the time, it is worth in the 190 00:27:25,809 --> 00:27:31,789 context then react provides us 191 00:27:31,789 --> 00:27:38,029 another one that is the use this sorry 192 00:27:38,029 --> 00:27:44,230 with text is worth the use context the use context 193 00:27:44,230 --> 00:27:50,230 it allows us to know if there is a created context or not. 194 00:27:50,230 --> 00:28:00,230 So, for us it is easy to use. 195 00:28:00,230 --> 00:28:03,230 And fast. 196 00:28:03,230 --> 00:28:14,299 And maybe, well, as we have to use it. 197 00:28:14,299 --> 00:28:28,519 in this case I am going to create myself after importing it out of the out provider we are going to create 198 00:28:28,519 --> 00:28:36,920 here a first sport out not to call it to this 199 00:28:36,920 --> 00:28:41,319 with us 200 00:28:41,839 --> 00:28:46,900 ok this is the one that is going to tell us if a context is created or not does not have 201 00:28:46,900 --> 00:28:50,099 input parameter 202 00:28:50,240 --> 00:28:56,859 and here what we are going to tell him is ok there is a context or not to tell him 203 00:28:56,859 --> 00:29:12,690 that we are going to create a context that is going to be the same as it is going to be the same as 204 00:29:12,690 --> 00:29:22,869 ios context that is the ios context is the hook that we have just imported and it is the one that 205 00:29:22,869 --> 00:29:35,410 tells us if there is a context created you are going to tell me ok you tell me if there is a context or 206 00:29:35,410 --> 00:29:41,230 if there is an error that is with what I am playing ok in one in the same in the same 207 00:29:41,230 --> 00:29:51,609 development you can have several contexts created and access to the variables is worth that information 208 00:29:51,609 --> 00:30:00,710 que estamos repartiendo o compartiendo mejor dicho entre diferentes en este caso diferentes rutas se 209 00:30:00,710 --> 00:30:05,589 pueden crear varios contextos por ejemplo imaginaros voy a crear un contexto si eres 210 00:30:05,589 --> 00:30:12,829 un administrador o si eres un usuario sin privilegios por ejemplo ese me ocurre entonces 211 00:30:12,829 --> 00:30:21,089 aquí le tengo que decir qué contexto es ese que estoy probando si existe o no entonces aquí le 212 00:30:21,089 --> 00:30:32,039 we are going to pass the out provider ok then from this use out with the use context I call 213 00:30:32,039 --> 00:30:39,400 the out provider and the out provider is the one that is using the out context ok then they are chained 214 00:30:39,400 --> 00:30:50,880 in this way ok then here I check I ask real hey there is some context I have created 215 00:30:50,880 --> 00:31:00,299 of the type out provider this will return an error or not if it does not return an error or 216 00:31:00,299 --> 00:31:05,759 be context is equal to null ok what I'm going to tell you is 217 00:31:05,759 --> 00:31:28,200 throws a new error that is going to be what you want 218 00:31:29,579 --> 00:31:41,890 error and if and if that error does not occur, then what do I want you to do 219 00:31:41,890 --> 00:31:51,849 that you return that context to me, then if the context exists, what I want you to do is 220 00:31:51,849 --> 00:31:58,390 that you return that context to me, that is, those data that I want to share, that is, that login and 221 00:31:58,390 --> 00:32:06,069 that they are worth that is what I am telling you here, then this file would already 222 00:32:06,069 --> 00:32:10,869 would be like this and in the register what I am going to do is I am going to import 223 00:32:16,069 --> 00:32:19,089 how I have called this and use out 224 00:32:21,490 --> 00:32:31,329 from out context jsx ok and then from the home summit what we are going to do is ok 225 00:32:31,329 --> 00:32:38,710 because from the assuming well what you are doing you are going to ask me this I am going to remove it from here 226 00:32:41,470 --> 00:32:49,829 you are going to call me to log in this case in this case because I need logged what it does is 227 00:32:49,829 --> 00:32:57,170 launch the request register it is worth remembering that we are with the register then I need to 228 00:32:57,170 --> 00:33:01,809 launch that request register somewhere so that 229 00:33:05,230 --> 00:33:15,190 where are you here so that with the axis post point it will take it to the server and register it for us, 230 00:33:15,190 --> 00:33:19,309 okay, then we have this one, we have 231 00:33:19,309 --> 00:33:32,670 with the weight to see that everything is fine and logged you have with the values ​​to the 232 00:33:32,670 --> 00:33:40,869 log we pass the values ​​that are the fields of the form and I think it is already 233 00:33:40,869 --> 00:33:47,650 all right ok then let's try it then I'm going to come here let's see if I have any 234 00:33:47,650 --> 00:33:52,890 data if I am going to delete it I am going to leave it there is no user right now in the database 235 00:33:54,589 --> 00:34:05,619 ok in principle this I think I already have it all ok ok well let's see 236 00:34:07,460 --> 00:34:14,300 our our front the register we are also going to put the development tools 237 00:34:14,300 --> 00:34:26,199 well this is to erase the console here what I have also done has been to install an extension 238 00:34:27,420 --> 00:34:34,380 that is the real develop tool that is fine because it allows us to 239 00:34:36,300 --> 00:34:41,579 see the components when there is a context to see that context then look if I give the 240 00:34:41,579 --> 00:34:47,340 context to the extension as the context comes out and I can see the data that is 241 00:34:47,340 --> 00:34:53,820 saved in the context and it is good to see everything if it works for us or not because it is very 242 00:34:53,820 --> 00:35:06,820 ok then I but the email the password 9 is all right I register it and here it tells me 243 00:35:09,820 --> 00:35:18,599 logged it is not defined in register page js x 13 ok let's go to register page 244 00:35:22,900 --> 00:35:25,739 ok I forgot to do something here 245 00:35:27,059 --> 00:35:33,619 we return then to our code and we say ok logged it is not defined it does not know what 246 00:35:33,619 --> 00:35:42,599 this is about the logged what is what I have to do well then we are going to put the cons here 247 00:35:45,440 --> 00:35:53,199 where you are logged from where the logged of the 248 00:35:53,199 --> 00:36:23,000 it should already work, let's go back to our page, let's go back 249 00:36:25,880 --> 00:36:40,789 to see this, we are going to give the format what we have and here we have missed some 250 00:36:40,789 --> 00:36:43,730 we are going to see 251 00:36:47,349 --> 00:36:52,369 we are going to see what is happening 252 00:36:53,230 --> 00:36:58,670 we return to our code while I do not look at this I am going to pay 253 00:36:58,670 --> 00:37:03,469 ok then this is not showing us the front that 254 00:37:03,469 --> 00:37:09,889 is that there is some error then here in the developer tools and 255 00:37:09,889 --> 00:37:20,389 If I go up, it is already telling me that in OutContextJSX, that is, in this file, in the position 256 00:37:20,389 --> 00:38:08,260 OutContext, that is in the 10, in the 8, let's see, in the 10, the error is giving me 257 00:38:08,260 --> 00:38:14,019 esta línea no sé si estoy viendo el código la paz y el código vale me la está dando en esta línea 258 00:38:14,019 --> 00:38:22,239 en el contexto vale y cuál es el problema aquí le he puesto la provider pero no es o sea no puedes 259 00:38:22,239 --> 00:38:29,099 decir provider el provider se crea cuando creas el contexto vale entonces yo aquí lo que le estoy 260 00:38:29,099 --> 00:38:34,139 preguntando es ese contexto existe o no no puedo preguntar por el provider aquí lo que vamos a 261 00:38:34,139 --> 00:38:40,820 ask is for out context, which is the one that has the container of the provider inside, 262 00:38:40,820 --> 00:38:50,639 then here is the context, once we put the out context there, and if our form comes out 263 00:38:50,639 --> 00:38:59,739 and we are going to see if we can use it, we do not return to our page, I am going to erase 264 00:38:59,739 --> 00:39:07,280 todo esto es borrar con borrar historial borrar consola afuera vale entonces vamos 265 00:39:07,280 --> 00:39:11,739 a meter aquí un valor un valor 266 00:39:13,460 --> 00:39:19,619 9 entiendo que antes no nos ha creado 267 00:39:19,619 --> 00:39:25,679 le damos a registrar vale y nos sale 268 00:39:25,679 --> 00:39:40,679 Let's see, I think he has created it for us, he has created it for us, but he is giving us an error and he says he can't read the data, you can't read the indefinite property. 269 00:39:40,679 --> 00:39:52,679 reading data in auto context jsx 22 in out context in 22 which is this I cannot read this 270 00:39:52,679 --> 00:40:00,420 date ok this date I am going to leave it only with networks ok and we are going to try again 271 00:40:01,960 --> 00:40:08,719 but that data if it should leave me we are going to see it then you know what is happening to him 272 00:40:08,719 --> 00:40:22,420 we put the same user again, I register it and now it appears to me that the context is 273 00:40:22,420 --> 00:40:28,800 undefined, that is, it does not give me a problem on the one hand the part of the back in itself that they are 274 00:40:30,019 --> 00:40:34,300 registering it but when I put it in the 275 00:40:34,300 --> 00:40:49,760 the login when I am inside the login and I tell it to visualize it, it is worth this which is the 21 276 00:40:49,760 --> 00:40:57,039 just is the one that comes out as undefined that means that no to res is not 277 00:40:57,039 --> 00:41:06,659 nothing is coming ok then there I have a problem and we have to see what it is ok the request register 278 00:41:07,760 --> 00:41:16,119 we have it here request register this function is valid if I go to the post of the back end 279 00:41:17,280 --> 00:41:26,380 to the register we are going to see it that we had it in controllers the register here is where we took 280 00:41:26,380 --> 00:41:37,099 those data we created well here we saved it here we created the touch it is worth that we created that 281 00:41:39,139 --> 00:41:42,500 key value with these data that we have put it is worth it 282 00:41:45,619 --> 00:41:52,019 this document is worth to whom we created the password and I have two networks on the one hand 283 00:41:52,019 --> 00:41:57,840 res cookie that we returned the touch and the j are with these values then yes I am 284 00:41:57,840 --> 00:42:05,199 back I am when we launch the register yes I am returning information it is worth with 285 00:42:05,199 --> 00:42:13,320 the response that something I am doing wrong here that I am not collecting it then what I am 286 00:42:13,320 --> 00:42:19,460 doing wrong because I have only put the axios post but I am not collecting that answer then here 287 00:42:19,460 --> 00:42:30,500 with networks is equal to axios post ok now in networks if I am collecting all that 288 00:42:30,500 --> 00:42:35,280 information that they are sending me ok and here if I can take a network 289 00:42:37,360 --> 00:42:43,659 ok and when I do the request register there if I pass that service with what 290 00:42:43,659 --> 00:42:57,329 when I am logged in here yes that now in networks I should collect this value and I would have to 291 00:42:57,329 --> 00:43:05,429 be able to visualize it on the console and also put the set user so that it saves me that value in 292 00:43:05,429 --> 00:43:13,750 user and then all the children who are within that context have access to the user, of course, what 293 00:43:13,750 --> 00:43:20,130 I could also take this one because in users yes it is worth when I pass it to logged when I am 294 00:43:20,130 --> 00:43:26,469 working with logged and I pass it values ​​these values ​​that are later transformed into this user 295 00:43:27,469 --> 00:43:33,550 are the data that is in the form and I can take it and say well if I pass it here 296 00:43:33,550 --> 00:43:39,989 I use it and I use it there will be no problem of course we are not taking the touch nor are we taking 297 00:43:39,989 --> 00:43:52,429 nada sólo estamos cogiendo la información que le hemos pasado desde el formulario vale entonces yo 298 00:43:52,429 --> 00:44:01,260 entiendo que ahora sí nos debe de funcionar vámonos a nuestro formulario vamos a borrar todo esto 299 00:44:01,260 --> 00:44:13,860 this and this I am going to remove I am going to eliminate this user ok there is nothing left ok and I will create it again 300 00:44:13,860 --> 00:44:25,309 mario ok ok if I give it now to register now yes ok then look at how now 301 00:44:26,789 --> 00:44:33,010 and if he does not return it to me null already if we are taking those data that he returned to us from the 302 00:44:33,010 --> 00:44:40,250 backend is worth with the red is the response here we take them in the function and now if I work 303 00:44:40,250 --> 00:44:49,769 with them it is worth now we have them all here created it is worth or at least in the context if I come 304 00:44:49,769 --> 00:45:02,230 here to see if it shows me we have the user values with which the data and in the data because they appear 305 00:45:02,230 --> 00:45:12,989 you see the idea of the email the user the username is worth here everything would appear to us what we need 306 00:45:12,989 --> 00:45:27,739 is worth utf-8 with text well here we would have the information here it is already telling us that 307 00:45:27,739 --> 00:45:35,300 everything has created it for us well, well, this video so that it is not much longer I am going to leave 308 00:45:35,300 --> 00:45:38,880 Well, a greeting. See you later, guys.