leaflet.pub
a tool for shared writing and social publishing
fix hydration error caused by date in bsky embed
awarm.space
+20
-11
+20
-11
app/lish/[did]/[publication]/[rkey]/PublishBskyPostBlock.tsx
+20
-11
app/lish/[did]/[publication]/[rkey]/PublishBskyPostBlock.tsx
···
43
43
let postId = post.uri.split("/")[4];
44
44
let url = `https://bsky.app/profile/${post.author.handle}/post/${postId}`;
45
45
46
-
let datetimeFormatted = new Date(
47
-
timestamp ? timestamp : "",
48
-
).toLocaleString("en-US", {
49
-
month: "short",
50
-
day: "numeric",
51
-
year: "numeric",
52
-
hour: "numeric",
53
-
minute: "numeric",
54
-
hour12: true,
55
-
});
56
46
return (
57
47
<div
58
48
className={`
···
98
88
</>
99
89
)}
100
90
<div className="w-full flex gap-2 items-center justify-between">
101
-
<div className="text-xs text-tertiary">{datetimeFormatted}</div>
91
+
<ClientDate date={timestamp} />
102
92
<div className="flex gap-2 items-center">
103
93
{post.replyCount && post.replyCount > 0 && (
104
94
<>
···
123
113
);
124
114
}
125
115
};
116
+
117
+
const ClientDate = (props: { date?: string }) => {
118
+
let pageLoaded = useInitialPageLoad();
119
+
if (!pageLoaded) return null;
120
+
121
+
let datetimeFormatted = new Date(props.date ? props.date : "").toLocaleString(
122
+
"en-US",
123
+
{
124
+
month: "short",
125
+
day: "numeric",
126
+
year: "numeric",
127
+
hour: "numeric",
128
+
minute: "numeric",
129
+
hour12: true,
130
+
},
131
+
);
132
+
133
+
return <div className="text-xs text-tertiary">{datetimeFormatted}</div>;
134
+
};