diff --git a/components/Home.js b/components/Home.js index 0a57b6b..6f2acea 100644 --- a/components/Home.js +++ b/components/Home.js @@ -16,11 +16,11 @@ import { determinePredictionText, formatWithOrdinalSuffix } from './helpers/home import { Colors, Fonts, Sizes, Spacing } from '../styles' import { LocalDate } from 'js-joda' -import { useTranslation } from 'react-i18next' +import useComponentTranslation from '../hooks/useComponentTranslation' const Home = ({ navigate, setDate }) => { - const { t } = useTranslation(); + const { t } = useComponentTranslation('components.Home'); function navigateToCycleDayView() { setDate(todayDateString) @@ -46,14 +46,14 @@ const Home = ({ navigate, setDate }) => { {cycleDayNumber && {cycleDayText} - {t('components.Home.cycleDay')} + {t('cycleDay')} } {phase && {formatWithOrdinalSuffix(phase)} - {t('components.Home.cyclePhase')} + {t('cyclePhase')} {status} @@ -63,7 +63,7 @@ const Home = ({ navigate, setDate }) => { {prediction} {phase && ( diff --git a/hooks/useComponentTranslation.js b/hooks/useComponentTranslation.js new file mode 100644 index 0000000..968491d --- /dev/null +++ b/hooks/useComponentTranslation.js @@ -0,0 +1,11 @@ +import { useTranslation } from "react-i18next" + +export default function useComponentTranslation(componentPath) { + const { t, i18n } = useTranslation(); + function translate(code, options) { + const mergedPath = `${componentPath}.${code}`; + const translation = t(mergedPath, options); + return translation !== mergedPath ? translation : t(code, options); + } + return { t: translate, i18n }; +} \ No newline at end of file