import React, { useContext, useEffect, useState } from 'react'; import { ServerContext } from '@/state/server'; import { Form, Formik, FormikHelpers } from 'formik'; import Field from '@/components/elements/Field'; import { join } from 'path'; import { object, string } from 'yup'; 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 { useFlashKey } from '@/plugins/useFlash'; import useFileManagerSwr from '@/plugins/useFileManagerSwr'; import { WithClassname } from '@/components/types'; import FlashMessageRender from '@/components/FlashMessageRender'; import { Dialog, DialogWrapperContext } from '@/components/elements/dialog'; import Code from '@/components/elements/Code'; import asDialog from '@/hoc/asDialog'; interface Values { directoryName: string; } const schema = object().shape({ directoryName: string().required('A valid directory name must be provided.'), }); const generateDirectoryData = (name: string): FileObject => ({ key: `dir_${name.split('/', 1)[0] ?? name}`, name: name.replace(/^(\/*)/, '').split('/', 1)[0] ?? name, mode: 'drwxr-xr-x', modeBits: '0755', size: 0, isFile: false, isSymlink: false, mimetype: '', createdAt: new Date(), modifiedAt: new Date(), isArchiveType: () => false, isEditable: () => false, }); const NewDirectoryDialog = asDialog({ title: 'Create Directory', })(() => { const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid); const directory = ServerContext.useStoreState((state) => state.files.directory); const { mutate } = useFileManagerSwr(); const { close } = useContext(DialogWrapperContext); const { clearAndAddHttpError } = useFlashKey('files:directory-modal'); useEffect(() => { return () => { clearAndAddHttpError(); }; }, []); const submit = ({ directoryName }: Values, { setSubmitting }: FormikHelpers) => { createDirectory(uuid, directory, directoryName) .then(() => mutate((data) => [...data, generateDirectoryData(directoryName)], false)) .then(() => close()) .catch((error) => { setSubmitting(false); clearAndAddHttpError(error); }); }; return ( {({ submitForm, values }) => ( <>

This directory will be created as  /home/container/ {join(directory, values.directoryName).replace(/^(\.\.\/|\/)+/, '')}

Cancel )}
); }); export default ({ className }: WithClassname) => { const [open, setOpen] = useState(false); return ( <> Create Directory ); };