fix: date format helper (#8380)

* fix: date format helper * fix: date locales * fix: date locale hardcode
EddieHubCommunity · Jul 31, 2023 · b70f3b1 · b70f3b1
1 parent 3ab0dbd
commit b70f3b1
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 52 deletions.
diff --git a/components/event/EventCard.js b/components/event/EventCard.js
@@ -11,6 +11,7 @@ import { TbCoin, TbCoinOff } from "react-icons/tb";
 import Link from "@components/Link";
 import FallbackImage from "@components/FallbackImage";
 import Edit from "@components/account/manage/Edit";
+import dateFormat from "@services/utils/dateFormat";
 
 export default function EventCard({ manage, event, usernames }) {
   const fallbackImageSize = 60;
@@ -19,21 +20,9 @@ export default function EventCard({ manage, event, usernames }) {
   const [endTime, setEndTime] = useState(event.date.end);
 
   useEffect(() => {
-    const dateTimeStyle = {
-      dateStyle: "full",
-      timeStyle: "long",
-    };
     try {
-      setStartTime(
-        new Intl.DateTimeFormat("en-GB", dateTimeStyle).format(
-          new Date(event.date.start)
-        )
-      );
-      setEndTime(
-        new Intl.DateTimeFormat("en-GB", dateTimeStyle).format(
-          new Date(event.date.end)
-        )
-      );
+      setStartTime(dateFormat({ format: "long", date: event.date.start }));
+      setEndTime(dateFormat({ format: "long", date: event.date.end }));
     } catch (e) {
       setStartTime(event.date.start);
       setEndTime(event.date.end);

diff --git a/pages/account/statistics.js b/pages/account/statistics.js
@@ -13,6 +13,7 @@ import PageHead from "@components/PageHead";
 import { abbreviateNumber } from "@services/utils/abbreviateNumbers";
 import Navigation from "@components/account/manage/Navigation";
 import UserMini from "@components/user/UserMini";
+import dateFormat from "@services/utils/dateFormat";
 
 const DynamicChart = dynamic(
   () => import("../../components/statistics/StatsChart"),
@@ -84,6 +85,13 @@ export async function getServerSideProps(context) {
   }, 0);
   data.links.clicks = totalClicks;
 
+  data.profile.daily = data.profile.daily.slice(-30).map((day) => {
+    return {
+      views: day.views,
+      date: dateFormat({ format: "short", date: day.date }),
+    };
+  });
+
   return {
     props: {
       data,
@@ -95,18 +103,6 @@ export async function getServerSideProps(context) {
 }
 
 export default function Statistics({ data, profile, progress, BASE_URL }) {
-  const dateTimeStyle = {
-    dateStyle: "short",
-  };
-  const dailyViews = data.profile.daily.slice(-30).map((day) => {
-    return {
-      views: day.views,
-      date: new Intl.DateTimeFormat("en-GB", dateTimeStyle).format(
-        new Date(day.date)
-      ),
-    };
-  });
-
   return (
     <>
       <PageHead
@@ -147,7 +143,7 @@ export default function Statistics({ data, profile, progress, BASE_URL }) {
           <Alert type="warning" message="You don't have a profile yet." />
         )}
 
-        {dailyViews.length > 0 && (
+        {data.profile.daily.length > 0 && (
           <div className="border mb-6 dark:border-primary-medium">
             <div className="border-b border-primary-low bg-white dark:bg-primary-high dark:border-primary-medium px-4 py-5 mb-2 sm:px-6">
               <h3 className="text-lg font-medium leading-6 text-primary-high">
@@ -157,7 +153,7 @@ export default function Statistics({ data, profile, progress, BASE_URL }) {
                 Number of Profile visits per day.
               </p>
             </div>
-            <DynamicChart data={dailyViews} />
+            <DynamicChart data={data.profile.daily} />
           </div>
         )}
 

diff --git a/pages/api/events.js b/pages/api/events.js
@@ -1,5 +1,6 @@
 import logger from "@config/logger";
 import Profile from "@models/Profile";
+import dateFormat from "@services/utils/dateFormat";
 
 export default async function handler(req, res) {
   if (req.method != "GET") {
@@ -47,19 +48,15 @@ export async function getEvents() {
     const today = new Date();
     for (const event of events) {
       let cleanEvent = structuredClone(event);
-      const dateTimeStyle = {
-        dateStyle: "full",
-        timeStyle: "long",
-      };
       try {
-        cleanEvent.date.startFmt = new Intl.DateTimeFormat(
-          "en-GB",
-          dateTimeStyle
-        ).format(new Date(event.date.start));
-        cleanEvent.date.endFmt = new Intl.DateTimeFormat(
-          "en-GB",
-          dateTimeStyle
-        ).format(new Date(event.date.end));
+        cleanEvent.date.startFmt = dateFormat({
+          format: "long",
+          date: event.date.start,
+        });
+        cleanEvent.date.endFmt = dateFormat({
+          format: "long",
+          date: event.date.end,
+        });
 
         cleanEvent.date.cfpOpen =
           event.date.cfpClose && new Date(event.date.cfpClose) > today;

diff --git a/pages/api/profiles/[username]/index.js b/pages/api/profiles/[username]/index.js
@@ -6,6 +6,7 @@ import logger from "@config/logger";
 import { Profile, Stats, ProfileStats } from "@models/index";
 
 import getLocation from "@services/github/getLocation";
+import dateFormat from "@services/utils/dateFormat";
 
 export default async function handler(req, res) {
   const username = req.query.username;
@@ -101,21 +102,17 @@ export async function getUserApi(req, res, username) {
     const today = new Date();
     getProfile.events.map((event) => {
       let cleanEvent = JSON.parse(JSON.stringify(event));
-      const dateTimeStyle = {
-        dateStyle: "full",
-        timeStyle: "long",
-      };
       try {
         const start = new Date(event.date.start);
         const end = new Date(event.date.end);
-        cleanEvent.date.startFmt = new Intl.DateTimeFormat(
-          "en-GB",
-          dateTimeStyle
-        ).format(start);
-        cleanEvent.date.endFmt = new Intl.DateTimeFormat(
-          "en-GB",
-          dateTimeStyle
-        ).format(end);
+        cleanEvent.date.startFmt = dateFormat({
+          format: "long",
+          date: event.date.start,
+        });
+        cleanEvent.date.endFmt = dateFormat({
+          format: "long",
+          date: event.date.end,
+        });
 
         cleanEvent.date.cfpOpen =
           event.date.cfpClose && new Date(event.date.cfpClose) > today;

diff --git a/services/utils/dateFormat.js b/services/utils/dateFormat.js
@@ -0,0 +1,17 @@
+export default function dateFormat({ format = "long", date }) {
+  let dateTimeStyle = { dateStyle: "short" };
+
+  switch (format) {
+    case "short":
+      dateTimeStyle = { dateStyle: "short" };
+      break;
+    case "long":
+      dateTimeStyle = {
+        dateStyle: "full",
+        timeStyle: "long",
+      };
+      break;
+  }
+
+  return new Intl.DateTimeFormat("en-GB", dateTimeStyle).format(new Date(date));
+}