misc_pterodactyl-panel/resources/scripts/components/App.tsx
2021-02-07 16:16:22 -07:00

108 lines
3.8 KiB
TypeScript

import React, { lazy, useEffect, Suspense } from 'react';
import ReactGA from 'react-ga';
import { hot } from 'react-hot-loader/root';
import { Route, Router, Switch, useLocation } from 'react-router-dom';
import { StoreProvider } from 'easy-peasy';
import { store } from '@/state';
import DashboardRouter from '@/routers/DashboardRouter';
import ServerRouter from '@/routers/ServerRouter';
import AuthenticationRouter from '@/routers/AuthenticationRouter';
import { SiteSettings } from '@/state/settings';
import ProgressBar from '@/components/elements/ProgressBar';
import { NotFound } from '@/components/elements/ScreenBlock';
import tw from 'twin.macro';
import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
import { history } from '@/components/history';
import { setupInterceptors } from '@/api/interceptors';
import TailwindGlobalStyles from '@/components/GlobalStyles';
const ChunkedAdminRouter = lazy(() => import(/* webpackChunkName: "admin" */'@/routers/AdminRouter'));
interface ExtendedWindow extends Window {
SiteConfiguration?: SiteSettings;
PterodactylUser?: {
uuid: string;
username: string;
email: string;
/* eslint-disable camelcase */
name_first: string;
name_last: string;
root_admin: boolean;
use_totp: boolean;
language: string;
avatar_url: string;
role_name: string;
updated_at: string;
created_at: string;
/* eslint-enable camelcase */
};
}
setupInterceptors(history);
const Pageview = () => {
const { pathname } = useLocation();
useEffect(() => {
ReactGA.pageview(pathname);
}, [ pathname ]);
return null;
};
const App = () => {
const { PterodactylUser, SiteConfiguration } = (window as ExtendedWindow);
if (PterodactylUser && !store.getState().user.data) {
store.getActions().user.setUserData({
uuid: PterodactylUser.uuid,
username: PterodactylUser.username,
email: PterodactylUser.email,
firstName: PterodactylUser.name_first,
lastName: PterodactylUser.name_last,
language: PterodactylUser.language,
rootAdmin: PterodactylUser.root_admin,
useTotp: PterodactylUser.use_totp,
avatarURL: PterodactylUser.avatar_url,
roleName: PterodactylUser.role_name,
createdAt: new Date(PterodactylUser.created_at),
updatedAt: new Date(PterodactylUser.updated_at),
});
}
if (!store.getState().settings.data) {
store.getActions().settings.setSettings(SiteConfiguration!);
}
useEffect(() => {
if (SiteConfiguration?.analytics) {
ReactGA.initialize(SiteConfiguration!.analytics);
}
}, []);
return (
<>
<GlobalStylesheet/>
<TailwindGlobalStyles/>
<StoreProvider store={store}>
<ProgressBar/>
<div css={tw`mx-auto w-auto`}>
<Router history={history}>
<Suspense fallback={<div>Loading...</div>}>
{SiteConfiguration?.analytics && <Pageview/>}
<Switch>
<Route path="/server/:id" component={ServerRouter}/>
<Route path="/auth" component={AuthenticationRouter}/>
<Route path="/admin" component={ChunkedAdminRouter}/>
<Route path="/" component={DashboardRouter}/>
<Route path={'*'} component={NotFound}/>
</Switch>
</Suspense>
</Router>
</div>
</StoreProvider>
</>
);
};
export default hot(App);