Don't execute unnecessary HTTP requests when browing a file directory

Author: DaneEveritt

resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx

@@ -1,28 +1,25 @@
 import React, { useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
-import { NavLink, useParams } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
+import { cleanDirectoryPath } from '@/helpers';
 
 interface Props {
     withinFileEditor?: boolean;
     isNewFile?: boolean;
 }
 
 export default ({ withinFileEditor, isNewFile }: Props) => {
-    const { action } = useParams();
     const [ file, setFile ] = useState<string | null>(null);
     const id = ServerContext.useStoreState(state => state.server.data!.id);
     const directory = ServerContext.useStoreState(state => state.files.directory);
-    const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
 
     useEffect(() => {
-        const parts = window.location.hash.replace(/^#(\/)*/, '/').split('/');
+        const parts = cleanDirectoryPath(window.location.hash).split('/');
 
         if (withinFileEditor && !isNewFile) {
             setFile(parts.pop() || null);
         }
-
-        setDirectory(parts.join('/'));
-    }, [ withinFileEditor, isNewFile, setDirectory ]);
+    }, [ withinFileEditor, isNewFile ]);
 
     const breadcrumbs = (): { name: string; path?: string }[] => directory.split('/')
         .filter(directory => !!directory)
@@ -39,7 +36,6 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
             /<span className={'px-1 text-neutral-300'}>home</span>/
             <NavLink
                 to={`/server/${id}/files`}
-                onClick={() => setDirectory('/')}
                 className={'px-1 text-neutral-200 no-underline hover:text-neutral-100'}
             >
                 container
@@ -50,7 +46,6 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
                         <React.Fragment key={index}>
                             <NavLink
                                 to={`/server/${id}/files#${crumb.path}`}
-                                onClick={() => setDirectory(crumb.path!)}
                                 className={'px-1 text-neutral-200 no-underline hover:text-neutral-100'}
                             >
                                 {crumb.name}

resources/scripts/components/server/files/FileManagerContainer.tsx

@@ -22,20 +22,20 @@ export default () => {
     const [ loading, setLoading ] = useState(true);
     const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
     const { id } = ServerContext.useStoreState(state => state.server.data!);
-    const { contents: files, directory } = ServerContext.useStoreState(state => state.files);
+    const { contents: files } = ServerContext.useStoreState(state => state.files);
     const { getDirectoryContents } = ServerContext.useStoreActions(actions => actions.files);
 
     useEffect(() => {
         setLoading(true);
         clearFlashes();
 
-        getDirectoryContents(window.location.hash.replace(/^#(\/)*/, '/'))
+        getDirectoryContents(window.location.hash)
             .then(() => setLoading(false))
             .catch(error => {
                 console.error(error.message, { error });
                 addError({ message: httpErrorToHuman(error), key: 'files' });
             });
-    }, [ directory ]);
+    }, []);
 
     return (
         <div className={'my-10 mb-6'}>

resources/scripts/components/server/files/FileObjectRow.tsx

@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFileImport } from '@fortawesome/free-solid-svg-icons/faFileImport';
 import { faFileAlt } from '@fortawesome/free-solid-svg-icons/faFileAlt';
 import { faFolder } from '@fortawesome/free-solid-svg-icons/faFolder';
-import { bytesToHuman } from '@/helpers';
+import { bytesToHuman, cleanDirectoryPath } from '@/helpers';
 import differenceInHours from 'date-fns/difference_in_hours';
 import format from 'date-fns/format';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
@@ -16,7 +16,7 @@ import useRouter from 'use-react-router';
 export default ({ file }: { file: FileObject }) => {
     const directory = ServerContext.useStoreState(state => state.files.directory);
     const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
-    const { match } = useRouter();
+    const { match, history } = useRouter();
 
     return (
         <div
@@ -27,7 +27,7 @@ export default ({ file }: { file: FileObject }) => {
             `}
         >
             <NavLink
-                to={`${match.url}/${file.isFile ? 'edit/' : ''}#${directory}/${file.name}`}
+                to={`${match.url}/${file.isFile ? 'edit/' : ''}#${cleanDirectoryPath(`${directory}/${file.name}`)}`}
                 className={'flex flex-1 text-neutral-300 no-underline p-3'}
                 onClick={e => {
                     // Don't rely on the onClick to work with the generated URL. Because of the way this
@@ -38,7 +38,7 @@ export default ({ file }: { file: FileObject }) => {
                     if (!file.isFile) {
                         e.preventDefault();
 
-                        window.location.hash = `#${directory}/${file.name}`;
+                        history.push(`#${cleanDirectoryPath(`${directory}/${file.name}`)}`);
                         setDirectory(`${directory}/${file.name}`);
                     }
                 }}

resources/scripts/helpers.ts

@@ -11,3 +11,5 @@ export function bytesToHuman (bytes: number): string {
 export const bytesToMegabytes = (bytes: number) => Math.floor(bytes / 1000 / 1000);
 
 export const randomInt = (low: number, high: number) => Math.floor(Math.random() * (high - low) + low);
+
+export const cleanDirectoryPath = (path: string) => path.replace(/(^#\/*)|(\/(\/*))|(^$)/g, '/');

resources/scripts/routers/ServerRouter.tsx

@@ -64,7 +64,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                         <Spinner size={'large'}/>
                     </div>
                     :
-                    <Switch location={location} key={'server-switch'}>
+                    <Switch location={location}>
                         <Route path={`${match.path}`} component={ServerConsole} exact/>
                         <Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
                         <Route

resources/scripts/state/server/files.ts

@@ -1,6 +1,7 @@
 import loadDirectory, { FileObject } from '@/api/server/files/loadDirectory';
 import { action, Action, thunk, Thunk } from 'easy-peasy';
 import { ServerStore } from '@/state/server/index';
+import { cleanDirectoryPath } from '@/helpers';
 
 export interface ServerFileStore {
     directory: string;
@@ -22,7 +23,7 @@ const files: ServerFileStore = {
             return;
         }
 
-        const contents = await loadDirectory(server.uuid, payload);
+        const contents = await loadDirectory(server.uuid, cleanDirectoryPath(payload));
 
         actions.setDirectory(payload.length === 0 ? '/' : payload);
         actions.setContents(contents);
@@ -47,7 +48,7 @@ const files: ServerFileStore = {
     }),
 
     setDirectory: action((state, payload) => {
-        state.directory = payload.length === 0 ? '/' : payload;
+        state.directory = cleanDirectoryPath(payload)
     }),
 };