date formatter in a single file

app/blog/components/date.tsx

@@ -1,10 +1,6 @@
-const formatter = Intl.DateTimeFormat("en-US", {
+import { formatDate } from "../../core/helpers/date-formatter";
-	day: "2-digit",
-	month: "short",
-	year: "numeric",
-});
 
 export default function DateComponent({ dateString }: any) {
 	const date = new Date(dateString);
-	return <time dateTime={dateString}>{formatter.format(date)}</time>;
+	return <time dateTime={dateString}>{formatDate(date)}</time>;
 }

app/blog/components/more-stories.tsx

@@ -1,17 +1,14 @@
 import { Link, Routes } from "blitz";
-import PostPreview from "./post-preview";
+
 import type { Post } from "../../../integrations/datocms";
+import { formatDate } from "../../core/helpers/date-formatter";
+
+import PostPreview from "./post-preview";
 
 type Props = {
 	posts: Post[];
 };
 
-const formatter = Intl.DateTimeFormat("en-US", {
-	day: "2-digit",
-	month: "short",
-	year: "numeric",
-});
-
 export default function MoreStories({ posts }: Props) {
 	return (
 		<aside>
@@ -46,9 +43,7 @@ export default function MoreStories({ posts }: Props) {
 													</h3>
 												</a>
 											</Link>
-											<div className="text-sm opacity-80">
+											<div className="text-sm opacity-80">{formatDate(new Date(post.date))}</div>
-												{formatter.format(new Date(post.date))}
-											</div>
 										</header>
 										<footer>
 											{/* Author meta */}

app/blog/pages/articles/[slug].tsx

@@ -1,9 +1,11 @@
 import type { BlitzPage, GetStaticPaths, GetStaticProps } from "blitz";
-import { Head, useRouter } from "blitz";
+import { useRouter } from "blitz";
 import ErrorPage from "next/error";
 
 import type { Post } from "integrations/datocms";
 import { getAllPostsWithSlug, getPostAndMorePosts, markdownToHtml } from "integrations/datocms";
+import { formatDate } from "../../../core/helpers/date-formatter";
+
 import Header from "../../../public-area/components/header";
 import PostBody from "../../components/post-body";
 import SectionSeparator from "../../components/section-separator";
@@ -15,12 +17,6 @@ type Props = {
 	preview: boolean;
 };
 
-const formatter = Intl.DateTimeFormat("en-US", {
-	day: "2-digit",
-	month: "short",
-	year: "numeric",
-});
-
 const PostPage: BlitzPage<Props> = ({ post, morePosts, preview }) => {
 	const router = useRouter();
 	if (!router.isFallback && !post?.slug) {
@@ -81,7 +77,7 @@ const PostPage: BlitzPage<Props> = ({ post, morePosts, preview }) => {
 													</a>
 													<span className="text-gray-600 dark:text-gray-400">
 														{" "}
-														· {formatter.format(new Date(post.date))}
+														· {formatDate(new Date(post.date))}
 													</span>
 												</div>
 											</div>

app/core/helpers/date-formatter.ts

@@ -0,0 +1,48 @@
+import { DateTime } from "luxon";
+
+export function formatDate(date: Date, config?: Intl.DateTimeFormatOptions): string {
+	const dateFormatter = Intl.DateTimeFormat(
+		"en-US",
+		config ?? {
+			day: "2-digit",
+			month: "short",
+			year: "numeric",
+		},
+	);
+
+	return dateFormatter.format(date);
+}
+
+export function formatTime(date: Date, config?: Intl.DateTimeFormatOptions): string {
+	const timeFormatter = Intl.DateTimeFormat(
+		"en-US",
+		config ?? {
+			hour: "2-digit",
+			minute: "2-digit",
+		},
+	);
+
+	return timeFormatter.format(date);
+}
+
+export function formatRelativeDate(date: Date): string {
+	const dateTime = DateTime.fromJSDate(date);
+	const diff = dateTime.diffNow("days");
+
+	const isToday = diff.days >= -1;
+	if (isToday) {
+		return dateTime.toFormat("HH:mm", { locale: "en-US" });
+	}
+
+	const isYesterday = diff.days >= -2;
+	if (isYesterday) {
+		return "Yesterday";
+	}
+
+	const isDuringLastWeek = diff.days >= -7;
+	if (isDuringLastWeek) {
+		return dateTime.weekdayLong;
+	}
+
+	return dateTime.toFormat("dd/MM/yyyy", { locale: "en-US" });
+}

app/messages/components/conversation.tsx

@@ -5,6 +5,7 @@ import clsx from "clsx";
 import { Direction } from "../../../db";
 import useConversation from "../hooks/use-conversation";
 import NewMessageArea from "./new-message-area";
+import { formatDate, formatTime } from "../../core/helpers/date-formatter";
 
 export default function Conversation() {
 	const router = useRouter();
@@ -42,18 +43,13 @@ export default function Conversation() {
 								{(!isPreviousMessageFromSameSender || !shouldGroupMessages) && (
 									<div className="flex py-2 space-x-1 text-xs justify-center">
 										<strong>
-											{new Date(message.sentAt).toLocaleDateString("en-US", {
+											{formatDate(new Date(message.sentAt), {
 												weekday: "long",
 												day: "2-digit",
 												month: "short",
 											})}
 										</strong>
-										<span>
+										<span>{formatTime(new Date(message.sentAt))}</span>
-											{new Date(message.sentAt).toLocaleTimeString("en-US", {
-												hour: "2-digit",
-												minute: "2-digit",
-											})}
-										</span>
 									</div>
 								)}
 

app/messages/components/conversations-list.tsx

@@ -1,9 +1,9 @@
 import { Link, useQuery, Routes } from "blitz";
-import { DateTime } from "luxon";
 import { faChevronRight } from "@fortawesome/pro-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import getConversationsQuery from "../queries/get-conversations";
+import { formatRelativeDate } from "../../core/helpers/date-formatter";
 
 export default function ConversationsList() {
 	const conversations = useQuery(getConversationsQuery, {})[0];
@@ -23,7 +23,7 @@ export default function ConversationsList() {
 								<div className="flex flex-row justify-between">
 									<strong>{formattedPhoneNumber}</strong>
 									<div className="text-gray-700 flex flex-row gap-x-1">
-										{formatMessageDate(lastMessage.sentAt)}
+										{formatRelativeDate(lastMessage.sentAt)}
 										<FontAwesomeIcon className="w-4 h-4 my-auto" icon={faChevronRight} />
 									</div>
 								</div>
@@ -36,20 +36,3 @@ export default function ConversationsList() {
 		</ul>
 	);
 }
-
-function formatMessageDate(date: Date): string {
-	const messageDate = DateTime.fromJSDate(date);
-	const diff = messageDate.diffNow("days");
-
-	const isToday = diff.days > -1;
-	if (isToday) {
-		return messageDate.toFormat("HH:mm", { locale: "en-US" });
-	}
-
-	const isDuringLastWeek = diff.days > -8;
-	if (isDuringLastWeek) {
-		return messageDate.weekdayLong;
-	}
-
-	return messageDate.toFormat("dd/MM/yyyy", { locale: "en-US" });
-}

app/public-area/pages/roadmap.tsx

@@ -1,10 +1,9 @@
 import type { BlitzPage } from "blitz";
-import { Head } from "blitz";
 import clsx from "clsx";
 import { CheckIcon, XIcon, TerminalIcon } from "@heroicons/react/solid";
 
-import Header from "../components/header";
+import { formatDate } from "../../core/helpers/date-formatter";
-import Footer from "../components/footer";
+
 import Layout from "../components/layout";
 
 const Roadmap: BlitzPage = () => {
@@ -45,7 +44,7 @@ const Roadmap: BlitzPage = () => {
 									</div>
 									{isDone ? (
 										<div className="text-right self-start text-md xl:text-lg whitespace-nowrap text-gray-500">
-											<time>{formatter.format(feature.doneDate)}</time>
+											<time>{formatDate(feature.doneDate)}</time>
 										</div>
 									) : null}
 								</div>
@@ -131,12 +130,6 @@ const roadmap: RoadmapItem[] = [
 	},
 ];
 
-const formatter = Intl.DateTimeFormat("en-US", {
-	day: "2-digit",
-	month: "short",
-	year: "numeric",
-});
-
 Roadmap.getLayout = (page) => <Layout title="(Rough) Roadmap">{page}</Layout>;
 Roadmap.suppressFirstRenderFlicker = true;