language detection fixed

web/src/App/Sidebar.jsx

@@ -18,7 +18,6 @@ import { AppSidebarStyle } from './style'
 
 export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
   const [currentLang, changeLang] = useChangeLanguage()
-
   const { t } = useTranslation()
 
   return (

web/src/i18n.js

@@ -0,0 +1,16 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import translationEN from 'locales/en/translation.json'
+import translationRU from 'locales/ru/translation.json'
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: 'en', // default
+    interpolation: { escapeValue: false }, // react already safes from xss
+    resources: { en: { translation: translationEN }, ru: { translation: translationRU } },
+  })
+
+export default i18n

web/src/index.jsx

@@ -1,40 +1,13 @@
 import { StrictMode } from 'react'
 import ReactDOM from 'react-dom'
-import { I18nextProvider } from 'react-i18next'
-import i18n from 'i18next'
-import LanguageDetector from 'i18next-browser-languagedetector'
+import 'i18n'
 
 import './index.css'
 import App from './App'
 
-i18n.use(LanguageDetector).init({
-  lng: 'en', // default
-  fallbackLng: 'en', // use en if detected lng is not available
-  keySeparator: false, // we do not use keys in form messages.welcome
-  interpolation: {
-    escapeValue: false, // react already safes from xss
-  },
-  resources: {
-    en: {
-      // eslint-disable-next-line global-require
-      translations: require('./locales/en/translation.json'),
-    },
-    ru: {
-      // eslint-disable-next-line global-require
-      translations: require('./locales/ru/translation.json'),
-    },
-  },
-  ns: ['translations'],
-  defaultNS: 'translations',
-})
-
-i18n.languages = ['en', 'ru']
-
 ReactDOM.render(
   <StrictMode>
-    <I18nextProvider i18n={i18n}>
     <App />
-    </I18nextProvider>
   </StrictMode>,
   document.getElementById('root'),
 )