146 lines
3.9 KiB
JavaScript
146 lines
3.9 KiB
JavaScript
import "antd/dist/reset.css";
|
|
import "./App.css";
|
|
import { Layout, Spin, Typography } from "antd";
|
|
import {
|
|
Constants,
|
|
UseUserSession,
|
|
handleLogout,
|
|
isDevelopmentEnv,
|
|
myFetch,
|
|
} from "./utils";
|
|
import DashboardLayout from "./Components/DashboardLayout";
|
|
import SideBarProvider from "./Contexts/SideBarContext";
|
|
import { AppProvider } from "./Contexts/AppContext";
|
|
import { UserProfileProvider } from "./Contexts/UserProfileContext";
|
|
import { UsersProvider } from "./Contexts/UsersContext";
|
|
import HeaderProvider from "./Contexts/HeaderContext";
|
|
import { useEffect, useState } from "react";
|
|
import StoresProvider from "./Contexts/StoresContext";
|
|
import { clarity } from "react-microsoft-clarity";
|
|
import { useTranslation } from "react-i18next";
|
|
import MyAppLogo from "./Components/MyAppLogo";
|
|
import { AuthenticationRoutes } from "./Components/AppRoutes";
|
|
|
|
export function Loading() {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
height: "100vh",
|
|
}}
|
|
>
|
|
<MyAppLogo
|
|
style={{
|
|
width: 320,
|
|
height: 90,
|
|
}}
|
|
/>
|
|
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 20,
|
|
}}
|
|
>
|
|
<Spin />
|
|
|
|
<Typography.Title
|
|
level={4}
|
|
strong
|
|
style={{
|
|
letterSpacing: 2,
|
|
margin: 0,
|
|
}}
|
|
>
|
|
{t("app.loading")}
|
|
</Typography.Title>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
const { _, i18n } = useTranslation();
|
|
|
|
const { userSession, setUserSession } = UseUserSession();
|
|
const [appUserData, setAppUserData] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if (!userSession) return;
|
|
|
|
myFetch({
|
|
url: "/user",
|
|
method: "GET",
|
|
})
|
|
.then((data) => {
|
|
setAppUserData(data);
|
|
|
|
if (data.user.analytics_enabled) {
|
|
clarity.init(Constants.CLARITY_PROJECT_ID);
|
|
}
|
|
|
|
if (data.user.language !== i18n.language) {
|
|
i18n.changeLanguage(data.user.language);
|
|
}
|
|
})
|
|
.catch(() =>
|
|
handleLogout({
|
|
setUserSession: setUserSession,
|
|
})
|
|
);
|
|
}, []);
|
|
|
|
if (!userSession) {
|
|
return <AuthenticationRoutes setUserSession={setUserSession} />;
|
|
}
|
|
|
|
if (appUserData === null) {
|
|
return <Loading />;
|
|
}
|
|
|
|
console.info(
|
|
`\n %c ZeitAdler Dashboard %c ${
|
|
isDevelopmentEnv() ? "Dev" : "Stable"
|
|
} %c \n`,
|
|
"background-color: #555;color: #fff;padding: 3px 2px 3px 3px;border-radius: 3px 0 0 3px;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)",
|
|
"background-color: #bc81e0;background-image: linear-gradient(90deg, #6878d6, #4d61d6);color: #fff;padding: 3px 3px 3px 2px;border-radius: 0 3px 3px 0;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)",
|
|
"background-color: transparent"
|
|
);
|
|
|
|
return (
|
|
<Layout style={{ minHeight: "100vh" }}>
|
|
<HeaderProvider>
|
|
<SideBarProvider
|
|
options={{
|
|
username: appUserData.user.username,
|
|
permissions: appUserData.permissions,
|
|
accountPlanExpiry:
|
|
appUserData.user.account_plan_expiry === null
|
|
? undefined
|
|
: appUserData.user.account_plan_expiry,
|
|
}}
|
|
>
|
|
<UserProfileProvider>
|
|
<UsersProvider>
|
|
<AppProvider>
|
|
<StoresProvider options={{ stores: appUserData.stores }}>
|
|
<DashboardLayout
|
|
userSession={userSession}
|
|
setUserSession={setUserSession}
|
|
/>
|
|
</StoresProvider>
|
|
</AppProvider>
|
|
</UsersProvider>
|
|
</UserProfileProvider>
|
|
</SideBarProvider>
|
|
</HeaderProvider>
|
|
</Layout>
|
|
);
|
|
}
|