Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Back end Vs Front end - Vídeo 35 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 25 de agosto de 2024 por Mario S.

34 visualizaciones

Creando la página de listado de tareas de cada uno de los usuarios logeados TaskPage.jsx. Utilizando Navigate para mostrar las diferentes interfaces.

Más información Transcripción

Descargar la transcripción

well in this video we are going to continue recording working on the issue of tasks, 00:00:02
okay, yesterday what we did was that we logged in, for example, okay, once we logged in, 00:00:06
I was already allowed to add a task videos, for example, okay, we added the task and now 00:00:21
if we came to mongo express we could see it ok here we had it now it has two tasks 00:00:36
well everything works fine what are we going to do in this video well on the one hand to show the 00:00:46
different tasks that are associated with the user who has logged in on the other hand to this 00:00:53
log in and have to come add tasks and then we are going to put it is in navigate with the use effect 00:01:01
and that once we log in it takes us to the tasks of that user, it is worth or once we register 00:01:11
because it takes us to this window to add a new task, it is a bit good because that I am going to 00:01:20
to visualize the tasks without giving it a format and that I am going to leave it to you so that you can also 00:01:29
trace a little with the tailwind and see if you are able to get it out, the idea is to make different 00:01:38
cards to show each of the tasks, it is worth giving that format to the faces, remember because 00:01:45
they are rectangles like this one that the task will appear inside the title and the description 00:01:53
ok we could put the images well there you have to go to the tailwind look for the example that 00:01:58
they give you of the card and work on it ok well then let's go for our code 00:02:05
that we are already yes ok and then well what is the first thing we have to do we want to show 00:02:16
the tasks associated with a certain user. We know from the previous video that the context 00:02:24
of the tasks is already within the context of the user. So when I want to 00:02:29
show the tasks of that logged user, the first thing we have to do is 00:02:37
a connection via Axios with the backend, launch a consultation that we have already developed, 00:02:43
to collect the result that would be all the tasks assigned to that user and show them 00:02:49
ok then the first thing I am going to do is in this task file that we created in the last video 00:02:56
we are going to create we are going to put another entry that is going to be for example it is because of tasks 00:03:02
request to be as always this is going to be the same as we are not going to receive anything because we do not 00:03:11
send information to the bucket, the only thing we do is information from the bucket 00:03:19
and what we tell him is what I want is instance point get ok because we are going to insist we are going to 00:03:26
information and the only thing I do is pass it task this I do not remember if it is in plural or not so we 00:03:36
go to pp js x and task is finished in that ok well you are finished in that ok with this I am going to receive that 00:03:49
information that is the one that I have to collect and show it because on the page to show those 00:04:04
tasks is worth on the task page that we have called here task page is worth here we would show everything 00:04:12
and what is inside this 00:04:24
these are worth here before I was wrong the file that we have to see is a pp js 00:04:27
sorry this is root and this is ok that you are ok it is this ok then 00:04:37
what are we going to do now because let's go to our context in our context in the file 00:04:50
that we did yesterday of the task context point jsx because just as we have the create task function 00:04:55
what we will have to do is create another one that is 00:05:03
because I do not know you call it a little as you 00:05:11
want, for example we can call it we could call it that you are ready 00:05:17
we are going to call it ready then with we are going to put the name is worth the one that you want 00:05:27
to put this list is the same as it is a call without it is worth 00:05:37
this is our arrow function and here as well as always it is worth how we go against the database 00:05:46
data base that I would also have to have done here in the credits, well, do it 00:05:57
yourself, it is worth remembering to always put the trade and the cat is here 00:06:00
three in the trade that is what we are going to put in it because one with three what is 00:06:06
always worth the water for that we have put the asynchronous and remember that 00:06:12
whenever we go against our database always play with this that 00:06:18
errors can occur with a certain ease, the get task request is worth it, which is the one we just 00:06:23
did and this one is worth it, I already have it here, you get the request, you get the request, where are you 00:06:31
here he has already put it directly, okay, so what can we do, for example, with this one, well, well, 00:06:51
put these tasks that the back-end will return to me, it is worth from this function that with axios it 00:07:01
will communicate to the back-end and it will return all the tasks associated with that user to that 00:07:10
logged user, because we will have to save this in task, it is worth that for that we have done it 00:07:16
and we have put it as an empty object, an empty arrangement, it is worth then that we are going to put here 00:07:22
you are 00:07:31
this 00:07:35
we are going to pass the res which is the answer and data is worth because the data always goes in data 00:07:38
is worth if you want to be exceptional about this with that you put a console point the networks you are going to see 00:07:45
that in the terminal in everything that returns you are going to have that I will say that result is worth remembering 00:07:53
with the data with the head with all that kind of things is worth then we have this I need 00:08:04
and then we are going to put this and here if an error occurs that it shows us by console and that's it 00:08:14
and that's it, with that we would already have the same as we had our create task function, we already 00:08:33
we have the one to list the tasks, of course we have to export it so that it can be used 00:08:41
from the context ok and in the part of the context because we would already have it right now we have 00:08:47
this arrow function to create the tasks this arrow function to 00:08:57
collect all the tasks associated with that user and that they do not show it to us, okay, let's 00:09:03
put it since we are here too, the train is worth it to have everything well put, okay, this is what 00:09:15
said that we had to have put it yesterday it left me we already have it ok we have exported it 00:09:52
we have imported it up here the function of the get tax from tax.js is valid from this 00:10:01
perfect file because now let's go to the task page page ok because now we already know that this 00:10:08
is within the context then from task page because we have to be able to use that information 00:10:15
we are going to first import the just as it is worth it already tells us here from the context we are going to 00:10:24
import the effect by what I tell you because what we are going to do is that every time this page is loaded 00:10:42
we are going to check if there are some tasks in the context so that it shows us all that we 00:10:55
do through the joseph it is worth remembering that with the use effect what it does is a 00:11:03
check on the entire page or on certain variables that we tell it to evaluate 00:11:08
if there is a change in those variables because then you reload the information ok then 00:11:15
here we are going to put the use effect from react ok and we have the task page function ok we have 00:11:22
here constant and we are going to bring lists as we have called it before 00:11:33
where it is credits lists finished in is ok then we are going to bring lists and maybe 00:11:51
minúscula vale vale esto no me lo traigo de este ellos desde justas vale porque vamos a 00:12:02
vamos a llamar a listas para que nos muestre todas esas tareas y luego atas vale entonces 00:12:26
yo tengo esto vale lo que os decía vamos a hacer que cada vez que se cargue esta página me muestre 00:12:32
or evaluate if there are tasks and show them ok then the first thing I am going to put here is the joseph 00:12:40
you already know that the use effect because it always has those input parameters 00:12:50
has its arrow function 00:12:57
ok, what we are going to tell him is what I want you to evaluate me is, well, I'm not going to pass you any 00:12:59
variable in general, in particular, I want it to be when there is a change in the context on the page, it 00:13:13
is worth in the list or in the task then when there is a change in this case in any in this case 00:13:21
in the task obviously because lists what it does is play contracts then you reload the whole 00:13:27
page ok then in the use effect to leave a space that I do not know a lot of everything in the use effect 00:13:34
what I am going to say is ok because if a change occurs it calls lists again 00:13:46
to make the connection with the backend, re-collect all the information and 00:13:54
reload it. We have the return, we have the div, and what are we going to do in the div? Well, 00:14:04
in task we know that it is an array, so what I have to do is 00:14:12
go through that array that will have all the tasks of the logged user remember that is worth 00:14:20
then that array the way to go through it is with it is mapping it is with the point map 00:14:26
ok then what am I going to put on it because I am going to delete this ok we are going to put 00:14:33
after the div a key to execute our code, whatever it is, and here we are going to put the task.map 00:14:41
and here we are going to tell it ok because with the tasks what I want you to do is you are going to put me 00:15:01
o me vas a ir creando la etiqueta de por cada una de las tareas ojo vale para que nos las haga por 00:15:15
separado que es aquí donde vosotros tendréis que actuar para hacer esas tarjetas vale cuidado y 00:15:22
eye with that I can pass it to you here which is the same as 00:15:30
you are point 00:15:37
I am missing the keys you are point and a low and it is worth that it is how it saves me 00:15:45
the register 00:15:55
in mongo it is worth if you look at it you see it has here I am going to put it a moment it has here the field 00:15:58
that is under and it is worth down here it is worth there then that is why I call it the task and because at 00:16:10
the end I will have to be able to access any of these data is worth more things 00:16:17
ok we have then the tax and here I am going to tell you that within this type well we are going to see 00:16:27
we are going to tell you that within this you are going to put me in, for example, I already tell you that I want 00:16:44
you to change this, try to make the cards yourself, although in the next video I will 00:16:51
teach you how I do it too and I also tell you well, how it has been for me and to see 00:16:55
how it is for you, it is worth then what I tell you because the task is worth because each of the 00:17:01
records that you are finding you put them in tasks then I tell you show me the title title is worth 00:17:07
which is what we call it and another h1 show me these point description description is worth 00:17:14
I close keys this is description and title is worth in principle this is mapping it to me and it must 00:17:32
to do it, we have our div, the div and we have the default, okay, we already had this, 00:17:44
well, we already have it, our page should already do it for us, okay, what else can we 00:17:51
lack when it comes to showing all that information, well, in principle, nothing because we already have 00:17:58
that, it is worth the page, the space, we are going to try it, we are going to be logged that we had already 00:18:06
logged before if I enter now here in tasks 00:18:11
ok you see that it shows me we are going to put you 00:18:18
so you see it better you see that it shows me test 1 the title test 1 and the text that 00:18:24
corresponds to this test 1 you see that it shows me videos and 00:18:33
y terminar los vídeos esta semana que sería la segunda tarea vale me muestra estas dos tareas 00:18:40
que son las que tenemos con este usuario aquí metidas vale con el mismo usuario 00:18:46
aquí están con el 671 el user si yo ahora cojo no sé si tenemos más usuarios aquí 00:18:52
vamos a ver yo sé 00:19:08
ok we are going to create another user then we are going to 00:19:09
first put this back to 100% ok we are going to register another one here it has gone to see 00:19:18
it is registered ok it goes away because ah because it has because it is logged ok we are going to 00:19:30
take more tools we are going to come to the application development tool and we are going to 00:19:37
delete the touch in which that is why it does not leave me ready to register and now we are going to put 00:19:44
here because carolina carolina 1 2 3 4 5 and 6 and register ok now I am registered with carolina 00:19:52
if I go to task now I do not get anything ok then we are going to come to the beginning 00:20:03
add homework and here we are going to put the beginning of the course 00:20:19
the next day 13 of September, we are waiting for you in the Villablanca, okay, I add that task, if now I go 00:20:31
to task, the task of Carolina only appears to me, okay, so well, everything works for us 00:20:54
well, it discriminates it well according to the logged user because everything is working well for us now 00:21:06
what I want you to do is that this information does not show it to us so that it shows it to us with cards 00:21:12
ok with cards ok what else had we said that we were going to do good because not having to be going 00:21:20
to go pressing these buttons up here but if I log in because it directly takes me to 00:21:28
well in this case if I log in is that I can already have tasks so it takes me for example directly 00:21:39
to task to add this is worth then we are going to do that then log in because we go to the 00:21:45
page of the login page ok there we had the form ok we are going to do a we are going to use a 00:21:51
use effect to do that ok and we are going to use the navigate then the navigate we already have it here 00:22:03
and the use effect because we can put it for example here under the summit ok then 00:22:13
we are going to put the useEffect, the input parameter none, okay, we are going to tell it to control us, 00:22:20
because if you want we can use the state variable of isAuthenticate, okay, that is why 00:22:33
the roll of how even is also important, how I am associating those contexts, okay, and remember that 00:22:42
the contexts you can have all you want, okay, well then we can tell it today if it is 00:22:51
like this and it is authentic that I remember it is a state variable that was of a boolean type and that 00:22:57
told us if there was one that was true if there was a cookie called touch for false if not 00:23:04
ok then if you are already logged what this is here what I want you to do is go 00:23:14
ok if you are if you are true but what I want you to do is navigate navigate 00:23:24
you are ok then we are going to try this 00:23:39
Let's go to our page and we're going to delete the token again, this one out, out, okay. 00:23:50
So if I come and log in, I log in like Mario, it already takes me to the task page and shows me my tasks, okay? 00:24:03
that I insist on cards I want cards I want it to be nice ok and always following the format 00:24:17
of the other interfaces that we have been doing of the other pages ok ok this in terms of 00:24:25
if I am going to log in and if I register ok if I register because there is no I cannot have tasks 00:24:31
because I just registered, then this useEffect, which we can use the same, 00:24:41
we are going to open the page, the register page file, and here, well, the same, 00:24:48
if you want, down here, we say, okay, if it exists, if you are authenticated, 00:24:54
now, instead of taking me here, take me to add-task, which I think was like this. 00:25:01
we are going to see it this we have it in the pp js x is adr half tasks without it is worth so it is 00:25:10
worth then with this if I come now to register we are going to have to do a 00:25:19
log out it would be fine we are going to more tools development tools to erase this 00:25:29
ready then I come to register username we are going to put there is no one because we are going to put 00:25:38
francisco for example we are going to put francisco at the time of educa.madrid.org 00:25:45
2345 and 6 ok I give it to register ok save and it takes me directly to add tasks 00:25:57
so here if we start to put the task whatever it is, well, here it would be nailed, 00:26:07
then we would also have to tell him or put another button that would show all the tasks or something 00:26:20
like that, okay, although it will directly show you the tasks, well, this is already a bit to see it and see how they go 00:26:26
walking to one side or the other depending on whether we are being logged or not, so for the 00:26:33
next video what I want is that you try to make the cards for him the listing of the 00:26:37
different tasks of the user that is logged well a greeting guys see you later 00:26:48
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
34
Fecha:
25 de agosto de 2024 - 19:52
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 14″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
81.35 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid