fix/adapting date formats

Author: syrok94

src/components/cubes/TableRow.tsx

@@ -4,12 +4,13 @@ import { useTimerStore } from "@/store/timerStore";
 import { useCubesModalStore } from "@/store/CubesModalStore";
 import { useRouter } from "@/navigation";
 import { getAllCubes, saveCube } from "@/db/dbOperations";
-import { useTranslations } from "next-intl";
+import {useTranslations } from "next-intl";
 import {
   EllipsisHorizontalIcon,
   PlayIcon,
   StopIcon,
 } from "@heroicons/react/24/solid";
+import useLocale from "@/hooks/useLocale";
 
 export default function TableRow({ cube }: { cube: Cube }) {
   const t = useTranslations("Index.CubesPage");
@@ -33,15 +34,7 @@ export default function TableRow({ cube }: { cube: Cube }) {
     setCubes(cubesDB);
   };
 
-  function formatDate(msDate: number) {
-    const creationDate = new Date(msDate);
-    const month = creationDate.getMonth() + 1;
-    const day = creationDate.getDate();
-    const year = creationDate.getFullYear();
-    return `${month.toString().padStart(2, "0")}/${day
-      .toString()
-      .padStart(2, "0")}/${year}`;
-  }
+  const locale = useLocale(cube.createdAt);
 
   const redirectToHome = (e: any) => {
     const targetDiv = e.target;
@@ -78,7 +71,7 @@ export default function TableRow({ cube }: { cube: Cube }) {
           {`${cube?.solves?.session.length}/${cube?.solves?.all.length}`}
         </div>
         <div className="hidden text-center align-middle cursor-pointer md:table-cell">
-          {formatDate(cube?.createdAt)}
+          {locale}
         </div>
         <div className="hidden text-center align-middle md:table-cell">
           {cube?.solves?.session.length > 0 ? (

src/components/solves/ModalSolve.tsx

@@ -34,7 +34,7 @@ export default function ModalSolve({ currentTab }: { currentTab: SolveTab }) {
   const t = useTranslations("Index.SolvesPage");
   const submenuRef = useRef<HTMLDivElement | null>(null);
 
-  const formattedDate = useLocale(solve);
+  const formattedDate = useLocale(solve?.endTime);
 
   useEffect(() => {
     setShowOptions(false);

src/hooks/useLocale.ts

@@ -1,20 +1,19 @@
-import { Solve } from "@/interfaces/Solve";
 import { DateTime } from "luxon";
 import { useEffect, useState } from "react";
 
-export default function useLocale(solve: Solve | null): string | null {
+export default function useLocale(time: number | undefined): string | null {
   const [formattedDate, setFormattedDate] = useState<string>("");
 
   useEffect(() => {
-    if (solve && solve.endTime) {
-      const parsedDate = DateTime.fromMillis(solve.endTime)
+    if (time) {
+      const parsedDate = DateTime.fromMillis(time)
         .setLocale(navigator.language)
         .toLocaleString(DateTime.DATE_MED);
       setFormattedDate(parsedDate);
     }
-  }, [solve]);
+  }, [time]);
 
-  if (!solve) return null;
+  if (!time) return null;
 
   return formattedDate;
 }