Skip to content

Commit 0f9b3a5

Browse files
schrejschrej
committed
use children in routes instead of component prop
1 parent 5f284da commit 0f9b3a5

File tree

6 files changed

+80
-88
lines changed

6 files changed

+80
-88
lines changed

‎resources/scripts/TransitionRouter.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import React, { useRef } from 'react';
1+
import React from 'react';
22
import { Route } from 'react-router';
33
import { SwitchTransition } from 'react-transition-group';
44
import Fade from '@/components/elements/Fade';
55
import styled from 'styled-components/macro';
66
import tw from 'twin.macro';
7-
import v4 from 'uuid/v4';
87

98
const StyledSwitchTransition = styled(SwitchTransition)`
109
${tw`relative`};
@@ -15,13 +14,11 @@ const StyledSwitchTransition = styled(SwitchTransition)`
1514
`;
1615

1716
const TransitionRouter: React.FC = ({ children }) => {
18-
const uuid = useRef(v4()).current;
19-
2017
return (
2118
<Route
2219
render={({ location }) => (
2320
<StyledSwitchTransition>
24-
<Fade timeout={150} key={location.key || uuid} in appear unmountOnExit>
21+
<Fade timeout={150} key={location.pathname + location.search} in appear unmountOnExit>
2522
<section>
2623
{children}
2724
</section>

‎resources/scripts/components/server/schedules/ScheduleContainer.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
22
import getServerSchedules from '@/api/server/schedules/getServerSchedules';
33
import { ServerContext } from '@/state/server';
44
import Spinner from '@/components/elements/Spinner';
5-
import { RouteComponentProps } from 'react-router-dom';
5+
import { useHistory, useRouteMatch } from 'react-router-dom';
66
import FlashMessageRender from '@/components/FlashMessageRender';
77
import ScheduleRow from '@/components/server/schedules/ScheduleRow';
88
import { httpErrorToHuman } from '@/api/http';
@@ -14,7 +14,10 @@ import GreyRowBox from '@/components/elements/GreyRowBox';
1414
import Button from '@/components/elements/Button';
1515
import ServerContentBlock from '@/components/elements/ServerContentBlock';
1616

17-
export default ({ match, history }: RouteComponentProps) => {
17+
export default () => {
18+
const match = useRouteMatch();
19+
const history = useHistory();
20+
1821
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
1922
const { clearFlashes, addError } = useFlash();
2023
const [ loading, setLoading ] = useState(true);

‎resources/scripts/components/server/schedules/ScheduleEditContainer.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useCallback, useEffect, useState } from 'react';
2-
import { RouteComponentProps } from 'react-router-dom';
2+
import { useHistory, useLocation, useParams } from 'react-router-dom';
33
import { Schedule } from '@/api/server/schedules/getServerSchedules';
44
import getServerSchedule from '@/api/server/schedules/getServerSchedule';
55
import Spinner from '@/components/elements/Spinner';
@@ -45,7 +45,11 @@ const ActivePill = ({ active }: { active: boolean }) => (
4545
</span>
4646
);
4747

48-
export default ({ match, history, location: { state } }: RouteComponentProps<Params, Record<string, unknown>, State>) => {
48+
export default () => {
49+
const params = useParams() as Params;
50+
const history = useHistory();
51+
const state: State = useLocation().state;
52+
4953
const id = ServerContext.useStoreState(state => state.server.data!.id);
5054
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
5155

@@ -57,20 +61,20 @@ export default ({ match, history, location: { state } }: RouteComponentProps<Par
5761
const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
5862

5963
useEffect(() => {
60-
if (schedule?.id === Number(match.params.id)) {
64+
if (schedule?.id === Number(params.id)) {
6165
setIsLoading(false);
6266
return;
6367
}
6468

6569
clearFlashes('schedules');
66-
getServerSchedule(uuid, Number(match.params.id))
70+
getServerSchedule(uuid, Number(params.id))
6771
.then(schedule => appendSchedule(schedule))
6872
.catch(error => {
6973
console.error(error);
7074
clearAndAddHttpError({ error, key: 'schedules' });
7175
})
7276
.then(() => setIsLoading(false));
73-
}, [ match ]);
77+
}, [ params ]);
7478

7579
const toggleEditModal = useCallback(() => {
7680
setShowEditModal(s => !s);

‎resources/scripts/hoc/RequireServerPermission.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import Can from '@/components/elements/Can';
3+
import ScreenBlock from '@/components/screens/ScreenBlock';
4+
export interface RequireServerPermissionProps {
5+
permissions: string | string[]
6+
}
7+
8+
const RequireServerPermission: React.FC<RequireServerPermissionProps> = ({ children, permissions }) => {
9+
return (
10+
<Can
11+
action={permissions}
12+
renderOnError={
13+
<ScreenBlock
14+
image={'/assets/svgs/server_error.svg'}
15+
title={'Access Denied'}
16+
message={'You do not have permission to access this page.'}
17+
/>
18+
}
19+
>
20+
{children}
21+
</Can>
22+
);
23+
};
24+
25+
export default RequireServerPermission;

‎resources/scripts/hoc/requireServerPermission.tsx‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎resources/scripts/routers/ServerRouter.tsx‎

Lines changed: 39 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ import SubNavigation from '@/components/elements/SubNavigation';
2727
import NetworkContainer from '@/components/server/network/NetworkContainer';
2828
import InstallListener from '@/components/server/InstallListener';
2929
import StartupContainer from '@/components/server/startup/StartupContainer';
30-
import requireServerPermission from '@/hoc/requireServerPermission';
3130
import ErrorBoundary from '@/components/elements/ErrorBoundary';
3231
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3332
import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
33+
import RequireServerPermission from '@/hoc/RequireServerPermission';
3434

3535
const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
3636
const rootAdmin = useStoreState(state => state.user.data!.rootAdmin);
@@ -142,50 +142,44 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
142142
<TransitionRouter>
143143
<Switch location={location}>
144144
<Route path={`${match.path}`} component={ServerConsole} exact/>
145-
<Route
146-
path={`${match.path}/files`}
147-
component={requireServerPermission(FileManagerContainer, 'file.*')}
148-
exact
149-
/>
150-
<Route
151-
path={`${match.path}/files/:action(edit|new)`}
152-
render={props => (
153-
<SuspenseSpinner>
154-
<FileEditContainer {...props as any}/>
155-
</SuspenseSpinner>
156-
)}
157-
exact
158-
/>
159-
<Route
160-
path={`${match.path}/databases`}
161-
component={requireServerPermission(DatabasesContainer, 'database.*')}
162-
exact
163-
/>
164-
<Route
165-
path={`${match.path}/schedules`}
166-
component={requireServerPermission(ScheduleContainer, 'schedule.*')}
167-
exact
168-
/>
169-
<Route
170-
path={`${match.path}/schedules/:id`}
171-
component={ScheduleEditContainer}
172-
exact
173-
/>
174-
<Route
175-
path={`${match.path}/users`}
176-
component={requireServerPermission(UsersContainer, 'user.*')}
177-
exact
178-
/>
179-
<Route
180-
path={`${match.path}/backups`}
181-
component={requireServerPermission(BackupContainer, 'backup.*')}
182-
exact
183-
/>
184-
<Route
185-
path={`${match.path}/network`}
186-
component={requireServerPermission(NetworkContainer, 'allocation.*')}
187-
exact
188-
/>
145+
<Route path={`${match.path}/files`} exact>
146+
<RequireServerPermission permissions={'file.*'}>
147+
<FileManagerContainer />
148+
</RequireServerPermission>
149+
</Route>
150+
<Route path={`${match.path}/files/:action(edit|new)`} exact>
151+
<SuspenseSpinner>
152+
<FileEditContainer />
153+
</SuspenseSpinner>
154+
</Route>
155+
<Route path={`${match.path}/databases`} exact>
156+
<RequireServerPermission permissions={'database.*'}>
157+
<DatabasesContainer />
158+
</RequireServerPermission>
159+
</Route>
160+
<Route path={`${match.path}/schedules`} exact>
161+
<RequireServerPermission permissions={'schedule.*'}>
162+
<ScheduleContainer />
163+
</RequireServerPermission>
164+
</Route>
165+
<Route path={`${match.path}/schedules/:id`} exact>
166+
<ScheduleEditContainer/>
167+
</Route>
168+
<Route path={`${match.path}/users`} exact>
169+
<RequireServerPermission permissions={'user.*'}>
170+
<UsersContainer />
171+
</RequireServerPermission>
172+
</Route>
173+
<Route path={`${match.path}/backups`} exact>
174+
<RequireServerPermission permissions={'backup.*'}>
175+
<BackupContainer />
176+
</RequireServerPermission>
177+
</Route>
178+
<Route path={`${match.path}/network`} exact>
179+
<RequireServerPermission permissions={'allocation.*'}>
180+
<NetworkContainer />
181+
</RequireServerPermission>
182+
</Route>
189183
<Route path={`${match.path}/startup`} component={StartupContainer} exact/>
190184
<Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
191185
<Route path={'*'} component={NotFound}/>

0 commit comments

Comments
 (0)