Jonas: Let's now implement dates in our application.
And to see what we have to do,
so where we have dates in our application,
let's go to our demo here.
And so we have,
the date first here,
and then also in all of these movements.
So each of them here besides the deposit
and the value itself like we have it now,
we also now need the date here.
And so that's the reason why
in our account objects,
we actually now have the movement dates.
It's so that we can display them here.
But let's start with this date here.
And actually, the very first thing
that I want to do
is to basically fake it,
that we are always logged in, okay.
So let me do that here.
Fake always logged in.
And so this way,
we don't have to always log in
each time we want to do something.
So to that,
let's set the current account to account1.
Then let's call,
updateUI with that current account.
And also, we need to make the user interface visible
with this here.
Okay.
So these three lines
will not make it so
that Jonas is automatically logged in,
except for the message here,
but that doesn't really matter, okay.
So as I was saying,
let's start by displaying the current balance here.
So as I was saying,
let's now create this date here, okay.
And let's check out the class name.
So that's always a little bit hidden.
So it's the class date.
Okay, and so that is already selected at labelDate.
And once more,
let's start by setting the state
outside here of any callback function
so that we can see the effects,
as we implement our code.
So anyway, let's start by creating the current date.
And so, remember,
that is simply by doing new date.
And so that is basically right now.
However, we don't just want to print that.
So let's see how that would look like.
So labelDate, as I have already selected
which again is this element with the class of date,
and then text content,
and let's set it to now.
And so, this result here
is not exactly what we want, right?
So, instead we really only want
the day, the month and the year,
and I want to display it in this format.
So I want day,
then month, and then year.
And so this is how we display it in Europe,
or at least in Portugal where I am located, okay.
Now of course,
you can format it in any way that you want,
for example, how it looks like in your country,
but I will do it like this now.
Now later in this section,
we will learn about something called internationalization
which sounds very complicated
but it will allow us to form a date and time
according to the user's location basically.
So if the user was in Portugal,
then the date would automatically be formatted this way.
But if the user was for example,
in the US or in India or wherever,
then the date would be formatted
in a way that it is usually formatted
in that country, all right.
So, to do this,
we need to get the day, month and year.
So let's create variables for each of them.
All right, so we take now,
and then we call the get date method,
just like we learned in the last video.
Then let's take the month,
which is now.getMonth.
And remember, that this one is zero based.
So I'm gonna add one here,
and then the year,
which is now.getFullYear.
And actually, let's also get the hour
and the minute
so we can display that as well.
So getHours and const,
the minutes, getMinutes.
Okay, and now that we have that,
all you have to do is to build a nice string with that.
So that's the day/the month/theyear,
and then I want a coma
and the hour
and the minute,
so min.
All right and that looks a lot better.
Now, here in Portugal,
whenever the month and the year is only one digit here,
then we usually write 08 and 02.
So basically, we pad this number here
with a zero on the left, all right.
So let's do that with the day and with the month,
because this is actually a good use case
for this method that we studied earlier.
So on the day, and on the month,
we want to use .padStart.
And actually this needs to be a string now.
And so let's make it a template literal
like this, so basically this is now a string.
And so on that string,
we can call padStart,
and then we want this always to be two characters long
and we want to pad it with a zero,
and probably just writing zero would work just the same.
And so now we get 02.
But if today would be let's say 12,
then that zero will not be added
because the final length that we're looking for
is always two.
Okay, and the same with the month.
So, let's copy it here
and beautiful, so, that looks perfect.
And now, let's move on to actually use the dates
here on the movements, okay.
Just keep in mind that,
of course as the time goes on,
this value here is not gonna change.
So this is static, right?
So, if we wanted to keep this playing the actual time,
we would need something called a timer
which is something that we will do
by the end of the lecture.
We will not do it for this,
but we will implement a timer like this,
maybe you have seen it counting down here.
So this logout timer.
All right, so this time here is gonna stay static
but, that's not a big deal for now.
But anyway, let's now go to the function
which displays these movements.
So display movements.
So, here it is.
All right, so now besides the movements,
we also want to display the times of these movements,
but now, we actually have a problem
because into this function
we are only passing the movements array itself, right.
However, we also want the,
let's see, we also want the movement dates.
And so the best thing to do
is to simply pass in the entire account
into this function here as well.
So just like we already have it in these two,
where we already pass in the entire account,
let's do the same here as well.
So just the account.
And then here,
we need to say acc.movement
and here acc.movements.
And finally, where we called this function,
we then need to pass in also the entire account.
And so that's here in the display UI function, okay.
And so now,
it is a good thing
that we have this refactored function
that we created in the last section
where we call all of these methods here only in one place.
And so now we only needed to change,
calling this display movements function
here in this one place.
And so that's the whole goal of refactoring.
It is making it easier to implement new features
as time moves on.
Now, all right.
So let's see how we could do that.
So in here,
we are looping over the movements.
So that this array that we compute here
which is whether the sorted movements
or simply the movements themselves, right?
So we are looping over this
and in each iteration,
we are generating this HTML.
And so now, we simply need to add one more element here
to this HTML,
which is gonna contain that date.
So let's do that.
So in our HTML,
we can see that there is this element here
called movements_date.
So let's copy that
and paste it right here
after the type.
Okay, and so let's actually create a variable out here
and then put that variable right here.
Let's call it displayDate, okay.
Now, where is the date actually coming from?
Well, as we already know,
it is in the accounts.movementDates, right?
And so here,
we are looping over the movements.
And so at the same time,
basically we also need
to loop over the movement dates, okay.
But that's not a problem
because we already have the index here.
And so what we can do
is to write account
or acc.movementsDates
and then we take it at position i.
So that is the current index in the movements array.
And the same index is then gonna point
to the equivalent date in this movements date array.
All right, so this is a common technique
of looping over to erase at the same time.
So we called it for each method on one of them.
So that's the movements.
And then we use the current index
to also get the data from some other array.
Okay, and so that's gonna be
at the same position
because we're using the same index.
So, let's create a new date
out of this,
because as we saw before,
this is gonna be a nicely formatted time string, right?
And so, we can use that string
to create a new date object
and we need that object,
so that then from there,
we can call our usual methods
to get the date and the month and the year.
Okay, so that's the reason
why we need to convert these strings
back into a JavaScript object,
because only then,
we can actually work with that data.
And now let's actually create
the same variables that we already have here,
so there's no need to repeat it all.
Let's actually get all of this
and then delete what we don't need,
to make this a little bit faster.
So, we don't need the hour
and the minute,
so we don't need this.
And we want to create this variable called displayDate.
So the date
that we're ultimately gonna use here, displayDate,
and now, here we need to change from now
to date like this now.
All right, and we see,
it already worked, great.
So let's compare it actually here with the dates.
So in July 12, 2020,
and yeah, that works.
Here, then we have 11,
which for some reason,
there's also 12,
but I guess it's because we're close to midnight here.
And so for some reason,
probably it then changes over to the next day.
Then here we have 27 of May.
And so, that's also what we get here
all the way to the last one,
which is 18 of November.
So 2019.
So this is accurate.
Great, now, when we click here
on the sword, it's probably not gonna work.
So we get some kind of error here.
So cannot read property slice of undefined.
Let's see why that is.
Well, that's weird,
because accounts.movements here
is clearly defined.
It shouldn't be undefined.
Let's set this here to true by default.
And so, well now it is sorted.
So very weird that we get this bug,
as we click here.
That's just log to the console.
But indeed, this one here will be
and not undefined,
but actually now it's undefined.
So we get account.movements is undefined right now.
Now, that's weird,
but I guess it has something to do
with the fact that we faked our log in here.
So nevermind, let's take a look at this later.
Okay, let's just not sort for now
until we are back
to having our application normal, all right.
So, actually let's take this code here now,
and put it into the code that is executed
when we log in.
So besides this welcome message,
we then also want to create the current date.
Okay, so it's back to the original now.
Let's now log in,
and then we get the message here,
enter correct date.
But now what I wanted to show you
is what happens when we request a loan.
So you see that we get this error here, right?
And that's because this movement
doesn't have any date, right.
And that's why we get not a number in all the three values.
So we need to fix that.
So essentially, whenever there is a new transfer
or a new loan,
we need to not only push the new value
into the movements array,
but also into the movement dates, all right.
So let's actually see that in code.
So that's account one.
And so we see that the movements has now nine elements
while the dates only has eight.
All right, so we need to fix that.
So let's come here, to the transfer,
and then besides doing the transfer and updating the UI,
we also need to add transfer date,
but that's easy enough.
All we have to do is currentAccount.movementDates.push,
and then, simply create the current date.
So, new date and that's it.
So JavaScript will then automatically convert this data here
into a nicely formatted string.
All right, and now the same here also for the receiver,
because the receiver also gets a new movement here.
Okay, and so they also need a new date for that movement.
Now, as I told you also in the last section,
at the beginning of the project
in the real world
we would probably have an object for each movement.
And so that object would then contain the amount, the date,
and some other information about the movement,
but I don't want to restructure the entire application now.
And so therefore, I simply created
the separate movements dates, all right.
All right, now let's just take this here
and also add it to the loan.
So that's right here.
So add loan date
and that should be it.
So just to make sure here let's really log in again.
All right, and now I'm gonna request this loan
and now we get the current date.
So August 2nd, just as we have it up here.
Okay, `so let's see now D account.
So account one,
let's take a look at the movement dates.
And so indeed,
this is the one
or actually this is the one that I just added.
So this looks a little bit different from these ones
because actually it is really the object itself.
All right, so that's not good.
So let's instead use the two ISO,
a string, right here on the date
and do the same also up here.
Okay, and let's see if that fixes it then.
Okay, so probably there was some error here
because we're back to having not a number,
and, actually I need to
take a look at account one now again.
And so let's check out the latest date.
Oh, and I didn't call the method.
That was stupid.
Actually, this is something that happens to me
quite frequently with these dates methods
because we don't have to pass anything in there.
And so there's a tendency to forget
that we even need to call the method.
So don't make that same mistake.
All right, and now it works indeed.
So let's check if the string looks nice
with the same format as all the others,
and yeah, it does.
And so with this,
we finished one more lecture.
Now here, I am actually seeing something weird.
So it's 19:1,
but this should kind of be 01, shouldn't it.
So we need to apply some padding to that as well.
So that's a good coincidence
that we are just at this time where I can see this.
So let's go ahead quickly
and fix that right here in the login callback.
So that's here.
And so essentially what we just need to do
is to add this part
to the hour and to the minute.
So we make all of them a template literal again
and then, like this.
One more time.
Now okay, to see the effect,
we need to log in,
and beautiful, so that's a lot better.
And now, we indeed finished this lecture
and are ready to move on to the next one
where we're gonna work
just a little bit more with dates.