1
00:00:02,160 --> 00:00:06,860
well in this video we are going to continue recording working on the issue of tasks,

2
00:00:06,860 --> 00:00:21,120
okay, yesterday what we did was that we logged in, for example, okay, once we logged in,

3
00:00:21,120 --> 00:00:36,530
I was already allowed to add a task videos, for example, okay, we added the task and now

4
00:00:36,530 --> 00:00:46,429
if we came to mongo express we could see it ok here we had it now it has two tasks

5
00:00:46,429 --> 00:00:53,210
well everything works fine what are we going to do in this video well on the one hand to show the

6
00:00:53,210 --> 00:01:01,929
different tasks that are associated with the user who has logged in on the other hand to this

7
00:01:01,929 --> 00:01:09,750
log in and have to come add tasks and then we are going to put it is in navigate with the use effect

8
00:01:11,150 --> 00:01:19,489
and that once we log in it takes us to the tasks of that user, it is worth or once we register

9
00:01:20,930 --> 00:01:29,250
because it takes us to this window to add a new task, it is a bit good because that I am going to

10
00:01:29,250 --> 00:01:38,849
to visualize the tasks without giving it a format and that I am going to leave it to you so that you can also

11
00:01:38,849 --> 00:01:45,250
trace a little with the tailwind and see if you are able to get it out, the idea is to make different

12
00:01:45,250 --> 00:01:53,430
cards to show each of the tasks, it is worth giving that format to the faces, remember because

13
00:01:53,430 --> 00:01:58,530
they are rectangles like this one that the task will appear inside the title and the description

14
00:01:58,530 --> 00:02:05,409
ok we could put the images well there you have to go to the tailwind look for the example that

15
00:02:05,409 --> 00:02:13,949
they give you of the card and work on it ok well then let's go for our code

16
00:02:16,229 --> 00:02:24,069
that we are already yes ok and then well what is the first thing we have to do we want to show

17
00:02:24,069 --> 00:02:29,750
the tasks associated with a certain user. We know from the previous video that the context

18
00:02:29,750 --> 00:02:34,889
of the tasks is already within the context of the user. So when I want to

19
00:02:37,569 --> 00:02:43,009
show the tasks of that logged user, the first thing we have to do is

20
00:02:43,009 --> 00:02:49,930
a connection via Axios with the backend, launch a consultation that we have already developed,

21
00:02:49,930 --> 00:02:56,110
to collect the result that would be all the tasks assigned to that user and show them

22
00:02:56,110 --> 00:03:01,509
ok then the first thing I am going to do is in this task file that we created in the last video

23
00:03:02,889 --> 00:03:11,009
we are going to create we are going to put another entry that is going to be for example it is because of tasks

24
00:03:11,009 --> 00:03:19,789
request to be as always this is going to be the same as we are not going to receive anything because we do not

25
00:03:19,789 --> 00:03:24,689
send information to the bucket, the only thing we do is information from the bucket

26
00:03:26,310 --> 00:03:36,270
and what we tell him is what I want is instance point get ok because we are going to insist we are going to

27
00:03:36,270 --> 00:03:49,189
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

28
00:03:49,189 --> 00:04:04,610
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

29
00:04:04,610 --> 00:04:12,550
information that is the one that I have to collect and show it because on the page to show those

30
00:04:12,550 --> 00:04:22,610
tasks is worth on the task page that we have called here task page is worth here we would show everything

31
00:04:24,930 --> 00:04:27,850
and what is inside this

32
00:04:27,850 --> 00:04:36,050
these are worth here before I was wrong the file that we have to see is a pp js

33
00:04:37,529 --> 00:04:48,550
sorry this is root and this is ok that you are ok it is this ok then

34
00:04:50,689 --> 00:04:55,730
what are we going to do now because let's go to our context in our context in the file

35
00:04:55,730 --> 00:05:03,589
that we did yesterday of the task context point jsx because just as we have the create task function

36
00:05:03,589 --> 00:05:07,870
what we will have to do is create another one that is

37
00:05:11,129 --> 00:05:15,129
because I do not know you call it a little as you

38
00:05:17,850 --> 00:05:26,220
want, for example we can call it we could call it that you are ready

39
00:05:27,040 --> 00:05:36,540
we are going to call it ready then with we are going to put the name is worth the one that you want

40
00:05:37,800 --> 00:05:44,279
to put this list is the same as it is a call without it is worth

41
00:05:46,279 --> 00:05:57,129
this is our arrow function and here as well as always it is worth how we go against the database

42
00:05:57,129 --> 00:06:00,850
data base that I would also have to have done here in the credits, well, do it

43
00:06:00,850 --> 00:06:06,529
yourself, it is worth remembering to always put the trade and the cat is here

44
00:06:06,529 --> 00:06:12,629
three in the trade that is what we are going to put in it because one with three what is

45
00:06:12,629 --> 00:06:18,410
always worth the water for that we have put the asynchronous and remember that

46
00:06:18,410 --> 00:06:23,829
whenever we go against our database always play with this that

47
00:06:23,829 --> 00:06:31,569
errors can occur with a certain ease, the get task request is worth it, which is the one we just

48
00:06:31,569 --> 00:06:51,189
did and this one is worth it, I already have it here, you get the request, you get the request, where are you

49
00:06:51,189 --> 00:06:59,569
here he has already put it directly, okay, so what can we do, for example, with this one, well, well,

50
00:07:01,990 --> 00:07:10,870
put these tasks that the back-end will return to me, it is worth from this function that with axios it

51
00:07:10,870 --> 00:07:16,569
will communicate to the back-end and it will return all the tasks associated with that user to that

52
00:07:16,569 --> 00:07:22,829
logged user, because we will have to save this in task, it is worth that for that we have done it

53
00:07:22,829 --> 00:07:28,569
and we have put it as an empty object, an empty arrangement, it is worth then that we are going to put here

54
00:07:31,370 --> 00:07:33,089
you are

55
00:07:35,089 --> 00:07:35,990
this

56
00:07:38,410 --> 00:07:45,850
we are going to pass the res which is the answer and data is worth because the data always goes in data

57
00:07:45,850 --> 00:07:53,949
is worth if you want to be exceptional about this with that you put a console point the networks you are going to see

58
00:07:53,949 --> 00:08:04,110
that in the terminal in everything that returns you are going to have that I will say that result is worth remembering

59
00:08:04,110 --> 00:08:14,709
with the data with the head with all that kind of things is worth then we have this I need

60
00:08:14,709 --> 00:08:31,949
and then we are going to put this and here if an error occurs that it shows us by console and that's it

61
00:08:33,210 --> 00:08:41,269
and that's it, with that we would already have the same as we had our create task function, we already

62
00:08:41,269 --> 00:08:47,590
we have the one to list the tasks, of course we have to export it so that it can be used

63
00:08:47,590 --> 00:08:57,309
from the context ok and in the part of the context because we would already have it right now we have

64
00:08:57,309 --> 00:09:03,929
this arrow function to create the tasks this arrow function to

65
00:09:03,929 --> 00:09:15,330
collect all the tasks associated with that user and that they do not show it to us, okay, let's

66
00:09:15,330 --> 00:09:52,769
put it since we are here too, the train is worth it to have everything well put, okay, this is what

67
00:09:52,769 --> 00:10:01,690
said that we had to have put it yesterday it left me we already have it ok we have exported it

68
00:10:01,690 --> 00:10:08,669
we have imported it up here the function of the get tax from tax.js is valid from this

69
00:10:08,669 --> 00:10:15,929
perfect file because now let's go to the task page page ok because now we already know that this

70
00:10:15,929 --> 00:10:24,789
is within the context then from task page because we have to be able to use that information

71
00:10:24,789 --> 00:10:42,220
we are going to first import the just as it is worth it already tells us here from the context we are going to

72
00:10:42,220 --> 00:10:55,179
import the effect by what I tell you because what we are going to do is that every time this page is loaded

73
00:10:55,179 --> 00:11:03,820
we are going to check if there are some tasks in the context so that it shows us all that we

74
00:11:03,820 --> 00:11:08,620
do through the joseph it is worth remembering that with the use effect what it does is a

75
00:11:08,620 --> 00:11:15,759
check on the entire page or on certain variables that we tell it to evaluate

76
00:11:15,759 --> 00:11:22,620
if there is a change in those variables because then you reload the information ok then

77
00:11:22,620 --> 00:11:33,580
here we are going to put the use effect from react ok and we have the task page function ok we have

78
00:11:33,580 --> 00:11:49,490
here constant and we are going to bring lists as we have called it before

79
00:11:51,549 --> 00:12:02,629
where it is credits lists finished in is ok then we are going to bring lists and maybe

80
00:12:02,629 --> 00:12:26,720
minúscula vale vale esto no me lo traigo de este ellos desde justas vale porque vamos a

81
00:12:26,720 --> 00:12:32,840
vamos a llamar a listas para que nos muestre todas esas tareas y luego atas vale entonces

82
00:12:32,840 --> 00:12:40,820
yo tengo esto vale lo que os decía vamos a hacer que cada vez que se cargue esta página me muestre

83
00:12:40,820 --> 00:12:48,500
or evaluate if there are tasks and show them ok then the first thing I am going to put here is the joseph

84
00:12:50,080 --> 00:12:55,500
you already know that the use effect because it always has those input parameters

85
00:12:57,500 --> 00:12:59,580
has its arrow function

86
00:12:59,580 --> 00:13:13,200
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

87
00:13:13,200 --> 00:13:21,480
variable in general, in particular, I want it to be when there is a change in the context on the page, it

88
00:13:21,480 --> 00:13:27,019
is worth in the list or in the task then when there is a change in this case in any in this case

89
00:13:27,019 --> 00:13:34,039
in the task obviously because lists what it does is play contracts then you reload the whole

90
00:13:34,039 --> 00:13:44,700
page ok then in the use effect to leave a space that I do not know a lot of everything in the use effect

91
00:13:46,139 --> 00:13:54,259
what I am going to say is ok because if a change occurs it calls lists again

92
00:13:54,259 --> 00:14:04,019
to make the connection with the backend, re-collect all the information and

93
00:14:04,019 --> 00:14:12,440
reload it. We have the return, we have the div, and what are we going to do in the div? Well,

94
00:14:12,440 --> 00:14:20,059
in task we know that it is an array, so what I have to do is

95
00:14:20,059 --> 00:14:26,620
go through that array that will have all the tasks of the logged user remember that is worth

96
00:14:26,620 --> 00:14:33,259
then that array the way to go through it is with it is mapping it is with the point map

97
00:14:33,259 --> 00:14:41,879
ok then what am I going to put on it because I am going to delete this ok we are going to put

98
00:14:41,879 --> 00:14:53,840
after the div a key to execute our code, whatever it is, and here we are going to put the task.map

99
00:15:01,909 --> 00:15:15,039
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

100
00:15:15,039 --> 00:15:22,899
o me vas a ir creando la etiqueta de por cada una de las tareas ojo vale para que nos las haga por

101
00:15:22,899 --> 00:15:30,519
separado que es aquí donde vosotros tendréis que actuar para hacer esas tarjetas vale cuidado y

102
00:15:30,519 --> 00:15:37,519
eye with that I can pass it to you here which is the same as

103
00:15:37,519 --> 00:15:44,240
you are point

104
00:15:45,240 --> 00:15:53,799
I am missing the keys you are point and a low and it is worth that it is how it saves me

105
00:15:55,120 --> 00:15:58,320
the register

106
00:15:58,320 --> 00:16:10,379
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

107
00:16:10,379 --> 00:16:17,639
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

108
00:16:17,639 --> 00:16:27,200
the end I will have to be able to access any of these data is worth more things

109
00:16:27,200 --> 00:16:37,279
ok we have then the tax and here I am going to tell you that within this type well we are going to see

110
00:16:44,480 --> 00:16:51,139
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

111
00:16:51,139 --> 00:16:55,399
you to change this, try to make the cards yourself, although in the next video I will

112
00:16:55,399 --> 00:17:01,460
teach you how I do it too and I also tell you well, how it has been for me and to see

113
00:17:01,460 --> 00:17:07,079
how it is for you, it is worth then what I tell you because the task is worth because each of the

114
00:17:07,079 --> 00:17:14,339
records that you are finding you put them in tasks then I tell you show me the title title is worth

115
00:17:14,339 --> 00:17:28,019
which is what we call it and another h1 show me these point description description is worth

116
00:17:32,019 --> 00:17:44,819
I close keys this is description and title is worth in principle this is mapping it to me and it must

117
00:17:44,819 --> 00:17:51,579
to do it, we have our div, the div and we have the default, okay, we already had this,

118
00:17:51,579 --> 00:17:58,799
well, we already have it, our page should already do it for us, okay, what else can we

119
00:17:58,799 --> 00:18:06,039
lack when it comes to showing all that information, well, in principle, nothing because we already have

120
00:18:06,039 --> 00:18:11,559
that, it is worth the page, the space, we are going to try it, we are going to be logged that we had already

121
00:18:11,559 --> 00:18:18,829
logged before if I enter now here in tasks

122
00:18:18,829 --> 00:18:24,369
ok you see that it shows me we are going to put you

123
00:18:24,369 --> 00:18:33,670
so you see it better you see that it shows me test 1 the title test 1 and the text that

124
00:18:33,670 --> 00:18:40,569
corresponds to this test 1 you see that it shows me videos and

125
00:18:40,569 --> 00:18:46,269
y terminar los vídeos esta semana que sería la segunda tarea vale me muestra estas dos tareas

126
00:18:46,269 --> 00:18:51,269
que son las que tenemos con este usuario aquí metidas vale con el mismo usuario

127
00:18:52,569 --> 00:19:06,200
aquí están con el 671 el user si yo ahora cojo no sé si tenemos más usuarios aquí

128
00:19:08,259 --> 00:19:09,619
vamos a ver yo sé

129
00:19:09,619 --> 00:19:16,220
ok we are going to create another user then we are going to

130
00:19:18,380 --> 00:19:29,029
first put this back to 100% ok we are going to register another one here it has gone to see

131
00:19:30,230 --> 00:19:37,190
it is registered ok it goes away because ah because it has because it is logged ok we are going to

132
00:19:37,190 --> 00:19:44,569
take more tools we are going to come to the application development tool and we are going to

133
00:19:44,569 --> 00:19:52,029
delete the touch in which that is why it does not leave me ready to register and now we are going to put

134
00:19:52,029 --> 00:20:03,069
here because carolina carolina 1 2 3 4 5 and 6 and register ok now I am registered with carolina

135
00:20:03,069 --> 00:20:18,180
if I go to task now I do not get anything ok then we are going to come to the beginning

136
00:20:19,859 --> 00:20:31,579
add homework and here we are going to put the beginning of the course

137
00:20:31,579 --> 00:20:54,400
the next day 13 of September, we are waiting for you in the Villablanca, okay, I add that task, if now I go

138
00:20:54,400 --> 00:21:06,019
to task, the task of Carolina only appears to me, okay, so well, everything works for us

139
00:21:06,019 --> 00:21:12,259
well, it discriminates it well according to the logged user because everything is working well for us now

140
00:21:12,259 --> 00:21:20,180
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

141
00:21:20,180 --> 00:21:28,779
ok with cards ok what else had we said that we were going to do good because not having to be going

142
00:21:28,779 --> 00:21:37,319
to go pressing these buttons up here but if I log in because it directly takes me to

143
00:21:39,319 --> 00:21:45,299
well in this case if I log in is that I can already have tasks so it takes me for example directly

144
00:21:45,299 --> 00:21:51,160
to task to add this is worth then we are going to do that then log in because we go to the

145
00:21:51,160 --> 00:22:03,160
page of the login page ok there we had the form ok we are going to do a we are going to use a

146
00:22:03,160 --> 00:22:11,740
use effect to do that ok and we are going to use the navigate then the navigate we already have it here

147
00:22:13,400 --> 00:22:20,059
and the use effect because we can put it for example here under the summit ok then

148
00:22:20,059 --> 00:22:33,339
we are going to put the useEffect, the input parameter none, okay, we are going to tell it to control us,

149
00:22:33,339 --> 00:22:42,079
because if you want we can use the state variable of isAuthenticate, okay, that is why

150
00:22:42,079 --> 00:22:51,059
the roll of how even is also important, how I am associating those contexts, okay, and remember that

151
00:22:51,059 --> 00:22:57,180
the contexts you can have all you want, okay, well then we can tell it today if it is

152
00:22:57,180 --> 00:23:04,920
like this and it is authentic that I remember it is a state variable that was of a boolean type and that

153
00:23:04,920 --> 00:23:14,220
told us if there was one that was true if there was a cookie called touch for false if not

154
00:23:14,220 --> 00:23:24,000
ok then if you are already logged what this is here what I want you to do is go

155
00:23:24,000 --> 00:23:34,640
ok if you are if you are true but what I want you to do is navigate navigate

156
00:23:39,579 --> 00:23:48,759
you are ok then we are going to try this

157
00:23:50,980 --> 00:24:02,210
Let's go to our page and we're going to delete the token again, this one out, out, okay.

158
00:24:03,589 --> 00:24:17,960
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?

159
00:24:17,960 --> 00:24:25,400
that I insist on cards I want cards I want it to be nice ok and always following the format

160
00:24:25,400 --> 00:24:31,720
of the other interfaces that we have been doing of the other pages ok ok this in terms of

161
00:24:31,720 --> 00:24:41,000
if I am going to log in and if I register ok if I register because there is no I cannot have tasks

162
00:24:41,000 --> 00:24:48,599
because I just registered, then this useEffect, which we can use the same,

163
00:24:48,599 --> 00:24:54,880
we are going to open the page, the register page file, and here, well, the same,

164
00:24:54,880 --> 00:25:01,930
if you want, down here, we say, okay, if it exists, if you are authenticated,

165
00:25:01,930 --> 00:25:10,210
now, instead of taking me here, take me to add-task, which I think was like this.

166
00:25:10,210 --> 00:25:18,170
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

167
00:25:19,930 --> 00:25:29,359
worth then with this if I come now to register we are going to have to do a

168
00:25:29,359 --> 00:25:38,160
log out it would be fine we are going to more tools development tools to erase this

169
00:25:38,160 --> 00:25:45,960
ready then I come to register username we are going to put there is no one because we are going to put

170
00:25:45,960 --> 00:25:56,460
francisco for example we are going to put francisco at the time of educa.madrid.org

171
00:25:57,460 --> 00:26:07,559
2345 and 6 ok I give it to register ok save and it takes me directly to add tasks

172
00:26:07,559 --> 00:26:20,720
so here if we start to put the task whatever it is, well, here it would be nailed,

173
00:26:20,720 --> 00:26:26,640
then we would also have to tell him or put another button that would show all the tasks or something

174
00:26:26,640 --> 00:26:33,000
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

175
00:26:33,000 --> 00:26:37,720
walking to one side or the other depending on whether we are being logged or not, so for the

176
00:26:37,720 --> 00:26:48,259
next video what I want is that you try to make the cards for him the listing of the

177
00:26:48,259 --> 00:26:54,119
different tasks of the user that is logged well a greeting guys see you later