use children in routes instead of component prop

resources/scripts/TransitionRouter.tsx

@@ -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>

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

@@ -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);

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

@@ -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);

resources/scripts/hoc/RequireServerPermission.tsx

@@ -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;

resources/scripts/hoc/requireServerPermission.tsx

@@ -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;

resources/scripts/routers/ServerRouter.tsx

@@ -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
+                                    <Route path={`${match.path}/files`} exact>
-                                        path={`${match.path}/files`}
+                                        <RequireServerPermission permissions={'file.*'}>
-                                        component={requireServerPermission(FileManagerContainer, 'file.*')}
+                                            <FileManagerContainer />
-                                        exact
+                                        </RequireServerPermission>
-                                    />
+                                    </Route>
-                                    <Route
+                                    <Route path={`${match.path}/files/:action(edit|new)`} exact>
-                                        path={`${match.path}/files/:action(edit|new)`}
-                                        render={props => (
                                         <SuspenseSpinner>
-                                                <FileEditContainer {...props as any}/>
+                                            <FileEditContainer />
                                         </SuspenseSpinner>
-                                        )}
+                                    </Route>
-                                        exact
+                                    <Route path={`${match.path}/databases`} exact>
-                                    />
+                                        <RequireServerPermission permissions={'database.*'}>
-                                    <Route
+                                            <DatabasesContainer />
-                                        path={`${match.path}/databases`}
+                                        </RequireServerPermission>
-                                        component={requireServerPermission(DatabasesContainer, 'database.*')}
+                                    </Route>
-                                        exact
+                                    <Route path={`${match.path}/schedules`} exact>
-                                    />
+                                        <RequireServerPermission permissions={'schedule.*'}>
-                                    <Route
+                                            <ScheduleContainer />
-                                        path={`${match.path}/schedules`}
+                                        </RequireServerPermission>
-                                        component={requireServerPermission(ScheduleContainer, 'schedule.*')}
+                                    </Route>
-                                        exact
+                                    <Route path={`${match.path}/schedules/:id`} exact>
-                                    />
+                                        <ScheduleEditContainer/>
-                                    <Route
+                                    </Route>
-                                        path={`${match.path}/schedules/:id`}
+                                    <Route path={`${match.path}/users`} exact>
-                                        component={ScheduleEditContainer}
+                                        <RequireServerPermission permissions={'user.*'}>
-                                        exact
+                                            <UsersContainer />
-                                    />
+                                        </RequireServerPermission>
-                                    <Route
+                                    </Route>
-                                        path={`${match.path}/users`}
+                                    <Route path={`${match.path}/backups`} exact>
-                                        component={requireServerPermission(UsersContainer, 'user.*')}
+                                        <RequireServerPermission permissions={'backup.*'}>
-                                        exact
+                                            <BackupContainer />
-                                    />
+                                        </RequireServerPermission>
-                                    <Route
+                                    </Route>
-                                        path={`${match.path}/backups`}
+                                    <Route path={`${match.path}/network`} exact>
-                                        component={requireServerPermission(BackupContainer, 'backup.*')}
+                                        <RequireServerPermission permissions={'allocation.*'}>
-                                        exact
+                                            <NetworkContainer />
-                                    />
+                                        </RequireServerPermission>
-                                    <Route
+                                    </Route>
-                                        path={`${match.path}/network`}
-                                        component={requireServerPermission(NetworkContainer, 'allocation.*')}
-                                        exact
-                                    />
                                     <Route path={`${match.path}/startup`} component={StartupContainer} exact/>
                                     <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
                                     <Route path={'*'} component={NotFound}/>