Update handling of links in the file manager

Author: DaneEveritt

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

@@ -5,36 +5,28 @@ import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
 import { CSSTransition } from 'react-transition-group';
-import { Link } from 'react-router-dom';
 import Spinner from '@/components/elements/Spinner';
 import FileObjectRow from '@/components/server/files/FileObjectRow';
 
 export default () => {
     const [ loading, setLoading ] = useState(true);
     const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
-    const { contents: files } = ServerContext.useStoreState(state => state.files);
-    const getDirectoryContents = ServerContext.useStoreActions(actions => actions.files.getDirectoryContents);
-
-    const urlDirectory = window.location.hash.replace(/^#(\/)+/, '/');
+    const { contents: files, directory } = ServerContext.useStoreState(state => state.files);
+    const { setDirectory, getDirectoryContents } = ServerContext.useStoreActions(actions => actions.files);
 
     const load = () => {
         setLoading(true);
         clearFlashes();
 
-        getDirectoryContents(urlDirectory)
+        getDirectoryContents(window.location.hash.replace(/^#(\/)*/, '/'))
             .then(() => setLoading(false))
             .catch(error => {
-                if (error.response && error.response.status === 404) {
-                    window.location.hash = '#/';
-                    return;
-                }
-
                 console.error(error.message, { error });
                 addError({ message: httpErrorToHuman(error), key: 'files' });
             });
     };
 
-    const breadcrumbs = (): { name: string; path?: string }[] => urlDirectory.split('/')
+    const breadcrumbs = (): { name: string; path?: string }[] => directory.split('/')
         .filter(directory => !!directory)
         .map((directory, index, dirs) => {
             if (index === dirs.length - 1) {
@@ -44,27 +36,32 @@ export default () => {
             return { name: directory, path: `/${dirs.slice(0, index + 1).join('/')}` };
         });
 
-    useEffect(() => load(), []);
+    useEffect(() => load(), [ directory ]);
 
     return (
         <div className={'my-10 mb-6'}>
-            <FlashMessageRender byKey={'files'}/>
+            <FlashMessageRender byKey={'files'} className={'mb-4'}/>
             <React.Fragment>
                 <div className={'flex items-center text-sm mb-4 text-neutral-500'}>
                     /<span className={'px-1 text-neutral-300'}>home</span>/
-                    <Link to={'#'} className={'px-1 text-neutral-200 no-underline hover:text-neutral-100'}>
+                    <a
+                        href={'#'}
+                        onClick={() => setDirectory('/')}
+                        className={'px-1 text-neutral-200 no-underline hover:text-neutral-100'}
+                    >
                         container
-                    </Link>/
+                    </a>/
                     {
                         breadcrumbs().map((crumb, index) => (
                             crumb.path ?
                                 <React.Fragment key={index}>
-                                    <Link
-                                        to={`#${crumb.path}`}
+                                    <a
+                                        href={`#${crumb.path}`}
+                                        onClick={() => setDirectory(crumb.path!)}
                                         className={'px-1 text-neutral-200 no-underline hover:text-neutral-100'}
                                     >
                                         {crumb.name}
-                                    </Link>/
+                                    </a>/
                                 </React.Fragment>
                                 :
                                 <span key={index} className={'px-1 text-neutral-300'}>{crumb.name}</span>

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

@@ -13,6 +13,7 @@ import { ServerContext } from '@/state/server';
 
 export default ({ file }: { file: FileObject }) => {
     const directory = ServerContext.useStoreState(state => state.files.directory);
+    const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
 
     return (
         <div
@@ -26,7 +27,17 @@ export default ({ file }: { file: FileObject }) => {
                 href={file.isFile ? undefined : `#${directory}/${file.name}`}
                 className={'flex flex-1 text-neutral-300 no-underline'}
                 onClick={e => {
-                    file.isFile && e.preventDefault();
+                    e.preventDefault();
+
+                    // Don't rely on the onClick to work with the generated URL. Because of the way this
+                    // component re-renders you'll get redirected into a nested directory structure since
+                    // it'll cause the directory variable to update right away when you click.
+                    //
+                    // Just trust me future me, leave this be.
+                    if (!file.isFile) {
+                        window.location.hash = `#${directory}/${file.name}`;
+                        setDirectory(`${directory}/${file.name}`);
+                    }
                 }}
             >
                 <div className={'flex-none text-neutral-400 mr-4 text-lg pl-3'}>

resources/scripts/state/server/files.ts

@@ -13,7 +13,7 @@ export interface ServerFileStore {
 }
 
 const files: ServerFileStore = {
-    directory: '',
+    directory: '/',
     contents: [],
 
     getDirectoryContents: thunk(async (actions, payload, { getStoreState }) => {