leaflet.pub
a tool for shared writing and social publishing
use hook/component for localized dates
awarm.space
+59
-31
+10
app/lish/[did]/[publication]/LocalizedDate.tsx
+10
app/lish/[did]/[publication]/LocalizedDate.tsx
···
1
+
"use client";
2
+
import { useLocalizedDate } from "src/hooks/useLocalizedDate";
3
+
4
+
export function LocalizedDate(props: {
5
+
dateString: string;
6
+
options?: Intl.DateTimeFormatOptions;
7
+
}) {
8
+
const formattedDate = useLocalizedDate(props.dateString, props.options);
9
+
return <>{formattedDate}</>;
10
+
}
+11
-7
app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
+11
-7
app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
···
12
12
import { EditTiny } from "components/Icons/EditTiny";
13
13
import { SpeedyLink } from "components/SpeedyLink";
14
14
import { decodeQuotePosition } from "../quotePosition";
15
+
import { useLocalizedDate } from "src/hooks/useLocalizedDate";
15
16
16
17
export function PostHeader(props: {
17
18
data: PostPageData;
···
25
26
let profile = props.profile;
26
27
let pub = props.data?.documents_in_publications[0].publications;
27
28
let pubRecord = pub?.record as PubLeafletPublication.Record;
29
+
30
+
const formattedDate = useLocalizedDate(
31
+
record.publishedAt || new Date().toISOString(),
32
+
{
33
+
year: "numeric",
34
+
month: "long",
35
+
day: "2-digit",
36
+
}
37
+
);
28
38
29
39
if (!document?.data || !document.documents_in_publications[0].publications)
30
40
return;
···
78
88
{record.publishedAt ? (
79
89
<>
80
90
|
81
-
<p>
82
-
{new Date(record.publishedAt).toLocaleDateString(undefined, {
83
-
year: "numeric",
84
-
month: "long",
85
-
day: "2-digit",
86
-
})}
87
-
</p>
91
+
<p>{formattedDate}</p>
88
92
</>
89
93
) : null}
90
94
|{" "}
+16
-11
app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
+16
-11
app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
···
17
17
import { SpeedyLink } from "components/SpeedyLink";
18
18
import { QuoteTiny } from "components/Icons/QuoteTiny";
19
19
import { CommentTiny } from "components/Icons/CommentTiny";
20
+
import { useLocalizedDate } from "src/hooks/useLocalizedDate";
20
21
21
22
export function PublishedPostsList(props: {
22
23
searchValue: string;
···
97
98
) : null}
98
99
<div className="text-sm text-tertiary flex gap-1 flex-wrap pt-3">
99
100
{record.publishedAt ? (
100
-
<p className="text-sm text-tertiary">
101
-
Published{" "}
102
-
{new Date(record.publishedAt).toLocaleDateString(
103
-
undefined,
104
-
{
105
-
year: "numeric",
106
-
month: "long",
107
-
day: "2-digit",
108
-
},
109
-
)}
110
-
</p>
101
+
<PublishedDate dateString={record.publishedAt} />
111
102
) : null}
112
103
{(comments > 0 || quotes > 0) && record.publishedAt
113
104
? " | "
···
238
229
);
239
230
}
240
231
}
232
+
233
+
function PublishedDate(props: { dateString: string }) {
234
+
const formattedDate = useLocalizedDate(props.dateString, {
235
+
year: "numeric",
236
+
month: "long",
237
+
day: "2-digit",
238
+
});
239
+
240
+
return (
241
+
<p className="text-sm text-tertiary">
242
+
Published {formattedDate}
243
+
</p>
244
+
);
245
+
}
+11
-8
app/lish/[did]/[publication]/page.tsx
+11
-8
app/lish/[did]/[publication]/page.tsx
···
14
14
import { SpeedyLink } from "components/SpeedyLink";
15
15
import { QuoteTiny } from "components/Icons/QuoteTiny";
16
16
import { CommentTiny } from "components/Icons/CommentTiny";
17
+
import { LocalizedDate } from "./LocalizedDate";
17
18
18
19
export default async function Publication(props: {
19
20
params: Promise<{ publication: string; did: string }>;
···
152
153
153
154
<div className="text-sm text-tertiary flex gap-1 flex-wrap pt-2">
154
155
<p className="text-sm text-tertiary ">
155
-
{doc_record.publishedAt &&
156
-
new Date(
157
-
doc_record.publishedAt,
158
-
).toLocaleDateString(undefined, {
159
-
year: "numeric",
160
-
month: "long",
161
-
day: "2-digit",
162
-
})}{" "}
156
+
{doc_record.publishedAt && (
157
+
<LocalizedDate
158
+
dateString={doc_record.publishedAt}
159
+
options={{
160
+
year: "numeric",
161
+
month: "long",
162
+
day: "2-digit",
163
+
}}
164
+
/>
165
+
)}{" "}
163
166
</p>
164
167
{comments > 0 || quotes > 0 ? "| " : ""}
165
168
{quotes > 0 && (
+11
-5
app/reader/ReaderContent.tsx
+11
-5
app/reader/ReaderContent.tsx
···
20
20
import { useEffect, useRef } from "react";
21
21
import { useRouter } from "next/navigation";
22
22
import Link from "next/link";
23
+
import { useLocalizedDate } from "src/hooks/useLocalizedDate";
23
24
24
25
export const ReaderContent = (props: {
25
26
root_entity: string;
···
198
199
author: string;
199
200
publishedAt: string | undefined;
200
201
}) => {
202
+
const formattedDate = useLocalizedDate(
203
+
props.publishedAt || new Date().toISOString(),
204
+
{
205
+
year: "numeric",
206
+
month: "short",
207
+
day: "numeric",
208
+
}
209
+
);
210
+
201
211
return (
202
212
<div className="flex flex-wrap gap-2 grow items-center shrink-0">
203
213
{props.author}
204
214
{props.publishedAt && (
205
215
<>
206
216
<Separator classname="h-4 !min-h-0" />
207
-
{new Date(props.publishedAt).toLocaleDateString("en-US", {
208
-
year: "numeric",
209
-
month: "short",
210
-
day: "numeric",
211
-
})}{" "}
217
+
{formattedDate}{" "}
212
218
</>
213
219
)}
214
220
</div>