From cd5e92b64ad343655701de444afadeef7252998b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20LUDWIG?= <contact@theoludwig.fr>
Date: Sat, 6 Apr 2024 20:32:09 +0200
Subject: [PATCH] fix: hydratation error with age calculation

---
 components/Profile/ProfileList/index.tsx | 17 +++++++++++------
 hooks/useIsMounted.ts                    | 15 +++++++++++++++
 2 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 hooks/useIsMounted.ts

diff --git a/components/Profile/ProfileList/index.tsx b/components/Profile/ProfileList/index.tsx
index b37fd8e..07e1ee3 100644
--- a/components/Profile/ProfileList/index.tsx
+++ b/components/Profile/ProfileList/index.tsx
@@ -5,6 +5,7 @@ import { useMemo } from "react"
 import { useI18n } from "@/i18n/i18n.client"
 import { BIRTH_DATE, BIRTH_DATE_STRING, getAge } from "@/utils/getAge"
 import type { CookiesStore } from "@/utils/constants"
+import { useIsMounted } from "@/hooks/useIsMounted"
 
 import { ProfileItem } from "./ProfileItem"
 
@@ -21,18 +22,22 @@ export const ProfileList = (props: ProfileListProps): JSX.Element => {
     return getAge(BIRTH_DATE)
   }, [])
 
+  const { isMounted } = useIsMounted()
+
   return (
     <ul className="m-0 list-none p-0">
       <ProfileItem
         title={i18n.translate("home.about.pronouns")}
         value={i18n.translate("home.about.pronouns-value")}
       />
-      <ProfileItem
-        title={i18n.translate("home.about.birth-date")}
-        value={`${BIRTH_DATE_STRING} (${age} ${i18n.translate(
-          "home.about.years-old",
-        )})`}
-      />
+      {isMounted ? (
+        <ProfileItem
+          title={i18n.translate("home.about.birth-date")}
+          value={`${BIRTH_DATE_STRING} (${age} ${i18n.translate(
+            "home.about.years-old",
+          )})`}
+        />
+      ) : null}
       <ProfileItem
         title={i18n.translate("home.about.nationality")}
         value="Alsace, France"
diff --git a/hooks/useIsMounted.ts b/hooks/useIsMounted.ts
new file mode 100644
index 0000000..d5710c7
--- /dev/null
+++ b/hooks/useIsMounted.ts
@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react"
+
+export interface UseIsMountedResult {
+  isMounted: boolean
+}
+
+export const useIsMounted = (): UseIsMountedResult => {
+  const [isMounted, setIsMounted] = useState(false)
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  return { isMounted }
+}