1 00:00:01,459 --> 00:00:09,019 well in this new video what we are going to work on is a bit what I asked you in the video in the last 2 00:00:09,019 --> 00:00:15,320 video, it is worth creating that interface to show the whole subject of the cards well here what 3 00:00:15,320 --> 00:00:22,339 I am going to tell you is how to create a bar that now I had them in and I was copying and 4 00:00:22,339 --> 00:00:27,500 pasting on each of the pages but this is not done like this, it is worth using what the 5 00:00:27,500 --> 00:00:32,479 components is worth then I have already done it I am going to show it without being 6 00:00:32,479 --> 00:00:36,920 biting the code because well I think you can follow it without 7 00:00:36,920 --> 00:00:39,880 need and also 8 00:00:40,740 --> 00:00:46,320 well, I don't make the video so long I have made a bar in which 9 00:00:46,320 --> 00:00:53,179 first when you enter the front what it teaches you is the registration button and 10 00:00:53,179 --> 00:01:04,439 to log in, nothing else is worth then if I log in here I already get the tasks that 11 00:01:12,790 --> 00:01:23,819 81 is not raised we are going to see 12 00:01:25,659 --> 00:01:45,340 where it is ok it is ok then I have the tasks I have here all these tasks ok 13 00:01:45,340 --> 00:01:53,980 that there are 1 2 3 and 4 that are from the user of mario is worth mine and another that is from another 14 00:01:53,980 --> 00:02:00,560 user then here are the four that are from this user I have put the logout button 15 00:02:00,560 --> 00:02:05,459 I log in again I log in with the other user it seems to me that it was the one from carolina 16 00:02:06,959 --> 00:02:12,919 ok then this task only appears from here I can add tasks because for example 17 00:02:12,919 --> 00:02:44,280 here it would be to send directly to view tasks that in the last video I did not do it 18 00:02:45,780 --> 00:02:51,000 then when we enter to view tasks we already have the meeting meeting with the 19 00:02:51,000 --> 00:02:57,300 development team ok and in card format which is what I asked you in the last video that more 20 00:02:57,300 --> 00:03:05,460 good things if you look when I am not logged in here it does not show me any button or any message 21 00:03:05,460 --> 00:03:18,569 or anything at the time of logging in, it does say welcome and puts the user's name and the 22 00:03:18,569 --> 00:03:24,750 logout button will appear for me, then in each of the cards in addition to putting the title and the description 23 00:03:24,750 --> 00:03:31,650 what it puts is the delete button in case you want to delete it or edit it to update that we will 24 00:03:31,650 --> 00:03:38,810 do in the next video ok and with that we would have everything done we give it the format that is 25 00:03:38,810 --> 00:03:45,830 good to put the title to put the description to put these dates ok then 26 00:03:45,830 --> 00:03:53,810 notice that these two I just put them now this one of videos is from yesterday and this one from test 1 27 00:03:53,810 --> 00:04:02,030 of day 24 ok then well a little to see how to do all this in a simple way ok 28 00:04:02,030 --> 00:04:08,939 then let's go to our code let's see if we are already 29 00:04:12,180 --> 00:04:22,279 ok and then in the code well the first thing I have done has been to create a new folder 30 00:04:22,279 --> 00:04:31,459 that is called component ok and inside the component I have put a bar a file that I have called 31 00:04:31,459 --> 00:04:44,089 a bar that is this in which I have created is in a bar that they are teaching you is worth all this that is 32 00:04:44,089 --> 00:04:54,470 up here in purple and another that is the one of cards.jsx that is the one that makes these cards for 33 00:04:54,470 --> 00:05:01,230 each of the entries of the mapping of when we launch the consultation on the backend so that it 34 00:05:01,230 --> 00:05:08,990 returns all the tasks, it is worth that mapping of that task data arrangement that it returned to us 35 00:05:08,990 --> 00:05:18,829 is where I am collecting it and I am putting the task.title ok I am putting the task.description 36 00:05:18,829 --> 00:05:28,310 and the task date that I put with the new date to convert it to good because only the date and then 37 00:05:28,310 --> 00:05:35,129 that I put the local date stream so that it becomes like a stream ok these would be the 38 00:05:35,129 --> 00:05:41,750 buttons that as you see right now because they do nothing is worth 39 00:05:41,889 --> 00:05:46,170 and well then it is to start using the different classes that is, because 40 00:05:46,170 --> 00:05:52,949 well, here I have the div to do what is this gray box is worth for each 41 00:05:52,949 --> 00:05:59,129 of the tasks I have the the guide that what you do is this 42 00:05:59,129 --> 00:06:04,870 header to put the title and put these two buttons that we pass the flash and 43 00:06:04,870 --> 00:06:11,589 justifies between it is worth for me to place it all because as you are seeing it 44 00:06:13,329 --> 00:06:18,009 then I put the description and then for the date something was saying ok and this code 45 00:06:19,569 --> 00:06:28,009 is the one that is allowing me to make these cards these cards ok then you could 46 00:06:28,009 --> 00:06:36,689 do them as you have, I hope, tried to do, it could be, for example, that instead of putting 47 00:06:36,689 --> 00:06:44,449 two buttons that you can edit them by clicking inside the card, for example, it is worth 48 00:06:47,629 --> 00:06:54,329 this type of things that instead of buttons are check, use the use effect, well, you would already have 49 00:06:54,329 --> 00:07:02,790 different options that you could use, then what the card is is this 50 00:07:04,209 --> 00:07:12,009 and you can say well but this is a new file a jsx that is called cards that 51 00:07:12,009 --> 00:07:19,810 is inside components but it is not the page of the task page then what is what we had 52 00:07:19,810 --> 00:07:27,430 before I put the div and all the labels that appeared here the information is worth one 53 00:07:27,430 --> 00:07:33,250 below the other here inside where now I have put cards then what is what I do inside 54 00:07:33,250 --> 00:07:44,769 the component I create those that code for the html with the issue of the data is worth and from the 55 00:07:44,769 --> 00:07:54,910 task page dot j s x what I do is call cards ok what I do is call because exported cards 56 00:07:54,910 --> 00:08:02,629 then what I do is call cards this function what I do is pass a task to it that task is 57 00:08:02,629 --> 00:08:11,170 the one we are taking when I map everything that the backend is returning to me ok then I 58 00:08:11,170 --> 00:08:18,189 mapping that is to go through that array in this in this case that object that is an arrangement I am 59 00:08:18,189 --> 00:08:26,209 taking each of the tasks and what I do is send that task to the file cards.js x 60 00:08:26,209 --> 00:08:33,690 ok and I also passed it here well to pass this idea to him because if not sometimes it gives problems and 61 00:08:33,690 --> 00:08:39,490 you remember I was also using it if you see yesterday's video I was also using it 62 00:08:39,490 --> 00:08:45,789 ok then here what I do is call the card that of course I have imported it before ok 63 00:08:47,190 --> 00:08:54,269 and on cards I already tell you that by putting this it is already doing me every time I pass one of the tasks it is already 64 00:08:54,269 --> 00:08:59,230 doing me for each of the tasks it is taking this format and it is drawing it for you in this 65 00:08:59,230 --> 00:09:06,269 way which is what we were looking for ok that we could take and say well instead of separating it 66 00:09:06,269 --> 00:09:15,830 take all this deep and I put it inside the space I put it in here, okay, well, you can 67 00:09:15,830 --> 00:09:26,110 do it, okay, but hey, the way to work with this type of technology is better like this, 68 00:09:26,110 --> 00:09:34,070 especially because as you are going to see now with the napalm, this could be used or 69 00:09:34,070 --> 00:09:41,450 podría dar a utilizar a diferentes páginas vale entonces esto me refiero a tarjetas vale está 70 00:09:41,450 --> 00:09:49,570 bueno es interesante a la hora de pensar en lo que es la reutilización de código vale interesante 71 00:09:49,570 --> 00:10:01,070 porque le pongo aquí esto del grid el grid call 3 con cap 2 es esto es lo que provoca el que haya 72 00:10:01,070 --> 00:10:08,590 three three columns is worth first you tell him the grid so that he does it by rows and by columns you tell him 73 00:10:08,590 --> 00:10:16,370 that you want them to be columns that are three is worth and then those are those margins between the different 74 00:10:16,370 --> 00:10:23,509 components is worth then that you have to do here in this div you cannot do it within 75 00:10:23,509 --> 00:10:35,009 j sx cards because you have to do this for each one, that is, you do this with all the 76 00:10:35,009 --> 00:10:42,570 cards, the order on the page, you do it with all the cards and the code that I put in 77 00:10:42,570 --> 00:10:51,210 cards is that each of the cards individually is worth because that is why I have to work from this 78 00:10:51,210 --> 00:10:57,429 di porque este es el conjunto de todas las tareas de todas las tarjetas que tengo vale entonces en 79 00:10:57,429 --> 00:11:05,370 cuanto a las tarjetas es pues es es hacer esto que os estoy diciendo vale es una de las formas 80 00:11:05,370 --> 00:11:11,549 ya os digo que lo podríais hacer de otras formas pero es básicamente sería hacer esto ahora con el 81 00:11:11,549 --> 00:11:23,820 navbar well what about the navbar there if you look at it because here I have the navbar what I have done has 82 00:11:23,820 --> 00:11:32,539 been to copy the one that comes in the time wind and then start modifying and putting the buttons 83 00:11:32,539 --> 00:11:41,460 or the links that interest me ok then if you see you have the div it is a bit the same as 84 00:11:41,460 --> 00:11:52,710 siempre ahora se explicó esta función flecha porque la he puesto vale bueno y tengo el is 85 00:11:52,710 --> 00:12:03,169 authenticate el logout y el user el logout este hay dos formas de hacer esa función yo en este 86 00:12:03,169 --> 00:12:11,090 caso lo he hecho directamente en el from y dentro del contexto vale del out context entonces dentro 87 00:12:11,090 --> 00:12:16,850 of the out context, notice that what I do is this because I have done it from here because it is much 88 00:12:16,850 --> 00:12:22,909 easier to do it from the back-end, but remember that in the back-end we also have the 89 00:12:22,909 --> 00:12:28,549 function, that is, we could make a call by axios to the back-end and it was going to work for us 90 00:12:28,549 --> 00:12:37,710 the same now well we are using a cookie called touch then only with this 91 00:12:37,710 --> 00:12:43,549 line with cookies point remove and the string with the name of the cookie that I want to delete, it 92 00:12:43,549 --> 00:12:51,950 erases it for me, then well, I do it from the front because I think it is easier and then I already put 93 00:12:51,950 --> 00:13:00,250 the set user the set user object I put it to null and the set is authenticate to false in such a way 94 00:13:00,250 --> 00:13:05,250 that if I click on the lockout it takes me out, okay, and I can log in with the 95 00:13:07,870 --> 00:13:13,970 user, whatever, always giving the welcome here to carolina santos, okay, 96 00:13:13,970 --> 00:13:28,429 log out, log in, now we are going to put it with mine, okay, well then this is an arrow function, 97 00:13:28,429 --> 00:13:35,389 an anonymous function that I am creating within the provider of the context and that of course then 98 00:13:37,549 --> 00:13:38,129 the 99 00:13:41,429 --> 00:13:48,610 transport within what is the context is worth so that all the children can use it all the 100 00:13:48,610 --> 00:13:55,950 children routes that are within this context that are all worth then we are going to see more of the napalm 101 00:13:55,950 --> 00:14:05,789 this function, well, I will explain it to you now, well, I am putting the tip here, the nap that this is 102 00:14:05,789 --> 00:14:14,429 as what I tell you this is copied from the tailwind part, it is worth this of the ue to do it as a list 103 00:14:14,429 --> 00:14:24,690 this is not what I have changed, it is worth then here I am putting good because the color of the 104 00:14:24,690 --> 00:14:31,830 the different classes that justify me that it distributes it to me from left to 105 00:14:31,830 --> 00:14:37,470 right to the elements is worth everything we have been seeing there is nothing that you do not have 106 00:14:37,470 --> 00:14:48,450 or that you do not understand at least these lines are worth there should not be anything that you do not 107 00:14:48,450 --> 00:14:55,710 understand it is worth now I get here and this is a little rarer this yes I had not used it 108 00:14:55,710 --> 00:15:06,629 ok then in this smell I put it good at the beginning I put it to be flex and I put the space x 4 ok 109 00:15:06,629 --> 00:15:25,629 then it smells if you look at it and if you look at what it does is first I have put it in a 110 00:15:25,629 --> 00:15:33,129 deep so that it draws me this part of these buttons you see that it is the start add task 111 00:15:33,129 --> 00:15:37,110 visualizar tareas vale 112 00:15:38,190 --> 00:15:44,509 y el huele sabéis que es para hacer una lista y luego los componentes que en 113 00:15:44,509 --> 00:15:50,309 este caso lo pongo de esta forma vale uso el link que ya lo hemos usado para 114 00:15:50,309 --> 00:15:57,210 que cuando haga un clic encima de una de estas opciones me lleve 115 00:15:57,210 --> 00:16:07,350 to the route that we have passed to the parameter you are worth then the link you the link remember that we export it from 116 00:16:10,830 --> 00:16:20,549 here you have it from the real router where it is worth it and then I am doing that well what 117 00:16:20,549 --> 00:16:28,769 me me interesa que veáis es esto es estas llaves es preguntar si estás autenticado o no esta forma 118 00:16:28,769 --> 00:16:35,190 de condicional esta forma de condicional es cuando bueno pues vas a tener las dos opciones 119 00:16:36,610 --> 00:16:42,970 y vas a hacer una cosa u otra veis que he puesto este símbolo vale porque el isa auténtica y con 120 00:16:42,970 --> 00:16:49,429 el signo de interrogación paréntesis luego dos puntos y lo que sería el seno si es verdad si 121 00:16:49,429 --> 00:16:56,450 is a lie, wait for an instruction, then here what I do when I pass this symbol is to 122 00:16:56,450 --> 00:17:02,809 indicate that it is going to be a block of instructions, so here what I am doing is 123 00:17:02,809 --> 00:17:08,569 a conditional is to ask if it is authenticated, yes, then if you are authenticated I want you to show me 124 00:17:08,569 --> 00:17:15,930 these buttons, it is worth the beginning to add tasks and visualize tasks that are the ones that I have right now 125 00:17:15,930 --> 00:17:22,769 if you are not authenticated as it is now, it is worth that they gave it out, you see that it only shows me 126 00:17:22,769 --> 00:17:33,089 to register and see what these are, so this is a very comfortable way and I really like 127 00:17:34,690 --> 00:17:45,210 to show and hide elements, okay in this case of the nap bar then this seems to me that it is 128 00:17:45,930 --> 00:17:55,490 because it is very cool and that if you should use it when making the entire user interface 129 00:17:55,490 --> 00:18:03,029 with the user's graphic interface that I have down here because I have the same thing I have the 130 00:18:03,029 --> 00:18:10,250 is autenticate I have the symbol to tell it that it is going to be a block of options I have the welcome 131 00:18:10,250 --> 00:18:15,170 with the name that now is this is the function that I told you is ok now I explain it to you I have the log 132 00:18:15,170 --> 00:18:26,029 out everything with the link is worth and that's it and well and the image is of the button is with the bat 133 00:18:26,029 --> 00:18:33,529 I am here strange it is worth that it is a mess and if I am not authenticated the only thing that 134 00:18:33,529 --> 00:18:46,130 shows me is the bat that is how you are now then if we log in it is worth it because you are going to show me 135 00:18:46,130 --> 00:18:51,890 because what we have here is welcome with the name 136 00:18:51,890 --> 00:19:00,289 the out the log out button with everything I have put in the class 137 00:19:00,289 --> 00:19:10,769 we are going to put the class well and all these options are worth it does not have 138 00:19:10,769 --> 00:19:14,529 more to me what I was interested in this is this 139 00:19:14,529 --> 00:19:20,349 it is worth it is authentic and that is this form of conditional good and this is the navbar of course 140 00:19:20,349 --> 00:19:27,309 and you can think well and how do you get this navbar to be showing in all the 141 00:19:28,930 --> 00:19:37,690 pages in all of them that it is worth if I leave I have the same if I am going to register I have 142 00:19:37,690 --> 00:19:44,230 the same if I am going to log in to log in I have the same how do I do that I am copying all this code 143 00:19:44,230 --> 00:19:49,329 no lo estoy copiando en las diferentes páginas porque lo que lo que he hecho ha sido dentro de 144 00:19:49,329 --> 00:19:57,349 componentes un fichero que se llama navar punto jsx vale y no y por ahora pues no he hecho nada 145 00:19:57,349 --> 00:20:11,930 más entonces esto es interesante si venimos a app jsx fijaros en esto navar vale navar qué es 146 00:20:11,930 --> 00:20:22,309 we are going to see is how I export it ok then look at how the whole issue of 147 00:20:28,849 --> 00:20:35,509 to see that I see it this ok I did not see it the real router don this allows me to do it and that is very 148 00:20:35,509 --> 00:20:45,230 powerful, that is, it does not only allow me to create the contexts, create the protected routes, it does not allow me to do 149 00:20:45,230 --> 00:20:49,509 this type of thing, it allows me to do this type of components as is the case of the 150 00:20:49,509 --> 00:20:58,230 not bad and then call it ok then when you call it all the routes that are down here 151 00:20:58,230 --> 00:21:10,470 van a visualizar es en la paz vale esto y esto es interesante a mí me parece me parece muy muy muy 152 00:21:10,470 --> 00:21:23,170 interesante vale y una forma de reutilización de código vale bueno si os fijáis este main que he 153 00:21:23,170 --> 00:21:27,009 also put here that this one does have to be closed when we 154 00:21:30,170 --> 00:21:37,930 encompass a series of routes, this mail is still a container that the real router don also allows me, 155 00:21:37,930 --> 00:21:48,109 so it is a container in which I have told him, okay, here you are going to make me a 156 00:21:48,109 --> 00:21:56,750 container and you are going to put the mx auto and the px 10 what I am telling you is the size that I want 157 00:21:56,750 --> 00:22:02,990 me to occupy these margins, it is worth that there is to the left to the right, well, I put this size in it, 158 00:22:02,990 --> 00:22:15,480 this is not that it is mandatory, it is to leave it with everything as more organized, it is worth remembering if it is 159 00:22:15,480 --> 00:22:25,740 containing everything that is shown on the page of all these routes it is worth if we put it here to see it 160 00:22:28,240 --> 00:22:33,180 bg 161 00:22:40,009 --> 00:22:54,299 now it is worth looking at how it is responding how the container is and how it is getting into x 162 00:22:54,299 --> 00:23:04,200 these margins of 10, the margin in x is put in automatic too, well this is the padding, 163 00:23:04,200 --> 00:23:09,839 sorry, this is the padding in 10, but the margin if it is being put in, it is being adjusted, it is worth 164 00:23:09,839 --> 00:23:19,059 then it is a way of making a container within all these routes, which is usually done, 165 00:23:19,059 --> 00:23:25,240 ok and it is nothing more than a container that as you see as you will see in the whole topic of 166 00:23:25,240 --> 00:23:31,119 graphic interfaces the containers are always important in the end this is the parent container 167 00:23:31,119 --> 00:23:36,460 each of the cards is a container that has all the text and all the information of each 168 00:23:36,460 --> 00:23:42,119 of the tasks of the tasks is worth the navbar is a container that will contain the different 169 00:23:42,119 --> 00:23:48,900 that then I group them and with the justifies between I distribute them between all this space 170 00:23:48,900 --> 00:23:56,279 in the end I am all the time working with containers ok then it is important we are going to 171 00:23:56,279 --> 00:24:14,220 remove this and it is a bit horrible ok and well in principle it would already be like that what I 172 00:24:14,220 --> 00:24:19,980 I was saying if I go to api I have also created here 173 00:24:20,700 --> 00:24:28,000 no no I have not created it, okay if we come to the back-end 174 00:24:28,000 --> 00:24:35,079 we have the lockout base, that is, we could go against the back-end that calls 175 00:24:35,079 --> 00:24:38,779 to lockout lockout 176 00:24:38,779 --> 00:24:46,880 that is, it is importing it from the out controller then the out controller you have here the 177 00:24:46,880 --> 00:24:56,759 log out that would be this this arrow function is worth what it is what it is returning to the front a 178 00:24:56,759 --> 00:25:04,460 touch in which it is telling it to expire now delete it from here it is basically 179 00:25:04,460 --> 00:25:12,099 lo mismo pero ya me estoy ahorrando la llamada al back-end vale cuando lo puedes hacer de una 180 00:25:12,099 --> 00:25:27,559 forma más simple desde el from vale entonces bueno pues vamos a venir aquí esto es 181 00:25:27,559 --> 00:25:41,000 part of this interface that I asked you yesterday that you made me, okay, I understand that if with what I have 182 00:25:41,000 --> 00:25:49,099 shown you, you should be able to do it, okay, then, well, try it, 183 00:25:49,099 --> 00:25:56,559 do it and any questions you ask me, a greeting guys, see you later