Skip to content

Commit 03a6e26

Browse files
DaneEverittDaneEveritt
committed
Improve create directory dialog
1 parent 8d82aa2 commit 03a6e26

File tree

2 files changed

+52
-60
lines changed

2 files changed

+52
-60
lines changed

‎resources/lang/en/activity.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
'compress_other' => 'Compressed :count files in :directory',
7272
'read' => 'Viewed the contents of :file',
7373
'copy' => 'Created a copy of :file',
74-
'create-directory' => 'Created a new directory :name in :directory',
74+
'create-directory' => 'Created directory :directory:name',
7575
'decompress' => 'Decompressed :files in :directory',
7676
'delete_one' => 'Deleted :directory:files.0',
7777
'delete_other' => 'Deleted :count files in :directory',
@@ -81,7 +81,7 @@
8181
'rename_other' => 'Renamed :count files in :directory',
8282
'write' => 'Wrote new content to :file',
8383
'upload' => 'Began a file upload',
84-
'uploaded' => 'Uploaded :file in :directory',
84+
'uploaded' => 'Uploaded :directory:file',
8585
],
8686
'sftp' => [
8787
'denied' => 'Blocked SFTP access due to permissions',

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

Lines changed: 50 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useContext, useEffect, useState } from 'react';
22
import { ServerContext } from '@/state/server';
33
import { Form, Formik, FormikHelpers } from 'formik';
44
import Field from '@/components/elements/Field';
@@ -8,13 +8,13 @@ import createDirectory from '@/api/server/files/createDirectory';
88
import tw from 'twin.macro';
99
import { Button } from '@/components/elements/button/index';
1010
import { FileObject } from '@/api/server/files/loadDirectory';
11-
import useFlash from '@/plugins/useFlash';
11+
import { useFlashKey } from '@/plugins/useFlash';
1212
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
1313
import { WithClassname } from '@/components/types';
1414
import FlashMessageRender from '@/components/FlashMessageRender';
15-
import { Dialog } from '@/components/elements/dialog';
16-
import Portal from '@/components/elements/Portal';
15+
import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
1716
import Code from '@/components/elements/Code';
17+
import asDialog from '@/hoc/asDialog';
1818

1919
interface Values {
2020
directoryName: string;
@@ -39,78 +39,70 @@ const generateDirectoryData = (name: string): FileObject => ({
3939
isEditable: () => false,
4040
});
4141

42-
export default ({ className }: WithClassname) => {
42+
const NewDirectoryDialog = asDialog({
43+
title: 'Create Directory',
44+
})(() => {
4345
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
44-
const { clearFlashes, clearAndAddHttpError } = useFlash();
45-
const [visible, setVisible] = useState(false);
46+
const directory = ServerContext.useStoreState((state) => state.files.directory);
4647

4748
const { mutate } = useFileManagerSwr();
48-
const directory = ServerContext.useStoreState((state) => state.files.directory);
49+
const { close } = useContext(DialogWrapperContext);
50+
const { clearAndAddHttpError } = useFlashKey('files:directory-modal');
4951

5052
useEffect(() => {
51-
if (!visible) return;
52-
5353
return () => {
54-
clearFlashes('files:directory-modal');
54+
clearAndAddHttpError();
5555
};
56-
}, [visible]);
56+
}, []);
5757

5858
const submit = ({ directoryName }: Values, { setSubmitting }: FormikHelpers<Values>) => {
5959
createDirectory(uuid, directory, directoryName)
6060
.then(() => mutate((data) => [...data, generateDirectoryData(directoryName)], false))
61-
.then(() => setVisible(false))
61+
.then(() => close())
6262
.catch((error) => {
63-
console.error(error);
6463
setSubmitting(false);
65-
clearAndAddHttpError({ key: 'files:directory-modal', error });
64+
clearAndAddHttpError(error);
6665
});
6766
};
6867

68+
return (
69+
<Formik onSubmit={submit} validationSchema={schema} initialValues={{ directoryName: '' }}>
70+
{({ submitForm, values }) => (
71+
<>
72+
<FlashMessageRender key={'files:directory-modal'} />
73+
<Form css={tw`m-0`}>
74+
<Field autoFocus id={'directoryName'} name={'directoryName'} label={'Name'} />
75+
<p css={tw`mt-2 text-sm md:text-base break-all`}>
76+
<span css={tw`text-neutral-200`}>This directory will be created as&nbsp;</span>
77+
<Code>
78+
/home/container/
79+
<span css={tw`text-cyan-200`}>
80+
{join(directory, values.directoryName).replace(/^(\.\.\/|\/)+/, '')}
81+
</span>
82+
</Code>
83+
</p>
84+
</Form>
85+
<Dialog.Footer>
86+
<Button.Text className={'w-full sm:w-auto'} onClick={close}>
87+
Cancel
88+
</Button.Text>
89+
<Button className={'w-full sm:w-auto'} onClick={submitForm}>
90+
Create
91+
</Button>
92+
</Dialog.Footer>
93+
</>
94+
)}
95+
</Formik>
96+
);
97+
});
98+
99+
export default ({ className }: WithClassname) => {
100+
const [open, setOpen] = useState(false);
101+
69102
return (
70103
<>
71-
<Portal>
72-
<Formik onSubmit={submit} validationSchema={schema} initialValues={{ directoryName: '' }}>
73-
{({ resetForm, submitForm, isSubmitting: _, values }) => (
74-
<Dialog
75-
title={'Create Directory'}
76-
open={visible}
77-
onClose={() => {
78-
setVisible(false);
79-
resetForm();
80-
}}
81-
>
82-
<FlashMessageRender key={'files:directory-modal'} />
83-
<Form css={tw`m-0`}>
84-
<Field autoFocus id={'directoryName'} name={'directoryName'} label={'Name'} />
85-
<p css={tw`mt-2 text-sm md:text-base break-all`}>
86-
<span css={tw`text-neutral-200`}>This directory will be created as&nbsp;</span>
87-
<Code>
88-
/home/container/
89-
<span css={tw`text-cyan-200`}>
90-
{join(directory, values.directoryName).replace(/^(\.\.\/|\/)+/, '')}
91-
</span>
92-
</Code>
93-
</p>
94-
</Form>
95-
<Dialog.Footer>
96-
<Button.Text
97-
className={'w-full sm:w-auto'}
98-
onClick={() => {
99-
setVisible(false);
100-
resetForm();
101-
}}
102-
>
103-
Cancel
104-
</Button.Text>
105-
<Button className={'w-full sm:w-auto'} onClick={submitForm}>
106-
Create
107-
</Button>
108-
</Dialog.Footer>
109-
</Dialog>
110-
)}
111-
</Formik>
112-
</Portal>
113-
<Button.Text onClick={() => setVisible(true)} className={className}>
104+
<NewDirectoryDialog open={open} onClose={setOpen.bind(this, false)} />
105+
<Button.Text onClick={setOpen.bind(this, true)} className={className}>
114106
Create Directory
115107
</Button.Text>
116108
</>

0 commit comments

Comments
 (0)