108 lines
3.8 KiB
TypeScript
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);
|