1
00:00:02,290 --> 00:00:04,700
I did already transform this date

2
00:00:04,700 --> 00:00:07,330
and talk about that in the MySQL section,

3
00:00:07,330 --> 00:00:09,530
so again, I'll keep this a bit shorter here.

4
00:00:10,470 --> 00:00:13,910
It is worth understanding which format this date has

5
00:00:13,910 --> 00:00:16,900
when we fetch it from the database though.

6
00:00:16,900 --> 00:00:20,740
So for this, I'll go back to blog.js,

7
00:00:20,740 --> 00:00:25,740
and I will start by console.logging post.date here

8
00:00:26,410 --> 00:00:28,050
so that we can have a look at this

9
00:00:28,050 --> 00:00:30,133
in our raw JavaScript code.

10
00:00:31,580 --> 00:00:35,080
If I now reload this page and go back to my terminal,

11
00:00:35,080 --> 00:00:36,760
this is what we get.

12
00:00:36,760 --> 00:00:40,510
So in the end, what we have here is a date object.

13
00:00:40,510 --> 00:00:41,910
That's what I can tell you.

14
00:00:41,910 --> 00:00:44,700
MongoDB, when it fetches a date from the database,

15
00:00:44,700 --> 00:00:46,200
will automatically convert it

16
00:00:46,200 --> 00:00:50,610
to this built-in date object JavaScript offers to you.

17
00:00:50,610 --> 00:00:51,443
And that's good,

18
00:00:51,443 --> 00:00:54,010
because that means that all these convenience methods

19
00:00:54,010 --> 00:00:56,020
that exist on this date object,

20
00:00:56,020 --> 00:00:58,150
which we have used here and there already

21
00:00:58,150 --> 00:00:59,290
throughout this course,

22
00:00:59,290 --> 00:01:03,340
can be used on this fetch the date just like this.

23
00:01:03,340 --> 00:01:05,120
So with that new information gained,

24
00:01:05,120 --> 00:01:08,700
what I wanna do here is I wanna manipulate my post

25
00:01:08,700 --> 00:01:10,100
a little bit.

26
00:01:10,100 --> 00:01:11,790
For my post object here,

27
00:01:11,790 --> 00:01:16,500
I'll add a humanReadableDate first of all,

28
00:01:16,500 --> 00:01:19,330
which I'll set equal to post.date

29
00:01:19,330 --> 00:01:24,330
which will be of this built-in date object type already.

30
00:01:24,710 --> 00:01:27,610
And therefore, on that date, I'll call toLocaleDateString,

31
00:01:29,320 --> 00:01:32,030
which is a method built into JavaScript,

32
00:01:32,030 --> 00:01:34,643
built into that date object we have there.

33
00:01:36,340 --> 00:01:39,440
You can, of course, look up the exact definition on MDN.

34
00:01:39,440 --> 00:01:42,260
I also do show that in the MySQL section.

35
00:01:42,260 --> 00:01:43,093
But in the end,

36
00:01:43,093 --> 00:01:46,070
that's a method that can be used on any date object

37
00:01:46,070 --> 00:01:50,223
to format this date in a human readable format.

38
00:01:51,150 --> 00:01:55,710
We first of all specify the locale we're targeting,

39
00:01:55,710 --> 00:01:58,690
so the kind of language we're targeting.

40
00:01:58,690 --> 00:02:01,960
And then, we can pass a second argument,

41
00:02:01,960 --> 00:02:03,400
a second parameter value,

42
00:02:03,400 --> 00:02:07,180
which is an object with some configuration options.

43
00:02:07,180 --> 00:02:11,009
For example, we can set the weekday option to long

44
00:02:11,009 --> 00:02:14,580
so that the output date will describe the day of the week

45
00:02:14,580 --> 00:02:15,650
in a long way,

46
00:02:15,650 --> 00:02:17,433
so in a very readable way.

47
00:02:18,530 --> 00:02:20,310
We can set the year to numeric

48
00:02:20,310 --> 00:02:22,940
so that the year portion is output as a number,

49
00:02:22,940 --> 00:02:25,460
as a long number to be precise.

50
00:02:25,460 --> 00:02:27,390
Month can be set to long

51
00:02:27,390 --> 00:02:30,470
so that we don't output an abbreviated version of the month,

52
00:02:30,470 --> 00:02:33,180
but we print the full month name.

53
00:02:33,180 --> 00:02:37,143
And day can be output as a number again, with numeric.

54
00:02:38,150 --> 00:02:40,230
Now these are some of the possible options

55
00:02:40,230 --> 00:02:41,370
we can choose from.

56
00:02:41,370 --> 00:02:44,340
Again, if you search for toLocaleDateString,

57
00:02:44,340 --> 00:02:46,260
you'll find the full documentation

58
00:02:46,260 --> 00:02:49,593
with all the different configuration options you can use.

59
00:02:50,940 --> 00:02:53,410
But with that, I'm adding this new property

60
00:02:53,410 --> 00:02:55,360
to this post object.

61
00:02:55,360 --> 00:02:58,800
You did learn before that you can just add new properties

62
00:02:58,800 --> 00:03:01,200
to existing JavaScript objects

63
00:03:01,200 --> 00:03:04,540
by simply accessing properties that don't exist yet

64
00:03:04,540 --> 00:03:06,010
through the dot notation

65
00:03:06,010 --> 00:03:08,400
and then setting a value to them.

66
00:03:08,400 --> 00:03:09,710
And after this was done,

67
00:03:09,710 --> 00:03:12,260
I'll also override the date property

68
00:03:12,260 --> 00:03:14,863
and set it to post.date.toISOString,

69
00:03:16,430 --> 00:03:19,670
which gives us a machine-readable string version

70
00:03:19,670 --> 00:03:20,853
of that date.

71
00:03:23,050 --> 00:03:26,110
And therefore now I manipulated my post a little bit,

72
00:03:26,110 --> 00:03:28,470
and back in post-detail,

73
00:03:28,470 --> 00:03:31,790
post.date is now that machine-readable version.

74
00:03:31,790 --> 00:03:35,203
And here, we can now output post.humanReadableDate,

75
00:03:37,800 --> 00:03:39,610
that new property I added.

76
00:03:39,610 --> 00:03:42,110
We an output this here as the text

77
00:03:42,110 --> 00:03:43,783
that will be showed to the user.

78
00:03:46,450 --> 00:03:49,450
So that's this new property I added here.

79
00:03:49,450 --> 00:03:50,560
And with that all,

80
00:03:50,560 --> 00:03:52,320
if we now save this and reload,

81
00:03:52,320 --> 00:03:54,840
we got the human-readable text here.

82
00:03:54,840 --> 00:03:56,773
And if we inspect this,

83
00:03:57,940 --> 00:04:00,133
here we got the machine-readable version.

84
00:04:02,820 --> 00:04:04,260
So that's all looking good.

85
00:04:04,260 --> 00:04:07,350
And with that, we now are outputting

86
00:04:07,350 --> 00:04:10,273
all the post detail data I do want to output.

87
00:04:11,510 --> 00:04:13,300
Hence, we're already coming closer

88
00:04:13,300 --> 00:04:15,380
to the end of this course section.

89
00:04:15,380 --> 00:04:19,220
The last steps I want to take here,

90
00:04:19,220 --> 00:04:22,580
the last features that should be implemented, of course,

91
00:04:22,580 --> 00:04:26,690
are the features that allow us to edit and delete posts.

92
00:04:26,690 --> 00:04:29,740
And as always, definitely pause here.

93
00:04:29,740 --> 00:04:32,730
Don't follow along with the next lectures just yet.

94
00:04:32,730 --> 00:04:36,120
Instead, try implementing those features on your own.

95
00:04:36,120 --> 00:04:38,480
For the added post link here,

96
00:04:38,480 --> 00:04:42,190
you should make sure that this added post,

97
00:04:42,190 --> 00:04:46,200
this update-post template is opened, is rendered,

98
00:04:46,200 --> 00:04:50,450
and may be prepopulated with the current data of the post,

99
00:04:50,450 --> 00:04:53,090
that it's submittable and you then have a route

100
00:04:53,090 --> 00:04:54,980
for handling this submission,

101
00:04:54,980 --> 00:04:58,270
and that you then do update the data in the database

102
00:04:58,270 --> 00:05:02,600
and that you also do add that deletion functionality.

103
00:05:02,600 --> 00:05:04,690
Definitely try it on your own first.

104
00:05:04,690 --> 00:05:05,880
Over the next lectures,

105
00:05:05,880 --> 00:05:07,880
we'll implement those features together.