Original subtitles

1 1

Let's now implement dates in our application. 2

2

And to see what we have to do, 3

3

so where we have dates in our application, 4

4

let's go to our demo here. 5

5

And so we have, 6

6

the date first here, 7

7

and then also in all of these movements. 8

8

So each of them here besides the deposit 9

9

and the value itself like we have it now, 10

10

we also now need the date here. 11

11

And so that's the reason why 12

12

in our account objects, 13

13

we actually now have the movement dates. 14

14

It's so that we can display them here. 15

15

But let's start with this date here. 16

16

And actually, the very first thing 17

17

that I want to do 18

18

is to basically fake it, 19

19

that we are always logged in, okay. 20

20

So let me do that here. 21

21

Fake always logged in. 22

22

And so this way, 23

23

we don't have to always log in 24

24

each time we want to do something. 25

25

So to that, 26

26

let's set the current account to account1. 27

27

Then let's call, 28

28

updateUI with that current account. 29

29

And also, we need to make the user interface visible 30

30

with this here. 31

31

Okay. 32

32

So these three lines 33

33

will not make it so 34

34

that Jonas is automatically logged in, 35

35

except for the message here, 36

36

but that doesn't really matter, okay. 37

37

So as I was saying, 38

38

let's start by displaying the current balance here. 39

39

So as I was saying, 40

40

let's now create this date here, okay. 41

41

And let's check out the class name. 42

42

So that's always a little bit hidden. 43

43

So it's the class date. 44

44

Okay, and so that is already selected at labelDate. 45

45

And once more, 46

46

let's start by setting the state 47

47

outside here of any callback function 48

48

so that we can see the effects, 49

49

as we implement our code. 50

50

So anyway, let's start by creating the current date. 51

51

And so, remember, 52

52

that is simply by doing new date. 53

53

And so that is basically right now. 54

54

However, we don't just want to print that. 55

55

So let's see how that would look like. 56

56

So labelDate, as I have already selected 57

57

which again is this element with the class of date, 58

58

and then text content, 59

59

and let's set it to now. 60

60

And so, this result here 61

61

is not exactly what we want, right? 62

62

So, instead we really only want 63

63

the day, the month and the year, 64

64

and I want to display it in this format. 65

65

So I want day, 66

66

then month, and then year. 67

67

And so this is how we display it in Europe, 68

68

or at least in Portugal where I am located, okay. 69

69

Now of course, 70

70

you can format it in any way that you want, 71

71

for example, how it looks like in your country, 72

72

but I will do it like this now. 73

73

Now later in this section, 74

74

we will learn about something called internationalization 75

75

which sounds very complicated 76

76

but it will allow us to form a date and time 77

77

according to the user's location basically. 78

78

So if the user was in Portugal, 79

79

then the date would automatically be formatted this way. 80

80

But if the user was for example, 81

81

in the US or in India or wherever, 82

82

then the date would be formatted 83

83

in a way that it is usually formatted 84

84

in that country, all right. 85

85

So, to do this, 86

86

we need to get the day, month and year. 87

87

So let's create variables for each of them. 88

88

All right, so we take now, 89

89

and then we call the get date method, 90

90

just like we learned in the last video. 91

91

Then let's take the month, 92

92

which is now.getMonth. 93

93

And remember, that this one is zero based. 94

94

So I'm gonna add one here, 95

95

and then the year, 96

96

which is now.getFullYear. 97

97

And actually, let's also get the hour 98

98

and the minute 99

99

so we can display that as well. 100

100

So getHours and const, 101

101

the minutes, getMinutes. 102

102

Okay, and now that we have that, 103

103

all you have to do is to build a nice string with that. 104

104

So that's the day/the month/theyear, 105

105

and then I want a coma 106

106

and the hour 107

107

and the minute, 108

108

so min. 109

109

All right and that looks a lot better. 110

110

Now, here in Portugal, 111

111

whenever the month and the year is only one digit here, 112

112

then we usually write 08 and 02. 113

113

So basically, we pad this number here 114

114

with a zero on the left, all right. 115

115

So let's do that with the day and with the month, 116

116

because this is actually a good use case 117

117

for this method that we studied earlier. 118

118

So on the day, and on the month, 119

119

we want to use .padStart. 120

120

And actually this needs to be a string now. 121

121

And so let's make it a template literal 122

122

like this, so basically this is now a string. 123

123

And so on that string, 124

124

we can call padStart, 125

125

and then we want this always to be two characters long 126

126

and we want to pad it with a zero, 127

127

and probably just writing zero would work just the same. 128

128

And so now we get 02. 129

129

But if today would be let's say 12, 130

130

then that zero will not be added 131

131

because the final length that we're looking for 132

132

is always two. 133

133

Okay, and the same with the month. 134

134

So, let's copy it here 135

135

and beautiful, so, that looks perfect. 136

136

And now, let's move on to actually use the dates 137

137

here on the movements, okay. 138

138

Just keep in mind that, 139

139

of course as the time goes on, 140

140

this value here is not gonna change. 141

141

So this is static, right? 142

142

So, if we wanted to keep this playing the actual time, 143

143

we would need something called a timer 144

144

which is something that we will do 145

145

by the end of the lecture. 146

146

We will not do it for this, 147

147

but we will implement a timer like this, 148

148

maybe you have seen it counting down here. 149

149

So this logout timer. 150

150

All right, so this time here is gonna stay static 151

151

but, that's not a big deal for now. 152

152

But anyway, let's now go to the function 153

153

which displays these movements. 154

154

So display movements. 155

155

So, here it is. 156

156

All right, so now besides the movements, 157

157

we also want to display the times of these movements, 158

158

but now, we actually have a problem 159

159

because into this function 160

160

we are only passing the movements array itself, right. 161

161

However, we also want the, 162

162

let's see, we also want the movement dates. 163

163

And so the best thing to do 164

164

is to simply pass in the entire account 165

165

into this function here as well. 166

166

So just like we already have it in these two, 167

167

where we already pass in the entire account, 168

168

let's do the same here as well. 169

169

So just the account. 170

170

And then here, 171

171

we need to say acc.movement 172

172

and here acc.movements. 173

173

And finally, where we called this function, 174

174

we then need to pass in also the entire account. 175

175

And so that's here in the display UI function, okay. 176

176

And so now, 177

177

it is a good thing 178

178

that we have this refactored function 179

179

that we created in the last section 180

180

where we call all of these methods here only in one place. 181

181

And so now we only needed to change, 182

182

calling this display movements function 183

183

here in this one place. 184

184

And so that's the whole goal of refactoring. 185

185

It is making it easier to implement new features 186

186

as time moves on. 187

187

Now, all right. 188

188

So let's see how we could do that. 189

189

So in here, 190

190

we are looping over the movements. 191

191

So that this array that we compute here 192

192

which is whether the sorted movements 193

193

or simply the movements themselves, right? 194

194

So we are looping over this 195

195

and in each iteration, 196

196

we are generating this HTML. 197

197

And so now, we simply need to add one more element here 198

198

to this HTML, 199

199

which is gonna contain that date. 200

200

So let's do that. 201

201

So in our HTML, 202

202

we can see that there is this element here 203

203

called movements_date. 204

204

So let's copy that 205

205

and paste it right here 206

206

after the type. 207

207

Okay, and so let's actually create a variable out here 208

208

and then put that variable right here. 209

209

Let's call it displayDate, okay. 210

210

Now, where is the date actually coming from? 211

211

Well, as we already know, 212

212

it is in the accounts.movementDates, right? 213

213

And so here, 214

214

we are looping over the movements. 215

215

And so at the same time, 216

216

basically we also need 217

217

to loop over the movement dates, okay. 218

218

But that's not a problem 219

219

because we already have the index here. 220

220

And so what we can do 221

221

is to write account 222

222

or acc.movementsDates 223

223

and then we take it at position i. 224

224

So that is the current index in the movements array. 225

225

And the same index is then gonna point 226

226

to the equivalent date in this movements date array. 227

227

All right, so this is a common technique 228

228

of looping over to erase at the same time. 229

229

So we called it for each method on one of them. 230

230

So that's the movements. 231

231

And then we use the current index 232

232

to also get the data from some other array. 233

233

Okay, and so that's gonna be 234

234

at the same position 235

235

because we're using the same index. 236

236

So, let's create a new date 237

237

out of this, 238

238

because as we saw before, 239

239

this is gonna be a nicely formatted time string, right? 240

240

And so, we can use that string 241

241

to create a new date object 242

242

and we need that object, 243

243

so that then from there, 244

244

we can call our usual methods 245

245

to get the date and the month and the year. 246

246

Okay, so that's the reason 247

247

why we need to convert these strings 248

248

back into a JavaScript object, 249

249

because only then, 250

250

we can actually work with that data. 251

251

And now let's actually create 252

252

the same variables that we already have here, 253

253

so there's no need to repeat it all. 254

254

Let's actually get all of this 255

255

and then delete what we don't need, 256

256

to make this a little bit faster. 257

257

So, we don't need the hour 258

258

and the minute, 259

259

so we don't need this. 260

260

And we want to create this variable called displayDate. 261

261

So the date 262

262

that we're ultimately gonna use here, displayDate, 263

263

and now, here we need to change from now 264

264

to date like this now. 265

265

All right, and we see, 266

266

it already worked, great. 267

267

So let's compare it actually here with the dates. 268

268

So in July 12, 2020, 269

269

and yeah, that works. 270

270

Here, then we have 11, 271

271

which for some reason, 272

272

there's also 12, 273

273

but I guess it's because we're close to midnight here. 274

274

And so for some reason, 275

275

probably it then changes over to the next day. 276

276

Then here we have 27 of May. 277

277

And so, that's also what we get here 278

278

all the way to the last one, 279

279

which is 18 of November. 280

280

So 2019. 281

281

So this is accurate. 282

282

Great, now, when we click here 283

283

on the sword, it's probably not gonna work. 284

284

So we get some kind of error here. 285

285

So cannot read property slice of undefined. 286

286

Let's see why that is. 287

287

Well, that's weird, 288

288

because accounts.movements here 289

289

is clearly defined. 290

290

It shouldn't be undefined. 291

291

Let's set this here to true by default. 292

292

And so, well now it is sorted. 293

293

So very weird that we get this bug, 294

294

as we click here. 295

295

That's just log to the console. 296

296

But indeed, this one here will be 297

297

and not undefined, 298

298

but actually now it's undefined. 299

299

So we get account.movements is undefined right now. 300

300

Now, that's weird, 301

301

but I guess it has something to do 302

302

with the fact that we faked our log in here. 303

303

So nevermind, let's take a look at this later. 304

304

Okay, let's just not sort for now 305

305

until we are back 306

306

to having our application normal, all right. 307

307

So, actually let's take this code here now, 308

308

and put it into the code that is executed 309

309

when we log in. 310

310

So besides this welcome message, 311

311

we then also want to create the current date. 312

312

Okay, so it's back to the original now. 313

313

Let's now log in, 314

314

and then we get the message here, 315

315

enter correct date. 316

316

But now what I wanted to show you 317

317

is what happens when we request a loan. 318

318

So you see that we get this error here, right? 319

319

And that's because this movement 320

320

doesn't have any date, right. 321

321

And that's why we get not a number in all the three values. 322

322

So we need to fix that. 323

323

So essentially, whenever there is a new transfer 324

324

or a new loan, 325

325

we need to not only push the new value 326

326

into the movements array, 327

327

but also into the movement dates, all right. 328

328

So let's actually see that in code. 329

329

So that's account one. 330

330

And so we see that the movements has now nine elements 331

331

while the dates only has eight. 332

332

All right, so we need to fix that. 333

333

So let's come here, to the transfer, 334

334

and then besides doing the transfer and updating the UI, 335

335

we also need to add transfer date, 336

336

but that's easy enough. 337

337

All we have to do is currentAccount.movementDates.push, 338

338

and then, simply create the current date. 339

339

So, new date and that's it. 340

340

So JavaScript will then automatically convert this data here 341

341

into a nicely formatted string. 342

342

All right, and now the same here also for the receiver, 343

343

because the receiver also gets a new movement here. 344

344

Okay, and so they also need a new date for that movement. 345

345

Now, as I told you also in the last section, 346

346

at the beginning of the project 347

347

in the real world 348

348

we would probably have an object for each movement. 349

349

And so that object would then contain the amount, the date, 350

350

and some other information about the movement, 351

351

but I don't want to restructure the entire application now. 352

352

And so therefore, I simply created 353

353

the separate movements dates, all right. 354

354

All right, now let's just take this here 355

355

and also add it to the loan. 356

356

So that's right here. 357

357

So add loan date 358

358

and that should be it. 359

359

So just to make sure here let's really log in again. 360

360

All right, and now I'm gonna request this loan 361

361

and now we get the current date. 362

362

So August 2nd, just as we have it up here. 363

363

Okay, `so let's see now D account. 364

364

So account one, 365

365

let's take a look at the movement dates. 366

366

And so indeed, 367

367

this is the one 368

368

or actually this is the one that I just added. 369

369

So this looks a little bit different from these ones 370

370

because actually it is really the object itself. 371

371

All right, so that's not good. 372

372

So let's instead use the two ISO, 373

373

a string, right here on the date 374

374

and do the same also up here. 375

375

Okay, and let's see if that fixes it then. 376

376

Okay, so probably there was some error here 377

377

because we're back to having not a number, 378

378

and, actually I need to 379

379

take a look at account one now again. 380

380

And so let's check out the latest date. 381

381

Oh, and I didn't call the method. 382

382

That was stupid. 383

383

Actually, this is something that happens to me 384

384

quite frequently with these dates methods 385

385

because we don't have to pass anything in there. 386

386

And so there's a tendency to forget 387

387

that we even need to call the method. 388

388

So don't make that same mistake. 389

389

All right, and now it works indeed. 390

390

So let's check if the string looks nice 391

391

with the same format as all the others, 392

392

and yeah, it does. 393

393

And so with this, 394

394

we finished one more lecture. 395

395

Now here, I am actually seeing something weird. 396

396

So it's 19:1, 397

397

but this should kind of be 01, shouldn't it. 398

398

So we need to apply some padding to that as well. 399

399

So that's a good coincidence 400

400

that we are just at this time where I can see this. 401

401

So let's go ahead quickly 402

402

and fix that right here in the login callback. 403

403

So that's here. 404

404

And so essentially what we just need to do 405

405

is to add this part 406

406

to the hour and to the minute. 407

407

So we make all of them a template literal again 408

408

and then, like this. 409

409

One more time. 410

410

Now okay, to see the effect, 411

411

we need to log in, 412

412

and beautiful, so that's a lot better. 413

413

And now, we indeed finished this lecture 414

414

and are ready to move on to the next one 415

415

where we're gonna work 416

416

just a little bit more with dates.