Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Chunk out the different routers and clean up feature logic

Browse source
This commit is contained in:
DaneEveritt 2022-06-12 11:56:00 -04:00
parent 04e97cc67e
commit 7197d28815
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 54 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
resources/scripts/components/App.tsx
View file

@ -1,11 +1,8 @@
import React from 'react';
import React, { lazy } from 'react';
import { hot } from 'react-hot-loader/root';
import { Route, Router, Switch } 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';
@ -16,6 +13,11 @@ import { setupInterceptors } from '@/api/interceptors';
import AuthenticatedRoute from '@/components/elements/AuthenticatedRoute';
import { ServerContext } from '@/state/server';
import '@/assets/tailwind.css';
import Spinner from '@/components/elements/Spinner';
const DashboardRouter = lazy(() => import(/* webpackChunkName: "dash" */'@/routers/DashboardRouter'));
const ServerRouter = lazy(() => import('@/routers/ServerRouter'));
const AuthenticationRouter = lazy(() => import('@/routers/AuthenticationRouter'));
interface ExtendedWindow extends Window {
SiteConfiguration?: SiteSettings;
@ -63,15 +65,21 @@ const App = () => {
<Router history={history}>
<Switch>
<Route path={'/auth'}>
<AuthenticationRouter/>
<Spinner.Suspense>
<AuthenticationRouter/>
</Spinner.Suspense>
</Route>
<AuthenticatedRoute path={'/server/:id'}>
<ServerContext.Provider>
<ServerRouter/>
</ServerContext.Provider>
<Spinner.Suspense>
<ServerContext.Provider>
<ServerRouter/>
</ServerContext.Provider>
</Spinner.Suspense>
</AuthenticatedRoute>
<AuthenticatedRoute path={'/'}>
<DashboardRouter/>
<Spinner.Suspense>
<DashboardRouter/>
</Spinner.Suspense>
</AuthenticatedRoute>
<Route path={'*'}>
<NotFound/>

21
resources/scripts/components/server/ServerConsole.tsx
View file

@ -1,4 +1,4 @@
import React, { lazy, memo } from 'react';
import React, { memo } from 'react';
import { ServerContext } from '@/state/server';
import Can from '@/components/elements/Can';
import ContentContainer from '@/components/elements/ContentContainer';
@ -7,15 +7,14 @@ import ServerContentBlock from '@/components/elements/ServerContentBlock';
import ServerDetailsBlock from '@/components/server/ServerDetailsBlock';
import isEqual from 'react-fast-compare';
import PowerControls from '@/components/server/PowerControls';
import { EulaModalFeature, JavaVersionModalFeature, GSLTokenModalFeature, PIDLimitModalFeature, SteamDiskSpaceFeature } from '@feature/index';
import ErrorBoundary from '@/components/elements/ErrorBoundary';
import Spinner from '@/components/elements/Spinner';
import Features from '@feature/Features';
import Console from '@/components/server/Console';
import StatGraphs from '@/components/server/StatGraphs';
export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
const ChunkedConsole = lazy(() => import(/* webpackChunkName: "console" */'@/components/server/Console'));
const ChunkedStatGraphs = lazy(() => import(/* webpackChunkName: "graphs" */'@/components/server/StatGraphs'));
const ServerConsole = () => {
const isInstalling = ServerContext.useStoreState(state => state.server.data!.isInstalling);
const isTransferring = ServerContext.useStoreState(state => state.server.data!.isTransferring);
@ -53,17 +52,11 @@ const ServerConsole = () => {
<div css={tw`w-full lg:w-3/4 mt-4 lg:mt-0 lg:pl-4`}>
<Spinner.Suspense>
<ErrorBoundary>
<ChunkedConsole/>
<Console/>
</ErrorBoundary>
<ChunkedStatGraphs/>
<StatGraphs/>
</Spinner.Suspense>
<React.Suspense fallback={null}>
{eggFeatures.includes('eula') && <EulaModalFeature/>}
{eggFeatures.includes('java_version') && <JavaVersionModalFeature/>}
{eggFeatures.includes('gsl_token') && <GSLTokenModalFeature/>}
{eggFeatures.includes('pid_limit') && <PIDLimitModalFeature/>}
{eggFeatures.includes('steam_disk_space') && <SteamDiskSpaceFeature/>}
</React.Suspense>
<Features enabled={eggFeatures} />
</div>
</ServerContentBlock>
);

19
resources/scripts/components/server/features/Features.tsx Normal file
View file

@ -0,0 +1,19 @@
import React, { useMemo } from 'react';
import features from './index';
import { getObjectKeys } from '@/helpers';
type ListItems = [ string, React.ComponentType ][];
export default ({ enabled }: { enabled: string[] }) => {
const mapped: ListItems = useMemo(() => {
return getObjectKeys(features)
.filter(key => enabled.map((v) => v.toLowerCase()).includes(key.toLowerCase()))
.reduce((arr, key) => [ ...arr, [ key, features[key] ] ], [] as ListItems);
}, [ enabled ]);
return (
<React.Suspense fallback={null}>
{mapped.map(([ key, Component ]) => <Component key={key}/>)}
</React.Suspense>
);
};

16
resources/scripts/components/server/features/index.ts
View file

@ -1,4 +1,4 @@
import { lazy } from 'react';
import { ComponentType, lazy } from 'react';
/**
* Custom features should be registered here as lazy components so that they do
@ -6,10 +6,12 @@ import { lazy } from 'react';
* whenever they are actually loaded for the client (which may be never, depending
* on the feature and the egg).
*/
const EulaModalFeature = lazy(() => import(/* webpackChunkName: "feature.eula" */'@feature/eula/EulaModalFeature'));
const JavaVersionModalFeature = lazy(() => import(/* webpackChunkName: "feature.java_version" */'@feature/JavaVersionModalFeature'));
const GSLTokenModalFeature = lazy(() => import(/* webpackChunkName: "feature.gsl_token" */'@feature/GSLTokenModalFeature'));
const PIDLimitModalFeature = lazy(() => import(/* webpackChunkName: "feature.pid_limit" */'@feature/PIDLimitModalFeature'));
const SteamDiskSpaceFeature = lazy(() => import(/* webpackChunkName: "feature.steam_disk_space" */'@feature/SteamDiskSpaceFeature'));
const features: Record<string, ComponentType> = {
eula: lazy(() => import('@feature/eula/EulaModalFeature')),
java_version: lazy(() => import('@feature/JavaVersionModalFeature')),
gsl_token: lazy(() => import('@feature/GSLTokenModalFeature')),
pid_limit: lazy(() => import('@feature/PIDLimitModalFeature')),
steam_disk_space: lazy(() => import('@feature/SteamDiskSpaceFeature')),
};
export { EulaModalFeature, JavaVersionModalFeature, GSLTokenModalFeature, PIDLimitModalFeature, SteamDiskSpaceFeature };
export default features;

4
resources/scripts/routers/routes.ts
View file

@ -6,11 +6,11 @@ import UsersContainer from '@/components/server/users/UsersContainer';
import BackupContainer from '@/components/server/backups/BackupContainer';
import NetworkContainer from '@/components/server/network/NetworkContainer';
import StartupContainer from '@/components/server/startup/StartupContainer';
import FileManagerContainer from '@/components/server/files/FileManagerContainer';
import SettingsContainer from '@/components/server/settings/SettingsContainer';
const FileManagerContainer = lazy(() => import('@/components/server/files/FileManagerContainer'));
const FileEditContainer = lazy(() => import('@/components/server/files/FileEditContainer'));
const ScheduleEditContainer = lazy(() => import('@/components/server/schedules/ScheduleEditContainer'));
const SettingsContainer = lazy(() => import('@/components/server/settings/SettingsContainer'));
interface ServerRouteDefinition {
path: string;