web2.0-frontend/src/pages/admin/SignupCreatePage.tsx

import React from "react";
import { Helmet } from "react-helmet";
import { Link } from "react-router-dom";
import Form from "react-jsonschema-form";
import AdminCreateCommon from "./AdminCreateCommon";
import { createForm, getForm, updateForm, SignupForm } from "@models/SignupForm";
import DatetimeWidget from "@components/Widgets/DatetimeWidget/DatetimeWidget";
import SignupQuestionsWidget from "@components/Widgets/SignupQuestionsWidget";
import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget";
import { buildValidationSchema } from "@views/SignUpPage/FormUtils";

const widgets = {
  datetime: DatetimeWidget,
  signup: SignupQuestionsWidget,
  markdownEditor: MarkdownEditorWidget
};
const DEFAULT_EMAIL =
`Moikka,

Ilmottautuminen saapui perille.`
;
export interface SignupCreatePageProps {
  history: {
    push: (to: string) => void;
  };
  match: {
    params: {
      id?: number;
    };
  };
}
export interface SignupCreatePageState {
  error?: string;
  statusMessage?: string;
  formData: any;
}

class SignupCreatePage extends React.Component<SignupCreatePageProps, SignupCreatePageState> {
  constructor(props: SignupCreatePageProps) {
    super(props);
    this.state = {
      formData: {},
    };

    const {id} = props.match.params;
    if (id !== undefined) {
      this.fetchInitialFormData(id);
    }
  }

  fetchInitialFormData = async (id: number) => {
    try {
      const data = await getForm(id, true);
      this.setState({
        formData: {
          ...data,
          questions: JSON.stringify(data.questions)
        },
      });
    } catch (err) {
      this.setState({
        error: String(err),
      });
    }
  }

  onSubmit = async (data: any) => {
    try {
      const questions = JSON.parse(data.formData.questions);
      const payload: SignupForm = {
        ...data.formData,
        questions,
        schema: buildValidationSchema(questions)
      }

      if (payload.id === undefined) {
        const resp = await createForm(payload);
        this.setState({
          formData: {
            ...resp,
            questions: JSON.stringify(resp.questions)
          },
          statusMessage: "Sign-up created successfully",
        });
      } else {
        const resp = await updateForm(payload);
        this.setState({
          formData: {
            ...resp,
            questions: JSON.stringify(resp.questions)
          },
          statusMessage: "Sign-up updated successfully.",
        });
      }
    } catch (error) {
      this.setState({
        error: error,
        statusMessage: error.message
      });
    }
  }

  onError = (data) => {
    console.error("error, data:");
    console.log(data);
  }

  onChange = (data) => {
    this.setState({
      formData: data.formData,
    });
  }

  onFocus = () => {
    this.setState({
      statusMessage: null,
    });
  }

  buildSchema = () => {
    const { error, formData } = this.state;

    const date = new Date();
    const currentDatetime = date.toISOString();
    const tomorrowDate = new Date();
    tomorrowDate.setDate(tomorrowDate.getDate() + 1);
    const tomorrowDatetime = tomorrowDate.toISOString();

    const schema = {
      title: formData.id ? formData.title : "New Sign-up form",
      type: "object",
      required: ["title_fi", "title_en", "start_time", "end_time", "questions"],
      properties: {
        title_fi: {
          type: "string",
          title: "Title (FI)",
          default: "",
        },
        title_en: {
          type: "string",
          title: "Title (EN)",
          default: "",
        },
        visible: {
          type: "boolean",
          title: "Visible",
          default: false,
        },
        quota: {
          type: "integer",
          title: "Quota",
          minimum: 0,
          default: 0,
        },
        start_time: {
          type: "string",
          title: "Start time",
          default: currentDatetime,
        },
        end_time: {
          type: "string",
          title: "End time",
          default: tomorrowDatetime,
        },
        email_content: {
          type: "string",
          title: "Email on signup",
          default: DEFAULT_EMAIL
        },
        questions: {
          type: "string",
          title: "Questions",
          default: "[]",
        },
      },
    };
    return schema;
  }

  buildUISchema = () => {
    const uiSchema = {
      email_content: {
        "ui:widget": "markdownEditor",
      },
      start_time: {
        "ui:widget": "datetime",
      },
      end_time: {
        "ui:widget": "datetime",
      },
      questions: {
        "ui:widget": "signup",
      },
    };
    return uiSchema;
  }

  render() {
    const { error, formData, statusMessage } = this.state;
    const schema = this.buildSchema();
    const uiSchema = this.buildUISchema();

    const title = formData.id
      ? `Edit Sign-up Form "${formData.title}"`
      : "Create Sign-up form";

    return (
      <AdminCreateCommon>
        <Helmet>
          <link rel="canonical" href="https://sik.ayy.fi/admin/feed/create" />
        </Helmet>
        <h1>{title}</h1>
        {statusMessage && <div className="success">{statusMessage}</div>}
        {formData.id && <p>
          Check out the signup form here: <Link to={`/signup/${formData.id}`}>{formData.title}</Link>
        </p>}
        <Form schema={schema as any}
          uiSchema={uiSchema}
          formData={formData}
          idPrefix="rjsf"
          widgets={widgets as any}
          onChange={this.onChange}
          onSubmit={this.onSubmit}
          onError={this.onError}
          onFocus={this.onFocus} />
        {error && <div className="error">{error}</div>}
      </AdminCreateCommon>
    );
  }
}

export default SignupCreatePage;