frontend/lib/i18n.ts (view raw)
1import i18n from 'i18next';
2import {initReactI18next} from 'react-i18next';
3import 'moment/locale/fr-ch';
4import moment from 'moment';
5import translationFr from '../locales/fr.json';
6import translationEn from '../locales/en.json';
7import {Enum_Userspermissionsuser_Lang as Lang} from '../generated/graphql';
8
9const STORAGE_KEY = 'i18n-lang';
10
11type AvailableLang = 'en' | 'fr';
12
13const resources = {
14 fr: {
15 translation: translationFr,
16 },
17 en: {
18 translation: translationEn,
19 },
20};
21
22export const getNavigatorLang = (): AvailableLang => {
23 if (typeof localStorage !== 'undefined') {
24 const storedLang = localStorage.getItem(STORAGE_KEY);
25 if (storedLang) return storedLang as AvailableLang;
26 }
27 if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined')
28 if (navigator.language === 'fr' || navigator.language.includes('fr-'))
29 return 'fr';
30 return 'en';
31};
32
33i18n
34 .use(initReactI18next) // passes i18n down to react-i18next
35 .init({
36 resources,
37 lng: getNavigatorLang(),
38 supportedLngs: ['fr', 'en'],
39 interpolation: {
40 escapeValue: false, // react already safes from xss
41 },
42 });
43
44// Moment - On lang change
45const changeMomentLang = (i18nLang: string) => {
46 const momentLang = i18nLang === 'fr' ? 'fr-ch' : 'en';
47 moment.locale(momentLang);
48};
49
50// Moment - On page load
51const i18nLang = getNavigatorLang();
52changeMomentLang(i18nLang);
53
54export const changeLang = (lang: Lang) => {
55 const i18nLang = lang.toLowerCase();
56 i18n.changeLanguage(i18nLang);
57 changeMomentLang(i18nLang);
58 if (typeof localStorage !== 'undefined')
59 localStorage.setItem(STORAGE_KEY, i18nLang);
60};
61
62export default i18n;