Fix/auto detect language (#517)

* fix: auto detect browser language * fix: missing translation * fix: little clean up mistake
BearStudio · Aug 5, 2024 · eaad030 · eaad030
1 parent dea33dc
commit eaad030
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "framer-motion": "11.2.14",
     "holy-loader": "2.3.1",
     "i18next": "23.11.5",
+    "i18next-browser-languagedetector": "8.0.0",
     "lucia": "3.2.0",
     "next": "14.2.4",
     "nodemailer": "6.9.14",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/Document.tsx b/src/app/Document.tsx
@@ -8,20 +8,15 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Providers } from '@/app/Providers';
 import { Viewport } from '@/components/Viewport';
 import { EnvHint } from '@/features/devtools/EnvHint';
-import i18n from '@/lib/i18n/client';
-import { AVAILABLE_LANGUAGES } from '@/lib/i18n/constants';
+import { useLocale } from '@/lib/i18n/useLocale';
 import { TrpcProvider } from '@/lib/trpc/TrpcProvider';
 import theme, { COLOR_MODE_STORAGE_KEY } from '@/theme';
 
 export const Document = ({ children }: { children: ReactNode }) => {
+  const locale = useLocale();
+
   return (
-    <html
-      lang={i18n.language}
-      dir={
-        AVAILABLE_LANGUAGES.find(({ key }) => key === i18n.language)?.dir ??
-        'ltr'
-      }
-    >
+    <html lang={locale?.lang} dir={locale?.dir}>
       <head>
         <meta
           name="viewport"

diff --git a/src/features/account/useSyncAccountLanguage.ts b/src/features/account/useSyncAccountLanguage.ts
@@ -12,8 +12,17 @@ export const useSyncAccountLanguage = () => {
 
   const { i18n } = useTranslation();
   useEffect(() => {
-    if (account.isSuccess) {
-      i18n.changeLanguage(account.data.language);
-    }
+    const updateLanguage = () => {
+      if (account.data?.language) {
+        i18n.changeLanguage(account.data.language);
+      }
+    };
+    i18n.on('initialized', updateLanguage);
+
+    updateLanguage();
+
+    return () => {
+      i18n.off('initialized', updateLanguage);
+    };
   }, [account.isSuccess, account.data?.language, i18n]);
 };
diff --git a/src/features/auth/PageRegister.tsx b/src/features/auth/PageRegister.tsx
@@ -72,7 +72,6 @@ export default function PageRegister() {
           size="sm"
           whiteSpace="normal"
           display="inline"
-          textAlign="left"
           fontWeight="normal"
           px="0"
           color="text-dimmed"

diff --git a/src/lib/i18n/client.ts b/src/lib/i18n/client.ts
@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
 import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import { z } from 'zod';
 import { makeZodI18nMap } from 'zod-i18n-map';
@@ -13,7 +14,7 @@ import { isBrowser } from '@/lib/ssr';
 
 dayjs.locale(DEFAULT_LANGUAGE_KEY);
 
-i18n.use(initReactI18next).init(i18nConfig);
+i18n.use(LanguageDetector).use(initReactI18next).init(i18nConfig);
 
 i18n.on('languageChanged', (langKey) => {
   const language = AVAILABLE_LANGUAGES.find(({ key }) => key === langKey);

diff --git a/src/lib/i18n/config.ts b/src/lib/i18n/config.ts
@@ -11,8 +11,8 @@ export const i18nConfig: InitOptions = {
   defaultNS: DEFAULT_NAMESPACE,
   ns: keys(locales[DEFAULT_LANGUAGE_KEY]),
   resources: locales,
-  lng: DEFAULT_LANGUAGE_KEY,
   fallbackLng: DEFAULT_LANGUAGE_KEY,
+  supportedLngs: keys(locales),
 
   // Fix issue with i18next types
   // https://www.i18next.com/overview/typescript#argument-of-type-defaulttfuncreturn-is-not-assignable-to-parameter-of-type-xyz

diff --git a/src/lib/i18n/useLocale.ts b/src/lib/i18n/useLocale.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { AVAILABLE_LANGUAGES } from '@/lib/i18n/constants';
+
+export const useLocale = () => {
+  const { i18n } = useTranslation();
+  const [locale, setLocale] = useState<{
+    lang: string | undefined;
+    dir: 'ltr' | 'rtl';
+  }>();
+
+  useEffect(() => {
+    setLocale({
+      lang: i18n.language,
+      dir:
+        AVAILABLE_LANGUAGES.find(({ key }) => key === i18n.language)?.dir ??
+        'ltr',
+    });
+  }, [i18n.language]);
+
+  return locale;
+};
diff --git a/src/locales/ar/users.json b/src/locales/ar/users.json
@@ -48,7 +48,8 @@
     },
     "name": {
       "label": "الإسم الاول",
-      "required": "مطلوب اسم"
+      "required": "مطلوب اسم",
+      "invalid": "الاسم غير صالح"
     },
     "language": {
       "label": "اللغة"

diff --git a/src/locales/fr/users.json b/src/locales/fr/users.json
@@ -48,7 +48,8 @@
     },
     "name": {
       "label": "Nom",
-      "required": "Le nom est requis"
+      "required": "Le nom est requis",
+      "invalid": "Le nom n'est pas valide"
     },
     "language": {
       "label": "Langue"

diff --git a/src/locales/sw/users.json b/src/locales/sw/users.json
@@ -48,7 +48,8 @@
     },
     "name": {
       "label": "Jina",
-      "required": "Jina linahitajika"
+      "required": "Jina linahitajika",
+      "invalid": "Jina ni batili"
     },
     "language": {
       "label": "Lugha"