Nicer errors when managing files

Author: DaneEveritt

resources/scripts/components/screens/ServerError.tsx

@@ -2,25 +2,55 @@ import React from 'react';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
+import { faSyncAlt } from '@fortawesome/free-solid-svg-icons/faSyncAlt';
+import classNames from 'classnames';
+import styled from 'styled-components';
 
-interface Props {
+interface BaseProps {
     title?: string;
     message: string;
+    onRetry?: () => void;
     onBack?: () => void;
 }
 
-export default ({ title, message, onBack }: Props) => (
+interface PropsWithRetry extends BaseProps {
+    onRetry?: () => void;
+    onBack?: never | undefined;
+}
+
+interface PropsWithBack extends BaseProps {
+    onBack?: () => void;
+    onRetry?: never | undefined;
+}
+
+type Props = PropsWithBack | PropsWithRetry;
+
+const ActionButton = styled.button`
+    ${tw`rounded-full w-8 h-8 flex items-center justify-center`};
+
+    &.hover\\:spin:hover {
+        animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+`;
+
+export default ({ title, message, onBack, onRetry }: Props) => (
     <PageContentBlock>
         <div className={'flex justify-center'}>
             <div className={'w-full sm:w-3/4 md:w-1/2 p-12 md:p-20 bg-neutral-100 rounded-lg shadow-lg text-center relative'}>
-                {typeof onBack === 'function' &&
+                {(typeof onBack === 'function' || typeof onRetry === 'function') &&
                 <div className={'absolute pin-l pin-t ml-4 mt-4'}>
-                    <button
-                        onClick={() => onBack()}
-                        className={'rounded-full btn btn-primary w-8 h-8 flex items-center justify-center'}
+                    <ActionButton
+                        onClick={() => onRetry ? onRetry() : (onBack ? onBack() : null)}
+                        className={classNames('btn btn-primary', { 'hover:spin': !!onRetry })}
                     >
-                        <FontAwesomeIcon icon={faArrowLeft}/>
-                    </button>
+                        <FontAwesomeIcon icon={onRetry ? faSyncAlt : faArrowLeft}/>
+                    </ActionButton>
                 </div>
                 }
                 <img src={'/assets/svgs/server_error.svg'} className={'w-2/3 h-auto select-none'}/>

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

@@ -13,31 +13,47 @@ import NewDirectoryButton from '@/components/server/files/NewDirectoryButton';
 import { Link } from 'react-router-dom';
 import Can from '@/components/elements/Can';
 import PageContentBlock from '@/components/elements/PageContentBlock';
+import ServerError from '@/components/screens/ServerError';
+import useRouter from 'use-react-router';
 
 const sortFiles = (files: FileObject[]): FileObject[] => {
     return files.sort((a, b) => a.name.localeCompare(b.name))
         .sort((a, b) => a.isFile === b.isFile ? 0 : (a.isFile ? 1 : -1));
 };
 
 export default () => {
+    const [ error, setError ] = useState('');
     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 } = ServerContext.useStoreState(state => state.files);
     const { getDirectoryContents } = ServerContext.useStoreActions(actions => actions.files);
 
-    useEffect(() => {
-        setLoading(true);
+    const loadContents = () => {
+        setError('');
         clearFlashes();
-
+        setLoading(true);
         getDirectoryContents(window.location.hash)
             .then(() => setLoading(false))
             .catch(error => {
                 console.error(error.message, { error });
-                addError({ message: httpErrorToHuman(error), key: 'files' });
+                setError(httpErrorToHuman(error));
             });
+    };
+
+    useEffect(() => {
+        loadContents();
     }, []);
 
+    if (error) {
+        return (
+            <ServerError
+                message={error}
+                onRetry={() => loadContents()}
+            />
+        );
+    }
+
     return (
         <PageContentBlock>
             <FlashMessageRender byKey={'files'} className={'mb-4'}/>