WEBVTT 1 00:00:01.320 --> 00:00:03.300 After adding dates to our app 2 00:00:03.300 --> 00:00:04.980 in the previous lecture, 3 00:00:04.980 --> 00:00:07.500 and in particular, to the movements, 4 00:00:07.500 --> 00:00:10.320 we now have a huge bug in our app 5 00:00:10.320 --> 00:00:13.800 when we sort the movements in the user interface. 6 00:00:13.800 --> 00:00:17.523 And so, let's now go ahead and fix that bug. 7 00:00:19.020 --> 00:00:20.610 Now before getting to work, 8 00:00:20.610 --> 00:00:23.880 I just need to mention that I actually recorded this video 9 00:00:23.880 --> 00:00:26.640 after finishing this entire project. 10 00:00:26.640 --> 00:00:30.270 And so the code that you see here will be slightly different 11 00:00:30.270 --> 00:00:32.700 than what you have at this point. 12 00:00:32.700 --> 00:00:33.540 So for example, 13 00:00:33.540 --> 00:00:37.650 you're not gonna have these two lines here yet 14 00:00:37.650 --> 00:00:39.570 in the displayMovements function, 15 00:00:39.570 --> 00:00:40.830 but that's not a big deal. 16 00:00:40.830 --> 00:00:42.480 You'll just have to keep that in mind 17 00:00:42.480 --> 00:00:45.240 as you progress through this section. 18 00:00:45.240 --> 00:00:46.410 All right. 19 00:00:46.410 --> 00:00:49.020 But anyway, let me now show you the bug, 20 00:00:49.020 --> 00:00:50.850 which is this. 21 00:00:50.850 --> 00:00:52.650 So as we click here on sort, 22 00:00:52.650 --> 00:00:56.190 these movements do indeed get sorted correctly. 23 00:00:56.190 --> 00:00:59.580 But watch what happens here to these dates. 24 00:00:59.580 --> 00:01:01.863 So the movement dates, as they're called. 25 00:01:03.030 --> 00:01:05.280 As you see, they stay in place. 26 00:01:05.280 --> 00:01:06.750 Now they move around here a little bit 27 00:01:06.750 --> 00:01:09.780 because these parts here correctly change. 28 00:01:09.780 --> 00:01:12.510 But this August 1st here, for example, 29 00:01:12.510 --> 00:01:13.950 will always stay here in the beginning 30 00:01:13.950 --> 00:01:17.010 no matter what the value there is. 31 00:01:17.010 --> 00:01:18.960 So you see, it's still the same date, 32 00:01:18.960 --> 00:01:21.810 but now with this different movement value. 33 00:01:21.810 --> 00:01:22.710 Now this happens 34 00:01:22.710 --> 00:01:26.610 because all we're doing here when we're sorting is 35 00:01:26.610 --> 00:01:28.650 to just sort the movements array, 36 00:01:28.650 --> 00:01:30.720 but not the date. 37 00:01:30.720 --> 00:01:31.553 Right? 38 00:01:31.553 --> 00:01:33.600 So here we are simply using the dates 39 00:01:33.600 --> 00:01:36.960 from the account object simply at the current index, 40 00:01:36.960 --> 00:01:40.230 but with no regard of sorting the movements. 41 00:01:40.230 --> 00:01:42.120 And so this is what we need to fix. 42 00:01:42.120 --> 00:01:46.200 So we need to basically sort these two at the same time. 43 00:01:46.200 --> 00:01:48.150 Now I said in the previous lecture 44 00:01:48.150 --> 00:01:51.240 that in the real world we would probably have an object 45 00:01:51.240 --> 00:01:52.680 for the movements, 46 00:01:52.680 --> 00:01:56.460 for example, containing the value of the movement, the date, 47 00:01:56.460 --> 00:01:59.910 and some other properties about this movement. 48 00:01:59.910 --> 00:02:04.260 And so, let's now actually create an object like this here, 49 00:02:04.260 --> 00:02:06.630 basically combining movement and date 50 00:02:06.630 --> 00:02:09.270 so that we can then sort them both together. 51 00:02:09.270 --> 00:02:11.940 That's gonna be the easiest way of doing this. 52 00:02:11.940 --> 00:02:15.300 We could also combine them into a nested array, 53 00:02:15.300 --> 00:02:18.570 but I think this way, it's gonna be a bit more explicit 54 00:02:18.570 --> 00:02:20.013 and easier to understand. 55 00:02:21.030 --> 00:02:22.530 Now before we do that, 56 00:02:22.530 --> 00:02:24.420 let's actually also make sure, 57 00:02:24.420 --> 00:02:25.320 so you need to make sure 58 00:02:25.320 --> 00:02:27.420 that when you call this displayMovement, 59 00:02:27.420 --> 00:02:29.820 you actually pass in the entire account. 60 00:02:29.820 --> 00:02:34.230 'Cause there was also some error about that earlier. 61 00:02:34.230 --> 00:02:36.183 So let me find that for you. 62 00:02:38.310 --> 00:02:39.540 Yeah, right here. 63 00:02:39.540 --> 00:02:40.980 So in displayMovements, 64 00:02:40.980 --> 00:02:44.820 you should not pass in the currentAccount.movements, 65 00:02:44.820 --> 00:02:47.220 but really, the entire account. 66 00:02:47.220 --> 00:02:49.143 All right. So that's very important. 67 00:02:51.330 --> 00:02:52.163 And, yeah. 68 00:02:52.163 --> 00:02:53.400 So here is the function. 69 00:02:53.400 --> 00:02:58.400 And so here, let's now create that combined movements 70 00:02:58.470 --> 00:02:59.850 with dates. 71 00:02:59.850 --> 00:03:02.190 So basically, an array of objects 72 00:03:02.190 --> 00:03:05.280 where each of them contains a movement and the date, 73 00:03:05.280 --> 00:03:08.640 instead of having them like we have right now 74 00:03:08.640 --> 00:03:13.640 in a separate array for movements and one for the dates. 75 00:03:14.880 --> 00:03:17.100 So this doesn't make so much sense, 76 00:03:17.100 --> 00:03:19.140 but again, I'm not gonna change 77 00:03:19.140 --> 00:03:21.270 the entire application architecture now. 78 00:03:21.270 --> 00:03:23.520 And so I'm just gonna do that right here 79 00:03:23.520 --> 00:03:25.260 as we display the movements. 80 00:03:25.260 --> 00:03:26.943 So basically, just temporarily. 81 00:03:27.900 --> 00:03:30.480 So that we can then easier sort them together. 82 00:03:30.480 --> 00:03:33.960 So let's call this here very explicitly 83 00:03:33.960 --> 00:03:35.020 combined 84 00:03:36.030 --> 00:03:37.320 movements 85 00:03:37.320 --> 00:03:39.000 and dates. 86 00:03:39.000 --> 00:03:43.890 And so here, we just gonna go over acc.movements, 87 00:03:43.890 --> 00:03:47.160 and we want an array of the same length as the movements. 88 00:03:47.160 --> 00:03:49.770 So let's use a map here. 89 00:03:49.770 --> 00:03:50.603 And then in there, 90 00:03:50.603 --> 00:03:53.253 each of them is gonna be called a movement. 91 00:03:54.150 --> 00:03:55.770 They actually also need the index, 92 00:03:55.770 --> 00:03:57.930 so we need parenthesis here. 93 00:03:57.930 --> 00:03:59.640 So the index. 94 00:03:59.640 --> 00:04:02.490 And then here, I want to return an object. 95 00:04:02.490 --> 00:04:04.410 And so we cannot just do this, 96 00:04:04.410 --> 00:04:07.020 but we actually need to wrap this into parenthesis. 97 00:04:07.020 --> 00:04:09.750 Not sure if we ever did this earlier. 98 00:04:09.750 --> 00:04:12.690 We could also just create a function body like this 99 00:04:12.690 --> 00:04:16.500 and then return the object with whatever we want in here. 100 00:04:16.500 --> 00:04:21.390 So this would be the same as 101 00:04:21.390 --> 00:04:23.040 specifying parenthesis here, 102 00:04:23.040 --> 00:04:25.800 and then the object that we want to return. 103 00:04:25.800 --> 00:04:28.770 So here, we want to return the current movement 104 00:04:28.770 --> 00:04:30.390 and then also the date. 105 00:04:30.390 --> 00:04:32.793 So let's specify a date property. 106 00:04:34.020 --> 00:04:36.603 And then this one is gonna come from account. 107 00:04:38.310 --> 00:04:40.620 So the account that we're currently passing 108 00:04:40.620 --> 00:04:41.970 into this function. 109 00:04:41.970 --> 00:04:46.410 And then dot, movementsDates, at the current index position. 110 00:04:46.410 --> 00:04:49.593 So let's use at and then y. 111 00:04:50.670 --> 00:04:51.660 All right. 112 00:04:51.660 --> 00:04:55.440 So again, here, we are not doing the sorting yet. 113 00:04:55.440 --> 00:04:58.200 All we're doing is to create a new data structure 114 00:04:58.200 --> 00:05:01.053 in which we can then easily sort these two together. 115 00:05:01.980 --> 00:05:05.073 So let's log it to the console just to check it out. 116 00:05:08.580 --> 00:05:11.820 So let's find that here. 117 00:05:11.820 --> 00:05:13.200 And yeah, it has the same length, 118 00:05:13.200 --> 00:05:16.200 so it's, again, eight, for eight movements, 119 00:05:16.200 --> 00:05:18.600 but now here, it is called mov. 120 00:05:18.600 --> 00:05:20.450 Well, let's call this maybe movement. 121 00:05:22.080 --> 00:05:22.913 So 122 00:05:23.760 --> 00:05:24.780 movement, 123 00:05:24.780 --> 00:05:27.750 and then that's gonna be the value of mov 124 00:05:27.750 --> 00:05:30.240 because, remember, that this array here is just an array 125 00:05:30.240 --> 00:05:31.203 of these values. 126 00:05:32.520 --> 00:05:34.560 So checking this out again. 127 00:05:34.560 --> 00:05:35.730 So the movement is the value, 128 00:05:35.730 --> 00:05:38.400 and then we have the corresponding date. 129 00:05:38.400 --> 00:05:39.233 Nice. 130 00:05:39.233 --> 00:05:41.070 And so now we can just sort this object 131 00:05:41.070 --> 00:05:43.620 by the value here, 132 00:05:43.620 --> 00:05:45.300 and then the date will, of course, 133 00:05:45.300 --> 00:05:48.300 be sorted as well in the same order. 134 00:05:48.300 --> 00:05:49.530 All right. 135 00:05:49.530 --> 00:05:52.770 So now we're gonna replace this part right here. 136 00:05:52.770 --> 00:05:55.470 For now, let's just comment this out 137 00:05:55.470 --> 00:05:57.990 because, of course, we still need to make use 138 00:05:57.990 --> 00:06:00.030 of this sort property right here, 139 00:06:00.030 --> 00:06:01.860 but now we're gonna do it in a different way. 140 00:06:01.860 --> 00:06:03.720 So here, what we did was, 141 00:06:03.720 --> 00:06:05.370 if sort was true, 142 00:06:05.370 --> 00:06:09.480 then we would sort these movements here. 143 00:06:09.480 --> 00:06:10.313 And if not, 144 00:06:10.313 --> 00:06:12.810 then this value would just become the movements 145 00:06:12.810 --> 00:06:14.010 without the sorting. 146 00:06:14.010 --> 00:06:16.050 But now let's do it a bit differently. 147 00:06:16.050 --> 00:06:18.930 So now we already have the default, which is this one, 148 00:06:18.930 --> 00:06:22.623 and then all we do is to say if sort, 149 00:06:23.670 --> 00:06:25.830 and more like this. 150 00:06:25.830 --> 00:06:27.510 So if we should sort, 151 00:06:27.510 --> 00:06:32.510 then here, we simply apply the sort to this array. 152 00:06:33.960 --> 00:06:34.793 Dot, sort. 153 00:06:34.793 --> 00:06:37.440 And so this will then actually mutate the original array, 154 00:06:37.440 --> 00:06:39.840 which is not a problem in this case. 155 00:06:39.840 --> 00:06:42.660 But as you already know, if we don't want that, 156 00:06:42.660 --> 00:06:46.140 then we can use the two sorted method as well. 157 00:06:46.140 --> 00:06:48.840 But here, actually, this is exactly what we want. 158 00:06:48.840 --> 00:06:51.990 And so we're just gonna take this array and sort it 159 00:06:51.990 --> 00:06:54.180 if sort is set to true. 160 00:06:54.180 --> 00:06:55.013 And if not, 161 00:06:55.013 --> 00:06:58.260 well, then it is simply this array right here 162 00:06:58.260 --> 00:07:00.213 that will be rendered in the next step. 163 00:07:01.620 --> 00:07:04.300 So let's get rid of this one right here 164 00:07:06.270 --> 00:07:08.883 and specify or sort or function. 165 00:07:09.930 --> 00:07:13.230 And so, while earlier we had a minus b, 166 00:07:13.230 --> 00:07:16.440 because we already had the values here, 167 00:07:16.440 --> 00:07:19.040 because we were already sorting the movements array. 168 00:07:21.030 --> 00:07:23.100 Now we need to, of course, grab that. 169 00:07:23.100 --> 00:07:27.873 So that's a.movement - b.movement, 170 00:07:28.786 --> 00:07:31.593 'cause we still want to sort by those values. 171 00:07:32.730 --> 00:07:35.580 All right, so now, of course, movs is no longer defined. 172 00:07:35.580 --> 00:07:38.523 And so let's fix that here in the next step. 173 00:07:39.510 --> 00:07:41.490 So we have now our data structures, 174 00:07:41.490 --> 00:07:43.290 we have it sorted if we want it, 175 00:07:43.290 --> 00:07:45.360 and now it is this data structure 176 00:07:45.360 --> 00:07:47.193 that we will actually loop over. 177 00:07:48.210 --> 00:07:49.260 So combinedMovsDates, 178 00:07:50.400 --> 00:07:52.560 and now we need to adapt this code here a little bit, 179 00:07:52.560 --> 00:07:53.850 of course. 180 00:07:53.850 --> 00:07:55.140 So here, instead of the movement, 181 00:07:55.140 --> 00:07:57.450 we get now an object. 182 00:07:57.450 --> 00:08:00.390 So let's call that object, actually. 183 00:08:00.390 --> 00:08:02.640 And then here, we can just de-structure that. 184 00:08:05.190 --> 00:08:08.880 So we need to use the exact same name as the property names. 185 00:08:08.880 --> 00:08:11.100 So movement and date. 186 00:08:11.100 --> 00:08:13.950 And so this will then create these two variables 187 00:08:13.950 --> 00:08:16.230 out of object. 188 00:08:16.230 --> 00:08:20.070 And we could actually do this structuring right here 189 00:08:20.070 --> 00:08:21.000 in this place, 190 00:08:21.000 --> 00:08:24.720 but let's keep it a bit more explicit by doing it like this. 191 00:08:24.720 --> 00:08:27.030 Now here we're creating a conflict 192 00:08:27.030 --> 00:08:28.920 with this variable right here. 193 00:08:28.920 --> 00:08:32.287 And so, maybe let's call this here movementDate. 194 00:08:36.690 --> 00:08:38.643 Okay, and then here we do the same. 195 00:08:39.825 --> 00:08:41.040 movementDate. 196 00:08:41.040 --> 00:08:42.330 And with this, we're fine. 197 00:08:42.330 --> 00:08:44.490 Now we just need to change the things here. 198 00:08:44.490 --> 00:08:46.800 So here, we had mov before. 199 00:08:46.800 --> 00:08:49.023 So this is now called movement. 200 00:08:50.160 --> 00:08:52.710 Here, we now have the actual date. 201 00:08:52.710 --> 00:08:55.710 So this was actually where the bug was coming from. 202 00:08:55.710 --> 00:08:57.960 And so now, we will no longer read the date 203 00:08:57.960 --> 00:08:59.460 from the original array, 204 00:08:59.460 --> 00:09:01.350 but we will get it from the data structure 205 00:09:01.350 --> 00:09:02.460 that we just built. 206 00:09:02.460 --> 00:09:07.223 So that's then exactly that movementDate right there. 207 00:09:08.100 --> 00:09:08.933 And then, 208 00:09:08.933 --> 00:09:12.180 I believe that these two lines, you will not have yet. 209 00:09:12.180 --> 00:09:13.013 And so again, 210 00:09:13.013 --> 00:09:16.080 as you go through the rest of the section, 211 00:09:16.080 --> 00:09:19.320 make sure that you use the correct values here. 212 00:09:19.320 --> 00:09:21.660 So this move, 213 00:09:21.660 --> 00:09:23.910 this mov does no longer exist. 214 00:09:23.910 --> 00:09:27.630 So it will again be movement. 215 00:09:27.630 --> 00:09:29.310 And here, I think everything is correct. 216 00:09:29.310 --> 00:09:31.833 So the date and the local, 217 00:09:33.090 --> 00:09:34.950 and also down here. 218 00:09:34.950 --> 00:09:36.513 So let's try to reload this. 219 00:09:37.440 --> 00:09:39.300 So we have no more bugs. 220 00:09:39.300 --> 00:09:42.150 And now, let's check if this actually works. 221 00:09:42.150 --> 00:09:46.680 So for example, here, this biggest value is on April 1st. 222 00:09:46.680 --> 00:09:48.543 So let's see what happens. 223 00:09:49.410 --> 00:09:50.880 And, 224 00:09:50.880 --> 00:09:51.810 yeah. 225 00:09:51.810 --> 00:09:55.830 So now the date stayed together with the value. 226 00:09:55.830 --> 00:09:57.180 So let's unsort it. 227 00:09:57.180 --> 00:09:59.100 Let's just check another one. 228 00:09:59.100 --> 00:10:01.500 So this 642 229 00:10:01.500 --> 00:10:04.260 is on May 8th. 230 00:10:04.260 --> 00:10:07.863 So let's sort and let's see if the date stays with it. 231 00:10:08.730 --> 00:10:11.250 So, where is it? 232 00:10:11.250 --> 00:10:12.210 There, 233 00:10:12.210 --> 00:10:14.040 and nice. 234 00:10:14.040 --> 00:10:16.950 So with this, we fixed our bug, 235 00:10:16.950 --> 00:10:21.120 and we did so by always keeping the date together 236 00:10:21.120 --> 00:10:23.190 with the movement value itself 237 00:10:23.190 --> 00:10:26.913 simply by creating this combined data structure right here. 238 00:10:27.900 --> 00:10:31.290 So let's just get rid of this. 239 00:10:31.290 --> 00:10:34.170 And yeah, I think now you're ready 240 00:10:34.170 --> 00:10:35.820 to move on to the next lecture. 241 00:10:35.820 --> 00:10:37.560 Again, just keep in mind 242 00:10:37.560 --> 00:10:40.200 that you will have to use this movement here 243 00:10:40.200 --> 00:10:43.230 instead of what I'm gonna type in that video. 244 00:10:43.230 --> 00:10:45.840 That video, I will just type out this, 245 00:10:45.840 --> 00:10:47.280 but that is now wrong. 246 00:10:47.280 --> 00:10:50.523 It needs to be movement now in order to work.