From 4bbc00ce2f309c25d73d8407188865e8cc447bbb Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Thu, 30 Jul 2026 20:50:31 +0000
Subject: [PATCH] DJ-72: Deduplicate raw date formatting into shared formatDate
 util

---
 frontend/components/article/ArticleMeta.tsx    | 3 ++-
 frontend/components/article/ArticlePreview.tsx | 3 ++-
 frontend/components/comment/Comment.tsx        | 3 ++-
 frontend/lib/utils/formatDate.ts               | 8 ++++++++
 4 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 frontend/lib/utils/formatDate.ts

diff --git a/frontend/components/article/ArticleMeta.tsx b/frontend/components/article/ArticleMeta.tsx
index 450795e86..1651db295 100644
--- a/frontend/components/article/ArticleMeta.tsx
+++ b/frontend/components/article/ArticleMeta.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import ArticleActions from "./ArticleActions";
 import CustomImage from "../common/CustomImage";
 import CustomLink from "../common/CustomLink";
+import formatDate from "../../lib/utils/formatDate";
 
 const ArticleMeta = ({ article }) => {
   if (!article) return;
@@ -25,7 +26,7 @@ const ArticleMeta = ({ article }) => {
           {article.author?.username}
         </CustomLink>
         <span className="date">
-          {new Date(article.createdAt).toDateString()}
+          {formatDate(article.createdAt)}
         </span>
       </div>
 
diff --git a/frontend/components/article/ArticlePreview.tsx b/frontend/components/article/ArticlePreview.tsx
index 266853203..ac731d96e 100644
--- a/frontend/components/article/ArticlePreview.tsx
+++ b/frontend/components/article/ArticlePreview.tsx
@@ -9,6 +9,7 @@ import CustomImage from "../common/CustomImage";
 import { usePageDispatch } from "../../lib/context/PageContext";
 import checkLogin from "../../lib/utils/checkLogin";
 import { SERVER_BASE_URL } from "../../lib/utils/constant";
+import formatDate from "../../lib/utils/formatDate";
 import storage from "../../lib/utils/storage";
 
 const FAVORITED_CLASS = "btn btn-sm btn-primary";
@@ -91,7 +92,7 @@ const ArticlePreview = ({ article }) => {
             <span onClick={() => setPage(0)}>{preview.author.username}</span>
           </CustomLink>
           <span className="date">
-            {new Date(preview.createdAt).toDateString()}
+            {formatDate(preview.createdAt)}
           </span>
         </div>
 
diff --git a/frontend/components/comment/Comment.tsx b/frontend/components/comment/Comment.tsx
index 3604dce34..980348e16 100644
--- a/frontend/components/comment/Comment.tsx
+++ b/frontend/components/comment/Comment.tsx
@@ -6,6 +6,7 @@ import CustomImage from "../common/CustomImage";
 import Maybe from "../common/Maybe";
 import DeleteButton from "./DeleteButton";
 import checkLogin from "../../lib/utils/checkLogin";
+import formatDate from "../../lib/utils/formatDate";
 import storage from "../../lib/utils/storage";
 
 const Comment = ({ comment }) => {
@@ -40,7 +41,7 @@ const Comment = ({ comment }) => {
           {comment.author.username}
         </CustomLink>
         <span className="date-posted">
-          {new Date(comment.createdAt).toDateString()}
+          {formatDate(comment.createdAt)}
         </span>
         <Maybe test={canModify}>
           <DeleteButton commentId={comment.id} />
diff --git a/frontend/lib/utils/formatDate.ts b/frontend/lib/utils/formatDate.ts
new file mode 100644
index 000000000..e3d282342
--- /dev/null
+++ b/frontend/lib/utils/formatDate.ts
@@ -0,0 +1,8 @@
+const formatDate = (iso: string): string =>
+  new Date(iso).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+
+export default formatDate;