1 00:00:00,430 --> 00:00:08,939 well in this video we are going to see we are going to start working with protected routes 2 00:00:08,939 --> 00:00:24,199 we are going to make a plan that we could we could think that it can work for us and 3 00:00:24,199 --> 00:00:29,879 in reality it can never work for you when dealing with different pages but I think it is 4 00:00:29,879 --> 00:00:42,420 interesting to see that error that provides us for possible or future problems that you can have 5 00:00:42,420 --> 00:00:50,799 know where it can come from ok and why do we use a cookie instead of using the context when 6 00:00:50,799 --> 00:00:57,539 in theory you could go to think that with the variables that we have saved from the context 7 00:00:57,539 --> 00:01:05,519 could be useful to us at the time of making the protected routes, it is worth before starting with the 8 00:01:05,519 --> 00:01:12,659 protected routes, well, we can give it a if you want a brush to all this interface 9 00:01:12,659 --> 00:01:20,760 to the login to the register for example what is usually done well we have here 10 00:01:20,760 --> 00:01:30,120 when we have mapped the errors, it is worth doing well, well, 11 00:01:33,280 --> 00:01:44,849 that it appears to us here, we are going to remove it and so we see it, for example, something like that, it is worth that 12 00:01:44,849 --> 00:01:52,349 the errors that came from thought appeared to us, we mapped them and we had made our 13 00:01:52,349 --> 00:02:00,629 tip so that he would put it to us one by one through the index of the one here that we have passed him, 14 00:02:00,629 --> 00:02:06,030 okay, then, well, when there was some kind of error, remember that with the soft before 15 00:02:06,030 --> 00:02:12,629 the data reached the backend we could verify them and then we could show them from 16 00:02:12,629 --> 00:02:20,689 our front ok this is fine and in this we stayed the other day but well once they are 17 00:02:20,689 --> 00:02:28,250 for example and it is usually done like this, you do not show those errors but you do not leave them there 18 00:02:28,250 --> 00:02:36,050 all the time or yes, well, you can already consider it but one of the options that is 19 00:02:36,050 --> 00:02:41,750 usually used is usually the good one because I show you the errors that you have when logging 20 00:02:41,750 --> 00:02:50,990 of registering but maybe at 10 seconds at 5 seconds at 2 21 00:02:50,990 --> 00:02:58,370 seconds because I want them to be removed and the interface remains as 22 00:02:58,370 --> 00:03:05,569 original originally then how can I do that and from where I am going to do it 23 00:03:05,569 --> 00:03:21,069 Well, we have already used the useEffect, which allows us to control that change when there is some type 24 00:03:24,969 --> 00:03:31,889 of load, some type of state variable of the provider. With the useEffect it allows us to 25 00:03:31,889 --> 00:03:39,849 control that type to see that change that has occurred and then from detecting 26 00:03:41,330 --> 00:03:51,689 that event that change we can do one thing or another or do nothing is worth a little as 27 00:03:51,689 --> 00:03:59,069 can be the events of any object in programming then on the one hand we are going to use the 28 00:03:59,069 --> 00:04:05,330 use effect and where we can use this, well, if we take a look at it, we think, well, 29 00:04:05,330 --> 00:04:12,569 here what we are using to show this information of the invalid email and the password 30 00:04:12,569 --> 00:04:21,149 must have at least six characters is where we have mapped those errors, well, those 31 00:04:21,149 --> 00:04:25,910 errors we have mapped on the page in this case of the login page is worth 32 00:04:28,189 --> 00:04:40,610 but we received them on the out context page is worth then let's go to the 33 00:04:40,610 --> 00:04:46,990 out context page and on the out context page remember this line is worth here is where we 34 00:04:46,990 --> 00:04:53,769 we received all the errors in this case of zot ok and we put if any error occurred 35 00:04:53,769 --> 00:05:03,009 in the variable in the arrow function or anonymous of logged and in the one of logging ok we had 36 00:05:03,009 --> 00:05:08,529 the set error ok because it was a state variable that is array type and it is here where we were 37 00:05:08,529 --> 00:05:14,889 receiving all this information ok then this information remember that with the provider 38 00:05:14,889 --> 00:05:22,209 what we did was the context then we had access to all or from all the routes that 39 00:05:22,209 --> 00:05:32,649 were part of the context because we had access to that information, it seems that if we are 40 00:05:32,649 --> 00:05:41,529 collecting here or we have the error state variable here, well, we can use the use 41 00:05:41,529 --> 00:05:52,350 effect from here from here it is worth then how are we going to use the use effect the first thing we do is 42 00:05:52,350 --> 00:06:09,560 import the use effect effects from real it is worth that as always it is from where it is from where we 43 00:06:09,560 --> 00:06:16,459 import it is worth once imported you know we can use it is worth once we have imported it 44 00:06:16,459 --> 00:06:25,759 we are going to use it then what are we going to do because a little what we are doing constantly 45 00:06:25,759 --> 00:06:43,560 it is worth in this case the joseph it is worth joseph if you remember it had good it used to be we used it with 46 00:06:43,560 --> 00:06:53,379 an arrow function that did some operations, it is worth and when 47 00:06:55,699 --> 00:07:09,910 when what we did was the use effect we told him we could pass him remember the variable that we were going 48 00:07:09,910 --> 00:07:16,889 to control or if not or if it is none, it is worth then that they were all inside he did not pass any 49 00:07:16,889 --> 00:07:24,629 o las diferentes variables que fuéramos a utilizar siempre entre corchetes acordaros en este caso yo 50 00:07:24,629 --> 00:07:30,029 lo que quiero es decirle bueno con you se fed me vas a hacer todo lo que te voy a poner aquí en 51 00:07:30,029 --> 00:07:36,930 medio entre estas dos llaves cuando haya un cambio en la variable de estado de error vale cuando hay 52 00:07:36,930 --> 00:07:44,430 una un cambio en la variable de estado de error cuando al lograr me o al registrar me se produce 53 00:07:44,430 --> 00:07:51,689 some type of error and then it is putting those values that are those array entries with 54 00:07:51,689 --> 00:07:57,589 the set error it is worth remembering that that dog was always associated with that variable of state 55 00:07:58,829 --> 00:08:08,610 ok then I am good the structure would be this ok now what is it What do I want you to do 56 00:08:08,610 --> 00:08:20,610 when a change occurs in the state variable of error what I want is first to know what 57 00:08:20,610 --> 00:08:28,470 type of change has occurred ok then we know that in errors there is a is a is an array 58 00:08:28,470 --> 00:08:35,409 that is why we can map the map point we do it when they are arrangements a 59 00:08:35,409 --> 00:08:46,149 is worth if we cannot do it then what is what when we want to hide that information or when 60 00:08:46,149 --> 00:08:53,309 that information is shown on our interface is worth here in red when that array is greater than 61 00:08:53,309 --> 00:08:59,509 0 if it is greater than 0 is that some error has occurred somewhere and then there it has loaded 62 00:08:59,509 --> 00:09:05,990 the different components of the array but if it is equal to zero it means that it has made 63 00:09:05,990 --> 00:09:14,889 the operations and no error has occurred ok then what are we going to ask if error 64 00:09:14,889 --> 00:09:30,250 point and as always in the arrays there will be a link ok and this one we are going to ask if it is greater 65 00:09:30,250 --> 00:09:43,700 than 0 or not ok ok ok if it is greater than 0 or not good then 66 00:09:43,700 --> 00:09:49,639 ok what we want is that when a certain time passes 67 00:09:49,940 --> 00:09:56,840 put the zero line in such a way that the page would load again and when 68 00:09:56,840 --> 00:10:01,620 put the zero line in our front will understand that there is no error then 69 00:10:01,620 --> 00:10:09,240 is going to remove them, which is what we are looking for, then from javascript there is a 70 00:10:11,460 --> 00:10:15,740 good one because as always we are not going to have to be able to work with the times there is a 71 00:10:15,740 --> 00:10:24,700 library the time that leaves us different functions to work with the time is worth then one of 72 00:10:24,700 --> 00:10:33,690 functions is the time out, it is worth that if you look for it, it will appear out there the time out 73 00:10:38,090 --> 00:10:42,009 here you are ok then well here they are 74 00:10:45,600 --> 00:10:53,639 description ok here for example time out then look at it is an arrow function 75 00:10:53,639 --> 00:11:00,720 we are going to come to the page so that you can see it well an arrow function in this case it only puts 76 00:11:00,720 --> 00:11:08,179 a delay of a delay of a second and then it tells me that delay we put it down here 77 00:11:09,360 --> 00:11:12,600 ok here it puts it in quotation marks 78 00:11:14,240 --> 00:11:21,440 well I would swear that we do not need these quotes but we are going to see it right now ok 79 00:11:21,440 --> 00:11:28,559 then we put the set time out the operation that is valid and the time this is the function of the set 80 00:11:28,559 --> 00:11:37,580 time ok this is like a process it is an independent process that stays there running and 81 00:11:37,580 --> 00:11:44,059 here we have to take into account a little thing we can put it like this and it will work for us ok 82 00:11:44,059 --> 00:11:50,419 but it will leave us that process there dead that of course if we use it many times because it is something 83 00:11:50,419 --> 00:11:56,019 there is a thread that is there that is not doing anything but it is there it is worth then you already know that 84 00:11:56,019 --> 00:12:02,480 always yours is if once that process is not finished killing it is worth then there is also 85 00:12:04,720 --> 00:12:14,860 a there is a function that is the clear time out that what its function is just that it is worth 86 00:12:14,860 --> 00:12:23,220 clean that process, kill that process as you want, okay, well, then let's go 87 00:12:25,539 --> 00:12:26,740 to our code 88 00:12:29,940 --> 00:12:37,039 and then we are going to start putting here, okay, if errors point lenga is greater than zero, then 89 00:12:37,039 --> 00:12:43,379 what do I want it to do to me, well, believe me, a variable because I am going to call it in this case 90 00:12:43,379 --> 00:12:56,279 time, for example, for example, this is going to be the same as the set time out, there we have it, okay, and as 91 00:12:56,279 --> 00:13:01,980 we have said that it is that function, an arrow function as an input parameter, we have nothing 92 00:13:01,980 --> 00:13:07,470 ok how 93 00:13:12,169 --> 00:13:17,950 now we are going to put it in here which is what the console said in the help log is worth 94 00:13:17,950 --> 00:13:23,169 we are not going to tell it we what we want is that it puts the arrangement to zero well because it 95 00:13:23,169 --> 00:13:28,570 erases the data from the arrangement so to erase the data from the arrangement what we put on it 96 00:13:28,570 --> 00:13:34,450 because it is easy it is not a state variable that we know that to modify it we play with the 97 00:13:34,450 --> 00:13:40,269 set errors is worth the same as we were putting here and what is what we put on it because in battery 98 00:13:41,389 --> 00:13:48,049 is worth when we want it to do this for us, for example at 99 00:13:50,809 --> 00:13:56,950 2.5 seconds for example I am going to put it without quotation marks because it has been strange for me to see on the 100 00:13:56,950 --> 00:14:00,570 page is that I have opened 101 00:14:01,149 --> 00:14:06,330 well, that information if I missed it, it is worth going to put it in quotation marks to 102 00:14:06,330 --> 00:14:12,970 see if it does it for us or not, okay, I could have left it like that, which is 103 00:14:12,970 --> 00:14:18,500 what I was commenting on, but 104 00:14:19,080 --> 00:14:25,679 we could have taken it and this to see it left without this part is worth having 105 00:14:25,679 --> 00:14:35,259 left it like that and it will work for us but it would leave us that process there also to not have it 106 00:14:35,259 --> 00:14:42,820 linked to any variable or anything like that I do not have it referenced well it does not seem a good 107 00:14:42,820 --> 00:14:52,299 practice, okay, so here we are going to put this 108 00:14:52,299 --> 00:14:58,519 like this, okay, we're going to leave it with the time and such, okay, and what am I going to 109 00:14:58,519 --> 00:15:01,220 tell you that 110 00:15:01,379 --> 00:15:06,559 if the error is not greater than zero, that is, it is 111 00:15:06,559 --> 00:15:20,129 equal to 0 then what you are going to return to me is a return and we are going to put another arrow function 112 00:15:20,129 --> 00:15:36,639 that on this side is that is, in this line it is very easy because the time out and time is clear, okay, okay, 113 00:15:36,639 --> 00:15:44,620 then we tell him, well, if error is greater than zero, that is, there is some kind of error in 114 00:15:44,620 --> 00:15:48,500 our error array to then map it and if such and that it does not draw it 115 00:15:52,120 --> 00:16:01,600 we launch the set error we reset it when 2.5 seconds pass these are milliseconds remember 116 00:16:01,600 --> 00:16:08,039 y si esto es igual a cero el error punto online es igual a cero entonces pues mata si hay algún 117 00:16:08,039 --> 00:16:16,820 proceso con tiempo mátalo vale bueno si esto está bien nos debería funcionar ahora entonces 118 00:16:16,820 --> 00:16:25,759 vamos a probarlo vamos a poner aquí bueno esto ya sabíais que funcionaba valentes mario santos 119 00:16:25,759 --> 00:16:42,799 arroba educar para su humor 1 2 3 vale aquí le damos veis ha estado 2,5 segundos que sabría terminarlo 120 00:16:45,139 --> 00:16:53,799 y se quitan vale entonces bueno pues es una opción que podemos tener podemos utilizar no queda mal 121 00:16:53,799 --> 00:17:02,139 ok and well, it is a bit to you as designers if you like it or not you see 122 00:17:04,039 --> 00:17:11,240 that the form has been very easy it has been we are in the code if the form has been the effect 123 00:17:11,240 --> 00:17:21,380 is worth remembering always the effect has been good to know the set time out the clear time out the 124 00:17:21,380 --> 00:17:29,519 variable and the state that we have already used it, well, with these few lines of 125 00:17:29,519 --> 00:17:39,019 code we can do what we are what you have seen, okay, what else could we do in our 126 00:17:39,019 --> 00:17:47,759 in our front, well, another other thing that is usually used or used to do a lot of 127 00:17:47,759 --> 00:17:55,359 developers in the front part man if I'm logging in but you know that 128 00:17:55,359 --> 00:18:00,519 when you go to log somewhere if you don't have if you are not registered 129 00:18:00,519 --> 00:18:04,980 it also gives you here it usually puts here at the bottom 130 00:18:04,980 --> 00:18:07,940 usually put 131 00:18:08,000 --> 00:18:15,000 register now or something like that and then the register is valid to be able to go 132 00:18:15,000 --> 00:18:20,960 directly to the register and it usually distributes it down here it is worth it because with the flex if you 133 00:18:20,960 --> 00:18:28,319 remember that we could distribute it in this width it is worth then we can also do that 134 00:18:28,319 --> 00:18:34,180 to do that where we are going to do it well because this is also part of the interface of the 135 00:18:34,180 --> 00:18:38,559 own interface then we can go to the page of the login page 136 00:18:43,700 --> 00:18:51,500 and well here it would be under the summit button if we can put it here for example under the 137 00:18:51,500 --> 00:19:04,039 form ok there we could put a paragraph here I am going to leave it as you want, 138 00:19:04,039 --> 00:19:11,660 notice that now I am putting all the time before I only put the class but if I look at 139 00:19:11,660 --> 00:19:20,160 some of the videos these that I was doing that it works and then it does not give it as a 140 00:19:20,160 --> 00:19:26,359 critical error but it does tell you that it is good that you use the class name ok then well I am not going to 141 00:19:26,359 --> 00:19:33,400 change it in all the places but if you will see that now I use the class name well so that 142 00:19:33,400 --> 00:19:41,019 correct it at some point I will correct it because in all these parts I will correct them I will do a 143 00:19:41,019 --> 00:19:49,539 search of everything where I put class and I will put the name and that's it, okay, but now, well, right now 144 00:19:49,539 --> 00:19:54,000 it gives me a little, it gives me a little the same because of what I tell you, okay, because it gives me the warning but nothing 145 00:19:54,000 --> 00:20:02,319 else is worth then what do I do here well on the one hand we are going to put that text that is 146 00:20:04,779 --> 00:20:14,529 you are not registered, for example, you are not registered, it appears to me here, 147 00:20:16,130 --> 00:20:23,470 okay, and what do I want too, well, we are going to change it a little, 148 00:20:26,670 --> 00:20:35,269 what we want is for a button to appear here that leads us to register or a link, 149 00:20:35,269 --> 00:20:46,089 ok then you have studied html and you have the hr but here we could use it here what 150 00:20:46,089 --> 00:21:00,750 is usually used is the link ok link is a function that provides us or that we can take from 151 00:21:00,750 --> 00:21:08,009 real router tom remember that we use the just navigate it is worth that then it created the 152 00:21:08,009 --> 00:21:16,109 variable navigate which is in which in the use effect it took me to task it is worth remembering that this 153 00:21:16,109 --> 00:21:23,789 did it automatically we now what we want is that it only takes us when we 154 00:21:23,789 --> 00:21:31,509 a click then I could not use the just navigate but if we could use 155 00:21:33,390 --> 00:21:40,930 the link then with the link what we are going to use and it works exactly the same as the hr 156 00:21:40,930 --> 00:21:47,170 ok then here we are going to put 157 00:21:47,170 --> 00:21:54,190 then link 158 00:21:56,549 --> 00:22:02,589 capital there is worth that it appears in green to this we pass here there is no h 159 00:22:02,589 --> 00:22:09,869 network here there is a to a you is ok link to where we want it to take us 160 00:22:09,869 --> 00:22:22,049 take us to register ok take us to register here we are going to put some options a flash name ok 161 00:22:23,490 --> 00:22:35,950 and we are going to put the registration ok ok and here it has put me to register regis 162 00:22:35,950 --> 00:22:45,210 so register ok it puts everything together everything very ugly well now we are going to start 163 00:22:45,210 --> 00:22:51,009 playing with these classes that the wind gives us and leave it beautiful that we can put here for 164 00:22:51,009 --> 00:22:56,769 example in the paragraph well in the paragraph so that it puts it to the left and 165 00:22:56,769 --> 00:23:04,029 to the right and distributes it well that we had the flex and the flex between you remember that what it 166 00:23:04,029 --> 00:23:10,150 now distribute the information between the width of 167 00:23:10,150 --> 00:23:15,890 the width of that block is worth then well here that we are going to put in this 168 00:23:15,890 --> 00:23:21,549 class because on the one hand the flex and on the other hand 169 00:23:21,549 --> 00:23:30,650 justify between ok then look at how he has already put us on the left and on the 170 00:23:30,650 --> 00:23:36,109 right it does not distribute on one side the text and on the other the link is worth the text not such the link 171 00:23:36,109 --> 00:23:41,750 already appears to us the tip and that the icon takes the shape of the little hand so that you click on it 172 00:23:43,029 --> 00:23:50,730 if we click on it because it takes us to register ok ok then we continue to give this a 173 00:23:50,730 --> 00:23:57,589 certain format then what else can we say because it would not start playing 174 00:23:57,589 --> 00:24:05,109 we are going to put this one in x 175 00:24:08,450 --> 00:24:17,180 here we are going to put two ok this is to put that margin but it doesn't do us anything good 176 00:24:18,480 --> 00:24:25,940 what else can I put here in the class name we can and tell him well it is to register 177 00:24:25,940 --> 00:24:41,690 so that it is different from the text we can take and tell it to be text blue sky this is not 178 00:24:41,690 --> 00:24:47,509 written well sky there and that for example I put it at 500 179 00:24:49,789 --> 00:24:55,089 it is like something like that it is worth then register that it will be something like that 180 00:24:55,089 --> 00:25:03,089 we do not know this is that we start to give it already because the format you want for example 181 00:25:31,750 --> 00:25:38,589 if I put it to change the size we will see 182 00:25:38,589 --> 00:25:47,269 I don't remember the text 5xl has gone away 183 00:25:47,269 --> 00:25:57,930 then we are going to put the text md 184 00:25:59,009 --> 00:26:04,430 xs I can put it is not registered 185 00:26:04,430 --> 00:26:07,930 register here like this 186 00:26:07,930 --> 00:26:17,470 text md 187 00:26:17,470 --> 00:26:20,630 no this is ugly 188 00:26:20,630 --> 00:26:24,369 I leave you the two little ones 189 00:26:24,930 --> 00:26:29,569 we are going to leave the two little ones but let's go that this is already starting to play a 190 00:26:29,569 --> 00:26:36,809 little is worth here I am going to put a margin 191 00:26:36,809 --> 00:26:40,849 in x of 3 192 00:26:40,849 --> 00:26:48,789 in x not in and sorry it is worth that I lower it there a little more 193 00:26:48,789 --> 00:27:07,349 Well, that's it, something like that, okay, I would do the same in registering, but to get me to the login, okay, then, well, it's another option that we have here, so we would have controlled the errors, okay, the same thing we have done before. 194 00:27:07,349 --> 00:27:16,109 here we would go controlling the own errors that we have controlled from the from with 195 00:27:17,630 --> 00:27:28,690 with the form it is worth then there it is already asking us to write something 1 2 3 it is worth we see the 196 00:27:28,690 --> 00:27:36,029 time 22 seconds and a half it goes ok you are not registered so first you have to register 197 00:27:36,029 --> 00:27:46,890 bueno pues podemos ir jugueteando con todas estas cosas vale qué más podemos o qué más así trasteando 198 00:27:46,890 --> 00:27:57,250 con el desarrollo bien estamos controlando los errores desde diferentes sitios desde el 199 00:27:57,250 --> 00:28:07,089 from the model itself that we did with mongoose from the from itself and sometimes when we put 200 00:28:07,089 --> 00:28:16,190 the network if we put to send from the back in an information with a json that we pass a 201 00:28:16,190 --> 00:28:24,369 message or it happens we pass the status directly the status is worth the rest status point I mean 202 00:28:24,369 --> 00:28:31,990 we sent it in different ways and when it comes to collecting that information because it can give us 203 00:28:31,990 --> 00:28:40,829 some other error, it is worth then and to leave it or not that side of the whole 204 00:28:43,869 --> 00:28:52,769 we are following the code in the file of the out context where we have our functions 205 00:28:54,369 --> 00:28:58,569 log in or as you have called it logged in, it is worth remembering that I called it like that 206 00:29:00,190 --> 00:29:06,910 here we took the errors but these errors are what I tell you that they can come in array format or not 207 00:29:06,910 --> 00:29:13,690 and we are working in array format then you can find some type of error that 208 00:29:13,690 --> 00:29:20,589 does not come in array format then the application does not work well for me or an error jumps from 209 00:29:20,589 --> 00:29:29,809 the developer tools, it is worth and you can obviously test it and see it and it does not look 210 00:29:29,809 --> 00:29:38,009 good then here maybe we could and say hey if the error comes in array format great 211 00:29:38,009 --> 00:29:44,650 because you do what you are doing and that's it but if it does not come in array format then take that 212 00:29:44,650 --> 00:29:51,549 error and you put it in the array, it is worth so that it continues to maintain that, that is, if it comes in 213 00:29:51,549 --> 00:30:00,549 string format, you are going to convert it to an element of mine, it is worth how I do that, well, 214 00:30:00,549 --> 00:30:13,619 in the array in the array element there is a condition that is the is array, it is worth what it does 215 00:30:13,619 --> 00:30:19,019 obviously asks if it is an array or not then that I am going to ask him if what comes in error 216 00:30:19,019 --> 00:30:28,920 response point data is array then what is it that I want you to do to me what you are doing to me 217 00:30:28,920 --> 00:30:43,269 until now, which is the set error retun, it is worth error point the response point data 218 00:30:46,329 --> 00:30:53,710 but if this condition is not met then what I want is that this set error 219 00:30:53,710 --> 00:31:09,130 you treat it or that that data that string that is entering as an error you put it as an element 220 00:31:09,130 --> 00:31:16,430 of my radio then what do I do I put it between brackets ok then in this way and also good 221 00:31:16,430 --> 00:31:25,210 as we usually put the message with the point ok well we pass that key remember 222 00:31:25,210 --> 00:31:30,309 that we are with a monkey and then we are with a value key all the time, okay, well, 223 00:31:30,309 --> 00:31:44,269 in this way we can control this, we are going to copy this, I am going to paste it here to have it the same 224 00:31:45,869 --> 00:31:53,519 and it would be worth it then here now if here we put anything 225 00:31:53,519 --> 00:32:03,279 ok then like this if it is not returning it well ok but hey it is a way to make sure 226 00:32:03,279 --> 00:32:10,200 that I will not skip any type of error so weird that if I skipped the other day and playing 227 00:32:10,200 --> 00:32:19,400 with all the code I do not remember how I did it skip ok but well the solution would be this 228 00:32:19,400 --> 00:32:26,900 ok well and here yes I think that with these brushstrokes like this, well, if we start 229 00:32:26,900 --> 00:32:33,200 with what would be the issue of protected routes, it is worth and in the end because I want to make those 230 00:32:33,200 --> 00:32:43,819 protected routes, well, because his thing is to have an initial page in which he is going to show you all 231 00:32:43,819 --> 00:32:50,900 the information of this application that we are doing, it is worth that from there we can go to the login 232 00:32:50,900 --> 00:32:58,460 and the register and nothing else until we are logged in we cannot go for example to task ok we know 233 00:32:58,460 --> 00:33:17,279 that we have here in task ok we have this and here it should not let us enter at the end this route 234 00:33:17,279 --> 00:33:22,680 the task of tasks because the one that we did so that it shows us all the tasks that this 235 00:33:22,680 --> 00:33:32,240 user has there registered is worth then the normal thing is that it will always take us to the login 236 00:33:32,240 --> 00:33:41,980 to the register or much better to the one of a main one, a country that had the napalm and then 237 00:33:41,980 --> 00:33:47,799 pudiera ir al registro a lograr me a las tareas no debería de dejarme vale 238 00:33:47,799 --> 00:33:54,799 bueno un poco esa es la idea eso es lo que queremos conseguir podríamos hacer 239 00:33:54,799 --> 00:34:00,279 eso directamente en las diferentes páginas decir oye no te cargues si por 240 00:34:00,279 --> 00:34:05,799 ejemplo la cookie o el contexto no existen pues sí pues tú puedes ir 241 00:34:05,799 --> 00:34:11,719 haciendo eso página a página lo cual pues ya entendéis que no tiene ningún 242 00:34:11,719 --> 00:34:17,900 sense because of the subject of that you have to go page by page and a change you have to do it on all 243 00:34:17,900 --> 00:34:24,380 the pages and that is one of the principles that you as good programmers cannot do, 244 00:34:24,380 --> 00:34:36,019 okay, so what do we do, well, in principle what we are going to do is a component 245 00:34:36,019 --> 00:34:51,380 that let's go where you are seeing the station the code is worth a component that encompasses those routes 246 00:34:51,380 --> 00:34:57,340 that we want to protect is worth then we have here there are three routes one that is the home another 247 00:34:57,340 --> 00:35:04,099 that is the register and the login is worth then here what I want is to protect these routes 248 00:35:04,099 --> 00:35:16,489 vale todas estas rutas no las quiero tener protegidas la de las tareas la de añadir una 249 00:35:16,489 --> 00:35:24,349 tarea la de bueno modificar si queréis una única tarea y la del profile vale 250 00:35:28,519 --> 00:35:37,460 vale como hago esto bueno esto lo que hacemos es todas estas este conjunto de tareas que las quiero 251 00:35:39,480 --> 00:35:53,800 I will tell you that I want to have them private protected we are going to include them inside another 252 00:35:58,800 --> 00:36:03,320 and then I am going to put it inside another 253 00:36:03,320 --> 00:36:19,199 ok and these are going to be there in global then what is this going to do good 254 00:36:19,199 --> 00:36:30,400 because to this road I am going to call an element is worth a function that is going to control 255 00:36:30,400 --> 00:36:37,880 for me that that context is created remember that we are within the provider of the browser 256 00:36:37,880 --> 00:36:42,739 well we are within the provider so we are within the context so I can 257 00:36:42,739 --> 00:36:49,480 ask in my context if a variable is created that if you 258 00:36:49,480 --> 00:36:53,199 remember it was the 259 00:36:53,719 --> 00:36:59,500 and it is authentic and it is worth it and it is authentic and we put it was a state variable 260 00:36:59,500 --> 00:37:06,780 that we had here and we put it true or false when we were logged or 261 00:37:06,780 --> 00:37:16,260 when we registered, it is worth here logged and here we registered that it was a state variable 262 00:37:16,260 --> 00:37:23,739 and it told us that this is going to give us a problem but I want you to see why we use the cookies 263 00:37:23,739 --> 00:37:29,639 instead of directly using these state variables, it is worth because it is going to give me a 264 00:37:29,639 --> 00:37:37,400 problem because these variables of the context are worth state variables that I have them 265 00:37:37,400 --> 00:37:47,539 saved in the context of course I initialize them I initialize and also put them in the inside of 266 00:37:47,539 --> 00:37:55,199 the provider what does that mean because every time we reload a page it will put them like this 267 00:37:55,199 --> 00:38:01,019 then the set is auto indicate this is going to always put it to false ok then we are going to 268 00:38:01,019 --> 00:38:09,300 see it and see if you understand the logic and you see the logic is worth that problem that then 269 00:38:09,300 --> 00:38:15,199 obviously we are going to give it a solution is worth then to do this the first thing we are going to 270 00:38:15,199 --> 00:38:24,000 do is create the different pages ok and then a file a jsx in which we are going to call 271 00:38:24,000 --> 00:38:32,820 in the attribute in the element property, it is worth that anonymous function, that arrow function that evaluates 272 00:38:32,820 --> 00:38:42,119 if there is that context, that state variable, the isAuthentic is true or not, if it is true, 273 00:38:42,119 --> 00:38:48,679 then it does allow you to enter these routes, but if not, then it is not worth it if I am not going to take you 274 00:38:48,679 --> 00:38:56,920 all the time, for example, to the window or to the login page, okay, 275 00:38:58,360 --> 00:39:02,800 so that's what we're going to do, we're going to do the pages first and then we're going to 276 00:39:04,719 --> 00:39:15,219 continue with that proposal, okay, so let's go to page we're going to create a page that I can call 277 00:39:15,219 --> 00:39:27,039 home page or main page or home page or whatever you want, okay, then we have this 278 00:39:29,039 --> 00:39:43,110 here we are going to remove it because we don't need it either, we leave it the same and here we are going to put 279 00:39:43,110 --> 00:39:55,119 this is ok then this would be one we are going to create another one that would be for example 280 00:39:57,800 --> 00:40:05,099 we have was the one of the tasks that shows us all the tasks so here we are going to 281 00:40:05,099 --> 00:40:13,909 create another one that you are 6.j s x rfc 282 00:40:13,909 --> 00:40:17,230 here we are going to put 283 00:40:19,789 --> 00:40:22,409 costs 284 00:40:24,130 --> 00:40:33,320 ok tax ok let's create another one that will be 285 00:40:33,320 --> 00:40:41,559 what else did we have the one of the profile the profile 286 00:40:42,559 --> 00:40:45,559 .jsx 287 00:40:48,760 --> 00:40:53,079 ok and here 288 00:40:57,750 --> 00:41:03,619 ok it can also be valid for us, that is, we 289 00:41:03,619 --> 00:41:12,300 puede faltar la de añadir las nuevas tareas vale entonces a ese le podemos llamar estás 290 00:41:14,739 --> 00:41:18,300 ese le vamos a poner a traer un formulario 291 00:41:29,159 --> 00:41:41,070 y aquí los dos vale lo dejo así no le voy a hacer nada más porque ahora mismo lo único que quiero es 292 00:41:41,070 --> 00:41:49,050 estas páginas para desde app js x ir modificando todo vale entonces vale ya tengo hechas mis páginas 293 00:41:50,769 --> 00:41:55,590 vamos a poner en app js x así que esto 294 00:41:57,909 --> 00:42:08,010 vale en vez de poner estos h 1 y tal y cual lo que vamos a pasar es esas distintas páginas vale 295 00:42:08,010 --> 00:42:15,809 entonces para hacer esto aquí en la de task lo que le voy a pasar es 296 00:42:18,769 --> 00:42:28,489 estás page vale estás page 297 00:42:32,710 --> 00:42:39,329 que no me lo ha cogido así que vamos a ponerle aquí el importe 298 00:42:40,710 --> 00:42:41,489 space 299 00:42:43,190 --> 00:42:58,550 no ok here which one are we going to pass 300 00:43:04,739 --> 00:43:11,239 this one comes out then here we are going to pass it as we have called it task form page 301 00:43:13,000 --> 00:43:13,539 you are 302 00:43:17,679 --> 00:43:21,409 ready and this here 303 00:43:21,409 --> 00:44:04,280 and this is worth updating because the same as up here so I'm going to copy it and I'm going to paste in profile 304 00:44:04,280 --> 00:44:11,699 for the profile 305 00:44:13,699 --> 00:44:27,019 pp 306 00:44:47,539 --> 00:44:52,400 profile page ok 307 00:44:52,400 --> 00:44:57,559 we would already have here we have passed the elements that we want 308 00:44:57,559 --> 00:45:06,000 que nos cargue vale y aquí el home esto sería 309 00:45:06,000 --> 00:45:13,889 este nos faltaría y aquí sería el home 310 00:45:14,809 --> 00:45:44,940 pues ya está ya tendremos ya tendríamos este contenedor que road que ahora mismo 311 00:45:44,940 --> 00:45:49,019 no está haciendo nada vale las rutas que están dentro que son las que queremos 312 00:45:49,019 --> 00:45:54,840 protect and now we would have to put some element here then to do this 313 00:45:56,179 --> 00:46:02,139 we are going to create a file directly in that rc it is worth directly here you could already 314 00:46:02,139 --> 00:46:06,000 know that the grade where you see that we can call it 315 00:46:06,000 --> 00:46:16,800 well, for example, protected routes dot j s x 316 00:46:17,980 --> 00:46:22,000 protected routes dot j s x rfc 317 00:46:24,000 --> 00:46:29,840 and now directly to leave it all done we are going to say good because it matters 318 00:46:29,840 --> 00:46:36,739 to see how we have put it, it does not matter 319 00:46:39,380 --> 00:46:49,360 in protected routes, it already shows it to me here and then here we are going to pass it to the element 320 00:46:49,360 --> 00:47:13,340 well, protected routes, let's see the invention, I close it here, it is treating it as a string 321 00:47:13,340 --> 00:47:16,300 because I am doing it as if it were a string, 322 00:47:20,239 --> 00:47:29,389 okay, that's how it would be, okay, well, now we have already told him what we want him to validate us, 323 00:47:29,389 --> 00:47:37,190 that in this case it is going to be protected routes that I have here, it is worth right now it is nothing that 324 00:47:37,190 --> 00:47:45,050 validates us before giving access to these routes to the path to the one I say to the path to the task to the 325 00:47:45,050 --> 00:47:59,579 of details to the tax is the idea of ​​the profile, okay, well, let's go to it, then here we are going to 326 00:47:59,579 --> 00:48:10,699 import from the real one on the one hand, the dom router, okay, we are going to export 327 00:48:10,699 --> 00:48:25,280 export not to import the navigate is worth because we are going to need to go if I do not know if we are not 328 00:48:25,280 --> 00:48:32,840 able to find in the context that is authentic and that we want to control, it is worth that it 329 00:48:32,840 --> 00:48:40,579 directly takes us to that start page where it is here on the one hand the navigate and on the other hand 330 00:48:40,579 --> 00:48:52,019 el outlet el outlet lo que te dices bueno si si se cumple entonces deja entrar a esas rutas 331 00:48:52,019 --> 00:48:57,820 protegidas vale entonces esto es un poco como algunas funciones que hemos visto ya como las de 332 00:48:59,400 --> 00:49:08,820 las funciones promesa o vale que son capaces de controlar dos posibles estados o es verdadero o 333 00:49:08,820 --> 00:49:14,320 or it is false ok then here what we are going to tell you is 334 00:49:17,739 --> 00:49:22,880 we are going to work with the context variable as we are going to work with the context variable 335 00:49:22,880 --> 00:49:37,829 we are going to import it and for this was the juice juice out juice out there you are ok from our context 336 00:49:37,829 --> 00:50:07,179 In the useOut, if we remember this, we had, I'm going to delete this, I don't want it now for nothing, we have those variables from the context that we could use, 337 00:50:07,179 --> 00:50:14,260 because they can be the user if we want to work with all the information that we have from the user 338 00:50:15,840 --> 00:50:16,940 and he is 339 00:50:21,679 --> 00:50:22,239 what 340 00:50:30,800 --> 00:50:32,099 and paste it here 341 00:50:32,099 --> 00:50:51,750 this is going to be the same as use out, okay, in such a way that I can already work or use these 342 00:50:51,750 --> 00:50:59,570 context variables of the state of the context, it is worth for my purposes, it is worth 343 00:50:59,570 --> 00:51:08,150 well, what am I going to say, is this variable true or false, it is worth 344 00:51:09,409 --> 00:51:20,070 and we are going to put it if it is not true, what do we have to do, well, it will take us to 345 00:51:20,070 --> 00:51:38,820 navigate to the login, for example, it is worth if it is not true then it takes us to login ok but what happens 346 00:51:38,820 --> 00:51:54,199 if it was true here I am to close it well here the reply is passed so that no 347 00:51:54,199 --> 00:52:01,800 garbage and in memory or anything remember that we are with the web ok then here it says yes no take me 348 00:52:01,800 --> 00:52:08,340 to login ok and do not stay with any type of information from the page in which you were trying to 349 00:52:08,340 --> 00:52:14,239 enter ok remember that there we have written a link a route then with the replacement is that the 350 00:52:14,239 --> 00:52:21,679 because it replaces it and that's okay, it's a bit of a way of being more sharp, okay, 351 00:52:24,000 --> 00:52:35,219 okay, and there we would have it, what happens if it is not false, I tell you if it is not false, then you 352 00:52:35,219 --> 00:52:41,579 and here is where we pass the outlet 353 00:52:52,800 --> 00:53:02,820 ok then this would be this would be our function if the user thing because I don't need it 354 00:53:02,820 --> 00:53:08,280 at all I'm not doing anything with that ok if we needed it it was just so that you could see 355 00:53:08,280 --> 00:53:11,880 how we use those variables of the context 356 00:53:14,639 --> 00:53:19,659 well and this would be that function protected routes that we are calling from ppjs and we are 357 00:53:19,659 --> 00:53:25,519 saying before entering any of these routes you have to check you have to go through these 358 00:53:25,519 --> 00:53:32,280 protected routes just like the meters or the logic is exactly the same all 359 00:53:32,280 --> 00:53:39,599 time is worth then here I have put a middle word I have put that arrow function that 360 00:53:39,599 --> 00:53:46,460 anonymous function so that the test before giving permission to enter any of these pages of 361 00:53:46,460 --> 00:53:57,789 these routes with the outlet I let it enter but if it is not valid the condition that we have 362 00:53:57,789 --> 00:54:04,409 put it in protected routes then not then you are going to send me directly to login it is 363 00:54:04,409 --> 00:54:10,150 logic is as easy as that but nevertheless this does not work for what I tell you because 364 00:54:10,150 --> 00:54:20,349 when trying to reload the page that is authentic and that is going to always put it to false it is going to 365 00:54:20,349 --> 00:54:25,550 always put it to false then this I have only put it I show it to you now so that you can see a 366 00:54:25,550 --> 00:54:32,329 bit that you could complicate it a bit it could work and it would be 367 00:54:32,329 --> 00:54:37,610 an option ok and you have it there and well I found it interesting that you saw the 368 00:54:37,610 --> 00:54:44,110 why it does not work and how to implement this is worth this 369 00:54:44,110 --> 00:54:48,309 video that is getting a little long I'm going to leave it here and with the next one 370 00:54:48,309 --> 00:54:53,449 that I'm going to do now because we already give solution to this we are going to see how it 371 00:54:53,449 --> 00:55:01,429 works then let's go to our page here ok then ok we are on the 372 00:55:01,429 --> 00:55:04,570 page we are fine 373 00:55:05,429 --> 00:55:11,429 we have logged we have in our database of mongo to 374 00:55:11,429 --> 00:55:16,090 the user mario ok well here we are going to put 375 00:55:16,090 --> 00:55:24,130 mario puntos santos arroba educa punto madrid punto rg 376 00:55:24,130 --> 00:55:29,329 1 2 3 4 5 and 6 ok then if I give it to 377 00:55:29,329 --> 00:55:36,289 log in, you see, I don't miss any error if I come here 378 00:55:36,289 --> 00:55:47,230 and this is what I want to see is this provider 379 00:55:47,230 --> 00:55:58,590 here it is not taking me to the case is that it does tell me what about the 380 00:55:58,590 --> 00:56:07,929 truck and the cookie 381 00:56:07,929 --> 00:56:13,989 the cookie if it is not putting it well, but the state if it is not putting it 382 00:56:13,989 --> 00:56:25,179 true because it finds this state the truth is that it could not have worked for us but it does not 383 00:56:25,179 --> 00:56:30,460 work for us so I tell you that in the variable of states it does tell us but when trying to 384 00:56:30,460 --> 00:56:49,789 navigate it is not worth it then well now in the next part of the video well here you do not see it 385 00:56:49,789 --> 00:56:58,769 expensive because here in the code we are going to see in the code 386 00:56:59,469 --> 00:57:05,409 now you are seeing the code ok at the time 387 00:57:05,409 --> 00:57:10,030 in which I tell him if it is false you take me to login but if you don't give him the 388 00:57:10,030 --> 00:57:17,099 outlet ok I go back to the page on the page I have the answer because I follow 389 00:57:17,099 --> 00:57:24,980 this page but if I try to go to the task for example of course what happens that context goes away 390 00:57:24,980 --> 00:57:32,159 you see the state is no longer false so that's why it loads me again login actually 391 00:57:32,159 --> 00:57:39,780 has done what we have told him it has come has asked if it is authentic it has seen that it is 392 00:57:39,780 --> 00:57:46,019 false and then it takes us to login ok because every time I reload a route to a page of each of 393 00:57:46,019 --> 00:57:52,900 those routes resets all that context that is why it is not useful to us and that is why 394 00:57:52,900 --> 00:58:00,059 we have to use the cookies yes or yes it is worth if it would not make sense to have done from the back in that 395 00:58:00,059 --> 00:58:11,900 is good well so far it is worth and in the next video we continue a greeting guys see you later