Jonas: After adding dates to our app
in the previous lecture,
and in particular, to the movements,
we now have a huge bug in our app
when we sort the movements in the user interface.
And so, let's now go ahead and fix that bug.
Now before getting to work,
I just need to mention that I actually recorded this video
after finishing this entire project.
And so the code that you see here will be slightly different
than what you have at this point.
So for example,
you're not gonna have these two lines here yet
in the displayMovements function,
but that's not a big deal.
You'll just have to keep that in mind
as you progress through this section.
All right.
But anyway, let me now show you the bug,
which is this.
So as we click here on sort,
these movements do indeed get sorted correctly.
But watch what happens here to these dates.
So the movement dates, as they're called.
As you see, they stay in place.
Now they move around here a little bit
because these parts here correctly change.
But this August 1st here, for example,
will always stay here in the beginning
no matter what the value there is.
So you see, it's still the same date,
but now with this different movement value.
Now this happens
because all we're doing here when we're sorting is
to just sort the movements array,
but not the date.
Right?
So here we are simply using the dates
from the account object simply at the current index,
but with no regard of sorting the movements.
And so this is what we need to fix.
So we need to basically sort these two at the same time.
Now I said in the previous lecture
that in the real world we would probably have an object
for the movements,
for example, containing the value of the movement, the date,
and some other properties about this movement.
And so, let's now actually create an object like this here,
basically combining movement and date
so that we can then sort them both together.
That's gonna be the easiest way of doing this.
We could also combine them into a nested array,
but I think this way, it's gonna be a bit more explicit
and easier to understand.
Now before we do that,
let's actually also make sure,
so you need to make sure
that when you call this displayMovement,
you actually pass in the entire account.
'Cause there was also some error about that earlier.
So let me find that for you.
Yeah, right here.
So in displayMovements,
you should not pass in the currentAccount.movements,
but really, the entire account.
All right. So that's very important.
And, yeah.
So here is the function.
And so here, let's now create that combined movements
with dates.
So basically, an array of objects
where each of them contains a movement and the date,
instead of having them like we have right now
in a separate array for movements and one for the dates.
So this doesn't make so much sense,
but again, I'm not gonna change
the entire application architecture now.
And so I'm just gonna do that right here
as we display the movements.
So basically, just temporarily.
So that we can then easier sort them together.
So let's call this here very explicitly
combined
movements
and dates.
And so here, we just gonna go over acc.movements,
and we want an array of the same length as the movements.
So let's use a map here.
And then in there,
each of them is gonna be called a movement.
They actually also need the index,
so we need parenthesis here.
So the index.
And then here, I want to return an object.
And so we cannot just do this,
but we actually need to wrap this into parenthesis.
Not sure if we ever did this earlier.
We could also just create a function body like this
and then return the object with whatever we want in here.
So this would be the same as
specifying parenthesis here,
and then the object that we want to return.
So here, we want to return the current movement
and then also the date.
So let's specify a date property.
And then this one is gonna come from account.
So the account that we're currently passing
into this function.
And then dot, movementsDates, at the current index position.
So let's use at and then y.
All right.
So again, here, we are not doing the sorting yet.
All we're doing is to create a new data structure
in which we can then easily sort these two together.
So let's log it to the console just to check it out.
So let's find that here.
And yeah, it has the same length,
so it's, again, eight, for eight movements,
but now here, it is called mov.
Well, let's call this maybe movement.
So
movement,
and then that's gonna be the value of mov
because, remember, that this array here is just an array
of these values.
So checking this out again.
So the movement is the value,
and then we have the corresponding date.
Nice.
And so now we can just sort this object
by the value here,
and then the date will, of course,
be sorted as well in the same order.
All right.
So now we're gonna replace this part right here.
For now, let's just comment this out
because, of course, we still need to make use
of this sort property right here,
but now we're gonna do it in a different way.
So here, what we did was,
if sort was true,
then we would sort these movements here.
And if not,
then this value would just become the movements
without the sorting.
But now let's do it a bit differently.
So now we already have the default, which is this one,
and then all we do is to say if sort,
and more like this.
So if we should sort,
then here, we simply apply the sort to this array.
Dot, sort.
And so this will then actually mutate the original array,
which is not a problem in this case.
But as you already know, if we don't want that,
then we can use the two sorted method as well.
But here, actually, this is exactly what we want.
And so we're just gonna take this array and sort it
if sort is set to true.
And if not,
well, then it is simply this array right here
that will be rendered in the next step.
So let's get rid of this one right here
and specify or sort or function.
And so, while earlier we had a minus b,
because we already had the values here,
because we were already sorting the movements array.
Now we need to, of course, grab that.
So that's a.movement - b.movement,
'cause we still want to sort by those values.
All right, so now, of course, movs is no longer defined.
And so let's fix that here in the next step.
So we have now our data structures,
we have it sorted if we want it,
and now it is this data structure
that we will actually loop over.
So combinedMovsDates,
and now we need to adapt this code here a little bit,
of course.
So here, instead of the movement,
we get now an object.
So let's call that object, actually.
And then here, we can just de-structure that.
So we need to use the exact same name as the property names.
So movement and date.
And so this will then create these two variables
out of object.
And we could actually do this structuring right here
in this place,
but let's keep it a bit more explicit by doing it like this.
Now here we're creating a conflict
with this variable right here.
And so, maybe let's call this here movementDate.
Okay, and then here we do the same.
movementDate.
And with this, we're fine.
Now we just need to change the things here.
So here, we had mov before.
So this is now called movement.
Here, we now have the actual date.
So this was actually where the bug was coming from.
And so now, we will no longer read the date
from the original array,
but we will get it from the data structure
that we just built.
So that's then exactly that movementDate right there.
And then,
I believe that these two lines, you will not have yet.
And so again,
as you go through the rest of the section,
make sure that you use the correct values here.
So this move,
this mov does no longer exist.
So it will again be movement.
And here, I think everything is correct.
So the date and the local,
and also down here.
So let's try to reload this.
So we have no more bugs.
And now, let's check if this actually works.
So for example, here, this biggest value is on April 1st.
So let's see what happens.
And,
yeah.
So now the date stayed together with the value.
So let's unsort it.
Let's just check another one.
So this 642
is on May 8th.
So let's sort and let's see if the date stays with it.
So, where is it?
There,
and nice.
So with this, we fixed our bug,
and we did so by always keeping the date together
with the movement value itself
simply by creating this combined data structure right here.
So let's just get rid of this.
And yeah, I think now you're ready
to move on to the next lecture.
Again, just keep in mind
that you will have to use this movement here
instead of what I'm gonna type in that video.
That video, I will just type out this,
but that is now wrong.
It needs to be movement now in order to work.