From fa9800fa8851168d9683b7fb5b5086f2f0c53d89 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 10 Jul 2020 22:53:52 -0700
Subject: [PATCH] Fix some SWR funkiness

---
 .../server/files/FileDropdownMenu.tsx         |  2 +-
 .../server/files/FileManagerContainer.tsx     |  4 ++
 .../server/files/RenameFileModal.tsx          | 42 +++++++++----------
 .../scripts/plugins/useFileManagerSwr.ts      |  4 ++
 4 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/resources/scripts/components/server/files/FileDropdownMenu.tsx b/resources/scripts/components/server/files/FileDropdownMenu.tsx
index 69f98a89c..443d50a82 100644
--- a/resources/scripts/components/server/files/FileDropdownMenu.tsx
+++ b/resources/scripts/components/server/files/FileDropdownMenu.tsx
@@ -96,7 +96,7 @@ export default ({ file }: { file: FileObject }) => {
     return (
         <DropdownMenu
             renderToggle={onClick => (
-                <div onClick={onClick}>
+                <div css={tw`p-3 hover:text-white`} onClick={onClick}>
                     <FontAwesomeIcon icon={faEllipsisH}/>
                     <RenameFileModal
                         file={file}
diff --git a/resources/scripts/components/server/files/FileManagerContainer.tsx b/resources/scripts/components/server/files/FileManagerContainer.tsx
index 1a1d1c75d..eeed24078 100644
--- a/resources/scripts/components/server/files/FileManagerContainer.tsx
+++ b/resources/scripts/components/server/files/FileManagerContainer.tsx
@@ -28,6 +28,10 @@ export default () => {
     const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
 
     useEffect(() => {
+        // We won't automatically mutate the store when the component re-mounts, otherwise because of
+        // my (horrible) programming this fires off way more than we intend it to.
+        mutate();
+
         setDirectory(hash.length > 0 ? hash : '/');
     }, [ hash ]);
 
diff --git a/resources/scripts/components/server/files/RenameFileModal.tsx b/resources/scripts/components/server/files/RenameFileModal.tsx
index 9b001cba0..d7b9d3e8a 100644
--- a/resources/scripts/components/server/files/RenameFileModal.tsx
+++ b/resources/scripts/components/server/files/RenameFileModal.tsx
@@ -8,6 +8,9 @@ import { ServerContext } from '@/state/server';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
+import useServer from '@/plugins/useServer';
+import useFileManagerSwr from '@/plugins/useFileManagerSwr';
+import useFlash from '@/plugins/useFlash';
 
 interface FormikValues {
     name: string;
@@ -16,37 +19,34 @@ interface FormikValues {
 type Props = RequiredModalProps & { file: FileObject; useMoveTerminology?: boolean };
 
 export default ({ file, useMoveTerminology, ...props }: Props) => {
-    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const { uuid } = useServer();
+    const { mutate } = useFileManagerSwr();
+    const { clearAndAddHttpError } = useFlash();
     const directory = ServerContext.useStoreState(state => state.files.directory);
-    const { pushFile, removeFile } = ServerContext.useStoreActions(actions => actions.files);
 
-    const submit = (values: FormikValues, { setSubmitting }: FormikHelpers<FormikValues>) => {
+    const submit = ({ name }: FormikValues, { setSubmitting }: FormikHelpers<FormikValues>) => {
+        const len = name.split('/').length;
+        if (!useMoveTerminology && len === 1) {
+            // Rename the file within this directory.
+            mutate(files => files.map(f => f.uuid === file.uuid ? { ...f, name } : f), false);
+        } else if ((useMoveTerminology || len > 1) && file.uuid.length) {
+            // Remove the file from this directory since they moved it elsewhere.
+            mutate(files => files.filter(f => f.uuid !== file.uuid), false);
+        }
+
         const renameFrom = join(directory, file.name);
-        const renameTo = join(directory, values.name);
-
+        const renameTo = join(directory, name);
         renameFile(uuid, { renameFrom, renameTo })
-            .then(() => {
-                if (!useMoveTerminology && values.name.split('/').length === 1) {
-                    pushFile({ ...file, name: values.name });
-                }
-
-                if ((useMoveTerminology || values.name.split('/').length > 1) && file.uuid.length > 0) {
-                    removeFile(file.uuid);
-                }
-
-                props.onDismissed();
-            })
+            .then(() => props.onDismissed())
             .catch(error => {
+                mutate();
                 setSubmitting(false);
-                console.error(error);
+                clearAndAddHttpError({ key: 'files', error });
             });
     };
 
     return (
-        <Formik
-            onSubmit={submit}
-            initialValues={{ name: file.name }}
-        >
+        <Formik onSubmit={submit} initialValues={{ name: file.name }}>
             {({ isSubmitting, values }) => (
                 <Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
                     <Form css={tw`m-0`}>
diff --git a/resources/scripts/plugins/useFileManagerSwr.ts b/resources/scripts/plugins/useFileManagerSwr.ts
index c127aaeee..50b69478a 100644
--- a/resources/scripts/plugins/useFileManagerSwr.ts
+++ b/resources/scripts/plugins/useFileManagerSwr.ts
@@ -11,5 +11,9 @@ export default () => {
     return useSWR<FileObject[]>(
         `${uuid}:files:${hash}`,
         () => loadDirectory(uuid, cleanDirectoryPath(hash)),
+        {
+            revalidateOnMount: false,
+            refreshInterval: 0,
+        }
     );
 };