2021-12-15 09:28:17 +00:00
|
|
|
import React, { useEffect } from 'react';
|
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
import {
|
|
|
|
ChatBubbleIcon,
|
|
|
|
DashboardIcon,
|
|
|
|
FrameIcon,
|
|
|
|
GearIcon,
|
|
|
|
Link2Icon,
|
|
|
|
MixerHorizontalIcon,
|
|
|
|
StarIcon,
|
|
|
|
TableIcon,
|
|
|
|
TimerIcon,
|
|
|
|
} from '@radix-ui/react-icons';
|
|
|
|
import { Route, Routes } from 'react-router-dom';
|
2021-12-15 11:12:19 +00:00
|
|
|
import { ToastContainer } from 'react-toastify';
|
|
|
|
|
|
|
|
import Dashboard from './pages/Dashboard';
|
|
|
|
import Sidebar, { RouteSection } from './components/Sidebar';
|
|
|
|
import ServerSettingsPage from './pages/ServerSettings';
|
2021-12-15 09:28:17 +00:00
|
|
|
import { RootState } from '../store';
|
|
|
|
import { createWSClient } from '../store/api/reducer';
|
|
|
|
import { ConnectionStatus } from '../store/api/types';
|
|
|
|
import { styled } from './theme';
|
|
|
|
|
|
|
|
// @ts-expect-error Asset import
|
|
|
|
import spinner from '../assets/icon-loading.svg';
|
2021-12-15 11:12:19 +00:00
|
|
|
import BackendIntegrationPage from './pages/BackendIntegration';
|
2021-12-15 09:28:17 +00:00
|
|
|
|
2021-12-16 16:01:24 +00:00
|
|
|
const LoadingDiv = styled('div', {
|
|
|
|
display: 'flex',
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center',
|
|
|
|
minHeight: '100vh',
|
|
|
|
});
|
2021-12-15 09:28:17 +00:00
|
|
|
|
2021-12-16 16:01:24 +00:00
|
|
|
const Spinner = styled('img', {
|
|
|
|
maxWidth: '100px',
|
|
|
|
});
|
2021-12-15 09:28:17 +00:00
|
|
|
|
2021-12-16 16:01:24 +00:00
|
|
|
function Loading() {
|
2021-12-15 09:28:17 +00:00
|
|
|
return (
|
|
|
|
<LoadingDiv>
|
|
|
|
<Spinner src={spinner} alt="Loading..." />
|
|
|
|
</LoadingDiv>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function AuthDialog() {
|
|
|
|
const AuthWrapper = styled('div', {
|
|
|
|
display: 'flex',
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center',
|
|
|
|
minHeight: '100vh',
|
|
|
|
});
|
|
|
|
|
|
|
|
return <AuthWrapper></AuthWrapper>;
|
|
|
|
}
|
|
|
|
|
|
|
|
const sections: RouteSection[] = [
|
|
|
|
{
|
|
|
|
title: 'menu.sections.monitor',
|
|
|
|
links: [
|
|
|
|
{
|
|
|
|
title: 'menu.pages.monitor.dashboard',
|
|
|
|
url: '/',
|
|
|
|
icon: <DashboardIcon />,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'menu.sections.strimertul',
|
|
|
|
links: [
|
|
|
|
{
|
|
|
|
title: 'menu.pages.strimertul.settings',
|
|
|
|
url: '/http',
|
|
|
|
icon: <GearIcon />,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'menu.pages.strimertul.stulbe',
|
2021-12-15 11:12:19 +00:00
|
|
|
url: '/backend',
|
2021-12-15 09:28:17 +00:00
|
|
|
icon: <Link2Icon />,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'menu.sections.twitch',
|
|
|
|
links: [
|
|
|
|
{
|
|
|
|
title: 'menu.pages.twitch.configuration',
|
|
|
|
url: '/twitch/settings',
|
|
|
|
icon: <MixerHorizontalIcon />,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'menu.pages.twitch.bot-commands',
|
|
|
|
url: '/twitch/bot/commands',
|
|
|
|
icon: <ChatBubbleIcon />,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'menu.pages.twitch.bot-timers',
|
|
|
|
url: '/twitch/bot/timers',
|
|
|
|
icon: <TimerIcon />,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'menu.pages.twitch.bot-alerts',
|
|
|
|
url: '/twitch/bot/alerts',
|
|
|
|
icon: <FrameIcon />,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'menu.sections.loyalty',
|
|
|
|
links: [
|
|
|
|
{
|
|
|
|
title: 'menu.pages.loyalty.configuration',
|
|
|
|
url: '/loyalty/settings',
|
|
|
|
icon: <MixerHorizontalIcon />,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'menu.pages.loyalty.points',
|
|
|
|
url: '/loyalty/users',
|
|
|
|
icon: <TableIcon />,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'menu.pages.loyalty.rewards',
|
|
|
|
url: '/loyalty/rewards',
|
|
|
|
icon: <StarIcon />,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
];
|
2021-09-17 09:55:15 +00:00
|
|
|
|
2021-12-16 16:01:24 +00:00
|
|
|
const Container = styled('div', {
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'row',
|
|
|
|
minHeight: '100vh',
|
|
|
|
});
|
|
|
|
|
|
|
|
const PageContent = styled('main', {
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'row',
|
|
|
|
flex: 1,
|
|
|
|
overflow: 'auto',
|
|
|
|
});
|
|
|
|
|
2021-12-09 09:45:38 +00:00
|
|
|
export default function App(): JSX.Element {
|
2021-12-15 09:28:17 +00:00
|
|
|
const client = useSelector((state: RootState) => state.api.client);
|
|
|
|
const connected = useSelector(
|
|
|
|
(state: RootState) => state.api.connectionStatus,
|
|
|
|
);
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (!client) {
|
|
|
|
dispatch(
|
|
|
|
createWSClient({
|
|
|
|
address:
|
|
|
|
process.env.NODE_ENV === 'development'
|
|
|
|
? 'ws://localhost:4337/ws'
|
|
|
|
: `ws://${window.location.host}/ws`,
|
|
|
|
password: localStorage.password,
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
if (connected === ConnectionStatus.NotConnected) {
|
|
|
|
return <Loading />;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (connected === ConnectionStatus.AuthenticationNeeded) {
|
|
|
|
return <AuthDialog />;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Container>
|
|
|
|
<Sidebar sections={sections} />
|
2021-12-16 16:01:24 +00:00
|
|
|
<PageContent>
|
|
|
|
<Routes>
|
|
|
|
<Route path="/" element={<Dashboard />} />
|
|
|
|
<Route path="/http" element={<ServerSettingsPage />} />
|
|
|
|
<Route path="/backend" element={<BackendIntegrationPage />} />
|
|
|
|
</Routes>
|
|
|
|
</PageContent>
|
2021-12-15 11:12:19 +00:00
|
|
|
<ToastContainer position="bottom-center" autoClose={5000} theme="dark" />
|
2021-12-15 09:28:17 +00:00
|
|
|
</Container>
|
|
|
|
);
|
2021-05-02 12:29:43 +00:00
|
|
|
}
|