From 7c69d721c84476e136434069ad61a1a3a47fe4a1 Mon Sep 17 00:00:00 2001 From: Raphael Arce Date: Fri, 23 Feb 2024 12:32:22 +0100 Subject: [PATCH] feat: improve i18n performance Signed-off-by: Raphael Arce --- src/components/appointment/index.tsx | 13 +- src/components/buttons/home-button/index.tsx | 12 +- src/components/feedback/index.tsx | 13 +- src/components/footer/index.tsx | 17 +- .../forms/first-registration/has-child.tsx | 22 +- .../is-first-registration.tsx | 22 +- .../forms/first-registration/is-married.tsx | 22 +- .../is-registering-child.tsx | 22 +- .../is-registering-more-than-two.tsx | 22 +- .../is-registering-spouse.tsx | 26 +- src/components/forms/intro/index.tsx | 9 +- .../forms/nationality/is-european.tsx | 22 +- .../forms/nationality/is-german-over-16.tsx | 22 +- .../forms/nationality/is-german.tsx | 22 +- .../nationality/is-non-german-over-16.tsx | 22 +- .../forms/nationality/is-refugee.tsx | 24 +- .../other-residence/has-other-residence.tsx | 22 +- .../is-other-residence-abroad.tsx | 22 +- ...s-registering-for-more-than-six-months.tsx | 29 +- ...registering-for-more-than-three-months.tsx | 27 +- .../forms/overview/document-checkbox.tsx | 9 +- .../forms/overview/document-link.tsx | 7 +- src/components/forms/overview/index.tsx | 16 +- src/components/header-title/index.tsx | 13 +- src/components/language-select/index.tsx | 11 +- src/i18n/hook/useI18n.tsx | 8 + src/i18n/store/index.ts | 32 +- src/i18n/store/local-storage.ts | 8 +- src/i18n/store/types.ts | 8 + src/i18n/translations/ar.json | 113 +++ src/i18n/translations/de.json | 113 +++ src/i18n/translations/en.json | 113 +++ src/i18n/translations/es.json | 113 +++ src/i18n/translations/fr.json | 113 +++ src/i18n/translations/index.ts | 8 - src/i18n/translations/ru.json | 113 +++ src/i18n/translations/tr.json | 113 +++ src/i18n/translations/translations.json | 793 ------------------ 38 files changed, 1038 insertions(+), 1078 deletions(-) create mode 100644 src/i18n/hook/useI18n.tsx create mode 100644 src/i18n/translations/ar.json create mode 100644 src/i18n/translations/de.json create mode 100644 src/i18n/translations/en.json create mode 100644 src/i18n/translations/es.json create mode 100644 src/i18n/translations/fr.json delete mode 100644 src/i18n/translations/index.ts create mode 100644 src/i18n/translations/ru.json create mode 100644 src/i18n/translations/tr.json delete mode 100644 src/i18n/translations/translations.json diff --git a/src/components/appointment/index.tsx b/src/components/appointment/index.tsx index 7c9cb37..fd56a89 100644 --- a/src/components/appointment/index.tsx +++ b/src/components/appointment/index.tsx @@ -1,8 +1,9 @@ -import { t } from "../../i18n/translations"; import { useI18nStore } from "../../i18n/store"; +import { useI18n } from "../../i18n/hook/useI18n"; export function Appointment() { const language = useI18nStore((state) => state.language); + const t = useI18n(); const options: Intl.DateTimeFormatOptions = { weekday: "long", @@ -24,11 +25,11 @@ export function Appointment() { <> {appointment ? (

- {t("your-appointment", language)}: + {t("your-appointment")}:
{dateTimeFormat.format(appointment!)}
- {t("address", language)}: + {t("address")}:
Schlesische Straße 27A, 10997 Berlin ( - {t("plan-route", language)} + {t("plan-route")} )

) : (

- {t("intro.p2", language)} + {t("intro.p2")}
- {t("intro.p2.link", language)} + {t("intro.p2.link")}

)} diff --git a/src/components/buttons/home-button/index.tsx b/src/components/buttons/home-button/index.tsx index 428e59b..db3625b 100644 --- a/src/components/buttons/home-button/index.tsx +++ b/src/components/buttons/home-button/index.tsx @@ -1,12 +1,12 @@ import { useProgressStore } from "../../steps/store"; -import { useI18nStore } from "../../../i18n/store"; -import { t } from "../../../i18n/translations"; +import { useI18n } from "../../../i18n/hook/useI18n"; export function HomeButton() { const goToStart = useProgressStore((state) => state.goToStart); - const language = useI18nStore((state) => state.language); const currentStep = useProgressStore((state) => state.currentStep); + const t = useI18n(); + const isHomeButtonHidden = currentStep === 0; return ( @@ -33,10 +33,8 @@ export function HomeButton() { /> - {t("start.mobile", language)} - - {t("start.desktop", language)} - + {t("start.mobile")} + {t("start.desktop")} ); diff --git a/src/components/feedback/index.tsx b/src/components/feedback/index.tsx index 056af43..79e74c4 100644 --- a/src/components/feedback/index.tsx +++ b/src/components/feedback/index.tsx @@ -1,22 +1,21 @@ -import { t } from "../../i18n/translations"; -import { useI18nStore } from "../../i18n/store"; +import { useI18n } from "../../i18n/hook/useI18n"; export function Feedback() { - const language = useI18nStore((state) => state.language); + const t = useI18n(); return ( <>

- {t("feedback.intro", language)}
{" "} - {t("feedback.question", language)}{" "} + {t("feedback.intro")}
{" "} + {t("feedback.question")}{" "} - {t("feedback.link.label", language)} + {t("feedback.link.label")}

diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx index ba1c06e..b820820 100644 --- a/src/components/footer/index.tsx +++ b/src/components/footer/index.tsx @@ -1,10 +1,9 @@ -import { t } from "../../i18n/translations"; -import { useI18nStore } from "../../i18n/store"; import { useProgressStore } from "../steps/store"; +import { useI18n } from "../../i18n/hook/useI18n.tsx"; export function Footer() { - const language = useI18nStore((state) => state.language); const currentStep = useProgressStore((state) => state.currentStep); + const t = useI18n(); return (