1
00:00:02,130 --> 00:00:03,770
Now, before we work on the date,

2
00:00:03,770 --> 00:00:05,939
there is one important thing,

3
00:00:05,939 --> 00:00:08,350
a little bit of extra CSS knowledge,

4
00:00:08,350 --> 00:00:11,623
which I absolutely want to highlight here.

5
00:00:12,470 --> 00:00:14,690
This post body here,

6
00:00:14,690 --> 00:00:16,410
has all the line breaks

7
00:00:16,410 --> 00:00:21,270
I added in the text area when we created the post.

8
00:00:21,270 --> 00:00:24,880
And that is not something you should take for granted,

9
00:00:24,880 --> 00:00:28,500
because early in the course, you learned, that by default,

10
00:00:28,500 --> 00:00:31,210
the browser ignores all the white space,

11
00:00:31,210 --> 00:00:34,510
and all the line breaks in the HTML code.

12
00:00:34,510 --> 00:00:38,700
And dynamically output text is no exception from this.

13
00:00:38,700 --> 00:00:41,690
But, you can override that default.

14
00:00:41,690 --> 00:00:45,600
And what I did do here, is in my styles,

15
00:00:45,600 --> 00:00:49,040
in the posts.CSS file at the very bottom,

16
00:00:49,040 --> 00:00:54,020
we have this style here for the element, with the body ID.

17
00:00:54,020 --> 00:00:59,020
And there I set the white space CSS property to pre-wrap.

18
00:00:59,880 --> 00:01:02,200
And that's a built in CSS property

19
00:01:02,200 --> 00:01:05,330
that allows us to control the browsers behavior,

20
00:01:05,330 --> 00:01:09,163
when it comes to dealing with white space and line breaks.

21
00:01:10,420 --> 00:01:12,140
Now, we've got a couple of values here,

22
00:01:12,140 --> 00:01:13,360
which we can assume.

23
00:01:13,360 --> 00:01:17,010
And normal if we use that, and save that,

24
00:01:17,010 --> 00:01:20,330
would actually not contain

25
00:01:20,330 --> 00:01:22,010
the white space and line breaks.

26
00:01:22,010 --> 00:01:25,060
So then, line breaks and white spaces are ignored,

27
00:01:25,060 --> 00:01:26,410
as they always are.

28
00:01:26,410 --> 00:01:28,570
So that's the default behavior.

29
00:01:28,570 --> 00:01:31,670
And hence this text here does not have the line break,

30
00:01:31,670 --> 00:01:34,453
which we did enter in our text area.

31
00:01:35,540 --> 00:01:37,840
Now, very often you want that default,

32
00:01:37,840 --> 00:01:39,140
which is why it is the default,

33
00:01:39,140 --> 00:01:41,770
but especially in cases like this,

34
00:01:41,770 --> 00:01:44,880
where you want to output some user-generated data,

35
00:01:44,880 --> 00:01:46,620
you might not want that.

36
00:01:46,620 --> 00:01:49,430
And that's why we have different modes here,

37
00:01:49,430 --> 00:01:51,410
and you can simply play around with them,

38
00:01:51,410 --> 00:01:54,470
but pre-wrap will simply make sure that white space

39
00:01:54,470 --> 00:01:56,770
and line breaks are preserved.

40
00:01:56,770 --> 00:01:59,100
And that, therefore, if a reload,

41
00:01:59,100 --> 00:02:01,720
we do have that line break again.

42
00:02:01,720 --> 00:02:04,160
So, that's something worth keeping in mind.

43
00:02:04,160 --> 00:02:07,680
Whenever you have some HTML code that contains line breaks,

44
00:02:07,680 --> 00:02:08,513
and white space,

45
00:02:08,513 --> 00:02:09,750
which you want to preserve,

46
00:02:10,930 --> 00:02:13,370
this CSS property with this concrete value

47
00:02:13,370 --> 00:02:14,740
will be your friend.

48
00:02:14,740 --> 00:02:17,743
And here I'm using it to preserve that user input.

49
00:02:19,317 --> 00:02:21,480
Now with that, we're outputting the details.

50
00:02:21,480 --> 00:02:22,420
The date, however,

51
00:02:22,420 --> 00:02:26,660
is not formatted in the way I want it to be formatted.

52
00:02:26,660 --> 00:02:27,550
And therefore,

53
00:02:27,550 --> 00:02:31,030
I'll do a little bit of extra work on the backend,

54
00:02:31,030 --> 00:02:34,933
in my route, to format the date appropriately.

55
00:02:36,190 --> 00:02:40,363
Here after checking that I do have a post,

56
00:02:41,630 --> 00:02:46,630
I will actually add a new constant post data, for example,

57
00:02:47,650 --> 00:02:49,980
which will be a new object.

58
00:02:49,980 --> 00:02:52,950
And that will be the object I want to pass to my template.

59
00:02:52,950 --> 00:02:56,370
So, the object that should hold all the posts data.

60
00:02:56,370 --> 00:02:57,820
Therefore, first of all,

61
00:02:57,820 --> 00:03:00,990
I will use the spread operator you learned about,

62
00:03:00,990 --> 00:03:05,943
to get all the data off my single post into that object.

63
00:03:07,240 --> 00:03:09,700
Now, this operator insures that

64
00:03:09,700 --> 00:03:12,520
we take all the key value pairs that are part

65
00:03:12,520 --> 00:03:14,360
of this single post object,

66
00:03:14,360 --> 00:03:17,750
which we have here as the first item in the posts array,

67
00:03:17,750 --> 00:03:19,740
and all those key value pairs

68
00:03:19,740 --> 00:03:22,660
are spread out into this new object.

69
00:03:22,660 --> 00:03:27,000
So they are copied over into this new object, you could say.

70
00:03:27,000 --> 00:03:27,833
So with that,

71
00:03:27,833 --> 00:03:28,666
I simply created

72
00:03:28,666 --> 00:03:31,873
a copy of that first item in the posts array.

73
00:03:32,910 --> 00:03:36,630
I did that, because now I will enrich this copy.

74
00:03:36,630 --> 00:03:39,163
I will enrich this object with more data.

75
00:03:40,140 --> 00:03:44,000
To be precise, I want to overwrite the date property,

76
00:03:44,000 --> 00:03:46,410
which would have been part of this post,

77
00:03:46,410 --> 00:03:49,170
with a different formatted date.

78
00:03:49,170 --> 00:03:53,910
I want to access the date that's stored in that first post,

79
00:03:53,910 --> 00:03:57,480
but call toISOString on it.

80
00:03:57,480 --> 00:03:59,130
The date which we got here.

81
00:03:59,130 --> 00:03:59,963
So the date,

82
00:03:59,963 --> 00:04:02,840
which is stored in the database, by default,

83
00:04:02,840 --> 00:04:06,640
is converted into a date JavaScript object,

84
00:04:06,640 --> 00:04:08,540
by the mySQL package.

85
00:04:08,540 --> 00:04:12,080
When it sees a date or a date-time value in the database,

86
00:04:12,080 --> 00:04:13,830
and you fetch that data,

87
00:04:13,830 --> 00:04:17,480
it will convert it into a date object for you.

88
00:04:17,480 --> 00:04:20,910
Therefore, we can call date object methods on it,

89
00:04:20,910 --> 00:04:22,169
like toISOString,

90
00:04:22,169 --> 00:04:25,620
which converts it into a standard, machine readable,

91
00:04:25,620 --> 00:04:27,800
string representation.

92
00:04:27,800 --> 00:04:31,630
Which is what we'll need for this date-time attribute here.

93
00:04:31,630 --> 00:04:34,580
There, we want to have a machine readable representation,

94
00:04:34,580 --> 00:04:37,113
and we will get that by calling toISOString.

95
00:04:38,790 --> 00:04:39,623
But in addition,

96
00:04:39,623 --> 00:04:43,240
I also want to have a human readable representation.

97
00:04:43,240 --> 00:04:47,110
So, I'll add a human readable date here.

98
00:04:47,110 --> 00:04:48,588
The property name is up to you,

99
00:04:48,588 --> 00:04:50,241
because it's your object,

100
00:04:50,241 --> 00:04:52,852
and I'm simply adding a new property to it.

101
00:04:52,852 --> 00:04:55,019
And that will be posts[0].

102
00:04:57,433 --> 00:04:59,556
So that single post we have .date,

103
00:04:59,556 --> 00:05:00,977
which is a date objects you learned,

104
00:05:00,977 --> 00:05:02,727
to local date string,

105
00:05:05,053 --> 00:05:08,806
and make sure you don't add a typo in there,

106
00:05:08,806 --> 00:05:10,454
which is another built in method,

107
00:05:10,454 --> 00:05:12,985
you can call on date objects.

108
00:05:12,985 --> 00:05:17,174
This allows us to transform this date into a string

109
00:05:17,174 --> 00:05:18,965
that is human readable.

110
00:05:18,965 --> 00:05:22,160
So that is formatted in a certain way.

111
00:05:22,160 --> 00:05:23,460
For that, we first of all,

112
00:05:23,460 --> 00:05:26,980
as a first parameter value have to pass in the local,

113
00:05:26,980 --> 00:05:29,973
which we want to use, like E N U S.

114
00:05:31,090 --> 00:05:33,860
And then we pass in a second parameter value,

115
00:05:33,860 --> 00:05:35,250
which is an object

116
00:05:35,250 --> 00:05:37,810
with the options that tell JavaScript

117
00:05:37,810 --> 00:05:40,650
how that date should be formatted.

118
00:05:40,650 --> 00:05:44,210
And you can search for JS toLocalDateString

119
00:05:44,210 --> 00:05:46,240
to find the MDN documentation

120
00:05:46,240 --> 00:05:49,080
with all the options you have there and how they work,

121
00:05:49,080 --> 00:05:50,930
if you want to play around with that.

122
00:05:52,240 --> 00:05:54,210
What I want to do here is,

123
00:05:54,210 --> 00:05:56,690
I want to add a weekday option,

124
00:05:56,690 --> 00:05:58,127
and set that to 'long',

125
00:05:59,940 --> 00:06:01,700
add a 'year' option,

126
00:06:01,700 --> 00:06:04,293
so the year key with a value of numeric,

127
00:06:05,340 --> 00:06:08,063
add a month key with a value of long,

128
00:06:09,300 --> 00:06:13,081
and a day key with a value of numeric again.

129
00:06:13,081 --> 00:06:14,200
And again,

130
00:06:14,200 --> 00:06:16,590
to find out which keys are supported,

131
00:06:16,590 --> 00:06:19,410
and which values are supported for which key,

132
00:06:19,410 --> 00:06:21,060
you can dive into these docs.

133
00:06:21,060 --> 00:06:24,100
If you want to deeply dive into this specific method,

134
00:06:24,100 --> 00:06:25,313
and how it works.

135
00:06:26,240 --> 00:06:29,850
This will give us a nicely formatted date.

136
00:06:29,850 --> 00:06:30,683
And hence,

137
00:06:30,683 --> 00:06:34,320
I will now pass this post data into my post here,

138
00:06:34,320 --> 00:06:37,683
instead of post zero in line 63,

139
00:06:38,820 --> 00:06:42,530
and then the post detail template,

140
00:06:42,530 --> 00:06:44,763
we can now utilize these new fields.

141
00:06:45,680 --> 00:06:47,990
Here for the machine readable field,

142
00:06:47,990 --> 00:06:50,740
I still will access post date,

143
00:06:50,740 --> 00:06:51,940
because we now did

144
00:06:51,940 --> 00:06:54,753
overwrite that with a more machine-readable version.

145
00:06:56,040 --> 00:06:57,940
But between the time text,

146
00:06:57,940 --> 00:07:01,133
I will now output post.humanReadableDate.

147
00:07:03,500 --> 00:07:05,740
And this field will be available,

148
00:07:05,740 --> 00:07:09,120
because it is a field we added to this object,

149
00:07:09,120 --> 00:07:12,253
which we pass as a post into the template.

150
00:07:14,570 --> 00:07:16,600
Hence with that,

151
00:07:16,600 --> 00:07:18,730
after adding all of this here in the template,

152
00:07:18,730 --> 00:07:20,810
if you save all the files,

153
00:07:20,810 --> 00:07:23,493
and you reload this single post page,

154
00:07:24,588 --> 00:07:27,200
now we've got that more human readable version off the date.

155
00:07:27,200 --> 00:07:29,750
And that's, of course, also just a little bonus,

156
00:07:29,750 --> 00:07:33,630
not directly related to fetching data from a database,

157
00:07:33,630 --> 00:07:35,840
but I find it important to also show you

158
00:07:35,840 --> 00:07:39,540
what you can do with data coming from such a data source,

159
00:07:39,540 --> 00:07:41,763
and that is one possible example.

160
00:07:42,970 --> 00:07:43,803
And with that,

161
00:07:43,803 --> 00:07:46,660
we're now also showing the details about a post

162
00:07:46,660 --> 00:07:48,060
that's working,

163
00:07:48,060 --> 00:07:49,600
we have the list of posts,

164
00:07:49,600 --> 00:07:51,180
we can add posts,

165
00:07:51,180 --> 00:07:52,700
what's missing, of course,

166
00:07:52,700 --> 00:07:53,883
is the feature to update,

167
00:07:53,883 --> 00:07:57,000
and to delete posts.

168
00:07:57,000 --> 00:07:58,670
As always, as mentioned before,

169
00:07:58,670 --> 00:08:01,940
feel free to try implementing those features on your own.

170
00:08:01,940 --> 00:08:04,040
We're going to work on those features together

171
00:08:04,040 --> 00:08:05,363
in the next lectures.