From 4bc24f5395ca08b7a42b4ba8d2de16dd8df2ef02 Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Mon, 30 Aug 2021 23:19:33 +0800
Subject: [PATCH] date formatter in a single file

---
 app/blog/components/date.tsx                  |  8 +---
 app/blog/components/more-stories.tsx          | 15 ++----
 app/blog/pages/articles/[slug].tsx            | 12 ++---
 app/core/helpers/date-formatter.ts            | 48 +++++++++++++++++++
 app/messages/components/conversation.tsx      | 10 ++--
 .../components/conversations-list.tsx         | 21 +-------
 app/public-area/pages/roadmap.tsx             | 13 ++---
 7 files changed, 67 insertions(+), 60 deletions(-)
 create mode 100644 app/core/helpers/date-formatter.ts

diff --git a/app/blog/components/date.tsx b/app/blog/components/date.tsx
index 2dcb692..77a5ebf 100644
--- a/app/blog/components/date.tsx
+++ b/app/blog/components/date.tsx
@@ -1,10 +1,6 @@
-const formatter = Intl.DateTimeFormat("en-US", {
-	day: "2-digit",
-	month: "short",
-	year: "numeric",
-});
+import { formatDate } from "../../core/helpers/date-formatter";
 
 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>;
 }
diff --git a/app/blog/components/more-stories.tsx b/app/blog/components/more-stories.tsx
index 8a791af..277c7dd 100644
--- a/app/blog/components/more-stories.tsx
+++ b/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">
-												{formatter.format(new Date(post.date))}
-											</div>
+											<div className="text-sm opacity-80">{formatDate(new Date(post.date))}</div>
 										</header>
 										<footer>
 											{/* Author meta */}
diff --git a/app/blog/pages/articles/[slug].tsx b/app/blog/pages/articles/[slug].tsx
index 20c69a8..25a44b2 100644
--- a/app/blog/pages/articles/[slug].tsx
+++ b/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>
diff --git a/app/core/helpers/date-formatter.ts b/app/core/helpers/date-formatter.ts
new file mode 100644
index 0000000..56a525a
--- /dev/null
+++ b/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" });
+}
diff --git a/app/messages/components/conversation.tsx b/app/messages/components/conversation.tsx
index d12f989..42e4f3a 100644
--- a/app/messages/components/conversation.tsx
+++ b/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>
-											{new Date(message.sentAt).toLocaleTimeString("en-US", {
-												hour: "2-digit",
-												minute: "2-digit",
-											})}
-										</span>
+										<span>{formatTime(new Date(message.sentAt))}</span>
 									</div>
 								)}
 
diff --git a/app/messages/components/conversations-list.tsx b/app/messages/components/conversations-list.tsx
index 8450c18..0529d27 100644
--- a/app/messages/components/conversations-list.tsx
+++ b/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" });
-}
diff --git a/app/public-area/pages/roadmap.tsx b/app/public-area/pages/roadmap.tsx
index 6b68e89..6d1de40 100644
--- a/app/public-area/pages/roadmap.tsx
+++ b/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 Footer from "../components/footer";
+import { formatDate } from "../../core/helpers/date-formatter";
+
 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;