♻️(frontend) Refactor language-related code

- Refactors "useTranslationsCustomizer" to "useCustomTranslations"
- Refactors "useLanguageSynchronizer" to "useSynchronizedLanguage"
- Refactors "LanguagePicker" to better reflect its component role
- Refactors "LanguagePicker" to use "useSynchronizedLangue"
- Removes unused "useChangeUserLanguage"
- To change the user language, use "useAuthMutation" instead

Signed-off-by: Robin Weber <[email protected]>

Author: rvveber

src/frontend/apps/impress/src/features/auth/api/types.ts

@@ -11,5 +11,5 @@ export interface User {
   email: string;
   full_name: string;
   short_name: string;
-  language: string;
+  language?: string;
 }

src/frontend/apps/impress/src/features/header/components/Header.tsx

@@ -5,7 +5,7 @@ import IconDocs from '@/assets/icons/icon-docs.svg';
 import { Box, StyledLink } from '@/components/';
 import { useCunninghamTheme } from '@/cunningham';
 import { ButtonLogin } from '@/features/auth';
-import { LanguagePicker } from '@/features/language';
+import { LanguagePicker } from '@/features/language/components';
 import { useResponsiveStore } from '@/stores';
 
 import { HEADER_HEIGHT } from '../conf';

src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx

@@ -6,7 +6,7 @@ import { Box } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { ButtonTogglePanel, Title } from '@/features/header/';
 import { LaGaufre } from '@/features/header/components/LaGaufre';
-import { LanguagePicker } from '@/features/language';
+import { LanguagePicker } from '@/features/language/components';
 import { useResponsiveStore } from '@/stores';
 
 export const HEADER_HEIGHT = 91;

src/frontend/apps/impress/src/features/language/api/useChangeUserLanguage.tsx

@@ -1,46 +1,33 @@
-import { Settings } from 'luxon';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { DropdownMenu, Icon, Text } from '@/components/';
 import { useConfig } from '@/core';
 import { useAuthQuery } from '@/features/auth';
-
-import { useLanguageSynchronizer } from './hooks/useLanguageSynchronizer';
-import { getMatchingLocales } from './utils/locale';
+import {
+  getMatchingLocales,
+  useSynchronizedLanguage,
+} from '@/features/language';
 
 export const LanguagePicker = () => {
   const { t, i18n } = useTranslation();
   const { data: conf } = useConfig();
   const { data: user } = useAuthQuery();
-  const { synchronizeLanguage } = useLanguageSynchronizer();
-  const language = i18n.languages[0];
-  Settings.defaultLocale = language;
+  const { changeLanguageSynchronized } = useSynchronizedLanguage();
+  const language = i18n.language;
 
   // Compute options for dropdown
   const optionsPicker = useMemo(() => {
     const backendOptions = conf?.LANGUAGES ?? [[language, language]];
-    return backendOptions.map(([backendLocale, label]) => {
-      // Determine if the option is selected
-      const isSelected =
-        getMatchingLocales([backendLocale], [language]).length > 0;
-      // Define callback for updating both frontend and backend languages
-      const callback = () => {
-        i18n
-          .changeLanguage(backendLocale)
-          .then(() => {
-            if (conf?.LANGUAGES && user) {
-              synchronizeLanguage(conf.LANGUAGES, user, 'toBackend');
-            }
-          })
-          .catch((err) => {
-            console.error('Error changing language', err);
-          });
+    return backendOptions.map(([backendLocale, backendLabel]) => {
+      return {
+        label: backendLabel,
+        isSelected: getMatchingLocales([backendLocale], [language]).length > 0,
+        callback: () => changeLanguageSynchronized(backendLocale, user),
       };
-      return { label, isSelected, callback };
     });
-  }, [conf?.LANGUAGES, i18n, language, synchronizeLanguage, user]);
+  }, [changeLanguageSynchronized, conf?.LANGUAGES, language, user]);
 
   // Extract current language label for display
   const currentLanguageLabel =

src/frontend/apps/impress/src/features/language/LanguagePicker.tsx renamed to src/frontend/apps/impress/src/features/language/components/LanguagePicker.tsx

@@ -0,0 +1 @@
+export * from './LanguagePicker';

src/frontend/apps/impress/src/features/language/components/index.ts

@@ -0,0 +1,2 @@
+export * from './useSynchronizedLanguage';
+export * from './useCustomTranslations';

src/frontend/apps/impress/src/features/language/hooks/index.ts

@@ -0,0 +1,27 @@
+import { Resource } from 'i18next';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const useCustomTranslations = () => {
+  const { i18n } = useTranslation();
+
+  // Overwrite translations with a resource
+  const customizeTranslations = useCallback(
+    (currentCustomTranslations: Resource) => {
+      Object.entries(currentCustomTranslations).forEach(([lng, namespaces]) => {
+        Object.entries(namespaces).forEach(([ns, value]) => {
+          i18n.addResourceBundle(lng, ns, value, true, true);
+        });
+      });
+      // trigger re-render
+      if (Object.entries(currentCustomTranslations).length > 0) {
+        void i18n.changeLanguage(i18n.language);
+      }
+    },
+    [i18n],
+  );
+
+  return {
+    customizeTranslations,
+  };
+};

src/frontend/apps/impress/src/features/language/hooks/useCustomTranslations.ts

@@ -0,0 +1,71 @@
+import { useCallback, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useUserUpdate } from '@/core/api/useUserUpdate';
+import { useConfig } from '@/core/config/api/useConfig';
+import { User } from '@/features/auth';
+import { getMatchingLocales } from '@/features/language/utils/locale';
+
+export const useSynchronizedLanguage = () => {
+  const { i18n } = useTranslation();
+  const { mutateAsync: updateUser } = useUserUpdate();
+  const { data: config } = useConfig();
+  const isSynchronizingLanguage = useRef(false);
+
+  const availableFrontendLanguages = useMemo(
+    () => Object.keys(i18n?.options?.resources || { en: '<- fallback' }),
+    [i18n?.options?.resources],
+  );
+  const availableBackendLanguages = useMemo(
+    () => config?.LANGUAGES?.map(([locale]) => locale) || [],
+    [config?.LANGUAGES],
+  );
+
+  const changeBackendLanguage = useCallback(
+    async (language: string, user?: User) => {
+      const closestBackendLanguage = getMatchingLocales(
+        availableBackendLanguages,
+        [language],
+      )[0];
+
+      if (user && user.language !== closestBackendLanguage) {
+        await updateUser({ id: user.id, language: closestBackendLanguage });
+      }
+    },
+    [availableBackendLanguages, updateUser],
+  );
+
+  const changeFrontendLanguage = useCallback(
+    async (language: string) => {
+      const closestFrontendLanguage = getMatchingLocales(
+        availableFrontendLanguages,
+        [language],
+      )[0];
+      if (
+        i18n.isInitialized &&
+        i18n.resolvedLanguage !== closestFrontendLanguage
+      ) {
+        await i18n.changeLanguage(closestFrontendLanguage);
+      }
+    },
+    [availableFrontendLanguages, i18n],
+  );
+
+  const changeLanguageSynchronized = useCallback(
+    async (language: string, user?: User) => {
+      if (!isSynchronizingLanguage.current) {
+        isSynchronizingLanguage.current = true;
+        await changeFrontendLanguage(language);
+        await changeBackendLanguage(language, user);
+        isSynchronizingLanguage.current = false;
+      }
+    },
+    [changeBackendLanguage, changeFrontendLanguage],
+  );
+
+  return {
+    changeLanguageSynchronized,
+    changeFrontendLanguage,
+    changeBackendLanguage,
+  };
+};

src/frontend/apps/impress/src/features/language/hooks/useLanguageSynchronizer.ts

@@ -0,0 +1 @@
+export * from './locale';