theoludwig/.profile
theoludwig/.profile
1
1
Fork 0
mirror of https://github.com/theoludwig/theoludwig.git synced 2024-10-05 04:56:10 +02:00
Code Issues Releases Activity

fix: hydratation error with age calculation

Browse Source
This commit is contained in:
Théo LUDWIG 2024-04-06 20:32:09 +02:00
parent 982b148329
commit cd5e92b64a
Signed by: theoludwig
GPG Key ID: ADFE5A563D718F3B
2 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/Profile/ProfileList/index.tsx
View File

@ -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"

15
hooks/useIsMounted.ts Normal file
View File

@ -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 }
}