1
00:00:02,029 --> 00:00:12,029
well in this video what we are going to do is the part of the tasks I have modified this entry

2
00:00:12,029 --> 00:00:19,710
add tasks and what we are going to do is the form to be able to add a task the structure

3
00:00:19,710 --> 00:00:25,769
the idea of ​​doing this is going to be exactly the same as what we have been working on so far

4
00:00:25,769 --> 00:00:32,909
now we are going to make the page in which instead of a text as we had put that it appears

5
00:00:32,909 --> 00:00:42,450
page of tasks or something like that is worth the task page or something like that we are going to make a page with

6
00:00:42,450 --> 00:00:50,649
its form giving it a good format seeing a little the same thing that we have and following the line

7
00:00:50,649 --> 00:00:57,969
with the different pages that we have been doing, how to register or log in, not the colors,

8
00:00:57,969 --> 00:01:06,969
the sources, I do not know the animations, everything we have seen with the tailwind, well,

9
00:01:06,969 --> 00:01:14,849
that in the development of interfaces, all those that interface line must be followed, okay,

10
00:01:14,849 --> 00:01:23,310
then we are going to do that and we are going to create ourselves because the same as we have done with register and

11
00:01:23,310 --> 00:01:28,670
log in we have created a connection with the back-end

12
00:01:32,250 --> 00:01:37,609
well through axios to be able to connect by activating the credentials remember

13
00:01:37,609 --> 00:01:42,689
all that if it did not give us problems because we are going to do the same with the issue of tasks

14
00:01:42,689 --> 00:01:48,989
remember that it is like the project is the same but they are the two different branches what is the part

15
00:01:48,989 --> 00:01:57,109
of the authentication and the part of the tasks is worth then because we are going to create another

16
00:01:57,109 --> 00:02:06,810
exclusive file for the tasks and this I am going to do it because in the back-end I changed the route

17
00:02:06,810 --> 00:02:18,990
in the api file now we see it change the route for if you remember in the one of the app change

18
00:02:18,990 --> 00:02:30,969
or add to the route for the authentication it was something like villablanca is the dam

19
00:02:30,969 --> 00:02:40,389
or something like that, they give something like that, okay, now we see it and for the tasks it was Villablanca, it is

20
00:02:40,389 --> 00:02:49,930
the dandos, it is the tasks, it is worth something like that, then that will force me to do another file in the

21
00:02:49,930 --> 00:03:01,349
api folder for the task branch of the tasks, okay, what else are we going to do, well, I'm going to

22
00:03:01,349 --> 00:03:05,710
make a context just like I have done with the authentication, I'm going to make a context for the

23
00:03:05,710 --> 00:03:13,990
task theme because in the end we have good those data when adding that task

24
00:03:13,990 --> 00:03:20,129
I can use them later when I want them to be displayed or whatever, then well, there

25
00:03:20,129 --> 00:03:27,009
could be done in different ways, not getting in and working on that connection file with

26
00:03:27,009 --> 00:03:33,229
the backend through axios in each of the pages that we are developing to add tasks,

27
00:03:33,229 --> 00:03:39,169
update tasks, delete tasks, okay, but that obviously is not done like that because then

28
00:03:39,169 --> 00:03:49,689
well, you know that it is one of the standards of the good developer, we do not make a file

29
00:03:49,689 --> 00:03:58,169
and if we can share the information between the different ones in this in this case between the

30
00:03:58,169 --> 00:04:03,750
different pages because we do it like this and that the only way to do it from here is through

31
00:04:03,750 --> 00:04:10,889
of a context that context is going to be within the context of the user and because I am going to do

32
00:04:10,889 --> 00:04:19,050
that because if you remember when we added a task in the back-end we put a title and we put

33
00:04:19,050 --> 00:04:28,050
a description of the task ok the back-end received that information and directly associated that

34
00:04:28,050 --> 00:04:33,490
user id because remember that you have to be logged then it associated the id of the

35
00:04:33,490 --> 00:04:43,970
logged user to that task and it was the way to put each of the users their tasks

36
00:04:43,970 --> 00:04:55,709
ok so that's why I'm going to put the context of the tasks within the context of the authentication

37
00:04:55,709 --> 00:05:02,790
ok good here remember that if for example now I was adding tasks as I am not logged in, he

38
00:05:02,790 --> 00:05:13,199
sent me directly to the login ok at the time in which we log in to log in ok now he

39
00:05:13,199 --> 00:05:19,819
left me ok and took me to the page of tasks good because right now there is nothing ok

40
00:05:19,819 --> 00:05:28,879
then it is about now we are going to work this part is worth then good to tell you I am not going to

41
00:05:28,879 --> 00:05:33,319
put the navbar at least while recording the video so as not to make it either longer than

42
00:05:33,319 --> 00:05:40,319
what it already is, which would be to copy and paste from the others of the home page of the login page or

43
00:05:40,319 --> 00:05:46,879
of the register page, it does not matter, it is good, we are going to start working with this then

44
00:05:46,879 --> 00:06:18,870
Let's go to our code, okay, we're already, yes, yes, well, then I'm going to create the topic of the API first, okay, to have it, well, there it is already created, then the topic of the API, this is what I was telling you, okay, we, when you see the Adam2, when we do this, we have for the whole issue of authentication,

45
00:06:18,870 --> 00:06:25,860
I put in to see if I see it

46
00:06:25,860 --> 00:06:34,759
pps you see I put for the issue of authentication I added this route

47
00:06:34,759 --> 00:06:43,379
villablanca dandos and for the tasks I put the tasks ok then this is

48
00:06:43,379 --> 00:06:46,819
so I'm going to create another file now I could put it all in

49
00:06:46,819 --> 00:06:51,699
dandos and use the same authentication because yes also on the other hand if

50
00:06:51,699 --> 00:06:58,300
you are ordering in different files the two branches of the project because maybe it is clearer

51
00:06:58,300 --> 00:07:06,779
and easier after reading it is worth then this I am going to copy it and we are going to create that

52
00:07:06,779 --> 00:07:13,420
then the first thing I am going to do is good I have this file that I am basically going to do

53
00:07:13,420 --> 00:07:19,660
is the same in which I put the url base which is what I am going to change the wii credential to true

54
00:07:19,660 --> 00:07:28,180
vale y exportamos la instancia vale entonces esto lo voy a coger entero y lo voy a copiar y me voy

55
00:07:28,180 --> 00:07:45,470
a crear aquí un fichero que le voy a llamar pues por ejemplo axios task por ejemplo j s axios estás

56
00:07:47,949 --> 00:07:56,149
y aquí lo voy a pegar vale la conexión a través de axios con axios lo inicializamos y en la base

57
00:07:56,149 --> 00:08:09,740
url I'm going to put the tasks here, okay, we're going to check that that's okay, tasks, tasks in

58
00:08:09,740 --> 00:08:16,720
plural, okay, it's fine, okay, then I already have this file created, I don't do anything else, that's it, that is, the

59
00:08:16,720 --> 00:08:23,060
change would be this if the two of them had left them in Villablanca they give two because I wouldn't

60
00:08:23,060 --> 00:08:30,740
but well, it is not something I follow either, it seems clearer to me to follow those two branches of the

61
00:08:30,740 --> 00:08:41,620
project, it is good and now we have an axis, sorry, an out js, it is worth in the out js we are going to

62
00:08:41,620 --> 00:08:49,220
create the different functions that we are going to do against the backend from the front, in this

63
00:08:49,220 --> 00:08:53,759
case the only thing I am going to do is that of the register something like register task

64
00:08:58,539 --> 00:09:08,220
request or something like that something like that neither is it worth it then if there would be to do others because it is time

65
00:09:08,220 --> 00:09:15,019
to update the task listing the task erasing well but now as I am only going to

66
00:09:15,019 --> 00:09:21,240
do the page to register those tasks because with the request register it is worth it, then

67
00:09:21,240 --> 00:09:31,460
we are going to create another file that we can call, for example, these points js, for example, it is worth a

68
00:09:31,460 --> 00:09:40,370
bit, you already know that you are calling it as you want, what are we going to do here, import this

69
00:09:40,370 --> 00:09:45,950
instance that we have done in axios estás ok then we are going to import

70
00:09:47,889 --> 00:10:01,049
instance from axios estás and it already gives it to me here ok.js ok ok I already have an instance ok

71
00:10:01,049 --> 00:10:09,129
then now what do I want to do the sport comes we call it for example

72
00:10:09,129 --> 00:10:28,840
task request, for example, the create task request, this will have those data that we are going to collect from the

73
00:10:28,840 --> 00:10:36,340
form that we are going to create on the task ad page, so here we are going to collect some

74
00:10:36,340 --> 00:10:44,519
data because we can put it for example because this task is valid and with this we are going to

75
00:10:44,519 --> 00:10:53,559
do our arrow function that what we want is instance point post ok because we are going to send

76
00:10:53,559 --> 00:11:00,600
those data so that they are saved and this is what we are going to send parentheses

77
00:11:00,600 --> 00:11:11,340
key or a double comma key always what you want is worth here the route is

78
00:11:14,200 --> 00:11:17,320
to see I do not remember

79
00:11:19,539 --> 00:11:26,399
the ppj is where this route is routes here

80
00:11:26,399 --> 00:11:39,840
to add the route that you write is ok you are ok then for the same because here we are going to put it

81
00:11:42,279 --> 00:11:50,779
and we are going to pass it as an input parameter ok and we would have made our connection

82
00:11:50,779 --> 00:11:58,179
with the back-end, it would be worth it, it is because we create requests, these responded, then they

83
00:11:58,179 --> 00:12:05,299
sent us information about the task so then we can pick it up and we can print it

84
00:12:05,299 --> 00:12:12,500
and then we would have it in what is the topic of the API of the connection with the back-end done

85
00:12:12,500 --> 00:12:21,019
ok because I'm just going to do the great task request ok well great then what are we going to do now

86
00:12:21,019 --> 00:12:30,740
let's go to our tax page for page here we have good because the page that has nothing

87
00:12:30,740 --> 00:12:43,980
ok and we are going to start making our form ok then what do I have in mind at the time of

88
00:12:43,980 --> 00:12:53,960
making this form well because we are going to use the just form of the react hook form it is worth the same

89
00:12:53,960 --> 00:13:02,600
that we have done on all the pages, so the first thing is the import use for

90
00:13:07,259 --> 00:13:07,820
from

91
00:13:13,450 --> 00:13:26,129
ok ok that will be the first thing we are going to use this use for the react form ok what else are we going to

92
00:13:26,129 --> 00:13:33,889
import? Well, when we do the context we will import it, but for now I think it's

93
00:13:33,889 --> 00:13:40,529
done. Okay, so we have the TaxFormPage function. What are we going to do to be able to

94
00:13:40,529 --> 00:13:50,690
work with the UseForm? Well, as always, it is constant to tell it with what we are going to work

95
00:13:50,690 --> 00:14:01,509
the use for then we are going to work with register to be able to register each one of those fields of

96
00:14:04,309 --> 00:14:17,789
the form the hand with the hand let's see it was his hand let's see it and what else can we need

97
00:14:17,789 --> 00:14:30,629
or I think that nothing else is worth this is the keys and this is the same as the use for

98
00:14:32,409 --> 00:14:39,950
parentheses parentheses and we close ok register now you are going to see it but remember that it was

99
00:14:39,950 --> 00:14:48,610
where we painted the name of the field we could put it that it was required ok the hand submit is

100
00:14:48,610 --> 00:14:52,789
the summit is what I use for

101
00:14:55,309 --> 00:15:00,529
rewriting the summit of the forms that you have seen in the first one, it is worth remembering this,

102
00:15:00,529 --> 00:15:09,159
then what is the first thing I am going to do, create a function that is going to be the home summit that comes

103
00:15:09,159 --> 00:15:15,639
from the hand of the hand the summit is worth then here we are going to put it to leave a little space with

104
00:15:15,639 --> 00:15:25,600
or a summit so that it is called the same as you have seen in the first or if you do not put

105
00:15:25,600 --> 00:15:32,559
the name that is exactly the same there in the hand the summit and in the hand the summit what we are going to

106
00:15:32,559 --> 00:15:39,399
say is first here we are going to collect the data from the form that we are going to do now between

107
00:15:39,399 --> 00:15:43,679
these two types is worth with those data what we are going to do is

108
00:15:47,019 --> 00:16:04,110
open a key in case we visualize something good because we are going to for now we are going to give it

109
00:16:04,110 --> 00:16:11,490
here you could call where you are you are you are request so that I can choose them but

110
00:16:11,490 --> 00:16:16,769
como voy a trabajar con el contexto no lo voy a hacer así lo voy a dejar por ahora vale con

111
00:16:16,769 --> 00:16:29,330
con una visualización de data para que me visualice esos datos según le doy a long

112
00:16:29,330 --> 00:16:39,409
submit al botón del formulario vale vale entonces qué más tengo que hacer ahora

113
00:16:39,409 --> 00:16:53,519
we are going to take and we are going to do our form then this I do not want it at all

114
00:16:53,519 --> 00:17:01,860
and within the div because we are going to build what would be the form the form on summit

115
00:17:02,960 --> 00:17:10,960
and here we are going to call our function, it is worth the one that we have just created here, we are going to

116
00:17:10,960 --> 00:17:23,890
put the same or his is worth what else I can put inside the form because in principle nothing else is

117
00:17:23,890 --> 00:17:31,609
worth I do not need anything else ok we already have our form that two fields we have to

118
00:17:31,609 --> 00:17:41,390
send to the backend to save that task for us because the one that was the title of the task and the

119
00:17:41,390 --> 00:17:56,640
description ok then we put an input of type text an input of type text that we can put a place

120
00:17:56,640 --> 00:18:06,440
holder a place holder that is because that title title or as you want we are going to put

121
00:18:06,440 --> 00:18:17,839
in English everything and that's it. We can put the class name and start passing those classes of

122
00:18:20,079 --> 00:18:26,779
Tailwind. We can put the same ones that we have been using so far.

123
00:18:26,779 --> 00:18:31,700
bg violet and here it was it seems to me 700

124
00:18:36,750 --> 00:18:37,789
we put it

125
00:18:42,230 --> 00:18:48,730
white so that it does not put it in white we put it in the source

126
00:18:48,730 --> 00:18:55,109
what was the text and we told him

127
00:18:57,369 --> 00:19:06,849
there is enough with more work the margins the padding is worth the interior padding in and in x

128
00:19:08,549 --> 00:19:18,309
is worth 4 and 2 that the corners are rounded and we can put a

129
00:19:18,309 --> 00:19:26,589
margin of 2 is worth so that the fields do not stick to us then we are going to put a margin but

130
00:19:26,589 --> 00:19:35,809
only in and so that the different fields do not stick to us, okay and this would be the classes so

131
00:19:35,809 --> 00:19:47,549
I do not forget because none is worth what we put now because we can and add the register

132
00:19:47,549 --> 00:19:52,630
ok that for that we have put it then in the register remember the first thing that happened to him

133
00:19:52,630 --> 00:20:02,509
the name of that field that was going to be title dance the title and I think that with this

134
00:20:04,670 --> 00:20:18,190
it would be worth it we can also pass the autofocus to this one so that every time

135
00:20:18,930 --> 00:20:39,930
every time the page is loaded, this selected field is always going to be first the title and then the rest of the good in this case the other input that is a text area

136
00:20:39,930 --> 00:20:51,609
ok then we go with the text area then the text area will be a text area in

137
00:20:51,609 --> 00:20:57,509
which the only thing that interests me are the rows that I am going to tell you that they are going to

138
00:20:57,509 --> 00:21:11,509
to be 3 is all in quotation marks 3 ok I'm going to pass the placeholder the same as before

139
00:21:13,309 --> 00:21:22,019
here we are going to put a description we are going to pass all this class name

140
00:21:28,519 --> 00:21:33,559
I'm going to pass it as before

141
00:21:36,500 --> 00:21:50,500
Register, in this case it will be called, description, and what else can we need?

142
00:21:50,500 --> 00:21:58,130
Well, nothing more, I think nothing more, okay

143
00:21:58,130 --> 00:22:02,130
And then we would have our title here, which we could put the one that was

144
00:22:02,130 --> 00:22:09,690
and our description that shows us the three lines and if we are not going to get the

145
00:22:09,690 --> 00:22:18,450
displacement bar, it is worth what else we would need in the form the button is worth the button that

146
00:22:18,450 --> 00:22:25,890
we are going to associate through the summit of this function with this call to this function

147
00:22:25,890 --> 00:22:30,690
ok then we are going to put the button

148
00:22:37,809 --> 00:22:40,650
this is

149
00:22:40,809 --> 00:22:43,630
its mit

150
00:22:43,769 --> 00:22:47,069
and we can put it

151
00:22:48,710 --> 00:22:51,630
add

152
00:22:55,480 --> 00:23:01,440
for example to this button we are going to put it too

153
00:23:01,440 --> 00:23:08,440
we are going to put the same thing that we have, for example, in the login

154
00:23:08,440 --> 00:23:10,440
we are going to put it

155
00:23:10,440 --> 00:23:14,440
where is it, here is the button

156
00:23:14,440 --> 00:23:29,980
where is the form

157
00:23:29,980 --> 00:23:48,059
I'm going to take all this from the button and that's how I do it exactly the same

158
00:23:48,059 --> 00:23:59,609
ok, ok, submit, ok, it would be before

159
00:24:03,210 --> 00:24:09,869
and we are going to give it a little format then and we are going to play with the class name

160
00:24:13,130 --> 00:24:20,150
we can put a box that takes everything because we have been doing it all the time, it is worth a box

161
00:24:20,150 --> 00:24:30,829
que vaya recogiendo todo él en los campos del formulario vale entonces le ponemos pues por

162
00:24:30,829 --> 00:24:43,460
ejemplo este entonces a este le tenemos el 500 es que le he puesto el mismo 800

163
00:24:43,460 --> 00:24:55,569
we are going to put this one to see how it would look better we are going to leave it here

164
00:24:58,549 --> 00:25:10,809
here we put the bg violet 800 we are going to put max the maximum width that is for md

165
00:25:10,809 --> 00:25:15,190
ok so it leaves me like this in small

166
00:25:19,309 --> 00:25:25,849
the width that is complete that I occupy everything I can put a padding on all

167
00:25:25,849 --> 00:25:33,009
sides of 10 ok so it leaves us better we can put the round that we are

168
00:25:33,009 --> 00:25:36,329
using all the time

169
00:25:36,329 --> 00:25:50,250
so that the rounded corners are put on us and I can put a margin of 2

170
00:25:52,029 --> 00:26:00,589
ok what else can I do because we are going to play with the flex that we had also used it and it is worth

171
00:26:00,589 --> 00:26:12,349
then here that we are going to put the flex I want you to put it in columns and I want the

172
00:26:12,349 --> 00:26:19,430
items that are inside this block of this container to be centered and I believe that

173
00:26:19,430 --> 00:26:41,250
I close this here, I take it out of here and I put it down here, we would have it total, that if now I put it here, test 1

174
00:26:43,170 --> 00:26:47,009
this is a test of the form, I

175
00:26:47,009 --> 00:26:54,289
I give it add task ok and add task as we have put it only that it does not

176
00:26:54,289 --> 00:27:00,130
visualize it because it should not visualize it we come to more tools I am going to show you

177
00:27:01,769 --> 00:27:10,950
from here that you will see it better ok you are already like this here more tools

178
00:27:10,950 --> 00:27:20,450
where this development tool is, we come here in the object and we already have this is a

179
00:27:20,450 --> 00:27:27,930
form test and the title test 1 is no longer doing everything, it is showing us the

180
00:27:27,930 --> 00:27:42,710
information well, well, we are going to continue working, we have the files within the app and for

181
00:27:42,710 --> 00:27:50,329
connection through axios we have the form already created ok then what I am going to do is

182
00:27:50,329 --> 00:28:05,329
create a context ok open a moment ok we continue then let's go to the code you are already seeing the code to see if

183
00:28:05,329 --> 00:28:14,450
we are going to create the context then within the context folder we are going to create

184
00:28:14,450 --> 00:28:21,890
a file because we can call it for example by following a little how we have called this

185
00:28:21,890 --> 00:28:24,829
instead of aut of authentication because we are going to call them

186
00:28:27,890 --> 00:28:30,690
with tex no tax with tex

187
00:28:32,650 --> 00:28:40,890
j s x ok we would already have our file here to make that context then

188
00:28:43,390 --> 00:28:49,450
a little fast and because it will follow the same structure as that of the authentication

189
00:28:49,450 --> 00:29:05,059
we are going to do it and that's it, that's what I'm going to do first, import

190
00:29:06,579 --> 00:29:10,759
the context with text

191
00:29:16,089 --> 00:29:22,930
from read ok in addition to the content we are going to use the use context

192
00:29:23,930 --> 00:29:34,670
and we can also use, in case we need a state variable, the useState, okay, I'm going to import

193
00:29:34,670 --> 00:29:47,329
also what we have done within the task, the createTaskRequest, okay, so from here I'm going to

194
00:29:47,329 --> 00:30:00,980
to import the create task retos from api-task.js

195
00:30:00,980 --> 00:30:05,980
ok, what else can we need?

196
00:30:10,980 --> 00:30:13,980
well, if we need more, we are importing more

197
00:30:13,980 --> 00:30:16,980
I think that with this we already have it

198
00:30:16,980 --> 00:30:24,740
I'm going to create a task

199
00:30:25,599 --> 00:30:33,839
context that is going to be the same as

200
00:30:33,839 --> 00:30:39,420
with text

201
00:30:39,720 --> 00:30:46,660
ok ok we are going to create our context then just like we did here

202
00:30:46,660 --> 00:31:01,660
the first thing is to tell it that I want to create a context with out context, then I can start using the use, well, as we call it, that now we will call it useTask

203
00:31:01,660 --> 00:31:21,660
To ask if the context exists or not, if the context does not exist, it will give us an error, or it will tell us that this context does not exist, and if the context exists, you provide it to the rest of the children, which are the different routes.

204
00:31:21,660 --> 00:31:41,660
Remember that we did that through the OutProvider, there we already put all the functions that were in this case logged, log in, the useEffects if any were missing, as it was the one that the messages were not visible all the time.

205
00:31:41,660 --> 00:31:48,500
and all that we pass everything that is here inside we pass it from the challenge that there is here the

206
00:31:48,500 --> 00:31:57,900
return the out with text provider and we let the children have access to all these

207
00:31:57,900 --> 00:32:06,099
state variables or functions ok and this worked this way and so we are going to work ok

208
00:32:06,099 --> 00:32:14,559
then we have the contact side there is the tax context we create that context as we have said the

209
00:32:14,559 --> 00:32:22,920
first thing we do is ask if that context exists or not then we are going to put a

210
00:32:22,920 --> 00:32:45,220
for example this is the same this does not have it does not receive anything and what we do is

211
00:32:45,220 --> 00:32:55,779
ok we have with the context context is equal to use context

212
00:32:59,910 --> 00:33:05,910
ok this is going to tell me if this function is created ok or it is in null or it is in white

213
00:33:05,910 --> 00:33:12,750
that is, what does that mean if we have a context or not ok then it is where we are going to

214
00:33:12,750 --> 00:33:23,549
o mandarle proveerle a los a los hijos de ese contexto o decirles que oye no el contexto no

215
00:33:23,549 --> 00:33:34,630
está creado vale entonces aquí le vamos a decir sí no hay contexto entonces le vamos a mandar

216
00:33:34,630 --> 00:33:52,750
we are going to throw the new error and here we can put the context of tasks not created, for example, okay

217
00:33:55,269 --> 00:34:03,109
what else can we do if it does exist if there is the variable context then what

218
00:34:03,109 --> 00:34:13,570
we do is return context ok we return it it would be and now we are going to create that provider

219
00:34:13,570 --> 00:34:18,710
of this context then to create that provider of that context because we are going to do it then we are going to

220
00:34:18,710 --> 00:34:27,989
put the sport ok and this is a bit this context scheme is what is usually put

221
00:34:27,989 --> 00:34:32,610
always ok first the control of the context then the provider and finally well within what

222
00:34:32,610 --> 00:34:39,570
que es el provider las variables que retornamos vale entonces aquí le vamos a llamar tax provider

223
00:34:39,570 --> 00:34:58,199
por ejemplo que lo que vas a recibir son todos los hijos de este de este contexto

224
00:34:58,199 --> 00:35:15,030
then here because at some point we are going to need a state variable in which we are going to

225
00:35:15,030 --> 00:35:22,530
save a state variable of type object of type array in which we are going to save

226
00:35:22,530 --> 00:35:29,190
the different tasks especially when maybe not so much to register it but yes when

227
00:35:29,190 --> 00:35:33,630
when we do the page in which it is going to show us all the tasks that this user has

228
00:35:33,630 --> 00:35:40,809
linked, so I am going to create that variable also a little in reminder mode,

229
00:35:40,809 --> 00:35:49,289
I am going to put the task except that it is worth to play with the state variable

230
00:35:49,289 --> 00:36:05,360
and this is the same and we are worth it and we are going to pass it right now the empty arrangement is worth it is a

231
00:36:05,360 --> 00:36:12,079
it is the same thing we did with the issue of errors, it is worth it in case you want to see it again inside

232
00:36:12,079 --> 00:36:23,900
I will tell you within the file instead of the context of tasks of the out ok but it is the same ok

233
00:36:23,900 --> 00:36:34,780
what else are we going to do because we are going to create that function that I am going to call it and there are tasks for

234
00:36:34,780 --> 00:36:40,380
example it is worth creating that task because it is in what we are now this is going to be equal to 5

235
00:36:40,380 --> 00:36:48,179
because asynchronous remember the asynchronous in the wait because we are going to go against the database

236
00:36:48,179 --> 00:36:59,139
and then an error can occur, then always the async here we are going to receive some tasks

237
00:37:01,059 --> 00:37:06,579
or a task, better said, because we are going to go there we cannot put we are not going to put several we go from one

238
00:37:06,579 --> 00:37:24,880
one, okay, and with that task, what am I going to do? Well, we can put, we can put

239
00:37:24,880 --> 00:37:31,239
directly, just as we have been doing, an answer that will give us the backend, okay,

240
00:37:31,239 --> 00:37:40,260
here we are going to put the await and what are we going to call the create task request function that we have

241
00:37:40,260 --> 00:37:45,380
created within the api folder, which is the first thing we have done, so here we are going to

242
00:37:45,380 --> 00:37:56,300
call the request and I am going to pass it to you, it is worth remembering that this function I will also call it

243
00:37:56,300 --> 00:38:02,219
and now you write from our form, it is worth that the only thing I have done has been to visualize the

244
00:38:02,219 --> 00:38:09,960
data that we put in the form but well that we have to send to the backend and that we do

245
00:38:09,960 --> 00:38:19,619
going through this client is ok then here is where I am going to receive those tasks we can

246
00:38:21,840 --> 00:38:29,519
and tell him well, because to see it more than anything with sun point log the answer that

247
00:38:29,519 --> 00:38:38,079
is giving me from the server ok and I would already have this function made the creators would have everything

248
00:38:39,960 --> 00:38:49,960
well, the call to the API, okay, what else can I need?

249
00:38:49,960 --> 00:38:59,719
Well, now we see how this information shows us, but in principle,

250
00:38:59,719 --> 00:39:17,719
Well, it would be there now, what I do is the retun, it is worth the retun within the retun that we found the task

251
00:39:17,719 --> 00:39:30,050
context is worth the tax context that is the one we have created up here point but dance

252
00:39:31,210 --> 00:39:39,469
is worth what I put as a parameter within this label of the task with 3 providers the value

253
00:39:39,469 --> 00:39:50,210
value equal key key ok and here we are going to tell him what variables we are going to allow

254
00:39:50,210 --> 00:39:55,550
within the context that they can take the children ok that they can access the children then I am going to

255
00:39:55,550 --> 00:40:01,590
put here tasks for example that not in the end not now for the register I do not use it at all but

256
00:40:01,590 --> 00:40:08,750
I think that later when we get all the tasks and we are going to use it and what else are we going to use

257
00:40:08,750 --> 00:40:33,719
create task, okay, these two here we would close the task provider and here we can put this

258
00:40:35,440 --> 00:40:41,179
I allow the children to take these values, it is worth remembering that the children are

259
00:40:41,179 --> 00:40:56,059
that the children are the different routes, it is worth and it would be

260
00:40:59,059 --> 00:41:00,199
but there is from outside

261
00:41:02,420 --> 00:41:09,489
the task with text to this I have put it wrong

262
00:41:11,170 --> 00:41:11,889
ok

263
00:41:28,039 --> 00:41:57,039
We return the TaskContext.Provider. The values ​​that we let access within our context are going to be a task, which is an array of all the tasks that are associated with that user and the createTask, which is where we are calling the API function, if you want, to the Axios function, which is the one that links with the backend and the one that is going to save that task in the database.

264
00:41:58,039 --> 00:42:13,039
and in principle this would already be, it does not have more, this is the basic structure, it is what I tell you, that of a context this is the basic structure

265
00:42:13,039 --> 00:42:18,039
Okay, what else would we have to do then?

266
00:42:18,039 --> 00:42:24,039
Well, to include the different routes for this context.

267
00:42:24,039 --> 00:42:28,039
So we go, that here we have it in AVPJS, okay?

268
00:42:28,039 --> 00:42:34,039
Here we have the AuthProvider, which is the authentication context,

269
00:42:34,039 --> 00:42:39,039
but as I was saying before, we have to put this new task context

270
00:42:39,039 --> 00:42:45,800
within the context of the authentication, because we need that user ID.

271
00:42:45,800 --> 00:42:50,139
Okay, so if I did it outside, I would already have some problem.

272
00:42:50,139 --> 00:42:54,880
Also, instead of putting them all in, for example, register the blog and I wouldn't need it, I could put

273
00:42:54,880 --> 00:43:00,820
directly the ones I have here protected, which are the add, update the profile, all this.

274
00:43:00,820 --> 00:43:03,099
Okay, but I'm going to put it here.

275
00:43:05,139 --> 00:43:06,519
And that's it. Okay, then.

276
00:43:06,519 --> 00:43:14,579
well first we are going to import what this we will have to import then import keys

277
00:43:16,320 --> 00:43:28,280
tax provider ok from here and this here we are going to put the provider

278
00:43:30,239 --> 00:43:37,670
and I close control x and this we are going to put

279
00:43:42,960 --> 00:43:57,099
Ok, we have the format, we would have it, we would also have our context already defined for which routes they go, ok?

280
00:43:57,099 --> 00:44:06,099
Then we have the API, we have our context, we have the form.

281
00:44:06,099 --> 00:44:14,019
what else would we need within the form to tell it to call that function create task that we have

282
00:44:17,260 --> 00:44:23,480
that we have created within task context then let's go to our page and here

283
00:44:23,480 --> 00:44:26,980
instead of just showing this information what we want is

284
00:44:30,099 --> 00:44:35,579
to be able to use that function then the first thing I have to say is import

285
00:44:36,099 --> 00:44:50,500
and you are front with text tags with text is worth

286
00:44:53,920 --> 00:45:19,460
and here what I have to do is here the same as we have imported these functions from

287
00:45:19,460 --> 00:45:30,590
inside they were what I am going to say is with what is what we are going to take because the two that we have

288
00:45:31,829 --> 00:45:36,889
let's see I don't remember you and you believe

289
00:45:46,099 --> 00:45:56,079
and we are going to take it from

290
00:45:56,079 --> 00:46:15,050
that is ok then from just as we are going to and that you are the task I am going to leave it but I would not

291
00:46:15,050 --> 00:46:27,590
need it here I would have to put the create task ok once I have taken those tasks well here the

292
00:46:27,590 --> 00:46:40,050
truth is that I could put the console if I want I could put it but it seems to me right now

293
00:46:41,710 --> 00:46:50,489
the console log and the task is valid since I have loaded it since we bring it to variables but well

294
00:46:50,489 --> 00:47:00,139
now in principle we are not going to use it for anything else but for it to visualize something for us and

295
00:47:00,139 --> 00:47:06,619
what I am going to do is change this console.log then in that console.log that is what

296
00:47:06,619 --> 00:47:12,260
we are going to put because instead of the console.log we are going to put the create task

297
00:47:14,260 --> 00:47:21,500
that is written here and that we are going to pass to the create task because the data

298
00:47:23,460 --> 00:47:29,000
the data is worth the data when we call that they are the data that we have put

299
00:47:29,000 --> 00:47:35,719
within our form, it is worth in this way from the form we call here it is that it is the

300
00:47:35,719 --> 00:47:43,559
function that we have in the task context is this function calls to create a request that is the

301
00:47:43,559 --> 00:47:51,260
function that we have within task js within the API that is the one that calls this instance remember

302
00:47:51,260 --> 00:47:59,179
that it is because I have called it like that but in reality it is a call axios ok and it is the one that we send

303
00:47:59,179 --> 00:48:06,139
through the post protocol those data that we have put it is worth that from here I put data

304
00:48:06,139 --> 00:48:13,739
here I convert them into task ok that goes if everything works well it must be saved in our

305
00:48:13,739 --> 00:48:22,500
of data and we would have already created it, then well, these would be the different steps

306
00:48:22,500 --> 00:48:33,659
that would have to be done now we are going to try we come to our page we are not seeing if we put

307
00:48:33,659 --> 00:48:51,880
for example, last use, well, for test 1, this is the task test for task creation, for example,

308
00:48:51,880 --> 00:48:59,820
I give it to add tasks, let's go to our mongo express, it is worth remembering that the

309
00:48:59,820 --> 00:49:05,840
graphic interface to see mongo that we are using it all the time I am inside the database

310
00:49:05,840 --> 00:49:13,079
dan 2 as always now within the task data collection here I update it and we already have

311
00:49:13,079 --> 00:49:20,739
our task here, that is, it has done everything well for us, it has created that idea, it tells us the title,

312
00:49:20,739 --> 00:49:28,320
test 1, the description, the user, you see, because of what I told you that the context is important

313
00:49:28,320 --> 00:49:32,519
that it is within the context of authentication because if not this we could not

314
00:49:32,519 --> 00:49:41,679
get it, it would be worth going around more and it would probably be even more complicated

315
00:49:43,420 --> 00:49:48,679
the date of creation update is worth everything we have been telling him when we create

316
00:49:48,679 --> 00:49:54,500
the back in that he did not put it on us and we would already have it, this would be

317
00:49:54,500 --> 00:50:05,440
our page to create the creation of adding new tasks to our database of mongo

318
00:50:05,440 --> 00:50:14,420
must in the backend in our app and up to here that is already long good a greeting guys see you later