React 18 and Vite (#4510)
This commit is contained in:
Matthew Penner
GitHub
parent
1bb1b13f6d
commit
21613fa602
244 changed files with 4547 additions and 8933 deletions
|
|
@ -1,29 +1,23 @@
|
|||
import React from 'react';
|
||||
import { Route, Switch, useRouteMatch } from 'react-router-dom';
|
||||
import { Route, Routes, useNavigate } from 'react-router-dom';
|
||||
|
||||
import LoginContainer from '@/components/auth/LoginContainer';
|
||||
import ForgotPasswordContainer from '@/components/auth/ForgotPasswordContainer';
|
||||
import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer';
|
||||
import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer';
|
||||
import { NotFound } from '@/components/elements/ScreenBlock';
|
||||
import { useHistory, useLocation } from 'react-router';
|
||||
|
||||
export default () => {
|
||||
const history = useHistory();
|
||||
const location = useLocation();
|
||||
const { path } = useRouteMatch();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className={'pt-8 xl:pt-32'}>
|
||||
<Switch location={location}>
|
||||
<Route path={`${path}/login`} component={LoginContainer} exact />
|
||||
<Route path={`${path}/login/checkpoint`} component={LoginCheckpointContainer} />
|
||||
<Route path={`${path}/password`} component={ForgotPasswordContainer} exact />
|
||||
<Route path={`${path}/password/reset/:token`} component={ResetPasswordContainer} />
|
||||
<Route path={`${path}/checkpoint`} />
|
||||
<Route path={'*'}>
|
||||
<NotFound onBack={() => history.push('/auth/login')} />
|
||||
</Route>
|
||||
</Switch>
|
||||
<div className="pt-8 xl:pt-32">
|
||||
<Routes>
|
||||
<Route path="login" element={<LoginContainer />} />
|
||||
<Route path="login/checkpoint/*" element={<LoginCheckpointContainer />} />
|
||||
<Route path="password" element={<ForgotPasswordContainer />} />
|
||||
<Route path="password/reset/:token" element={<ResetPasswordContainer />} />
|
||||
<Route path="*" element={<NotFound onBack={() => navigate('/auth/login')} />} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,50 +1,47 @@
|
|||
import React from 'react';
|
||||
import { NavLink, Route, Switch } from 'react-router-dom';
|
||||
import { Suspense } from 'react';
|
||||
import { NavLink, Route, Routes, useLocation } from 'react-router-dom';
|
||||
|
||||
import NavigationBar from '@/components/NavigationBar';
|
||||
import DashboardContainer from '@/components/dashboard/DashboardContainer';
|
||||
import { NotFound } from '@/components/elements/ScreenBlock';
|
||||
import TransitionRouter from '@/TransitionRouter';
|
||||
import SubNavigation from '@/components/elements/SubNavigation';
|
||||
import { useLocation } from 'react-router';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import SubNavigation from '@/components/elements/SubNavigation';
|
||||
import routes from '@/routers/routes';
|
||||
|
||||
export default () => {
|
||||
function DashboardRouter() {
|
||||
const location = useLocation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavigationBar />
|
||||
|
||||
{location.pathname.startsWith('/account') && (
|
||||
<SubNavigation>
|
||||
<div>
|
||||
{routes.account
|
||||
.filter((route) => !!route.name)
|
||||
.map(({ path, name, exact = false }) => (
|
||||
<NavLink key={path} to={`/account/${path}`.replace('//', '/')} exact={exact}>
|
||||
.filter(route => route.path !== undefined)
|
||||
.map(({ path, name, end = false }) => (
|
||||
<NavLink key={path} to={`/account/${path ?? ''}`.replace('//', '/')} end={end}>
|
||||
{name}
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
</SubNavigation>
|
||||
)}
|
||||
<TransitionRouter>
|
||||
<React.Suspense fallback={<Spinner centered />}>
|
||||
<Switch location={location}>
|
||||
<Route path={'/'} exact>
|
||||
<DashboardContainer />
|
||||
</Route>
|
||||
{routes.account.map(({ path, component: Component }) => (
|
||||
<Route key={path} path={`/account/${path}`.replace('//', '/')} exact>
|
||||
<Component />
|
||||
</Route>
|
||||
))}
|
||||
<Route path={'*'}>
|
||||
<NotFound />
|
||||
</Route>
|
||||
</Switch>
|
||||
</React.Suspense>
|
||||
</TransitionRouter>
|
||||
|
||||
<Suspense fallback={<Spinner centered />}>
|
||||
<Routes>
|
||||
<Route path="" element={<DashboardContainer />} />
|
||||
|
||||
{routes.account.map(({ route, component: Component }) => (
|
||||
<Route key={route} path={`/account/${route}`.replace('//', '/')} element={<Component />} />
|
||||
))}
|
||||
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default DashboardRouter;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
import TransferListener from '@/components/server/TransferListener';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { NavLink, Route, Switch, useRouteMatch } from 'react-router-dom';
|
||||
import { Fragment, useEffect, useState } from 'react';
|
||||
import { NavLink, Route, Routes, useParams } from 'react-router-dom';
|
||||
import NavigationBar from '@/components/NavigationBar';
|
||||
import TransitionRouter from '@/TransitionRouter';
|
||||
import WebsocketHandler from '@/components/server/WebsocketHandler';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import Can from '@/components/elements/Can';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import { NotFound, ServerError } from '@/components/elements/ScreenBlock';
|
||||
|
|
@ -21,38 +19,35 @@ import ConflictStateRenderer from '@/components/server/ConflictStateRenderer';
|
|||
import PermissionRoute from '@/components/elements/PermissionRoute';
|
||||
import routes from '@/routers/routes';
|
||||
|
||||
export default () => {
|
||||
const match = useRouteMatch<{ id: string }>();
|
||||
function ServerRouter() {
|
||||
const params = useParams<'id'>();
|
||||
const location = useLocation();
|
||||
|
||||
const rootAdmin = useStoreState((state) => state.user.data!.rootAdmin);
|
||||
const rootAdmin = useStoreState(state => state.user.data!.rootAdmin);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const id = ServerContext.useStoreState((state) => state.server.data?.id);
|
||||
const uuid = ServerContext.useStoreState((state) => state.server.data?.uuid);
|
||||
const inConflictState = ServerContext.useStoreState((state) => state.server.inConflictState);
|
||||
const serverId = ServerContext.useStoreState((state) => state.server.data?.internalId);
|
||||
const getServer = ServerContext.useStoreActions((actions) => actions.server.getServer);
|
||||
const clearServerState = ServerContext.useStoreActions((actions) => actions.clearServerState);
|
||||
|
||||
const to = (value: string, url = false) => {
|
||||
if (value === '/') {
|
||||
return url ? match.url : match.path;
|
||||
}
|
||||
return `${(url ? match.url : match.path).replace(/\/*$/, '')}/${value.replace(/^\/+/, '')}`;
|
||||
};
|
||||
const id = ServerContext.useStoreState(state => state.server.data?.id);
|
||||
const uuid = ServerContext.useStoreState(state => state.server.data?.uuid);
|
||||
const inConflictState = ServerContext.useStoreState(state => state.server.inConflictState);
|
||||
const serverId = ServerContext.useStoreState(state => state.server.data?.internalId);
|
||||
const getServer = ServerContext.useStoreActions(actions => actions.server.getServer);
|
||||
const clearServerState = ServerContext.useStoreActions(actions => actions.clearServerState);
|
||||
|
||||
useEffect(
|
||||
() => () => {
|
||||
clearServerState();
|
||||
},
|
||||
[]
|
||||
[],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setError('');
|
||||
|
||||
getServer(match.params.id).catch((error) => {
|
||||
if (params.id === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
getServer(params.id).catch(error => {
|
||||
console.error(error);
|
||||
setError(httpErrorToHuman(error));
|
||||
});
|
||||
|
|
@ -60,10 +55,10 @@ export default () => {
|
|||
return () => {
|
||||
clearServerState();
|
||||
};
|
||||
}, [match.params.id]);
|
||||
}, [params.id]);
|
||||
|
||||
return (
|
||||
<React.Fragment key={'server-router'}>
|
||||
<Fragment key={'server-router'}>
|
||||
<NavigationBar />
|
||||
{!uuid || !id ? (
|
||||
error ? (
|
||||
|
|
@ -73,56 +68,61 @@ export default () => {
|
|||
)
|
||||
) : (
|
||||
<>
|
||||
<CSSTransition timeout={150} classNames={'fade'} appear in>
|
||||
<SubNavigation>
|
||||
<div>
|
||||
{routes.server
|
||||
.filter((route) => !!route.name)
|
||||
.map((route) =>
|
||||
route.permission ? (
|
||||
<Can key={route.path} action={route.permission} matchAny>
|
||||
<NavLink to={to(route.path, true)} exact={route.exact}>
|
||||
{route.name}
|
||||
</NavLink>
|
||||
</Can>
|
||||
) : (
|
||||
<NavLink key={route.path} to={to(route.path, true)} exact={route.exact}>
|
||||
<SubNavigation>
|
||||
<div>
|
||||
{routes.server
|
||||
.filter(route => route.path !== undefined)
|
||||
.map(route =>
|
||||
route.permission ? (
|
||||
<Can key={route.path} action={route.permission} matchAny>
|
||||
<NavLink to={`/server/${id}/${route.path ?? ''}`} end>
|
||||
{route.name}
|
||||
</NavLink>
|
||||
)
|
||||
)}
|
||||
{rootAdmin && (
|
||||
// eslint-disable-next-line react/jsx-no-target-blank
|
||||
<a href={`/admin/servers/view/${serverId}`} target={'_blank'}>
|
||||
<FontAwesomeIcon icon={faExternalLinkAlt} />
|
||||
</a>
|
||||
</Can>
|
||||
) : (
|
||||
<NavLink key={route.path} to={`/server/${id}/${route.path ?? ''}`} end>
|
||||
{route.name}
|
||||
</NavLink>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</SubNavigation>
|
||||
</CSSTransition>
|
||||
{rootAdmin && (
|
||||
// eslint-disable-next-line react/jsx-no-target-blank
|
||||
<a href={`/admin/servers/view/${serverId}`} target="_blank">
|
||||
<FontAwesomeIcon icon={faExternalLinkAlt} />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</SubNavigation>
|
||||
<InstallListener />
|
||||
<TransferListener />
|
||||
<WebsocketHandler />
|
||||
{inConflictState && (!rootAdmin || (rootAdmin && !location.pathname.endsWith(`/server/${id}`))) ? (
|
||||
{inConflictState && (!rootAdmin || (rootAdmin && !location.pathname.endsWith(`/server/${id}/`))) ? (
|
||||
<ConflictStateRenderer />
|
||||
) : (
|
||||
<ErrorBoundary>
|
||||
<TransitionRouter>
|
||||
<Switch location={location}>
|
||||
{routes.server.map(({ path, permission, component: Component }) => (
|
||||
<PermissionRoute key={path} permission={permission} path={to(path)} exact>
|
||||
<Spinner.Suspense>
|
||||
<Component />
|
||||
</Spinner.Suspense>
|
||||
</PermissionRoute>
|
||||
))}
|
||||
<Route path={'*'} component={NotFound} />
|
||||
</Switch>
|
||||
</TransitionRouter>
|
||||
<Routes location={location}>
|
||||
{routes.server.map(({ route, permission, component: Component }) => (
|
||||
<Route
|
||||
key={route}
|
||||
path={route}
|
||||
element={
|
||||
<PermissionRoute permission={permission}>
|
||||
<Spinner.Suspense>
|
||||
<Component />
|
||||
</Spinner.Suspense>
|
||||
</PermissionRoute>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
</ErrorBoundary>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</React.Fragment>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default ServerRouter;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import React, { lazy } from 'react';
|
||||
import type { ComponentType } from 'react';
|
||||
import { lazy } from 'react';
|
||||
|
||||
import ServerConsole from '@/components/server/console/ServerConsoleContainer';
|
||||
import DatabasesContainer from '@/components/server/databases/DatabasesContainer';
|
||||
import ScheduleContainer from '@/components/server/schedules/ScheduleContainer';
|
||||
|
|
@ -15,7 +17,7 @@ import ActivityLogContainer from '@/components/dashboard/activity/ActivityLogCon
|
|||
import ServerActivityLogContainer from '@/components/server/ServerActivityLogContainer';
|
||||
|
||||
// Each of the router files is already code split out appropriately — so
|
||||
// all of the items above will only be loaded in when that router is loaded.
|
||||
// all the items above will only be loaded in when that router is loaded.
|
||||
//
|
||||
// These specific lazy loaded routes are to avoid loading in heavy screens
|
||||
// for the server dashboard when they're only needed for specific instances.
|
||||
|
|
@ -23,119 +25,147 @@ const FileEditContainer = lazy(() => import('@/components/server/files/FileEditC
|
|||
const ScheduleEditContainer = lazy(() => import('@/components/server/schedules/ScheduleEditContainer'));
|
||||
|
||||
interface RouteDefinition {
|
||||
path: string;
|
||||
/**
|
||||
* Route is the path that will be matched against, this field supports wildcards.
|
||||
*/
|
||||
route: string;
|
||||
/**
|
||||
* Path is the path that will be used for any navbars or links, do not use wildcards or fancy
|
||||
* matchers here. If this field is left undefined, this route will not have a navigation element,
|
||||
*/
|
||||
path?: string;
|
||||
// If undefined is passed this route is still rendered into the router itself
|
||||
// but no navigation link is displayed in the sub-navigation menu.
|
||||
name: string | undefined;
|
||||
component: React.ComponentType;
|
||||
exact?: boolean;
|
||||
component: ComponentType;
|
||||
end?: boolean;
|
||||
}
|
||||
|
||||
interface ServerRouteDefinition extends RouteDefinition {
|
||||
permission: string | string[] | null;
|
||||
permission?: string | string[];
|
||||
}
|
||||
|
||||
interface Routes {
|
||||
// All of the routes available under "/account"
|
||||
// All the routes available under "/account"
|
||||
account: RouteDefinition[];
|
||||
// All of the routes available under "/server/:id"
|
||||
// All the routes available under "/server/:id"
|
||||
server: ServerRouteDefinition[];
|
||||
}
|
||||
|
||||
export default {
|
||||
account: [
|
||||
{
|
||||
path: '/',
|
||||
route: '',
|
||||
path: '',
|
||||
name: 'Account',
|
||||
component: AccountOverviewContainer,
|
||||
exact: true,
|
||||
end: true,
|
||||
},
|
||||
{
|
||||
path: '/api',
|
||||
route: 'api',
|
||||
path: 'api',
|
||||
name: 'API Credentials',
|
||||
component: AccountApiContainer,
|
||||
},
|
||||
{
|
||||
path: '/ssh',
|
||||
route: 'ssh',
|
||||
path: 'ssh',
|
||||
name: 'SSH Keys',
|
||||
component: AccountSSHContainer,
|
||||
},
|
||||
{
|
||||
path: '/activity',
|
||||
route: 'activity',
|
||||
path: 'activity',
|
||||
name: 'Activity',
|
||||
component: ActivityLogContainer,
|
||||
},
|
||||
],
|
||||
server: [
|
||||
{
|
||||
path: '/',
|
||||
route: '',
|
||||
path: '',
|
||||
permission: null,
|
||||
name: 'Console',
|
||||
component: ServerConsole,
|
||||
exact: true,
|
||||
end: true,
|
||||
},
|
||||
{
|
||||
path: '/files',
|
||||
route: 'files/*',
|
||||
path: 'files',
|
||||
permission: 'file.*',
|
||||
name: 'Files',
|
||||
component: FileManagerContainer,
|
||||
},
|
||||
{
|
||||
path: '/files/:action(edit|new)',
|
||||
route: 'files/edit/*',
|
||||
permission: 'file.*',
|
||||
name: undefined,
|
||||
component: FileEditContainer,
|
||||
},
|
||||
{
|
||||
path: '/databases',
|
||||
route: 'files/new/*',
|
||||
permission: 'file.*',
|
||||
name: undefined,
|
||||
component: FileEditContainer,
|
||||
},
|
||||
{
|
||||
route: 'databases/*',
|
||||
path: 'databases',
|
||||
permission: 'database.*',
|
||||
name: 'Databases',
|
||||
component: DatabasesContainer,
|
||||
},
|
||||
{
|
||||
path: '/schedules',
|
||||
route: 'schedules/*',
|
||||
path: 'schedules',
|
||||
permission: 'schedule.*',
|
||||
name: 'Schedules',
|
||||
component: ScheduleContainer,
|
||||
},
|
||||
{
|
||||
path: '/schedules/:id',
|
||||
route: 'schedules/:id/*',
|
||||
permission: 'schedule.*',
|
||||
name: undefined,
|
||||
component: ScheduleEditContainer,
|
||||
},
|
||||
{
|
||||
path: '/users',
|
||||
route: 'users/*',
|
||||
path: 'users',
|
||||
permission: 'user.*',
|
||||
name: 'Users',
|
||||
component: UsersContainer,
|
||||
},
|
||||
{
|
||||
path: '/backups',
|
||||
route: 'backups/*',
|
||||
path: 'backups',
|
||||
permission: 'backup.*',
|
||||
name: 'Backups',
|
||||
component: BackupContainer,
|
||||
},
|
||||
{
|
||||
path: '/network',
|
||||
route: 'network/*',
|
||||
path: 'network',
|
||||
permission: 'allocation.*',
|
||||
name: 'Network',
|
||||
component: NetworkContainer,
|
||||
},
|
||||
{
|
||||
path: '/startup',
|
||||
route: 'startup/*',
|
||||
path: 'startup',
|
||||
permission: 'startup.*',
|
||||
name: 'Startup',
|
||||
component: StartupContainer,
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
route: 'settings/*',
|
||||
path: 'settings',
|
||||
permission: ['settings.*', 'file.sftp'],
|
||||
name: 'Settings',
|
||||
component: SettingsContainer,
|
||||
},
|
||||
{
|
||||
path: '/activity',
|
||||
route: 'activity/*',
|
||||
path: 'activity',
|
||||
permission: 'activity.*',
|
||||
name: 'Activity',
|
||||
component: ServerActivityLogContainer,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue