misc_pterodactyl-panel/resources/scripts/components/server/files/FileEditContainer.tsx

70 lines
2.6 KiB
TypeScript
Raw Normal View History

2019-10-20 00:35:01 +00:00
import React, { lazy, useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
2019-10-20 00:35:01 +00:00
import getFileContents from '@/api/server/files/getFileContents';
import useRouter from 'use-react-router';
2019-10-26 20:16:27 +00:00
import { Actions, useStoreState } 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';
2019-10-12 22:29:45 +00:00
2019-10-19 22:31:02 +00:00
const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor'));
2019-08-17 18:40:51 +00:00
export default () => {
2019-10-20 00:35:01 +00:00
const { location: { hash } } = useRouter();
2019-10-26 20:16:27 +00:00
const [ loading, setLoading ] = useState(true);
2019-10-20 00:35:01 +00:00
const [ content, setContent ] = useState('');
2019-10-26 20:16:27 +00:00
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
2019-10-26 20:16:27 +00:00
const addError = useStoreState((state: Actions<ApplicationStore>) => state.flashes.addError);
2019-10-26 20:16:27 +00:00
let fetchFileContent: null | (() => Promise<string>) = null;
2019-10-12 22:29:45 +00:00
2019-10-20 00:35:01 +00:00
useEffect(() => {
getFileContents(uuid, hash.replace(/^#/, ''))
.then(setContent)
2019-10-26 20:16:27 +00:00
.catch(error => console.error(error))
.then(() => setLoading(false));
2019-10-20 00:35:01 +00:00
}, [ uuid, hash ]);
2019-08-17 18:40:51 +00:00
2019-10-26 20:16:27 +00:00
const save = (e: React.MouseEvent<HTMLButtonElement>) => {
if (!fetchFileContent) {
return;
}
setLoading(true);
fetchFileContent()
.then(content => {
return saveFileContents(uuid, hash.replace(/^#/, ''), content);
})
.catch(error => {
console.error(error);
addError({ message: httpErrorToHuman(error), key: 'files' });
})
.then(() => setLoading(false));
};
2019-08-17 18:40:51 +00:00
return (
2019-10-26 20:16:27 +00:00
<div className={'mt-10 mb-4'}>
<FileManagerBreadcrumbs withinFileEditor={true}/>
<div className={'relative'}>
<SpinnerOverlay visible={loading}/>
<LazyAceEditor
initialModePath={hash.replace(/^#/, '') || 'plain_text'}
initialContent={content}
fetchContent={value => {
fetchFileContent = value;
}}
onContentSaved={() => null}
/>
</div>
2019-10-20 00:35:01 +00:00
<div className={'flex justify-end mt-4'}>
2019-10-26 20:16:27 +00:00
<button className={'btn btn-primary btn-sm'} onClick={save}>
2019-10-20 00:35:01 +00:00
Save Content
</button>
</div>
2019-08-17 18:40:51 +00:00
</div>
);
};