refactor: merge translations

Author: bclswl0827

web/src/.env.development

@@ -1,5 +1,5 @@
 VITE_APP_GRAPHQL_API_ENDPOINT_DEV_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NTQxMTY2ODYsIm9yaWdfaWF0IjoxNzU0MDMwMjg2LCJ1c2VyX2lkIjoiMTk1MDY2NDYzMjQ4NjA3MjMyMCJ9.z7FrTMkSDXRN8f6ryFB1HVoCMuhNvyQb4ch6gzxdKa0
-VITE_APP_BACKEND_BASE_HOST=https://tainan.anyshake.org
+VITE_APP_BACKEND_BASE_HOST=http://127.0.0.1:8073
 
 VITE_APP_RESTFUL_API_BASE_PATH=/api
 VITE_APP_WEBSOCKET_API_ENDPOINT=/api/socket

web/src/src/Entry.tsx

@@ -46,17 +46,17 @@ export const Entry = ({ currentLocale, locales, onSwitchLocale }: IEntry) => {
     }, [getSoftwareVersionData, getSoftwareVersionLoading]);
 
     const { pathname } = useLocation();
-    const [currentTitle, setCurrentTitle] = useState(globalConfig.name[currentLocale]);
+    const [currentTitle, setCurrentTitle] = useState(t(globalConfig.name));
     useEffect(() => {
         for (const key in routerConfig.routes) {
             const { uri } = routerConfig.routes[key];
             if (pathname === uri) {
-                setCurrentTitle(routerConfig.routes[key].title[currentLocale]);
+                setCurrentTitle(t(routerConfig.routes[key].title));
                 return;
             }
         }
-        setCurrentTitle(routerConfig.routes.default.title[currentLocale]);
-    }, [pathname, currentLocale]);
+        setCurrentTitle(t(routerConfig.routes.default.title));
+    }, [pathname, currentLocale, t]);
 
     const { clearCredential } = useCredentialStore();
     const handleLogoutSubmit = () => {
@@ -127,17 +127,13 @@ export const Entry = ({ currentLocale, locales, onSwitchLocale }: IEntry) => {
     return (
         <div className="animate-fade animate-duration-500 animate-delay-300">
             <Header
-                title={globalConfig.name[currentLocale]}
+                title={t(globalConfig.name)}
                 onLogout={handleLogoutSubmit}
                 currentLocale={currentLocale}
                 onSwitchLocale={onSwitchLocale}
                 locales={locales}
             />
-            <AsideMenu
-                title={globalConfig.name[currentLocale]}
-                menu={menuConfig}
-                currentLocale={currentLocale}
-            />
+            <AsideMenu title={t(globalConfig.name)} menu={menuConfig} />
 
             <div className="ml-10 flex min-h-screen flex-col space-y-4 p-20 px-4">
                 <BreadCrumb
@@ -146,8 +142,7 @@ export const Entry = ({ currentLocale, locales, onSwitchLocale }: IEntry) => {
                     title={currentTitle}
                 />
                 <RouterView
-                    routerProps={{ currentLocale }}
-                    currentLocale={currentLocale}
+                    routerProps={{ currentLocale, onSwitchLocale, locales }}
                     appName={globalConfig.name}
                     routes={routerConfig.routes}
                     suspense={<Skeleton />}
@@ -157,8 +152,7 @@ export const Entry = ({ currentLocale, locales, onSwitchLocale }: IEntry) => {
             <Footer
                 copyright={globalConfig.copyright}
                 repository={globalConfig.repository}
-                currentLocale={currentLocale}
-                text={globalConfig.footer}
+                text={t(globalConfig.footer)}
                 homepage={globalConfig.homepage}
             />
             <Scroller threshold={100} />

web/src/src/Login.tsx

@@ -27,9 +27,10 @@ interface ILogin {
 }
 
 export const Login = ({ currentLocale, locales, onSwitchLocale }: ILogin) => {
+    const { t } = useTranslation();
     useEffect(() => {
-        document.title = globalConfig.name[currentLocale];
-    }, [currentLocale]);
+        document.title = t(globalConfig.name);
+    }, [currentLocale, t]);
 
     // State for pre-authentication data (captcha, encrypt key, etc.)
     const [preAuthTTL, setPreAuthTTL] = useState(0);
@@ -39,7 +40,6 @@ export const Login = ({ currentLocale, locales, onSwitchLocale }: ILogin) => {
         captcha_img: '',
         error: false
     });
-    const { t } = useTranslation();
     const getPreAuthData = useCallback(
         async (notify: boolean) => {
             setPreAuthData({ public_key: '', captcha_id: '', captcha_img: '', error: false });

web/src/src/components/base/AsideMenu.tsx

@@ -2,19 +2,18 @@ import { mdiArrowExpandAll } from '@mdi/js';
 import Icon from '@mdi/react';
 import { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-
-import { localeConfig } from '../../config/locale';
+import { useTranslation } from 'react-i18next';
 import { IMenuItem } from '../../config/menu';
 
 interface IAsideMenu {
     readonly title: string;
     readonly menu: IMenuItem[];
-    readonly currentLocale: keyof typeof localeConfig.resources;
 }
 
-export const AsideMenu = ({ title, menu, currentLocale }: IAsideMenu) => {
-    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+export const AsideMenu = ({ title, menu }: IAsideMenu) => {
     const { hash, pathname } = useLocation();
+    const [t] = useTranslation();
+    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
     return (
         <aside
@@ -57,7 +56,7 @@ export const AsideMenu = ({ title, menu, currentLocale }: IAsideMenu) => {
                         key={url}
                     >
                         <Icon className="flex-shrink-0" path={icon} size={0.8} />
-                        <span className="ml-4">{label[currentLocale]}</span>
+                        <span className="ml-4">{t(label)}</span>
                     </Link>
                 ))}
             </div>

web/src/src/components/base/Footer.tsx

@@ -1,26 +1,23 @@
 import { mdiGithub } from '@mdi/js';
 import Icon from '@mdi/react';
-import { useState } from 'react';
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
-
-import { localeConfig } from '../../config/locale';
+import { useTranslation } from 'react-i18next';
 
 interface IFooter {
     readonly copyright: string;
     readonly homepage: string;
     readonly repository: string;
-    readonly currentLocale: keyof typeof localeConfig.resources;
-    readonly text: Record<keyof typeof localeConfig.resources, string>;
+    readonly text: string;
 }
 
-export const Footer = ({ text, homepage, currentLocale, copyright, repository }: IFooter) => {
-    const [currentYear] = useState(new Date().getFullYear());
+export const Footer = ({ text, homepage, copyright, repository }: IFooter) => {
+    const [t] = useTranslation();
+    const currentYear = useMemo(() => new Date().getFullYear(), []);
 
     return (
         <footer className="bg-base-300 flex w-full flex-col justify-between px-8 py-2 text-gray-500 sm:flex-row">
-            <span className="self-center text-center text-xs italic sm:ml-12">
-                {text[currentLocale]}
-            </span>
+            <span className="self-center text-center text-xs italic sm:ml-12">{t(text)}</span>
             <div className="flex items-center justify-center text-center">
                 <Link
                     className="self-center text-sm hover:underline"

web/src/src/components/ui/ErrorPage.tsx

@@ -1,6 +1,6 @@
 import { mdiBugPause } from '@mdi/js';
 import Icon from '@mdi/react';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { hideLoaderAnimation } from '../../helpers/app/hideLoaderAnimation';
@@ -20,7 +20,7 @@ interface IErrorPage {
 export const ErrorPage = ({ code, heading, content, action, debug }: IErrorPage) => {
     const { t } = useTranslation();
 
-    const [currentTime] = useState(Date.now());
+    const currentTime = useMemo(() => Date.now(), []);
     const [isDebug, setIsDebug] = useState(false);
 
     useEffect(() => {

web/src/src/components/ui/RouterView.tsx

@@ -1,38 +1,32 @@
 import { ReactNode, Suspense, useEffect } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
 
-import { localeConfig, Translation } from '../../config/locale';
 import { IRoute, IRouterComponent } from '../../config/router';
+import { useTranslation } from 'react-i18next';
 
 interface IRouterView {
-    readonly currentLocale: keyof typeof localeConfig.resources;
     readonly routes: Record<string, IRoute>;
     readonly routerProps: IRouterComponent;
-    readonly appName: Translation;
+    readonly appName: string;
     readonly suspense: ReactNode;
 }
 
-export const RouterView = ({
-    currentLocale,
-    routes,
-    suspense,
-    appName,
-    routerProps
-}: IRouterView) => {
+export const RouterView = ({ routes, suspense, appName, routerProps }: IRouterView) => {
     const { pathname } = useLocation();
+    const { t } = useTranslation();
 
     // Set the document title based on the current route
     useEffect(() => {
         const routeTitle = Object.values(routes).find(({ uri }) => pathname === uri)?.title;
-        const title = routeTitle?.[currentLocale] ?? routes.default.title?.[currentLocale];
-        document.title = `${title} - ${appName[currentLocale]}`;
-    }, [routes, appName, pathname, currentLocale]);
+        const title = routeTitle ?? routes.default.title;
+        document.title = `${t(title)} - ${t(appName)}`;
+    }, [routes, appName, pathname, t]);
 
     return (
         <Suspense key={pathname} fallback={suspense}>
             <Routes>
                 {Object.values(routes).map(({ uri, element: Element }, index) => (
-                    <Route key={index} element={<Element {...routerProps} />} path={`${uri}`} />
+                    <Route key={index} element={<Element {...routerProps} />} path={uri} />
                 ))}
             </Routes>
         </Suspense>

web/src/src/config/constraints.tsx

@@ -48,6 +48,10 @@ export const HistoryConstraints = {
     }
 };
 
-export const DownloadConstraints = {};
+export const DownloadConstraints = {
+    pollInterval: 5000
+};
 
-export const SettingsConstraints = {};
+export const SettingsConstraints = {
+    pollInterval: 5000
+};

web/src/src/config/global.tsx

@@ -1,43 +1,19 @@
 import logo from '/anyshake.svg';
 
-import { Translation } from './locale';
-
 interface IGlobalConfig {
     readonly repository: string;
     readonly logo: string;
-    readonly name: Translation;
+    readonly name: string;
     readonly copyright: string;
     readonly homepage: string;
     readonly update: number;
-    readonly footer: Translation;
+    readonly footer: string;
 }
 
 export const globalConfig: IGlobalConfig = {
     logo,
-    name: {
-        'de-DE': 'AnyShake Observer',
-        'en-US': 'AnyShake Observer',
-        'fr-FR': 'AnyShake Observer',
-        'ja-JP': 'AnyShake Observer',
-        'zh-TW': 'AnyShake Observer',
-        'pt-PT': 'AnyShake Observer',
-        'ru-RU': 'AnyShake Observer',
-        'id-ID': 'AnyShake Observer',
-        'tr-TR': 'AnyShake Observer',
-        'pl-PL': 'AnyShake Observer'
-    },
-    footer: {
-        'de-DE': '"Hoher Geist der Erde."',
-        'en-US': '"Listen to the whispering earth."',
-        'fr-FR': '"Ecouter le murmure de la terre."',
-        'ja-JP': '「地球のささやき」',
-        'zh-TW': '「聽見地球」',
-        'pt-PT': '"Ouça a terra sussurrar."',
-        'ru-RU': '"Прислушайтесь к шепоту Земли."',
-        'id-ID': '"Dengarkan bisikan bumi."',
-        'tr-TR': '"Dünyanın fısıltısını dinleyin."',
-        'pl-PL': '"Wsłuchaj się w szept Ziemi."'
-    },
+    name: 'config.global.name',
+    footer: 'config.global.footer',
     update: 10 * 60 * 1000,
     copyright: 'SensePlex Limited',
     homepage: 'https://anyshake.org',

web/src/src/config/locale.tsx

@@ -35,8 +35,6 @@ export const localeConfig: ILocaleConfig = {
     }
 };
 
-export type Translation = Record<keyof typeof localeConfig.resources, string>;
-
 const i18n = createI18n(localeConfig.fallback, localeConfig.key, localeConfig.resources);
 
 export default i18n;