owncast/web/pages/config-page-content.tsx

import React, { useState, useEffect, useContext } from 'react';
import { Typography, Button } from 'antd';
import { FormItemProps } from 'antd/lib/form';
import dynamic from 'next/dynamic';
import MarkdownIt from 'markdown-it';

import { ServerStatusContext } from '../utils/server-status-context';
import {
  postConfigUpdateToAPI,
  RESET_TIMEOUT,
  SUCCESS_STATES,
  API_CUSTOM_CONTENT,
} from './components/config/constants';

import 'react-markdown-editor-lite/lib/index.css';

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<FormItemProps['validateStatus']>('');
  const [submitStatusMessage, setSubmitStatusMessage] = useState('');
  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('');
    setHasChanged(false);
    clearTimeout(resetTimer);
    resetTimer = null;
  };

  // posts all the tags at once as an array obj
  async function handleSave() {
    setSubmitStatus('validating');
    await postConfigUpdateToAPI({
      apiPath: API_CUSTOM_CONTENT,
      data: { value: content },
      onSuccess: () => {
        setFieldInConfigState({
          fieldName: 'extraPageContent',
          value: content,
          path: 'instanceDetails',
        });
        setSubmitStatus('success');
      },
      onError: (message: string) => {
        setSubmitStatus('error');
        setSubmitStatusMessage(`There was an error: ${message}`);
      },
    });
    resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
  }

  useEffect(() => {
    setContent(initialContent);
  }, [instanceDetails]);

  const { icon: newStatusIcon = null, message: newStatusMessage = '' } =
    SUCCESS_STATES[submitStatus] || {};

  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}
        <div className={`status-message ${submitStatus || ''}`}>
          {newStatusIcon} {newStatusMessage} {submitStatusMessage}
        </div>
      </div>
    </div>
  );
}