WIP: Translation of web app

web/src/components/App.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Suspense } from "react";
 import {useEffect, useState} from 'react';
 import Box from '@mui/material/Box';
 import {ThemeProvider} from '@mui/material/styles';
@@ -20,30 +21,39 @@ import routes from "./routes";
 import {useAutoSubscribe, useBackgroundProcesses, useConnectionListeners} from "./hooks";
 import SendDialog from "./SendDialog";
 import Messaging from "./Messaging";
+import "./i18n"; // Translations!
 
 // TODO races when two tabs are open
 // TODO investigate service workers
 
 const App = () => {
     return (
-        <BrowserRouter>
-            <ThemeProvider theme={theme}>
-                <CssBaseline/>
-                <ErrorBoundary>
-                    <Routes>
-                        <Route element={<Layout/>}>
-                            <Route path={routes.root} element={<AllSubscriptions/>}/>
-                            <Route path={routes.settings} element={<Preferences/>}/>
-                            <Route path={routes.subscription} element={<SingleSubscription/>}/>
-                            <Route path={routes.subscriptionExternal} element={<SingleSubscription/>}/>
-                        </Route>
-                    </Routes>
-                </ErrorBoundary>
-            </ThemeProvider>
-        </BrowserRouter>
+        <Suspense fallback={<Loader />}>
+            <BrowserRouter>
+                <ThemeProvider theme={theme}>
+                    <CssBaseline/>
+                    <ErrorBoundary>
+                        <Routes>
+                            <Route element={<Layout/>}>
+                                <Route path={routes.root} element={<AllSubscriptions/>}/>
+                                <Route path={routes.settings} element={<Preferences/>}/>
+                                <Route path={routes.subscription} element={<SingleSubscription/>}/>
+                                <Route path={routes.subscriptionExternal} element={<SingleSubscription/>}/>
+                            </Route>
+                        </Routes>
+                    </ErrorBoundary>
+                </ThemeProvider>
+            </BrowserRouter>
+        </Suspense>
     );
 }
 
+const Loader = () => (
+    <div>
+        <div>loading...</div>
+    </div>
+);
+
 const AllSubscriptions = () => {
     const { subscriptions } = useOutletContext();
     return <Notifications mode="all" subscriptions={subscriptions}/>;

web/src/components/Navigation.js

@@ -24,6 +24,7 @@ import Box from "@mui/material/Box";
 import notifier from "../app/Notifier";
 import config from "../app/config";
 import ArticleIcon from '@mui/icons-material/Article';
+import {useTranslation} from "react-i18next";
 
 const navWidth = 280;
 
@@ -61,6 +62,7 @@ const Navigation = (props) => {
 Navigation.width = navWidth;
 
 const NavList = (props) => {
+    const { t } = useTranslation();
     const navigate = useNavigate();
     const location = useLocation();
     const [subscribeDialogKey, setSubscribeDialogKey] = useState(0);
@@ -124,7 +126,7 @@ const NavList = (props) => {
                 </ListItemButton>
                 <ListItemButton onClick={() => setSubscribeDialogOpen(true)}>
                     <ListItemIcon><AddIcon/></ListItemIcon>
-                    <ListItemText primary="Subscribe to topic"/>
+                    <ListItemText primary={t("nav_button_subscribe")}/>
                 </ListItemButton>
             </List>
             <SubscribeDialog

web/src/components/i18n.js

@@ -0,0 +1,26 @@
+import i18n from 'i18next';
+import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+// init i18next
+// for all options read: https://www.i18next.com/overview/configuration-options
+// learn more: https://github.com/i18next/i18next-browser-languageDetector
+// learn more: https://github.com/i18next/i18next-http-backend
+
+i18n
+    .use(Backend)
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+        fallbackLng: 'en',
+        debug: true,
+        interpolation: {
+            escapeValue: false, // not needed for react as it escapes by default
+        },
+        backend: {
+            loadPath: '/static/langs/{{lng}}.json',
+        }
+    });
+
+export default i18n;