♻️(frontend) Refactor language-related code

- Refactors useTranslationsCustomizer to useCustomTranslations
- Refactors useCustomTranslations to use useCustomTranslationsQuery

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

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,31 @@
-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),
       };
-      return { label, isSelected, callback };
     });
-  }, [conf?.LANGUAGES, i18n, language, synchronizeLanguage, user]);
+  }, [changeLanguageSynchronized, conf?.LANGUAGES, language]);
 
   // 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,42 @@
+import { Resource } from 'i18next';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useConfig } from '@/core';
+
+export const useCustomTranslations = () => {
+  const { i18n } = useTranslation();
+  const { data: currentConfig } = useConfig();
+
+  const currentCustomTranslations: Resource = useMemo(
+    () => currentConfig?.theme_customization?.translations || {},
+    [currentConfig],
+  );
+
+  // 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],
+  );
+
+  useEffect(() => {
+    if (currentCustomTranslations) {
+      customizeTranslations(currentCustomTranslations);
+    }
+  }, [currentCustomTranslations, customizeTranslations]);
+
+  return {
+    currentCustomTranslations,
+    customizeTranslations,
+  };
+};

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

@@ -0,0 +1,105 @@
+import debug from 'debug';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useConfig } from '@/core/config/api/useConfig';
+import { User, useAuthMutation, useAuthQuery } from '@/features/auth';
+import { getMatchingLocales } from '@/features/language/utils/locale';
+
+const log = debug('features:language');
+
+export const useSynchronizedLanguage = () => {
+  const { i18n } = useTranslation();
+  const { data: currentUser } = useAuthQuery();
+  const { update: updateUser } = useAuthMutation();
+  const { data: config } = useConfig();
+
+  const availableFrontendLanguages = useMemo(
+    () => Object.keys(i18n?.options?.resources || { en: '<- fallback' }),
+    [i18n],
+  );
+  const availableBackendLanguages = useMemo(
+    () => config?.LANGUAGES?.map(([locale]) => locale) || [],
+    [config?.LANGUAGES],
+  );
+  const currentFrontendLanguage = useMemo(
+    () => i18n.resolvedLanguage || i18n.language,
+    [i18n],
+  );
+  const currentBackendLanguage = useMemo(
+    () => currentUser?.language,
+    [currentUser],
+  );
+
+  const changeBackendLanguage = useCallback(
+    (language: string, user?: User) => {
+      const closestBackendLanguage = getMatchingLocales(
+        availableBackendLanguages,
+        [language],
+      )[0];
+
+      if (!user || user.language === closestBackendLanguage) {
+        return;
+      }
+
+      log('Updating backend language (%O)', {
+        requested: language,
+        from: user.language,
+        to: closestBackendLanguage,
+      });
+      void updateUser({ ...user, language: closestBackendLanguage });
+    },
+    [availableBackendLanguages, updateUser],
+  );
+
+  const changeFrontendLanguage = useCallback(
+    (language: string) => {
+      const closestFrontendLanguage = getMatchingLocales(
+        availableFrontendLanguages,
+        [language],
+      )[0];
+      if (i18n.resolvedLanguage === closestFrontendLanguage) {
+        return;
+      }
+
+      log('Updating frontend language (%O)', {
+        requested: language,
+        from: i18n.resolvedLanguage,
+        to: closestFrontendLanguage,
+      });
+      void i18n.changeLanguage(closestFrontendLanguage);
+    },
+    [availableFrontendLanguages, i18n],
+  );
+
+  const changeLanguageSynchronized = useCallback(
+    (language: string, user?: User) => {
+      changeFrontendLanguage(language);
+      changeBackendLanguage(language, user ?? currentUser);
+    },
+    [changeBackendLanguage, changeFrontendLanguage, currentUser],
+  );
+
+  useEffect(() => {
+    if (currentBackendLanguage) {
+      changeLanguageSynchronized(currentBackendLanguage);
+    } else if (currentFrontendLanguage) {
+      changeLanguageSynchronized(currentFrontendLanguage);
+    }
+  }, [
+    currentBackendLanguage,
+    currentFrontendLanguage,
+    changeLanguageSynchronized,
+    currentUser,
+  ]);
+
+  return {
+    changeLanguageSynchronized,
+    changeFrontendLanguage,
+    changeBackendLanguage,
+    availableFrontendLanguages,
+    availableBackendLanguages,
+    currentFrontendLanguage,
+    currentBackendLanguage,
+  };
+};