88 lines
2.6 KiB
JavaScript
88 lines
2.6 KiB
JavaScript
import React, { useState } from "react";
|
|
import "antd/dist/reset.css";
|
|
import "./App.css";
|
|
import PageContent from "./Components/PageContent";
|
|
import SideMenu from "./Components/SideMenu";
|
|
import Login from "./Pages/Login";
|
|
import { Layout, notification } from "antd";
|
|
import { UseUserSession, WebSocketProvider } from "./utils";
|
|
|
|
export default function App() {
|
|
const [notificationApi, notificationContextHolder] =
|
|
notification.useNotification();
|
|
const { userSession, setUserSession } = UseUserSession();
|
|
const [webSocketIsReady, setWebSocketIsReady] = useState(true);
|
|
|
|
if (!userSession) {
|
|
return <Login />;
|
|
}
|
|
|
|
console.info(
|
|
"\n %c Admin Dashboard %c v0.1.0 %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, #e67e22, #9b59b6);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" }}>
|
|
{notificationContextHolder}
|
|
<WebSocketProvider
|
|
userSession={userSession}
|
|
setUserSession={setUserSession}
|
|
notificationApi={notificationApi}
|
|
isReady={webSocketIsReady}
|
|
setIsReady={setWebSocketIsReady}
|
|
>
|
|
<ReconnectingView webSocketIsReady={webSocketIsReady} />
|
|
<SideMenu userSession={userSession} setUserSession={setUserSession} />
|
|
<PageContent />
|
|
</WebSocketProvider>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
const ReconnectingView = ({ webSocketIsReady }) => {
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "fixed",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
|
display: webSocketIsReady ? "none" : "block",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
zIndex: 9999,
|
|
}}
|
|
>
|
|
<svg id="loading-reconnecting" className="loading" viewBox="0 0 1350 600">
|
|
<text x="50%" y="50%" fill="transparent" textAnchor="middle">
|
|
J A N E X
|
|
</text>
|
|
</svg>
|
|
<div
|
|
style={{
|
|
height: "100vh",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
marginTop: 80,
|
|
fontWeight: "bold",
|
|
fontSize: 24,
|
|
letterSpacing: 2,
|
|
}}
|
|
>
|
|
Connecting...
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|