Improve create directory dialog

resources/lang/en/activity.php

@@ -71,7 +71,7 @@ return [
             'compress_other' => 'Compressed :count files in :directory',
             'read' => 'Viewed the contents of :file',
             'copy' => 'Created a copy of :file',
-            'create-directory' => 'Created a new directory :name in :directory',
+            'create-directory' => 'Created directory :directory:name',
             'decompress' => 'Decompressed :files in :directory',
             'delete_one' => 'Deleted :directory:files.0',
             'delete_other' => 'Deleted :count files in :directory',
@@ -81,7 +81,7 @@ return [
             'rename_other' => 'Renamed :count files in :directory',
             'write' => 'Wrote new content to :file',
             'upload' => 'Began a file upload',
-            'uploaded' => 'Uploaded :file in :directory',
+            'uploaded' => 'Uploaded :directory:file',
         ],
         'sftp' => [
             'denied' => 'Blocked SFTP access due to permissions',

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
 import { Form, Formik, FormikHelpers } from 'formik';
 import Field from '@/components/elements/Field';
@@ -8,13 +8,13 @@ import createDirectory from '@/api/server/files/createDirectory';
 import tw from 'twin.macro';
 import { Button } from '@/components/elements/button/index';
 import { FileObject } from '@/api/server/files/loadDirectory';
-import useFlash from '@/plugins/useFlash';
+import { useFlashKey } from '@/plugins/useFlash';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import { WithClassname } from '@/components/types';
 import FlashMessageRender from '@/components/FlashMessageRender';
-import { Dialog } from '@/components/elements/dialog';
-import Portal from '@/components/elements/Portal';
+import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
 import Code from '@/components/elements/Code';
+import asDialog from '@/hoc/asDialog';
 
 interface Values {
     directoryName: string;
@@ -39,46 +39,36 @@ const generateDirectoryData = (name: string): FileObject => ({
     isEditable: () => false,
 });
 
-export default ({ className }: WithClassname) => {
+const NewDirectoryDialog = asDialog({
+    title: 'Create Directory',
+})(() => {
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
-    const { clearFlashes, clearAndAddHttpError } = useFlash();
-    const [visible, setVisible] = useState(false);
-
-    const { mutate } = useFileManagerSwr();
     const directory = ServerContext.useStoreState((state) => state.files.directory);
 
-    useEffect(() => {
-        if (!visible) return;
+    const { mutate } = useFileManagerSwr();
+    const { close } = useContext(DialogWrapperContext);
+    const { clearAndAddHttpError } = useFlashKey('files:directory-modal');
 
+    useEffect(() => {
         return () => {
-            clearFlashes('files:directory-modal');
+            clearAndAddHttpError();
         };
-    }, [visible]);
+    }, []);
 
     const submit = ({ directoryName }: Values, { setSubmitting }: FormikHelpers<Values>) => {
         createDirectory(uuid, directory, directoryName)
             .then(() => mutate((data) => [...data, generateDirectoryData(directoryName)], false))
-            .then(() => setVisible(false))
+            .then(() => close())
             .catch((error) => {
-                console.error(error);
                 setSubmitting(false);
-                clearAndAddHttpError({ key: 'files:directory-modal', error });
+                clearAndAddHttpError(error);
             });
     };
 
     return (
-        <>
-            <Portal>
         <Formik onSubmit={submit} validationSchema={schema} initialValues={{ directoryName: '' }}>
-                    {({ resetForm, submitForm, isSubmitting: _, values }) => (
-                        <Dialog
-                            title={'Create Directory'}
-                            open={visible}
-                            onClose={() => {
-                                setVisible(false);
-                                resetForm();
-                            }}
-                        >
+            {({ submitForm, values }) => (
+                <>
                     <FlashMessageRender key={'files:directory-modal'} />
                     <Form css={tw`m-0`}>
                         <Field autoFocus id={'directoryName'} name={'directoryName'} label={'Name'} />
@@ -93,24 +83,26 @@ export default ({ className }: WithClassname) => {
                         </p>
                     </Form>
                     <Dialog.Footer>
-                                <Button.Text
-                                    className={'w-full sm:w-auto'}
-                                    onClick={() => {
-                                        setVisible(false);
-                                        resetForm();
-                                    }}
-                                >
+                        <Button.Text className={'w-full sm:w-auto'} onClick={close}>
                             Cancel
                         </Button.Text>
                         <Button className={'w-full sm:w-auto'} onClick={submitForm}>
                             Create
                         </Button>
                     </Dialog.Footer>
-                        </Dialog>
+                </>
             )}
         </Formik>
-            </Portal>
-            <Button.Text onClick={() => setVisible(true)} className={className}>
+    );
+});
+
+export default ({ className }: WithClassname) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <NewDirectoryDialog open={open} onClose={setOpen.bind(this, false)} />
+            <Button.Text onClick={setOpen.bind(this, true)} className={className}>
                 Create Directory
             </Button.Text>
         </>