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

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

const widgets = {
  datetime: DatetimeWidget,
  signup: SignupQuestionsWidget,
};

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);
      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", "start_time", "end_time", "questions"],
      properties: {
        title: {
          type: "string",
          title: "Title",
          default: "",
        },
        visible: {
          type: "boolean",
          title: "Visible",
          default: true,
        },
        quota: {
          type: ["integer", "null"],
          title: "Quota",
          minimum: 0,
          default: null,
        },
        start_time: {
          type: "string",
          title: "Start time",
          default: currentDatetime,
        },
        end_time: {
          type: "string",
          title: "End time",
          default: tomorrowDatetime,
        },
        questions: {
          type: "string",
          title: "Questions",
          default: "[]",
        },
      },
    };
    return schema;
  }

  buildUISchema = () => {
    const uiSchema = {
      content: {
        "ui:widget": "textarea",
      },
      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 (
      <div className="signup-create-page">
        <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>}
      </div>
    );
  }
}

export default SignupCreatePage;