From 07d19ad3260ddcd3a7c45d29923af3b95f61b5b4 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 10 Apr 2020 10:11:15 -0700
Subject: [PATCH] Code cleanup and formatting

---
 resources/scripts/components/App.tsx          | 22 +++++-----
 .../server/backups/BackupContextMenu.tsx      | 21 +++++----
 resources/scripts/routers/ServerRouter.tsx    | 44 +++++++++----------
 3 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx
index 510835678..fb813b361 100644
--- a/resources/scripts/components/App.tsx
+++ b/resources/scripts/components/App.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { hot } from 'react-hot-loader/root';
-import { BrowserRouter, BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { StoreProvider } from 'easy-peasy';
 import { store } from '@/state';
 import DashboardRouter from '@/routers/DashboardRouter';
@@ -57,17 +57,15 @@ const App = () => {
         <ThemeProvider theme={theme}>
             <StoreProvider store={store}>
                 <Provider store={store}>
-                    <Router basename={'/'}>
-                        <div className={'mx-auto w-auto'}>
-                            <BrowserRouter basename={'/'}>
-                                <Switch>
-                                    <Route path="/server/:id" component={ServerRouter}/>
-                                    <Route path="/auth" component={AuthenticationRouter}/>
-                                    <Route path="/" component={DashboardRouter}/>
-                                </Switch>
-                            </BrowserRouter>
-                        </div>
-                    </Router>
+                    <div className={'mx-auto w-auto'}>
+                        <BrowserRouter basename={'/'} key={'root-router'}>
+                            <Switch>
+                                <Route path="/server/:id" component={ServerRouter}/>
+                                <Route path="/auth" component={AuthenticationRouter}/>
+                                <Route path="/" component={DashboardRouter}/>
+                            </Switch>
+                        </BrowserRouter>
+                    </div>
                 </Provider>
             </StoreProvider>
         </ThemeProvider>
diff --git a/resources/scripts/components/server/backups/BackupContextMenu.tsx b/resources/scripts/components/server/backups/BackupContextMenu.tsx
index 31ce9f9af..16b636e51 100644
--- a/resources/scripts/components/server/backups/BackupContextMenu.tsx
+++ b/resources/scripts/components/server/backups/BackupContextMenu.tsx
@@ -15,6 +15,7 @@ import useServer from '@/plugins/useServer';
 import deleteBackup from '@/api/server/backups/deleteBackup';
 import { ServerContext } from '@/state/server';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import Can from '@/components/elements/Can';
 
 interface Props {
     backup: ServerBackup;
@@ -90,18 +91,22 @@ export default ({ backup }: Props) => {
                 )}
             >
                 <div className={'text-sm'}>
-                    <DropdownButtonRow onClick={() => doDownload()}>
-                        <FontAwesomeIcon fixedWidth={true} icon={faCloudDownloadAlt} className={'text-xs'}/>
-                        <span className={'ml-2'}>Download</span>
-                    </DropdownButtonRow>
+                    <Can action={'backup.download'}>
+                        <DropdownButtonRow onClick={() => doDownload()}>
+                            <FontAwesomeIcon fixedWidth={true} icon={faCloudDownloadAlt} className={'text-xs'}/>
+                            <span className={'ml-2'}>Download</span>
+                        </DropdownButtonRow>
+                    </Can>
                     <DropdownButtonRow onClick={() => setVisible(true)}>
                         <FontAwesomeIcon fixedWidth={true} icon={faLock} className={'text-xs'}/>
                         <span className={'ml-2'}>Checksum</span>
                     </DropdownButtonRow>
-                    <DropdownButtonRow danger={true} onClick={() => setDeleteVisible(true)}>
-                        <FontAwesomeIcon fixedWidth={true} icon={faTrashAlt} className={'text-xs'}/>
-                        <span className={'ml-2'}>Delete</span>
-                    </DropdownButtonRow>
+                    <Can action={'backup.delete'}>
+                        <DropdownButtonRow danger={true} onClick={() => setDeleteVisible(true)}>
+                            <FontAwesomeIcon fixedWidth={true} icon={faTrashAlt} className={'text-xs'}/>
+                            <span className={'ml-2'}>Delete</span>
+                        </DropdownButtonRow>
+                    </Can>
                 </div>
             </DropdownMenu>
         </>
diff --git a/resources/scripts/routers/ServerRouter.tsx b/resources/scripts/routers/ServerRouter.tsx
index ce592dfeb..c35614d06 100644
--- a/resources/scripts/routers/ServerRouter.tsx
+++ b/resources/scripts/routers/ServerRouter.tsx
@@ -30,7 +30,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
     useEffect(() => () => clearServerState(), [ clearServerState ]);
 
     return (
-        <React.Fragment>
+        <React.Fragment key={'server-router'}>
             <NavigationBar/>
             <CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
                 <div id={'sub-navigation'}>
@@ -51,7 +51,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                         <Can action={'backup.*'}>
                             <NavLink to={`${match.url}/backups`}>Backups</NavLink>
                         </Can>
-                        <Can action={['settings.*', 'file.sftp']} matchAny={true}>
+                        <Can action={[ 'settings.*', 'file.sftp' ]} matchAny={true}>
                             <NavLink to={`${match.url}/settings`}>Settings</NavLink>
                         </Can>
                     </div>
@@ -64,27 +64,25 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                         <Spinner size={'large'}/>
                     </div>
                     :
-                    <React.Fragment>
-                        <Switch location={location}>
-                            <Route path={`${match.path}`} component={ServerConsole} exact/>
-                            <Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
-                            <Route
-                                path={`${match.path}/files/:action(edit|new)`}
-                                render={props => (
-                                    <SuspenseSpinner>
-                                        <FileEditContainer {...props as any}/>
-                                    </SuspenseSpinner>
-                                )}
-                                exact
-                            />
-                            <Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
-                            <Route path={`${match.path}/schedules`} component={ScheduleContainer} exact/>
-                            <Route path={`${match.path}/schedules/:id`} component={ScheduleEditContainer} exact/>
-                            <Route path={`${match.path}/users`} component={UsersContainer} exact/>
-                            <Route path={`${match.path}/backups`} component={BackupContainer} exact/>
-                            <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
-                        </Switch>
-                    </React.Fragment>
+                    <Switch location={location} key={'server-switch'}>
+                        <Route path={`${match.path}`} component={ServerConsole} exact/>
+                        <Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
+                        <Route
+                            path={`${match.path}/files/:action(edit|new)`}
+                            render={props => (
+                                <SuspenseSpinner>
+                                    <FileEditContainer {...props as any}/>
+                                </SuspenseSpinner>
+                            )}
+                            exact
+                        />
+                        <Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
+                        <Route path={`${match.path}/schedules`} component={ScheduleContainer} exact/>
+                        <Route path={`${match.path}/schedules/:id`} component={ScheduleEditContainer} exact/>
+                        <Route path={`${match.path}/users`} component={UsersContainer} exact/>
+                        <Route path={`${match.path}/backups`} component={BackupContainer} exact/>
+                        <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
+                    </Switch>
                 }
             </TransitionRouter>
         </React.Fragment>