import React, { lazy, useEffect, useState } from 'react'; import { ServerContext } from '@/state/server'; import getFileContents from '@/api/server/files/getFileContents'; import useRouter from 'use-react-router'; import { Actions, useStoreActions } from 'easy-peasy'; import { ApplicationStore } from '@/state'; import { httpErrorToHuman } from '@/api/http'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import saveFileContents from '@/api/server/files/saveFileContents'; import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs'; import { useParams } from 'react-router'; import FileNameModal from '@/components/server/files/FileNameModal'; import Can from '@/components/elements/Can'; import FlashMessageRender from '@/components/FlashMessageRender'; import PageContentBlock from '@/components/elements/PageContentBlock'; import ServerError from '@/components/screens/ServerError'; const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor')); export default () => { const [ error, setError ] = useState(''); const { action } = useParams(); const { history, location: { hash } } = useRouter(); const [ loading, setLoading ] = useState(action === 'edit'); const [ content, setContent ] = useState(''); const [ modalVisible, setModalVisible ] = useState(false); const { id, uuid } = ServerContext.useStoreState(state => state.server.data!); const { addError, clearFlashes } = useStoreActions((actions: Actions) => actions.flashes); let fetchFileContent: null | (() => Promise) = null; if (action !== 'new') { useEffect(() => { setLoading(true); setError(''); getFileContents(uuid, hash.replace(/^#/, '')) .then(setContent) .catch(error => { console.error(error); setError(httpErrorToHuman(error)); }) .then(() => setLoading(false)); }, [ uuid, hash ]); } const save = (name?: string) => { if (!fetchFileContent) { return; } setLoading(true); clearFlashes('files:view'); fetchFileContent() .then(content => { return saveFileContents(uuid, name || hash.replace(/^#/, ''), content); }) .then(() => { if (name) { history.push(`/server/${id}/files/edit#/${name}`); return; } return Promise.resolve(); }) .catch(error => { console.error(error); addError({ message: httpErrorToHuman(error), key: 'files:view' }); }) .then(() => setLoading(false)); }; if (error) { return ( history.goBack()} /> ); } return ( setModalVisible(false)} onFileNamed={(name) => { setModalVisible(false); save(name); }} />
{ fetchFileContent = value; }} onContentSaved={() => null} />
{action === 'edit' ? : }
); };