StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add support for creating a new file

Browse source
This commit is contained in:
Dane Everitt 2019-12-21 16:38:40 -08:00
parent d75073116f
commit e784218645
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
6 changed files with 116 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

58
resources/scripts/components/server/files/FileEditContainer.tsx
View file

@ -8,27 +8,33 @@ 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';
const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor'));
export default () => {
const { location: { hash } } = useRouter();
const [ loading, setLoading ] = useState(true);
const { action } = useParams();
const { history, location: { hash } } = useRouter();
const [ loading, setLoading ] = useState(action === 'edit');
const [ content, setContent ] = useState('');
const [ modalVisible, setModalVisible ] = useState(false);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { id, uuid } = ServerContext.useStoreState(state => state.server.data!);
const addError = useStoreState((state: Actions<ApplicationStore>) => state.flashes.addError);
let fetchFileContent: null | (() => Promise<string>) = null;
useEffect(() => {
getFileContents(uuid, hash.replace(/^#/, ''))
.then(setContent)
.catch(error => console.error(error))
.then(() => setLoading(false));
}, [ uuid, hash ]);
if (action !== 'new') {
useEffect(() => {
getFileContents(uuid, hash.replace(/^#/, ''))
.then(setContent)
.catch(error => console.error(error))
.then(() => setLoading(false));
}, [ uuid, hash ]);
}
const save = (e: React.MouseEvent<HTMLButtonElement>) => {
const save = (name?: string) => {
if (!fetchFileContent) {
return;
}
@ -36,7 +42,15 @@ export default () => {
setLoading(true);
fetchFileContent()
.then(content => {
return saveFileContents(uuid, hash.replace(/^#/, ''), content);
return saveFileContents(uuid, name || hash.replace(/^#/, ''), content);
})
.then(() => {
if (name) {
history.push(`/server/${id}/files/edit#${hash.replace(/^#/, '')}/${name}`);
return;
}
return Promise.resolve();
})
.catch(error => {
console.error(error);
@ -47,7 +61,15 @@ export default () => {
return (
<div className={'mt-10 mb-4'}>
<FileManagerBreadcrumbs withinFileEditor={true}/>
<FileManagerBreadcrumbs withinFileEditor={true} isNewFile={action !== 'edit'}/>
<FileNameModal
visible={modalVisible}
onDismissed={() => setModalVisible(false)}
onFileNamed={(name) => {
setModalVisible(false);
save(name);
}}
/>
<div className={'relative'}>
<SpinnerOverlay visible={loading}/>
<LazyAceEditor
@ -60,9 +82,15 @@ export default () => {
/>
</div>
<div className={'flex justify-end mt-4'}>
<button className={'btn btn-primary btn-sm'} onClick={save}>
Save Content
</button>
{action === 'edit' ?
<button className={'btn btn-primary btn-sm'} onClick={() => save()}>
Save Content
</button>
:
<button className={'btn btn-primary btn-sm'} onClick={() => setModalVisible(true)}>
Create File
</button>
}
</div>
</div>
);