Multi-language/I18n support #22

interface/src/App.tsx

@@ -1,4 +1,4 @@
-import { FC, createRef, createContext, useContext, RefObject } from 'react';
+import { FC, createRef, createContext, useContext, useEffect, useState, RefObject } from 'react';
 import { SnackbarProvider } from 'notistack';
 
 import { IconButton } from '@mui/material';
@@ -9,6 +9,13 @@ import { FeaturesLoader } from './contexts/features';
 import CustomTheme from './CustomTheme';
 import AppRouting from './AppRouting';
 
+import { localStorageDetector } from 'typesafe-i18n/detectors';
+import TypesafeI18n from './i18n/i18n-react';
+import { detectLocale } from './i18n/i18n-util';
+import { loadLocaleAsync } from './i18n/i18n-util.async';
+
+const detectedLocale = detectLocale(localStorageDetector);
+
 const App: FC = () => {
   const notistackRef: RefObject<any> = createRef();
 
@@ -20,24 +27,34 @@ const App: FC = () => {
 
   const colorMode = useContext(ColorModeContext);
 
+  const [wasLoaded, setWasLoaded] = useState(false);
+
+  useEffect(() => {
+    loadLocaleAsync(detectedLocale).then(() => setWasLoaded(true));
+  }, []);
+
+  if (!wasLoaded) return null;
+
   return (
     <ColorModeContext.Provider value={colorMode}>
-      <CustomTheme>
-        <SnackbarProvider
-          maxSnack={3}
-          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-          ref={notistackRef}
-          action={(key) => (
-            <IconButton onClick={onClickDismiss(key)} size="small">
-              <CloseIcon />
-            </IconButton>
-          )}
-        >
-          <FeaturesLoader>
-            <AppRouting />
-          </FeaturesLoader>
-        </SnackbarProvider>
-      </CustomTheme>
+      <TypesafeI18n locale={detectedLocale}>
+        <CustomTheme>
+          <SnackbarProvider
+            maxSnack={3}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+            ref={notistackRef}
+            action={(key) => (
+              <IconButton onClick={onClickDismiss(key)} size="small">
+                <CloseIcon />
+              </IconButton>
+            )}
+          >
+            <FeaturesLoader>
+              <AppRouting />
+            </FeaturesLoader>
+          </SnackbarProvider>
+        </CustomTheme>
+      </TypesafeI18n>
     </ColorModeContext.Provider>
   );
 };