Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,490 --> 00:00:04,833
Let's now implement dates in our application.
2
2
00:00:06,560 --> 00:00:09,380
And to see what we have to do,
3
3
00:00:09,380 --> 00:00:12,170
so where we have dates in our application,
4
4
00:00:12,170 --> 00:00:13,963
let's go to our demo here.
5
5
00:00:16,240 --> 00:00:18,050
And so we have,
6
6
00:00:18,050 --> 00:00:20,083
the date first here,
7
7
00:00:22,036 --> 00:00:25,437
and then also in all of these movements.
8
8
00:00:26,470 --> 00:00:29,310
So each of them here besides the deposit
9
9
00:00:29,310 --> 00:00:32,440
and the value itself like we have it now,
10
10
00:00:32,440 --> 00:00:34,990
we also now need the date here.
11
11
00:00:34,990 --> 00:00:36,430
And so that's the reason why
12
12
00:00:36,430 --> 00:00:37,820
in our account objects,
13
13
00:00:37,820 --> 00:00:40,350
we actually now have the movement dates.
14
14
00:00:40,350 --> 00:00:42,830
It's so that we can display them here.
15
15
00:00:42,830 --> 00:00:45,403
But let's start with this date here.
16
16
00:00:47,510 --> 00:00:49,970
And actually, the very first thing
17
17
00:00:49,970 --> 00:00:51,670
that I want to do
18
18
00:00:51,670 --> 00:00:53,620
is to basically fake it,
19
19
00:00:53,620 --> 00:00:57,123
that we are always logged in, okay.
20
20
00:00:58,030 --> 00:00:59,523
So let me do that here.
21
21
00:01:01,530 --> 00:01:05,943
Fake always logged in.
22
22
00:01:07,220 --> 00:01:08,190
And so this way,
23
23
00:01:08,190 --> 00:01:10,120
we don't have to always log in
24
24
00:01:10,120 --> 00:01:12,310
each time we want to do something.
25
25
00:01:12,310 --> 00:01:13,880
So to that,
26
26
00:01:13,880 --> 00:01:17,483
let's set the current account to account1.
27
27
00:01:20,060 --> 00:01:21,283
Then let's call,
28
28
00:01:22,195 --> 00:01:26,423
updateUI with that current account.
29
29
00:01:27,550 --> 00:01:31,050
And also, we need to make the user interface visible
30
30
00:01:31,050 --> 00:01:32,113
with this here.
31
31
00:01:34,210 --> 00:01:35,043
Okay.
32
32
00:01:36,230 --> 00:01:37,540
So these three lines
33
33
00:01:37,540 --> 00:01:38,910
will not make it so
34
34
00:01:38,910 --> 00:01:43,000
that Jonas is automatically logged in,
35
35
00:01:43,000 --> 00:01:44,700
except for the message here,
36
36
00:01:44,700 --> 00:01:48,500
but that doesn't really matter, okay.
37
37
00:01:48,500 --> 00:01:49,630
So as I was saying,
38
38
00:01:49,630 --> 00:01:53,150
let's start by displaying the current balance here.
39
39
00:01:53,150 --> 00:01:54,660
So as I was saying,
40
40
00:01:54,660 --> 00:01:58,710
let's now create this date here, okay.
41
41
00:01:58,710 --> 00:02:00,800
And let's check out the class name.
42
42
00:02:02,300 --> 00:02:04,970
So that's always a little bit hidden.
43
43
00:02:04,970 --> 00:02:06,763
So it's the class date.
44
44
00:02:08,810 --> 00:02:12,773
Okay, and so that is already selected at labelDate.
45
45
00:02:14,080 --> 00:02:15,130
And once more,
46
46
00:02:15,130 --> 00:02:17,000
let's start by setting the state
47
47
00:02:17,000 --> 00:02:19,380
outside here of any callback function
48
48
00:02:19,380 --> 00:02:21,340
so that we can see the effects,
49
49
00:02:21,340 --> 00:02:23,780
as we implement our code.
50
50
00:02:23,780 --> 00:02:27,243
So anyway, let's start by creating the current date.
51
51
00:02:28,400 --> 00:02:29,870
And so, remember,
52
52
00:02:29,870 --> 00:02:33,540
that is simply by doing new date.
53
53
00:02:33,540 --> 00:02:36,430
And so that is basically right now.
54
54
00:02:36,430 --> 00:02:40,370
However, we don't just want to print that.
55
55
00:02:40,370 --> 00:02:42,270
So let's see how that would look like.
56
56
00:02:43,270 --> 00:02:47,170
So labelDate, as I have already selected
57
57
00:02:47,170 --> 00:02:50,313
which again is this element with the class of date,
58
58
00:02:51,410 --> 00:02:53,150
and then text content,
59
59
00:02:53,150 --> 00:02:55,693
and let's set it to now.
60
60
00:02:57,090 --> 00:02:59,460
And so, this result here
61
61
00:02:59,460 --> 00:03:02,750
is not exactly what we want, right?
62
62
00:03:02,750 --> 00:03:05,780
So, instead we really only want
63
63
00:03:05,780 --> 00:03:08,030
the day, the month and the year,
64
64
00:03:08,030 --> 00:03:11,830
and I want to display it in this format.
65
65
00:03:11,830 --> 00:03:13,323
So I want day,
66
66
00:03:14,650 --> 00:03:18,630
then month, and then year.
67
67
00:03:18,630 --> 00:03:21,940
And so this is how we display it in Europe,
68
68
00:03:21,940 --> 00:03:25,860
or at least in Portugal where I am located, okay.
69
69
00:03:25,860 --> 00:03:26,693
Now of course,
70
70
00:03:26,693 --> 00:03:29,120
you can format it in any way that you want,
71
71
00:03:29,120 --> 00:03:31,610
for example, how it looks like in your country,
72
72
00:03:31,610 --> 00:03:34,580
but I will do it like this now.
73
73
00:03:34,580 --> 00:03:35,920
Now later in this section,
74
74
00:03:35,920 --> 00:03:39,560
we will learn about something called internationalization
75
75
00:03:39,560 --> 00:03:41,590
which sounds very complicated
76
76
00:03:41,590 --> 00:03:45,170
but it will allow us to form a date and time
77
77
00:03:45,170 --> 00:03:48,580
according to the user's location basically.
78
78
00:03:48,580 --> 00:03:50,610
So if the user was in Portugal,
79
79
00:03:50,610 --> 00:03:54,420
then the date would automatically be formatted this way.
80
80
00:03:54,420 --> 00:03:56,550
But if the user was for example,
81
81
00:03:56,550 --> 00:04:00,070
in the US or in India or wherever,
82
82
00:04:00,070 --> 00:04:01,830
then the date would be formatted
83
83
00:04:01,830 --> 00:04:04,150
in a way that it is usually formatted
84
84
00:04:04,150 --> 00:04:06,023
in that country, all right.
85
85
00:04:07,150 --> 00:04:08,360
So, to do this,
86
86
00:04:08,360 --> 00:04:12,033
we need to get the day, month and year.
87
87
00:04:13,486 --> 00:04:16,383
So let's create variables for each of them.
88
88
00:04:18,950 --> 00:04:21,490
All right, so we take now,
89
89
00:04:21,490 --> 00:04:24,610
and then we call the get date method,
90
90
00:04:24,610 --> 00:04:27,563
just like we learned in the last video.
91
91
00:04:28,740 --> 00:04:30,143
Then let's take the month,
92
92
00:04:31,370 --> 00:04:33,183
which is now.getMonth.
93
93
00:04:35,260 --> 00:04:39,020
And remember, that this one is zero based.
94
94
00:04:39,020 --> 00:04:40,713
So I'm gonna add one here,
95
95
00:04:43,380 --> 00:04:44,583
and then the year,
96
96
00:04:45,970 --> 00:04:47,913
which is now.getFullYear.
97
97
00:04:51,050 --> 00:04:53,140
And actually, let's also get the hour
98
98
00:04:54,100 --> 00:04:54,933
and the minute
99
99
00:04:54,933 --> 00:04:56,833
so we can display that as well.
100
100
00:04:57,940 --> 00:05:02,563
So getHours and const,
101
101
00:05:05,940 --> 00:05:08,253
the minutes, getMinutes.
102
102
00:05:11,980 --> 00:05:14,420
Okay, and now that we have that,
103
103
00:05:14,420 --> 00:05:18,243
all you have to do is to build a nice string with that.
104
104
00:05:19,760 --> 00:05:24,760
So that's the day/the month/theyear,
105
105
00:05:30,550 --> 00:05:31,970
and then I want a coma
106
106
00:05:33,400 --> 00:05:34,550
and the hour
107
107
00:05:36,250 --> 00:05:37,173
and the minute,
108
108
00:05:38,750 --> 00:05:39,583
so min.
109
109
00:05:41,270 --> 00:05:44,790
All right and that looks a lot better.
110
110
00:05:44,790 --> 00:05:46,390
Now, here in Portugal,
111
111
00:05:46,390 --> 00:05:51,390
whenever the month and the year is only one digit here,
112
112
00:05:51,860 --> 00:05:55,143
then we usually write 08 and 02.
113
113
00:05:56,302 --> 00:05:58,813
So basically, we pad this number here
114
114
00:05:58,813 --> 00:06:01,870
with a zero on the left, all right.
115
115
00:06:01,870 --> 00:06:04,660
So let's do that with the day and with the month,
116
116
00:06:04,660 --> 00:06:06,890
because this is actually a good use case
117
117
00:06:06,890 --> 00:06:09,263
for this method that we studied earlier.
118
118
00:06:10,550 --> 00:06:12,370
So on the day, and on the month,
119
119
00:06:12,370 --> 00:06:14,873
we want to use .padStart.
120
120
00:06:18,000 --> 00:06:20,253
And actually this needs to be a string now.
121
121
00:06:21,400 --> 00:06:23,350
And so let's make it a template literal
122
122
00:06:28,730 --> 00:06:32,160
like this, so basically this is now a string.
123
123
00:06:32,160 --> 00:06:33,380
And so on that string,
124
124
00:06:33,380 --> 00:06:35,103
we can call padStart,
125
125
00:06:36,550 --> 00:06:40,730
and then we want this always to be two characters long
126
126
00:06:40,730 --> 00:06:44,090
and we want to pad it with a zero,
127
127
00:06:44,090 --> 00:06:47,683
and probably just writing zero would work just the same.
128
128
00:06:48,540 --> 00:06:49,793
And so now we get 02.
129
129
00:06:51,530 --> 00:06:54,900
But if today would be let's say 12,
130
130
00:06:54,900 --> 00:06:56,800
then that zero will not be added
131
131
00:06:56,800 --> 00:06:59,690
because the final length that we're looking for
132
132
00:06:59,690 --> 00:07:00,683
is always two.
133
133
00:07:02,770 --> 00:07:04,533
Okay, and the same with the month.
134
134
00:07:07,660 --> 00:07:09,640
So, let's copy it here
135
135
00:07:13,530 --> 00:07:16,560
and beautiful, so, that looks perfect.
136
136
00:07:16,560 --> 00:07:19,380
And now, let's move on to actually use the dates
137
137
00:07:19,380 --> 00:07:22,263
here on the movements, okay.
138
138
00:07:23,640 --> 00:07:25,600
Just keep in mind that,
139
139
00:07:25,600 --> 00:07:28,110
of course as the time goes on,
140
140
00:07:28,110 --> 00:07:30,590
this value here is not gonna change.
141
141
00:07:30,590 --> 00:07:32,880
So this is static, right?
142
142
00:07:32,880 --> 00:07:37,240
So, if we wanted to keep this playing the actual time,
143
143
00:07:37,240 --> 00:07:39,770
we would need something called a timer
144
144
00:07:39,770 --> 00:07:41,890
which is something that we will do
145
145
00:07:41,890 --> 00:07:43,730
by the end of the lecture.
146
146
00:07:43,730 --> 00:07:45,300
We will not do it for this,
147
147
00:07:45,300 --> 00:07:48,060
but we will implement a timer like this,
148
148
00:07:48,060 --> 00:07:50,730
maybe you have seen it counting down here.
149
149
00:07:50,730 --> 00:07:52,163
So this logout timer.
150
150
00:07:54,230 --> 00:07:57,780
All right, so this time here is gonna stay static
151
151
00:07:57,780 --> 00:08:01,160
but, that's not a big deal for now.
152
152
00:08:01,160 --> 00:08:03,210
But anyway, let's now go to the function
153
153
00:08:03,210 --> 00:08:06,490
which displays these movements.
154
154
00:08:06,490 --> 00:08:07,883
So display movements.
155
155
00:08:09,210 --> 00:08:12,673
So, here it is.
156
156
00:08:13,850 --> 00:08:16,460
All right, so now besides the movements,
157
157
00:08:16,460 --> 00:08:20,940
we also want to display the times of these movements,
158
158
00:08:20,940 --> 00:08:23,810
but now, we actually have a problem
159
159
00:08:23,810 --> 00:08:25,300
because into this function
160
160
00:08:25,300 --> 00:08:30,300
we are only passing the movements array itself, right.
161
161
00:08:30,660 --> 00:08:33,113
However, we also want the,
162
162
00:08:34,040 --> 00:08:37,730
let's see, we also want the movement dates.
163
163
00:08:37,730 --> 00:08:39,870
And so the best thing to do
164
164
00:08:39,870 --> 00:08:42,520
is to simply pass in the entire account
165
165
00:08:42,520 --> 00:08:44,830
into this function here as well.
166
166
00:08:44,830 --> 00:08:47,780
So just like we already have it in these two,
167
167
00:08:47,780 --> 00:08:50,540
where we already pass in the entire account,
168
168
00:08:50,540 --> 00:08:52,740
let's do the same here as well.
169
169
00:08:52,740 --> 00:08:54,193
So just the account.
170
170
00:08:55,100 --> 00:08:55,933
And then here,
171
171
00:08:55,933 --> 00:08:59,960
we need to say acc.movement
172
172
00:08:59,960 --> 00:09:03,280
and here acc.movements.
173
173
00:09:03,280 --> 00:09:05,530
And finally, where we called this function,
174
174
00:09:05,530 --> 00:09:09,090
we then need to pass in also the entire account.
175
175
00:09:09,090 --> 00:09:14,090
And so that's here in the display UI function, okay.
176
176
00:09:14,480 --> 00:09:15,313
And so now,
177
177
00:09:15,313 --> 00:09:16,880
it is a good thing
178
178
00:09:16,880 --> 00:09:19,030
that we have this refactored function
179
179
00:09:19,030 --> 00:09:21,050
that we created in the last section
180
180
00:09:21,050 --> 00:09:24,910
where we call all of these methods here only in one place.
181
181
00:09:24,910 --> 00:09:26,833
And so now we only needed to change,
182
182
00:09:28,210 --> 00:09:30,300
calling this display movements function
183
183
00:09:30,300 --> 00:09:32,250
here in this one place.
184
184
00:09:32,250 --> 00:09:35,160
And so that's the whole goal of refactoring.
185
185
00:09:35,160 --> 00:09:38,120
It is making it easier to implement new features
186
186
00:09:39,190 --> 00:09:40,623
as time moves on.
187
187
00:09:43,210 --> 00:09:44,790
Now, all right.
188
188
00:09:44,790 --> 00:09:47,600
So let's see how we could do that.
189
189
00:09:47,600 --> 00:09:48,620
So in here,
190
190
00:09:48,620 --> 00:09:51,423
we are looping over the movements.
191
191
00:09:52,360 --> 00:09:55,110
So that this array that we compute here
192
192
00:09:55,110 --> 00:09:57,700
which is whether the sorted movements
193
193
00:09:57,700 --> 00:10:01,730
or simply the movements themselves, right?
194
194
00:10:01,730 --> 00:10:03,680
So we are looping over this
195
195
00:10:03,680 --> 00:10:04,930
and in each iteration,
196
196
00:10:04,930 --> 00:10:07,510
we are generating this HTML.
197
197
00:10:07,510 --> 00:10:11,080
And so now, we simply need to add one more element here
198
198
00:10:11,080 --> 00:10:12,420
to this HTML,
199
199
00:10:12,420 --> 00:10:15,010
which is gonna contain that date.
200
200
00:10:15,010 --> 00:10:17,040
So let's do that.
201
201
00:10:17,040 --> 00:10:18,543
So in our HTML,
202
202
00:10:20,770 --> 00:10:24,080
we can see that there is this element here
203
203
00:10:24,080 --> 00:10:25,903
called movements_date.
204
204
00:10:27,420 --> 00:10:28,600
So let's copy that
205
205
00:10:28,600 --> 00:10:30,167
and paste it right here
206
206
00:10:31,240 --> 00:10:32,223
after the type.
207
207
00:10:36,460 --> 00:10:41,190
Okay, and so let's actually create a variable out here
208
208
00:10:41,190 --> 00:10:45,063
and then put that variable right here.
209
209
00:10:46,730 --> 00:10:51,620
Let's call it displayDate, okay.
210
210
00:10:51,620 --> 00:10:55,340
Now, where is the date actually coming from?
211
211
00:10:55,340 --> 00:10:56,900
Well, as we already know,
212
212
00:10:56,900 --> 00:11:01,500
it is in the accounts.movementDates, right?
213
213
00:11:01,500 --> 00:11:02,333
And so here,
214
214
00:11:02,333 --> 00:11:04,180
we are looping over the movements.
215
215
00:11:04,180 --> 00:11:05,660
And so at the same time,
216
216
00:11:05,660 --> 00:11:06,890
basically we also need
217
217
00:11:06,890 --> 00:11:10,370
to loop over the movement dates, okay.
218
218
00:11:10,370 --> 00:11:11,930
But that's not a problem
219
219
00:11:11,930 --> 00:11:14,143
because we already have the index here.
220
220
00:11:15,010 --> 00:11:16,440
And so what we can do
221
221
00:11:17,670 --> 00:11:22,370
is to write account
222
222
00:11:22,370 --> 00:11:23,470
or acc.movementsDates
223
223
00:11:27,300 --> 00:11:30,820
and then we take it at position i.
224
224
00:11:30,820 --> 00:11:33,660
So that is the current index in the movements array.
225
225
00:11:33,660 --> 00:11:35,750
And the same index is then gonna point
226
226
00:11:35,750 --> 00:11:39,623
to the equivalent date in this movements date array.
227
227
00:11:41,150 --> 00:11:43,550
All right, so this is a common technique
228
228
00:11:43,550 --> 00:11:47,100
of looping over to erase at the same time.
229
229
00:11:47,100 --> 00:11:49,883
So we called it for each method on one of them.
230
230
00:11:50,820 --> 00:11:52,640
So that's the movements.
231
231
00:11:52,640 --> 00:11:54,790
And then we use the current index
232
232
00:11:54,790 --> 00:11:57,743
to also get the data from some other array.
233
233
00:11:58,910 --> 00:12:00,690
Okay, and so that's gonna be
234
234
00:12:00,690 --> 00:12:02,040
at the same position
235
235
00:12:02,040 --> 00:12:04,743
because we're using the same index.
236
236
00:12:06,760 --> 00:12:09,230
So, let's create a new date
237
237
00:12:09,230 --> 00:12:11,440
out of this,
238
238
00:12:11,440 --> 00:12:13,230
because as we saw before,
239
239
00:12:13,230 --> 00:12:18,230
this is gonna be a nicely formatted time string, right?
240
240
00:12:18,540 --> 00:12:20,330
And so, we can use that string
241
241
00:12:20,330 --> 00:12:22,560
to create a new date object
242
242
00:12:22,560 --> 00:12:24,320
and we need that object,
243
243
00:12:24,320 --> 00:12:25,530
so that then from there,
244
244
00:12:25,530 --> 00:12:27,730
we can call our usual methods
245
245
00:12:27,730 --> 00:12:31,133
to get the date and the month and the year.
246
246
00:12:34,290 --> 00:12:35,900
Okay, so that's the reason
247
247
00:12:35,900 --> 00:12:38,810
why we need to convert these strings
248
248
00:12:38,810 --> 00:12:41,240
back into a JavaScript object,
249
249
00:12:41,240 --> 00:12:42,440
because only then,
250
250
00:12:42,440 --> 00:12:45,223
we can actually work with that data.
251
251
00:12:46,230 --> 00:12:47,540
And now let's actually create
252
252
00:12:47,540 --> 00:12:51,700
the same variables that we already have here,
253
253
00:12:51,700 --> 00:12:54,607
so there's no need to repeat it all.
254
254
00:12:56,360 --> 00:12:57,540
Let's actually get all of this
255
255
00:12:57,540 --> 00:12:59,493
and then delete what we don't need,
256
256
00:13:01,200 --> 00:13:03,163
to make this a little bit faster.
257
257
00:13:04,720 --> 00:13:07,770
So, we don't need the hour
258
258
00:13:07,770 --> 00:13:09,173
and the minute,
259
259
00:13:10,920 --> 00:13:12,720
so we don't need this.
260
260
00:13:12,720 --> 00:13:16,423
And we want to create this variable called displayDate.
261
261
00:13:18,604 --> 00:13:19,437
So the date
262
262
00:13:19,437 --> 00:13:22,667
that we're ultimately gonna use here, displayDate,
263
263
00:13:24,760 --> 00:13:27,540
and now, here we need to change from now
264
264
00:13:28,930 --> 00:13:31,620
to date like this now.
265
265
00:13:31,620 --> 00:13:33,840
All right, and we see,
266
266
00:13:33,840 --> 00:13:37,610
it already worked, great.
267
267
00:13:37,610 --> 00:13:40,303
So let's compare it actually here with the dates.
268
268
00:13:41,710 --> 00:13:44,043
So in July 12, 2020,
269
269
00:13:45,560 --> 00:13:48,660
and yeah, that works.
270
270
00:13:48,660 --> 00:13:50,920
Here, then we have 11,
271
271
00:13:50,920 --> 00:13:52,180
which for some reason,
272
272
00:13:52,180 --> 00:13:53,313
there's also 12,
273
273
00:13:54,320 --> 00:13:57,500
but I guess it's because we're close to midnight here.
274
274
00:13:57,500 --> 00:13:59,270
And so for some reason,
275
275
00:13:59,270 --> 00:14:02,570
probably it then changes over to the next day.
276
276
00:14:02,570 --> 00:14:05,800
Then here we have 27 of May.
277
277
00:14:05,800 --> 00:14:07,780
And so, that's also what we get here
278
278
00:14:07,780 --> 00:14:08,840
all the way to the last one,
279
279
00:14:08,840 --> 00:14:13,840
which is 18 of November.
280
280
00:14:14,210 --> 00:14:16,050
So 2019.
281
281
00:14:16,050 --> 00:14:17,563
So this is accurate.
282
282
00:14:18,760 --> 00:14:21,130
Great, now, when we click here
283
283
00:14:21,130 --> 00:14:23,923
on the sword, it's probably not gonna work.
284
284
00:14:25,700 --> 00:14:27,543
So we get some kind of error here.
285
285
00:14:28,900 --> 00:14:32,400
So cannot read property slice of undefined.
286
286
00:14:32,400 --> 00:14:33,963
Let's see why that is.
287
287
00:14:36,350 --> 00:14:38,110
Well, that's weird,
288
288
00:14:38,110 --> 00:14:41,890
because accounts.movements here
289
289
00:14:41,890 --> 00:14:43,710
is clearly defined.
290
290
00:14:43,710 --> 00:14:45,053
It shouldn't be undefined.
291
291
00:14:46,160 --> 00:14:48,333
Let's set this here to true by default.
292
292
00:14:50,930 --> 00:14:54,440
And so, well now it is sorted.
293
293
00:14:54,440 --> 00:14:58,310
So very weird that we get this bug,
294
294
00:14:58,310 --> 00:14:59,483
as we click here.
295
295
00:15:01,200 --> 00:15:02,980
That's just log to the console.
296
296
00:15:02,980 --> 00:15:06,480
But indeed, this one here will be
297
297
00:15:07,920 --> 00:15:09,053
and not undefined,
298
298
00:15:12,380 --> 00:15:14,600
but actually now it's undefined.
299
299
00:15:14,600 --> 00:15:18,480
So we get account.movements is undefined right now.
300
300
00:15:18,480 --> 00:15:19,990
Now, that's weird,
301
301
00:15:19,990 --> 00:15:21,540
but I guess it has something to do
302
302
00:15:21,540 --> 00:15:24,623
with the fact that we faked our log in here.
303
303
00:15:25,520 --> 00:15:29,183
So nevermind, let's take a look at this later.
304
304
00:15:30,400 --> 00:15:33,500
Okay, let's just not sort for now
305
305
00:15:33,500 --> 00:15:34,450
until we are back
306
306
00:15:34,450 --> 00:15:37,563
to having our application normal, all right.
307
307
00:15:39,160 --> 00:15:42,713
So, actually let's take this code here now,
308
308
00:15:44,730 --> 00:15:48,800
and put it into the code that is executed
309
309
00:15:48,800 --> 00:15:50,003
when we log in.
310
310
00:15:51,660 --> 00:15:54,283
So besides this welcome message,
311
311
00:15:55,190 --> 00:15:59,113
we then also want to create the current date.
312
312
00:16:08,220 --> 00:16:11,760
Okay, so it's back to the original now.
313
313
00:16:11,760 --> 00:16:12,963
Let's now log in,
314
314
00:16:15,142 --> 00:16:17,570
and then we get the message here,
315
315
00:16:17,570 --> 00:16:19,712
enter correct date.
316
316
00:16:19,712 --> 00:16:21,530
But now what I wanted to show you
317
317
00:16:21,530 --> 00:16:25,000
is what happens when we request a loan.
318
318
00:16:25,000 --> 00:16:28,930
So you see that we get this error here, right?
319
319
00:16:28,930 --> 00:16:30,670
And that's because this movement
320
320
00:16:30,670 --> 00:16:33,850
doesn't have any date, right.
321
321
00:16:33,850 --> 00:16:38,850
And that's why we get not a number in all the three values.
322
322
00:16:38,890 --> 00:16:40,620
So we need to fix that.
323
323
00:16:40,620 --> 00:16:44,090
So essentially, whenever there is a new transfer
324
324
00:16:44,090 --> 00:16:45,420
or a new loan,
325
325
00:16:45,420 --> 00:16:48,150
we need to not only push the new value
326
326
00:16:48,150 --> 00:16:50,010
into the movements array,
327
327
00:16:50,010 --> 00:16:54,050
but also into the movement dates, all right.
328
328
00:16:54,050 --> 00:16:57,243
So let's actually see that in code.
329
329
00:16:58,530 --> 00:17:00,053
So that's account one.
330
330
00:17:01,380 --> 00:17:06,380
And so we see that the movements has now nine elements
331
331
00:17:06,490 --> 00:17:08,793
while the dates only has eight.
332
332
00:17:10,680 --> 00:17:13,713
All right, so we need to fix that.
333
333
00:17:15,320 --> 00:17:18,093
So let's come here, to the transfer,
334
334
00:17:19,330 --> 00:17:22,860
and then besides doing the transfer and updating the UI,
335
335
00:17:22,860 --> 00:17:27,860
we also need to add transfer date,
336
336
00:17:30,400 --> 00:17:32,140
but that's easy enough.
337
337
00:17:32,140 --> 00:17:36,573
All we have to do is currentAccount.movementDates.push,
338
338
00:17:41,640 --> 00:17:45,190
and then, simply create the current date.
339
339
00:17:45,190 --> 00:17:49,240
So, new date and that's it.
340
340
00:17:49,240 --> 00:17:52,960
So JavaScript will then automatically convert this data here
341
341
00:17:52,960 --> 00:17:55,033
into a nicely formatted string.
342
342
00:17:56,510 --> 00:17:59,653
All right, and now the same here also for the receiver,
343
343
00:18:00,820 --> 00:18:04,343
because the receiver also gets a new movement here.
344
344
00:18:05,230 --> 00:18:09,643
Okay, and so they also need a new date for that movement.
345
345
00:18:10,490 --> 00:18:13,580
Now, as I told you also in the last section,
346
346
00:18:13,580 --> 00:18:15,510
at the beginning of the project
347
347
00:18:15,510 --> 00:18:16,490
in the real world
348
348
00:18:16,490 --> 00:18:20,120
we would probably have an object for each movement.
349
349
00:18:20,120 --> 00:18:24,030
And so that object would then contain the amount, the date,
350
350
00:18:24,030 --> 00:18:26,800
and some other information about the movement,
351
351
00:18:26,800 --> 00:18:30,650
but I don't want to restructure the entire application now.
352
352
00:18:30,650 --> 00:18:32,310
And so therefore, I simply created
353
353
00:18:32,310 --> 00:18:35,513
the separate movements dates, all right.
354
354
00:18:36,930 --> 00:18:39,970
All right, now let's just take this here
355
355
00:18:40,900 --> 00:18:43,333
and also add it to the loan.
356
356
00:18:45,090 --> 00:18:47,620
So that's right here.
357
357
00:18:47,620 --> 00:18:51,050
So add loan date
358
358
00:18:51,050 --> 00:18:52,910
and that should be it.
359
359
00:18:52,910 --> 00:18:56,023
So just to make sure here let's really log in again.
360
360
00:18:58,100 --> 00:19:01,650
All right, and now I'm gonna request this loan
361
361
00:19:03,180 --> 00:19:05,810
and now we get the current date.
362
362
00:19:05,810 --> 00:19:09,343
So August 2nd, just as we have it up here.
363
363
00:19:10,580 --> 00:19:15,580
Okay, `so let's see now D account.
364
364
00:19:16,410 --> 00:19:19,123
So account one,
365
365
00:19:21,200 --> 00:19:25,053
let's take a look at the movement dates.
366
366
00:19:26,580 --> 00:19:27,550
And so indeed,
367
367
00:19:27,550 --> 00:19:29,180
this is the one
368
368
00:19:29,180 --> 00:19:32,100
or actually this is the one that I just added.
369
369
00:19:32,100 --> 00:19:36,670
So this looks a little bit different from these ones
370
370
00:19:36,670 --> 00:19:41,053
because actually it is really the object itself.
371
371
00:19:42,980 --> 00:19:46,150
All right, so that's not good.
372
372
00:19:46,150 --> 00:19:48,973
So let's instead use the two ISO,
373
373
00:19:50,160 --> 00:19:52,810
a string, right here on the date
374
374
00:19:53,670 --> 00:19:56,483
and do the same also up here.
375
375
00:20:00,410 --> 00:20:03,353
Okay, and let's see if that fixes it then.
376
376
00:20:09,560 --> 00:20:12,370
Okay, so probably there was some error here
377
377
00:20:13,210 --> 00:20:16,023
because we're back to having not a number,
378
378
00:20:17,810 --> 00:20:20,710
and, actually I need to
379
379
00:20:21,970 --> 00:20:24,823
take a look at account one now again.
380
380
00:20:26,320 --> 00:20:28,423
And so let's check out the latest date.
381
381
00:20:29,490 --> 00:20:31,263
Oh, and I didn't call the method.
382
382
00:20:33,330 --> 00:20:34,223
That was stupid.
383
383
00:20:35,300 --> 00:20:37,190
Actually, this is something that happens to me
384
384
00:20:37,190 --> 00:20:41,360
quite frequently with these dates methods
385
385
00:20:41,360 --> 00:20:44,190
because we don't have to pass anything in there.
386
386
00:20:44,190 --> 00:20:46,540
And so there's a tendency to forget
387
387
00:20:46,540 --> 00:20:49,293
that we even need to call the method.
388
388
00:20:50,410 --> 00:20:52,293
So don't make that same mistake.
389
389
00:20:54,000 --> 00:20:56,610
All right, and now it works indeed.
390
390
00:20:56,610 --> 00:21:00,030
So let's check if the string looks nice
391
391
00:21:00,030 --> 00:21:02,790
with the same format as all the others,
392
392
00:21:02,790 --> 00:21:04,980
and yeah, it does.
393
393
00:21:04,980 --> 00:21:06,160
And so with this,
394
394
00:21:06,160 --> 00:21:08,850
we finished one more lecture.
395
395
00:21:08,850 --> 00:21:12,550
Now here, I am actually seeing something weird.
396
396
00:21:12,550 --> 00:21:14,730
So it's 19:1,
397
397
00:21:14,730 --> 00:21:18,550
but this should kind of be 01, shouldn't it.
398
398
00:21:18,550 --> 00:21:22,193
So we need to apply some padding to that as well.
399
399
00:21:23,260 --> 00:21:24,980
So that's a good coincidence
400
400
00:21:24,980 --> 00:21:28,790
that we are just at this time where I can see this.
401
401
00:21:28,790 --> 00:21:30,390
So let's go ahead quickly
402
402
00:21:30,390 --> 00:21:34,463
and fix that right here in the login callback.
403
403
00:21:36,120 --> 00:21:37,133
So that's here.
404
404
00:21:37,995 --> 00:21:39,530
And so essentially what we just need to do
405
405
00:21:39,530 --> 00:21:41,090
is to add this part
406
406
00:21:41,090 --> 00:21:43,773
to the hour and to the minute.
407
407
00:21:45,160 --> 00:21:47,980
So we make all of them a template literal again
408
408
00:21:51,060 --> 00:21:54,070
and then, like this.
409
409
00:21:55,770 --> 00:21:56,853
One more time.
410
410
00:22:00,710 --> 00:22:02,630
Now okay, to see the effect,
411
411
00:22:02,630 --> 00:22:03,733
we need to log in,
412
412
00:22:05,520 --> 00:22:09,280
and beautiful, so that's a lot better.
413
413
00:22:09,280 --> 00:22:12,630
And now, we indeed finished this lecture
414
414
00:22:12,630 --> 00:22:15,340
and are ready to move on to the next one
415
415
00:22:15,340 --> 00:22:16,400
where we're gonna work
416
416
00:22:16,400 --> 00:22:18,903
just a little bit more with dates.
33797
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.