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

use children in routes instead of component prop

Browse source
This commit is contained in:
Jakob Schrettenbrunner 2021-01-01 17:21:13 +00:00
parent 5f284dad1d
commit 0f9b3a5722
6 changed files with 80 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
resources/scripts/TransitionRouter.tsx
View file

@ -1,10 +1,9 @@
import React, { useRef } from 'react';
import React from 'react';
import { Route } from 'react-router';
import { SwitchTransition } from 'react-transition-group';
import Fade from '@/components/elements/Fade';
import styled from 'styled-components/macro';
import tw from 'twin.macro';
import v4 from 'uuid/v4';
const StyledSwitchTransition = styled(SwitchTransition)`
${tw`relative`};
@ -15,13 +14,11 @@ const StyledSwitchTransition = styled(SwitchTransition)`
`;
const TransitionRouter: React.FC = ({ children }) => {
const uuid = useRef(v4()).current;
return (
<Route
render={({ location }) => (
<StyledSwitchTransition>
<Fade timeout={150} key={location.key || uuid} in appear unmountOnExit>
<Fade timeout={150} key={location.pathname + location.search} in appear unmountOnExit>
<section>
{children}
</section>

7
resources/scripts/components/server/schedules/ScheduleContainer.tsx
View file

@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import getServerSchedules from '@/api/server/schedules/getServerSchedules';
import { ServerContext } from '@/state/server';
import Spinner from '@/components/elements/Spinner';
import { RouteComponentProps } from 'react-router-dom';
import { useHistory, useRouteMatch } from 'react-router-dom';
import FlashMessageRender from '@/components/FlashMessageRender';
import ScheduleRow from '@/components/server/schedules/ScheduleRow';
import { httpErrorToHuman } from '@/api/http';
@ -14,7 +14,10 @@ import GreyRowBox from '@/components/elements/GreyRowBox';
import Button from '@/components/elements/Button';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
export default ({ match, history }: RouteComponentProps) => {
export default () => {
const match = useRouteMatch();
const history = useHistory();
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { clearFlashes, addError } = useFlash();
const [ loading, setLoading ] = useState(true);

14
resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
View file

@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { useHistory, useLocation, useParams } from 'react-router-dom';
import { Schedule } from '@/api/server/schedules/getServerSchedules';
import getServerSchedule from '@/api/server/schedules/getServerSchedule';
import Spinner from '@/components/elements/Spinner';
@ -45,7 +45,11 @@ const ActivePill = ({ active }: { active: boolean }) => (
</span>
);
export default ({ match, history, location: { state } }: RouteComponentProps<Params, Record<string, unknown>, State>) => {
export default () => {
const params = useParams() as Params;
const history = useHistory();
const state: State = useLocation().state;
const id = ServerContext.useStoreState(state => state.server.data!.id);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
@ -57,20 +61,20 @@ export default ({ match, history, location: { state } }: RouteComponentProps<Par
const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
useEffect(() => {
if (schedule?.id === Number(match.params.id)) {
if (schedule?.id === Number(params.id)) {
setIsLoading(false);
return;
}
clearFlashes('schedules');
getServerSchedule(uuid, Number(match.params.id))
getServerSchedule(uuid, Number(params.id))
.then(schedule => appendSchedule(schedule))
.catch(error => {
console.error(error);
clearAndAddHttpError({ error, key: 'schedules' });
})
.then(() => setIsLoading(false));
}, [ match ]);
}, [ params ]);
const toggleEditModal = useCallback(() => {
setShowEditModal(s => !s);

25
resources/scripts/hoc/RequireServerPermission.tsx Normal file
View file

@ -0,0 +1,25 @@
import React from 'react';
import Can from '@/components/elements/Can';
import ScreenBlock from '@/components/screens/ScreenBlock';
export interface RequireServerPermissionProps {
permissions: string | string[]
}
const RequireServerPermission: React.FC<RequireServerPermissionProps> = ({ children, permissions }) => {
return (
<Can
action={permissions}
renderOnError={
<ScreenBlock
image={'/assets/svgs/server_error.svg'}
title={'Access Denied'}
message={'You do not have permission to access this page.'}
/>
}
>
{children}
</Can>
);
};
export default RequireServerPermission;

31
resources/scripts/hoc/requireServerPermission.tsx
View file

@ -1,31 +0,0 @@
import React from 'react';
import Can from '@/components/elements/Can';
import ScreenBlock from '@/components/screens/ScreenBlock';
import isEqual from 'react-fast-compare';
const requireServerPermission = (Component: React.ComponentType<any>, permissions: string | string[]) => {
return class extends React.Component<any, any> {
shouldComponentUpdate (nextProps: Readonly<any>) {
return !isEqual(nextProps, this.props);
}
render () {
return (
<Can
action={permissions}
renderOnError={
<ScreenBlock
image={'/assets/svgs/server_error.svg'}
title={'Access Denied'}
message={'You do not have permission to access this page.'}
/>
}
>
<Component {...this.props}/>
</Can>
);
}
};
};
export default requireServerPermission;

84
resources/scripts/routers/ServerRouter.tsx
View file

@ -27,10 +27,10 @@ import SubNavigation from '@/components/elements/SubNavigation';
import NetworkContainer from '@/components/server/network/NetworkContainer';
import InstallListener from '@/components/server/InstallListener';
import StartupContainer from '@/components/server/startup/StartupContainer';
import requireServerPermission from '@/hoc/requireServerPermission';
import ErrorBoundary from '@/components/elements/ErrorBoundary';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import RequireServerPermission from '@/hoc/RequireServerPermission';
const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
const rootAdmin = useStoreState(state => state.user.data!.rootAdmin);
@ -142,50 +142,44 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
<TransitionRouter>
<Switch location={location}>
<Route path={`${match.path}`} component={ServerConsole} exact/>
<Route
path={`${match.path}/files`}
component={requireServerPermission(FileManagerContainer, 'file.*')}
exact
/>
<Route
path={`${match.path}/files/:action(edit|new)`}
render={props => (
<SuspenseSpinner>
<FileEditContainer {...props as any}/>
</SuspenseSpinner>
)}
exact
/>
<Route
path={`${match.path}/databases`}
component={requireServerPermission(DatabasesContainer, 'database.*')}
exact
/>
<Route
path={`${match.path}/schedules`}
component={requireServerPermission(ScheduleContainer, 'schedule.*')}
exact
/>
<Route
path={`${match.path}/schedules/:id`}
component={ScheduleEditContainer}
exact
/>
<Route
path={`${match.path}/users`}
component={requireServerPermission(UsersContainer, 'user.*')}
exact
/>
<Route
path={`${match.path}/backups`}
component={requireServerPermission(BackupContainer, 'backup.*')}
exact
/>
<Route
path={`${match.path}/network`}
component={requireServerPermission(NetworkContainer, 'allocation.*')}
exact
/>
<Route path={`${match.path}/files`} exact>
<RequireServerPermission permissions={'file.*'}>
<FileManagerContainer />
</RequireServerPermission>
</Route>
<Route path={`${match.path}/files/:action(edit|new)`} exact>
<SuspenseSpinner>
<FileEditContainer />
</SuspenseSpinner>
</Route>
<Route path={`${match.path}/databases`} exact>
<RequireServerPermission permissions={'database.*'}>
<DatabasesContainer />
</RequireServerPermission>
</Route>
<Route path={`${match.path}/schedules`} exact>
<RequireServerPermission permissions={'schedule.*'}>
<ScheduleContainer />
</RequireServerPermission>
</Route>
<Route path={`${match.path}/schedules/:id`} exact>
<ScheduleEditContainer/>
</Route>
<Route path={`${match.path}/users`} exact>
<RequireServerPermission permissions={'user.*'}>
<UsersContainer />
</RequireServerPermission>
</Route>
<Route path={`${match.path}/backups`} exact>
<RequireServerPermission permissions={'backup.*'}>
<BackupContainer />
</RequireServerPermission>
</Route>
<Route path={`${match.path}/network`} exact>
<RequireServerPermission permissions={'allocation.*'}>
<NetworkContainer />
</RequireServerPermission>
</Route>
<Route path={`${match.path}/startup`} component={StartupContainer} exact/>
<Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
<Route path={'*'} component={NotFound}/>