feat: improve i18n performance

Signed-off-by: Raphael Arce <[email protected]>
technologiestiftung · Mar 5, 2024 · 7c69d72 · 7c69d72
1 parent 3bb9686
commit 7c69d72
Show file tree

Hide file tree

Showing 38 changed files with 1,038 additions and 1,078 deletions.
diff --git 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,32 +25,32 @@ export function Appointment() {
     <>
       {appointment ? (
         <p>
-          <b>{t("your-appointment", language)}:</b>
+          <b>{t("your-appointment")}:</b>
           <br />
           {dateTimeFormat.format(appointment!)}
           <br className="py-1" />
-          <b>{t("address", language)}</b>:
+          <b>{t("address")}</b>:
           <br />
           Schlesische Straße 27A, 10997 Berlin (
           <a
             href="https://www.google.de/maps/place/Schlesische+Str.+27A,+10997+Berlin/@52.4984664,13.4448928,17z/data=!3m1!4b1!4m6!3m5!1s0x47a84e53becc02e7:0x39bee44340592b1!8m2!3d52.4984664!4d13.4474677!16s%2Fg%2F11b_242msd?entry=ttu"
             target="_blank"
             className="text-blue-700 underline visited:text-purple-500"
           >
-            {t("plan-route", language)}
+            {t("plan-route")}
           </a>
           )
         </p>
       ) : (
         <p className="print:hidden">
-          {t("intro.p2", language)}
+          {t("intro.p2")}
           <br />
           <a
             href="https://service.berlin.de/dienstleistung/120686/"
             target="_blank"
             className="text-blue-700 underline visited:text-purple-500"
           >
-            {t("intro.p2.link", language)}
+            {t("intro.p2.link")}
           </a>
         </p>
       )}

diff --git 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() {
           />
         </svg>
 
-        <span className="block lg:hidden">{t("start.mobile", language)}</span>
-        <span className="hidden text-lg lg:block">
-          {t("start.desktop", language)}
-        </span>
+        <span className="block lg:hidden">{t("start.mobile")}</span>
+        <span className="hidden text-lg lg:block">{t("start.desktop")}</span>
       </button>
     </>
   );

diff --git 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 (
     <>
       <div className="flex w-full flex-wrap justify-center gap-x-2 px-4 py-4 text-sm">
         <p>
-          {t("feedback.intro", language)} <br className="hidden md:inline" />{" "}
-          {t("feedback.question", language)}{" "}
+          {t("feedback.intro")} <br className="hidden md:inline" />{" "}
+          {t("feedback.question")}{" "}
           <a
             className="text-blue-700 underline"
-            href={t("feedback.link", language)}
+            href={t("feedback.link")}
             target="_blank"
             rel="noopener noreferrer"
           >
-            {t("feedback.link.label", language)}
+            {t("feedback.link.label")}
           </a>
         </p>
       </div>

diff --git 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 (
     <footer
@@ -16,7 +15,7 @@ export function Footer() {
       <div className="flex w-full flex-wrap justify-start gap-y-5">
         <div className="flex w-full flex-wrap justify-start gap-x-10 gap-y-5 px-8 py-2 text-sm sm:justify-center md:gap-x-20 md:px-5">
           <div className="flex flex-col gap-4">
-            {t("logo.t1", language)}
+            {t("logo.t1")}
             <img
               src="/images/logo-citylab-berlin.svg"
               alt="Logo von CityLab Berlin"
@@ -25,7 +24,7 @@ export function Footer() {
             />
           </div>
           <div className="flex flex-col gap-4">
-            {t("logo.t2", language)}
+            {t("logo.t2")}
             <img
               src="/images/logo-technologiestiftung-berlin-de.svg"
               alt="Logo von Technologiestiftung Berlin"
@@ -34,7 +33,7 @@ export function Footer() {
             />
           </div>
           <div className="flex flex-col gap-4">
-            {t("logo.t3", language)}
+            {t("logo.t3")}
             <img
               src="/images/logo-senatskanzlei-buergermeister-vertikal.svg"
               alt="Logo von Berlins Regierender Bürgermeister"
@@ -51,15 +50,15 @@ export function Footer() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            {t("dataPrivacy", language)}
+            {t("dataPrivacy")}
           </a>
           <a
             className="flex flex-col gap-4 text-gray-400 underline"
-            href={t("imprint.link", language)}
+            href={t("imprint.link")}
             target="_blank"
             rel="noopener noreferrer"
           >
-            {t("imprint", language)}
+            {t("imprint")}
           </a>
         </div>
       </div>

diff --git a/src/components/forms/first-registration/has-child.tsx b/src/components/forms/first-registration/has-child.tsx
@@ -1,12 +1,11 @@
-import { t } from "../../../i18n/translations";
 import { RadioInput } from "../../radio-input";
 import { useFirstRegistrationStore } from "./store";
 import { useProgressStore } from "../../steps/store";
-import { useI18nStore } from "../../../i18n/store";
 import { InfoButton } from "../../buttons/info-button";
 import { PrimaryButton } from "../../buttons/primary-button";
 import { SecondaryButton } from "../../buttons/secondary-button";
-import { useTimeout } from "../../../hooks/useTimeout.tsx";
+import { useTimeout } from "../../../hooks/useTimeout";
+import { useI18n } from "../../../i18n/hook/useI18n";
 
 export function HasChild() {
   const hasKids = useFirstRegistrationStore((state) => state.hasChild);
@@ -17,7 +16,7 @@ export function HasChild() {
   const goToPreviousStep = useProgressStore((state) => state.goToPreviousStep);
   const goToNextStep = useProgressStore((state) => state.goToNextStep);
 
-  const language = useI18nStore((state) => state.language);
+  const t = useI18n();
 
   const options = ["yes", "no"];
 
@@ -35,10 +34,10 @@ export function HasChild() {
     >
       <div className="flex flex-col gap-4">
         <div className="flex w-full items-baseline justify-between gap-3">
-          <p>{t("first-registration.q4", language)}</p>
+          <p>{t("first-registration.q4")}</p>
           <div
             className="tooltip text-start sm:tooltip-top ltr:tooltip-left rtl:tooltip-right"
-            data-tip={t("first-registration.q4.tooltip", language)}
+            data-tip={t("first-registration.q4.tooltip")}
           >
             <InfoButton />
           </div>
@@ -47,7 +46,7 @@ export function HasChild() {
         <div className="flex flex-col gap-1">
           {options.map((option) => {
             const name = "first-registration.q4.radio";
-            const label = t(option, language);
+            const label = t(option);
             const isChecked =
               (option === "yes" && hasKids === true) ||
               (option === "no" && hasKids === false);
@@ -73,19 +72,16 @@ export function HasChild() {
               ? `tooltip text-start sm:tooltip-top ltr:tooltip-left rtl:tooltip-right before:w-[9rem] ${arePointerEventsDisabled ? "pointer-events-none" : ""}`
               : undefined
           }`}
-          data-tip={!isValid ? t("button.next.tooltip", language) : undefined}
+          data-tip={!isValid ? t("button.next.tooltip") : undefined}
         >
           <PrimaryButton
-            label={t("button.next", language)}
+            label={t("button.next")}
             type="submit"
             disabled={!isValid}
           />
         </div>
 
-        <SecondaryButton
-          label={t("button.back", language)}
-          onClick={goToPreviousStep}
-        />
+        <SecondaryButton label={t("button.back")} onClick={goToPreviousStep} />
       </div>
     </form>
   );

diff --git a/src/components/forms/first-registration/is-first-registration.tsx b/src/components/forms/first-registration/is-first-registration.tsx
@@ -1,12 +1,11 @@
 import { useFirstRegistrationStore } from "./store";
-import { t } from "../../../i18n/translations";
 import { RadioInput } from "../../radio-input";
-import { useI18nStore } from "../../../i18n/store";
 import { useProgressStore } from "../../steps/store";
 import { PrimaryButton } from "../../buttons/primary-button";
 import { SecondaryButton } from "../../buttons/secondary-button";
 import { InfoButton } from "../../buttons/info-button";
-import { useTimeout } from "../../../hooks/useTimeout.tsx";
+import { useTimeout } from "../../../hooks/useTimeout";
+import { useI18n } from "../../../i18n/hook/useI18n";
 
 export function IsFirstRegistration() {
   const isFirstRegistration = useFirstRegistrationStore(
@@ -21,7 +20,7 @@ export function IsFirstRegistration() {
   const goToPreviousStep = useProgressStore((state) => state.goToPreviousStep);
   const goToNextStep = useProgressStore((state) => state.goToNextStep);
 
-  const language = useI18nStore((state) => state.language);
+  const t = useI18n();
 
   const options = ["yes", "no"];
 
@@ -39,10 +38,10 @@ export function IsFirstRegistration() {
     >
       <div className="flex flex-col gap-4">
         <div className="flex w-full justify-between gap-3">
-          <p>{t("first-registration.q1", language)}</p>
+          <p>{t("first-registration.q1")}</p>
           <div
             className="tooltip text-start sm:tooltip-top ltr:tooltip-left rtl:tooltip-right"
-            data-tip={t("first-registration.q1.tooltip", language)}
+            data-tip={t("first-registration.q1.tooltip")}
           >
             <InfoButton />
           </div>
@@ -54,7 +53,7 @@ export function IsFirstRegistration() {
               (option === "yes" && isFirstRegistration === true) ||
               (option === "no" && isFirstRegistration === false);
             const onChange = () => setIsFirstRegistration(option === "yes");
-            const label = t(option, language);
+            const label = t(option);
 
             return (
               <RadioInput
@@ -76,19 +75,16 @@ export function IsFirstRegistration() {
               ? `tooltip text-start sm:tooltip-top ltr:tooltip-left rtl:tooltip-right before:w-[9rem] ${arePointerEventsDisabled ? "pointer-events-none" : ""}`
               : undefined
           }`}
-          data-tip={!isValid ? t("button.next.tooltip", language) : undefined}
+          data-tip={!isValid ? t("button.next.tooltip") : undefined}
         >
           <PrimaryButton
-            label={t("button.next", language)}
+            label={t("button.next")}
             type="submit"
             disabled={!isValid}
           />
         </div>
 
-        <SecondaryButton
-          label={t("button.back", language)}
-          onClick={goToPreviousStep}
-        />
+        <SecondaryButton label={t("button.back")} onClick={goToPreviousStep} />
       </div>
     </form>
   );

diff --git a/src/components/forms/first-registration/is-married.tsx b/src/components/forms/first-registration/is-married.tsx
@@ -1,12 +1,11 @@
 import { useFirstRegistrationStore } from "./store";
 import { useProgressStore } from "../../steps/store";
-import { useI18nStore } from "../../../i18n/store";
-import { t } from "../../../i18n/translations";
 import { RadioInput } from "../../radio-input";
 import { InfoButton } from "../../buttons/info-button";
 import { PrimaryButton } from "../../buttons/primary-button";
 import { SecondaryButton } from "../../buttons/secondary-button";
-import { useTimeout } from "../../../hooks/useTimeout.tsx";
+import { useTimeout } from "../../../hooks/useTimeout";
+import { useI18n } from "../../../i18n/hook/useI18n";
 
 export function IsMarried() {
   const isMarried = useFirstRegistrationStore((state) => state.isMarried);
@@ -15,7 +14,7 @@ export function IsMarried() {
   const goToPreviousStep = useProgressStore((state) => state.goToPreviousStep);
   const goToNextStep = useProgressStore((state) => state.goToNextStep);
 
-  const language = useI18nStore((state) => state.language);
+  const t = useI18n();
 
   const options = ["yes", "no"];
 
@@ -35,18 +34,18 @@ export function IsMarried() {
     >
       <div className="flex flex-col gap-4">
         <div className="flex w-full items-baseline justify-between gap-3">
-          <p>{t("first-registration.q2", language)}</p>
+          <p>{t("first-registration.q2")}</p>
           <div
             className="tooltip text-start sm:tooltip-top ltr:tooltip-left rtl:tooltip-right"
-            data-tip={t("first-registration.q2.tooltip", language)}
+            data-tip={t("first-registration.q2.tooltip")}
           >
             <InfoButton />
           </div>
         </div>
         <div className="flex flex-col gap-1">
           {options.map((option) => {
             const name = "first-registration.q2.radio";
-            const label = t(option, language);
+            const label = t(option);
             const isChecked =
               (option === "yes" && isMarried === true) ||
               (option === "no" && isMarried === false);
@@ -72,19 +71,16 @@ export function IsMarried() {
               ? `tooltip text-start sm:tooltip-top ltr:tooltip-left rtl:tooltip-right before:w-[9rem] ${arePointerEventsDisabled ? "pointer-events-none" : ""}`
               : undefined
           }`}
-          data-tip={!isValid ? t("button.next.tooltip", language) : undefined}
+          data-tip={!isValid ? t("button.next.tooltip") : undefined}
         >
           <PrimaryButton
-            label={t("button.next", language)}
+            label={t("button.next")}
             type="submit"
             disabled={!isValid}
           />
         </div>
 
-        <SecondaryButton
-          label={t("button.back", language)}
-          onClick={goToPreviousStep}
-        />
+        <SecondaryButton label={t("button.back")} onClick={goToPreviousStep} />
       </div>
     </form>
   );