import React, { useState, useRef, useEffect, useMemo } from "react";
|
import { Route } from "react-router-dom";
|
import {
|
Admin,
|
Resource,
|
CustomRoutes,
|
localStorageStore,
|
useStore,
|
StoreContextProvider,
|
resolveBrowserLocale,
|
} from "react-admin";
|
import polyglotI18nProvider from "ra-i18n-polyglot";
|
import englishMessages from "./i18n/en";
|
import zhMessages from "./i18n/zh";
|
import { Layout } from "./layout";
|
import AuthProvider from "./config/authProvider";
|
import DataProvider from "./config/dataProvider";
|
import Dashboard from "./page/dashboard";
|
import Settings from "./page/settings";
|
import Login from "./page/login";
|
import * as Common from "./utils/common";
|
import { themes } from "./themes/themes";
|
import {
|
SPA_NAME,
|
SPA_VERSION,
|
DEFAULT_THEME_NAME,
|
DEFAULT_THEME_MODE,
|
DATA_PROVIDER_SPRING,
|
} from "./config/setting";
|
import ResourceContent from "./page/ResourceContent";
|
import { getSystemInfo, getSystemDicts, tenants } from "@/api/auth";
|
import chineseMessages from 'ra-language-chinese';
|
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
import { zhCN, frFR, enUS } from '@mui/material/locale';
|
|
|
const getMaterialUILocale = (locale) => {
|
switch (locale) {
|
case 'en':
|
return enUS;
|
case 'fr':
|
return frFR;
|
default:
|
return zhCN;
|
}
|
};
|
|
const i18nProvider = polyglotI18nProvider(
|
(locale) => {
|
if (locale === "en") {
|
return import("./i18n/en").then((messages) => messages.default);
|
}
|
return { ...chineseMessages, ...zhMessages };
|
},
|
"zh",
|
[
|
{ locale: "en", name: "English" },
|
{ locale: "zh", name: "简体中文" },
|
{ locale: "jp", name: "日本語" },
|
{ locale: "kr", name: "한국인" },
|
{ locale: "ru", name: "Russian" },
|
{ locale: "lk", name: "Русский" },
|
{ locale: "es", name: "Española" },
|
],
|
{
|
// msg in console
|
allowMissing: true,
|
},
|
);
|
|
|
const store = localStorageStore(SPA_VERSION, SPA_NAME);
|
|
const App = () => {
|
const [themeName] = useStore("themeName", DEFAULT_THEME_NAME);
|
const lightTheme = themes.find((theme) => theme.name === themeName)?.light;
|
const darkTheme = themes.find((theme) => theme.name === themeName)?.dark;
|
const [locale, setLocale] = useState('zh');
|
const theme = createTheme(
|
{
|
...lightTheme
|
}, getMaterialUILocale(locale))
|
useEffect(() => {
|
getSystemInfo().then((data) => {
|
localStorage.setItem("system", JSON.stringify(data));
|
})
|
}, []);
|
|
return (
|
<>
|
<Admin
|
disableTelemetry
|
layout={Layout}
|
authProvider={AuthProvider}
|
store={store}
|
lightTheme={lightTheme}
|
darkTheme={darkTheme}
|
defaultTheme={DEFAULT_THEME_MODE}
|
theme={theme}
|
i18nProvider={i18nProvider}
|
dataProvider={DataProvider(DATA_PROVIDER_SPRING)}
|
loginPage={Login}
|
dashboard={Dashboard}
|
>
|
{(permissions) => (
|
<>
|
{Common.extractNavMenus(permissions)?.map((node) => {
|
return (
|
<Resource
|
key={node.id}
|
name={node.component}
|
{...ResourceContent(node)}
|
/>
|
);
|
})}
|
</>
|
)}
|
{/* CustomRoutes don't trigger checkAuth */}
|
<CustomRoutes>
|
<Route path="/dashboard" element={<Dashboard />} />
|
<Route path="/settings" element={<Settings />} />
|
</CustomRoutes>
|
</Admin>
|
</>
|
);
|
};
|
|
const AppWrapper = () => (
|
<StoreContextProvider value={store}>
|
<App />
|
</StoreContextProvider>
|
);
|
|
export default AppWrapper;
|
