🐛 Fix hydration error

journey-ad · Jul 23, 2024 · 20f1b55 · 20f1b55
1 parent f63f955
commit 20f1b55
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 20 deletions.
diff --git a/app/error.tsx b/app/error.tsx
@@ -13,11 +13,9 @@ export default function Error({
   useEffect(() => {
     // Log the error to an error reporting service
     /* eslint-disable no-console */
-    console.error(error);
+    console.error("error", error.message, error.digest);
   }, [error]);
 
-  console.error("error", error.message, error.digest);
-
   const t = useTranslations("ERROR_MESSAGE");
 
   return (

diff --git a/components/DetailContent.tsx b/components/DetailContent.tsx
@@ -15,7 +15,7 @@ import {
   useDisclosure,
 } from "@nextui-org/react";
 import { useTranslations } from "next-intl";
-import { useEffect, useState } from "react";
+import { useEffect, useState, Suspense } from "react";
 
 import { TorrentItemProps } from "@/types";
 import {
@@ -29,6 +29,7 @@ import useBreakpoint from "@/hooks/useBreakpoints";
 import FileList from "@/components/FileList";
 import { CopyIcon } from "@/components/icons";
 import EmblaCarousel from "@/components//EmblaCarousel";
+import { useHydration } from "@/hooks/useHydration";
 
 const Preview = ({
   linkInfo,
@@ -122,6 +123,8 @@ export const DetailContent = ({
   const t = useTranslations();
   const { isXs } = useBreakpoint();
 
+  const hydrated = useHydration();
+
   return (
     <>
       {/* Torrent name */}
@@ -145,10 +148,16 @@ export const DetailContent = ({
                 {t("Search.file_count")}
                 {data.files.length}
               </span>
-              <span>
-                {t("Search.created_at")}
-                {formatDate(data.created_at, t("COMMON.DATE_FORMAT"))}
-              </span>
+              <Suspense key={hydrated ? "load" : "loading"}>
+                <span>
+                  {t("Search.created_at")}
+                  {formatDate(
+                    data.created_at,
+                    t("COMMON.DATE_FORMAT"),
+                    !hydrated,
+                  )}
+                </span>
+              </Suspense>
               <span>
                 {t("Search.hash")}
                 <span className="border rounded-sm px-1 font-mono bg-gray-100 dark:bg-inherit dark:border-slate-800">
@@ -216,10 +225,16 @@ export const DetailContent = ({
                 {t("Search.file_count")}
                 {data.files.length}
               </span>
-              <span>
-                {t("Search.created_at")}
-                {formatDate(data.created_at, t("COMMON.DATE_FORMAT"))}
-              </span>
+              <Suspense key={hydrated ? "load" : "loading"}>
+                <span>
+                  {t("Search.created_at")}
+                  {formatDate(
+                    data.created_at,
+                    t("COMMON.DATE_FORMAT"),
+                    !hydrated,
+                  )}
+                </span>
+              </Suspense>
             </div>
           </CardFooter>
         </Card>

diff --git a/components/FloatTool.tsx b/components/FloatTool.tsx
@@ -124,7 +124,7 @@ export const SwitchLanguage = ({ noBg = false }: { noBg?: boolean }) => {
     setlang(key);
     Cookie.set("NEXT_LOCALE", Array.from(key)[0], {
       path: "/",
-      expires: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
+      expires: 365,
     });
 
     if (typeof window !== "undefined") {

diff --git a/components/SearchResultsItem.tsx b/components/SearchResultsItem.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import { Suspense } from "react";
 import {
   Card,
   CardHeader,
@@ -23,6 +23,7 @@ import {
 } from "@/utils";
 import FileList from "@/components/FileList";
 import { SEARCH_DISPLAY_FILES_MAX } from "@/config/constant";
+import { useHydration } from "@/hooks/useHydration";
 
 export default function SearchResultsItem({
   item,
@@ -40,6 +41,8 @@ export default function SearchResultsItem({
 
   const t = useTranslations();
 
+  const hydrated = useHydration();
+
   return (
     <Card className="w-full bg-opacity-80 dark:brightness-95">
       <CardHeader className="flex gap-3 bg-gray-100 dark:bg-slate-800">
@@ -89,10 +92,12 @@ export default function SearchResultsItem({
             {t("Search.file_count")}
             {data.files.length}
           </span>
-          <span>
-            {t("Search.created_at")}
-            {formatDate(data.created_at, t("COMMON.DATE_FORMAT"))}
-          </span>
+          <Suspense key={hydrated ? "load" : "loading"}>
+            <span>
+              {t("Search.created_at")}
+              {formatDate(data.created_at, t("COMMON.DATE_FORMAT"), !hydrated)}
+            </span>
+          </Suspense>
         </div>
       </CardFooter>
     </Card>

diff --git a/hooks/useHydration.ts b/hooks/useHydration.ts
@@ -0,0 +1,11 @@
+import { useState, useEffect } from "react";
+
+export function useHydration() {
+  const [hydrated, setHydrated] = useState(false);
+
+  useEffect(() => {
+    setHydrated(true);
+  }, []);
+
+  return hydrated;
+}
diff --git a/utils/index.ts b/utils/index.ts
@@ -35,8 +35,16 @@ export function formatByteSize(bytes: number | string) {
   return `${convertedSize} ${units[digitGroups]}`;
 }
 
-export function formatDate(ts: number, format = "YYYY-MM-DD HH:mm:ss") {
-  return dayjs.unix(ts).format(format);
+export function formatDate(
+  ts: number,
+  format = "YYYY-MM-DD HH:mm:ss",
+  utc = false,
+) {
+  let dateStr = dayjs.unix(ts).format(format);
+
+  if (utc) dateStr += " (UTC)";
+
+  return dateStr;
 }
 
 export function getSizeColor(size: number | string) {