mirror of
https://github.com/theoludwig/theoludwig.git
synced 2024-12-08 00:44:30 +01:00
fix: hydratation error with age calculation
This commit is contained in:
parent
982b148329
commit
cd5e92b64a
@ -5,6 +5,7 @@ import { useMemo } from "react"
|
|||||||
import { useI18n } from "@/i18n/i18n.client"
|
import { useI18n } from "@/i18n/i18n.client"
|
||||||
import { BIRTH_DATE, BIRTH_DATE_STRING, getAge } from "@/utils/getAge"
|
import { BIRTH_DATE, BIRTH_DATE_STRING, getAge } from "@/utils/getAge"
|
||||||
import type { CookiesStore } from "@/utils/constants"
|
import type { CookiesStore } from "@/utils/constants"
|
||||||
|
import { useIsMounted } from "@/hooks/useIsMounted"
|
||||||
|
|
||||||
import { ProfileItem } from "./ProfileItem"
|
import { ProfileItem } from "./ProfileItem"
|
||||||
|
|
||||||
@ -21,18 +22,22 @@ export const ProfileList = (props: ProfileListProps): JSX.Element => {
|
|||||||
return getAge(BIRTH_DATE)
|
return getAge(BIRTH_DATE)
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
const { isMounted } = useIsMounted()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ul className="m-0 list-none p-0">
|
<ul className="m-0 list-none p-0">
|
||||||
<ProfileItem
|
<ProfileItem
|
||||||
title={i18n.translate("home.about.pronouns")}
|
title={i18n.translate("home.about.pronouns")}
|
||||||
value={i18n.translate("home.about.pronouns-value")}
|
value={i18n.translate("home.about.pronouns-value")}
|
||||||
/>
|
/>
|
||||||
|
{isMounted ? (
|
||||||
<ProfileItem
|
<ProfileItem
|
||||||
title={i18n.translate("home.about.birth-date")}
|
title={i18n.translate("home.about.birth-date")}
|
||||||
value={`${BIRTH_DATE_STRING} (${age} ${i18n.translate(
|
value={`${BIRTH_DATE_STRING} (${age} ${i18n.translate(
|
||||||
"home.about.years-old",
|
"home.about.years-old",
|
||||||
)})`}
|
)})`}
|
||||||
/>
|
/>
|
||||||
|
) : null}
|
||||||
<ProfileItem
|
<ProfileItem
|
||||||
title={i18n.translate("home.about.nationality")}
|
title={i18n.translate("home.about.nationality")}
|
||||||
value="Alsace, France"
|
value="Alsace, France"
|
||||||
|
15
hooks/useIsMounted.ts
Normal file
15
hooks/useIsMounted.ts
Normal 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 }
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user