116 lines
3.3 KiB
TypeScript
116 lines
3.3 KiB
TypeScript
import React, { useState, useEffect, useContext } from 'react';
|
|
import { Typography, Button } from 'antd';
|
|
import dynamic from 'next/dynamic';
|
|
import MarkdownIt from 'markdown-it';
|
|
|
|
import { ServerStatusContext } from '../utils/server-status-context';
|
|
import {
|
|
postConfigUpdateToAPI,
|
|
RESET_TIMEOUT,
|
|
API_CUSTOM_CONTENT,
|
|
} from './components/config/constants';
|
|
import {
|
|
createInputStatus,
|
|
StatusState,
|
|
STATUS_ERROR,
|
|
STATUS_PROCESSING,
|
|
STATUS_SUCCESS,
|
|
} from '../utils/input-statuses';
|
|
import 'react-markdown-editor-lite/lib/index.css';
|
|
import FormStatusIndicator from './components/config/form-status-indicator';
|
|
|
|
const { Title } = Typography;
|
|
|
|
const mdParser = new MarkdownIt(/* Markdown-it options */);
|
|
|
|
const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
|
|
ssr: false,
|
|
});
|
|
|
|
export default function PageContentEditor() {
|
|
const [content, setContent] = useState('');
|
|
const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
|
|
const [hasChanged, setHasChanged] = useState(false);
|
|
|
|
const serverStatusData = useContext(ServerStatusContext);
|
|
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
|
|
|
|
const { instanceDetails } = serverConfig;
|
|
const { extraPageContent: initialContent } = instanceDetails;
|
|
|
|
let resetTimer = null;
|
|
|
|
function handleEditorChange({ text }) {
|
|
setContent(text);
|
|
if (text !== initialContent && !hasChanged) {
|
|
setHasChanged(true);
|
|
} else if (text === initialContent && hasChanged) {
|
|
setHasChanged(false);
|
|
}
|
|
}
|
|
|
|
// Clear out any validation states and messaging
|
|
const resetStates = () => {
|
|
setSubmitStatus(null);
|
|
setHasChanged(false);
|
|
clearTimeout(resetTimer);
|
|
resetTimer = null;
|
|
};
|
|
|
|
// posts all the tags at once as an array obj
|
|
async function handleSave() {
|
|
setSubmitStatus(createInputStatus(STATUS_PROCESSING));
|
|
await postConfigUpdateToAPI({
|
|
apiPath: API_CUSTOM_CONTENT,
|
|
data: { value: content },
|
|
onSuccess: (message: string) => {
|
|
setFieldInConfigState({
|
|
fieldName: 'extraPageContent',
|
|
value: content,
|
|
path: 'instanceDetails',
|
|
});
|
|
setSubmitStatus(createInputStatus(STATUS_SUCCESS, message));
|
|
},
|
|
onError: (message: string) => {
|
|
setSubmitStatus(createInputStatus(STATUS_ERROR, message));
|
|
},
|
|
});
|
|
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
|
|
}
|
|
|
|
useEffect(() => {
|
|
setContent(initialContent);
|
|
}, [instanceDetails]);
|
|
|
|
return (
|
|
<div className="config-page-content-form">
|
|
<Title level={2}>Edit custom content</Title>
|
|
|
|
<p>
|
|
Add some content about your site with the Markdown editor below. This content shows up at
|
|
the bottom half of your Owncast page.
|
|
</p>
|
|
|
|
<MdEditor
|
|
style={{ height: '30em' }}
|
|
value={content}
|
|
renderHTML={(c: string) => mdParser.render(c)}
|
|
onChange={handleEditorChange}
|
|
config={{
|
|
htmlClass: 'markdown-editor-preview-pane',
|
|
markdownClass: 'markdown-editor-pane',
|
|
}}
|
|
/>
|
|
<div className="page-content-actions">
|
|
{hasChanged ? (
|
|
<Button type="primary" onClick={handleSave}>
|
|
Save
|
|
</Button>
|
|
) : null}
|
|
<FormStatusIndicator status={submitStatus} />
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|