web2.0-frontend/src/views/admin/AdminCreateCommon.tsx

import React from "react";
import styled from "styled-components";
import Form, { ISubmitEvent, IChangeEvent, ErrorSchema } from "react-jsonschema-form";
import { colors }from "@theme/colors";
import { Event } from "@models/Event";
import { Post } from "@models/Feed";
import { SignupForm } from "@models/SignupForm";
import { JobAd } from "@models/JobAd";

const Common = styled.div`
  width: 100%;

  .rjsf {
    max-width: 600px;
  }

  fieldset {
    border: none;
    padding: 0;
    margin: 1rem 0;
  }

  option {
    padding: 4px 8px;
    cursor: pointer;
  }

  label {
    margin-bottom: 0.5rem;
  }

  input,
  select {
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.5rem;
  }

  input[type="text"],
  textarea {
    padding: 0.5rem 0.5rem;
    border: none;
    overflow: visible;
    box-sizing: border-box;
  }

  input[type="text"],
  textarea,
  select {
    width: 100%;
  }

  input[type="submit"] {
    border: none;
    outline: none;
    background-color: ${colors.orange2};
    padding: 0.5rem 1rem;
    color: ${colors.white};
  }

  legend {
    font-weight: bold;
    margin: 0.5rem 0;
  }

  button {
    background-color: ${colors.blue1};
    color: ${colors.white};
    padding: 0.5rem 1rem;
    border: none;
    outline: none;
    cursor: pointer;
  }

  .checkbox {
    label {
      display: flex;

      input {
        margin-right: 0.5rem;
      }
    }
  }
`;

const SuccessMsg = styled.p`
  margin-bottom: 0.5rem;
  border: 1px solid ${colors.green1};
  padding: 8px 16px;
  color: ${colors.green1};
  display: inline-block;
`;

const ErrorMsg = styled.p`
  margin-bottom: 0.5rem;
  border: 1px solid ${colors.orange2};
  padding: 8px 16px;
  color: ${colors.orange2};
  display: inline-block;
`;

type FormTypes = Event | SignupForm | Post | JobAd;

type AdminCreateCommonProps = {
  title: string;
  formData?: FormTypes;
  schema: {
    [name: string]: any;
  };
  UISchema: {
    [name: string]: any;
  };
  onChange?: (e: IChangeEvent<FormTypes>, es?: ErrorSchema) => any;
  onFocus: (id: string, value: string | number | boolean) => void;
  onSubmit: (e: ISubmitEvent<FormTypes>) => any;
  statusMessage: string;
  error: string;
  widgets: {
    [name: string]: any;
  };
}

const AdminCreateCommon: React.FC<AdminCreateCommonProps> = ({
  title,
  formData,
  schema,
  UISchema,
  onChange,
  onFocus,
  onSubmit,
  statusMessage,
  error,
  widgets
}) => {

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

  return (
    <Common>
      <h1>{title}</h1>
      {statusMessage && (
        <SuccessMsg>{statusMessage}</SuccessMsg>
      )}
      <Form
        schema={schema}
        uiSchema={UISchema}
        formData={formData}
        idPrefix="rjsf"
        widgets={widgets}
        onChange={onChange}
        onSubmit={onSubmit}
        onError={onError}
        onFocus={onFocus} />

      {error && (
        <ErrorMsg>{error}</ErrorMsg>
      )}
    </Common>
  )
}

export default AdminCreateCommon;