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"