Merge pull request #5 from Dialogue-Bot/DIAL-3-feat-implement-auth-fe

Dial 3 feat implement auth fe

Author: hi02102002

client/src/components/btn-lang.tsx

@@ -1,7 +1,7 @@
-import { useTranslation } from 'react-i18next';
-import { Button } from './ui';
 import { lngs } from '@/i18n';
 import { ELang } from '@/types/share';
+import { useTranslation } from 'react-i18next';
+import { Button } from './ui';
 
 export const ButtonLang = () => {
    const { i18n } = useTranslation();
@@ -17,7 +17,7 @@ export const ButtonLang = () => {
          }}
          className="min-w-24"
       >
-         {lngs.find((lng) => lng.code === i18n.language)?.name}
+         {lngs[i18n.language as ELang]}
       </Button>
    );
 };

client/src/i18n.ts

@@ -0,0 +1,29 @@
+import { ELang } from '@/types/share';
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+import resources from './resources';
+
+export const lngs: Record<ELang, string> = {
+   [ELang.EN]: 'English',
+   [ELang.VI]: 'Tiếng Việt',
+};
+
+i18n
+
+   .use(LanguageDetector)
+   .use(initReactI18next)
+   .init({
+      debug: process.env.NODE_ENV === 'development',
+      fallbackLng: ELang.EN,
+      detection: {
+         order: ['queryString', 'cookie', 'localstorage'],
+         lookupLocalStorage: 'lang',
+         lookupCookie: 'lang',
+         lookupQuerystring: 'lang',
+         caches: ['localStorage', 'cookie'],
+      },
+      ns: ['common', 'forms', 'register', 'login', 'layout'],
+      resources,
+   });
+export default i18n;

client/src/i18n/index.ts

@@ -0,0 +1,38 @@
+import commonEN from '@/locales/en/common.json';
+import forgotPassEN from '@/locales/en/forgot_pass.json';
+import formsEN from '@/locales/en/forms.json';
+import layoutEN from '@/locales/en/layout.json';
+import loginEN from '@/locales/en/login.json';
+import registerEN from '@/locales/en/register.json';
+import setPassEN from '@/locales/en/set_pass.json';
+import commonVI from '@/locales/vi/common.json';
+import forgotPassVI from '@/locales/vi/forgot_pass.json';
+import formsVI from '@/locales/vi/forms.json';
+import layoutVI from '@/locales/vi/layout.json';
+import loginVI from '@/locales/vi/login.json';
+import registerVI from '@/locales/vi/register.json';
+import setPassVI from '@/locales/vi/set_pass.json';
+import { ELang } from '@/types/share';
+
+const resources = {
+   [ELang.EN]: {
+      common: commonEN,
+      forms: formsEN,
+      register: registerEN,
+      login: loginEN,
+      layout: layoutEN,
+      forgot_pass: forgotPassEN,
+      set_pass: setPassEN,
+   },
+   [ELang.VI]: {
+      common: commonVI,
+      forms: formsVI,
+      register: registerVI,
+      login: loginVI,
+      layout: layoutVI,
+      forgot_pass: forgotPassVI,
+      set_pass: setPassVI,
+   },
+} as const;
+
+export default resources;

client/src/i18n/resources.ts

@@ -1,15 +1,8 @@
 import 'i18next';
+import resources from './i18n/resources';
 
 declare module 'i18next' {
    interface CustomTypeOptions {
-      resources: {
-         login: typeof import('../public/locales/en/login.json');
-         common: typeof import('../public/locales/en/common.json');
-         layout: typeof import('../public/locales/en/layout.json');
-         forms: typeof import('../public/locales/en/forms.json');
-         register: typeof import('../public/locales/en/register.json');
-         forgot_pass: typeof import('../public/locales/en/forgot_pass.json');
-         set_pass: typeof import('../public/locales/en/set_pass.json');
-      };
+      resources: typeof resources.en;
    }
 }