diff --git a/resources/scripts/components/server/files/NewDirectoryButton.tsx b/resources/scripts/components/server/files/NewDirectoryButton.tsx index 14e3d2e53..c8e39b22f 100644 --- a/resources/scripts/components/server/files/NewDirectoryButton.tsx +++ b/resources/scripts/components/server/files/NewDirectoryButton.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import Modal from '@/components/elements/Modal'; import { ServerContext } from '@/state/server'; import { Form, Formik, FormikHelpers } from 'formik'; @@ -12,6 +12,7 @@ import { FileObject } from '@/api/server/files/loadDirectory'; import useFlash from '@/plugins/useFlash'; import useFileManagerSwr from '@/plugins/useFileManagerSwr'; import { WithClassname } from '@/components/types'; +import FlashMessageRender from '@/components/FlashMessageRender'; interface Values { directoryName: string; @@ -22,8 +23,8 @@ const schema = object().shape({ }); const generateDirectoryData = (name: string): FileObject => ({ - key: `dir_${name}`, - name: name, + key: `dir_${name.split('/', 1)[0] ?? name}`, + name: name.split('/', 1)[0] ?? name, mode: '0644', size: 0, isFile: false, @@ -37,12 +38,20 @@ const generateDirectoryData = (name: string): FileObject => ({ export default ({ className }: WithClassname) => { const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); - const { clearAndAddHttpError } = useFlash(); + const { clearFlashes, clearAndAddHttpError } = useFlash(); const [ visible, setVisible ] = useState(false); const { mutate } = useFileManagerSwr(); const directory = ServerContext.useStoreState(state => state.files.directory); + useEffect(() => { + if (visible) { + return () => { + clearFlashes('files:directory-modal'); + }; + } + }, [ visible ]); + const submit = ({ directoryName }: Values, { setSubmitting }: FormikHelpers) => { createDirectory(uuid, directory, directoryName) .then(() => mutate(data => [ ...data, generateDirectoryData(directoryName) ], false)) @@ -50,7 +59,7 @@ export default ({ className }: WithClassname) => { .catch(error => { console.error(error); setSubmitting(false); - clearAndAddHttpError({ key: 'files', error }); + clearAndAddHttpError({ key: 'files:directory-modal', error }); }); }; @@ -71,6 +80,7 @@ export default ({ className }: WithClassname) => { resetForm(); }} > +