web2.0-frontend/src/views/SignUpPage/SignUpPageView.tsx

import React from "react";
import Form, { IChangeEvent, ISubmitEvent, ErrorSchema } from "react-jsonschema-form";
import "./SignUpPage.scss";
import PageSection from "@components/PageSection";
import { SignupForm } from "@models/SignupForm";
import { buildSchema, buildUISchema } from "./FormUtils";

interface SignUpPageViewProps {
  signUpForm: SignupForm;
  formData: any;
  statusMessage: string;
  onChange: (e: IChangeEvent<any>, es?: ErrorSchema) => any;
  onSubmit: (e: ISubmitEvent<any>) => any;
}

const renderList = (signUpForm: SignupForm) => {
  return (
    <ol>
      {signUpForm.signups.map((s, idx) => (
        <li key={idx}>{s}</li>
      ))}
    </ol>
  )
}

const SignUpPageView: React.FC<SignUpPageViewProps> = ({
  signUpForm,
  formData,
  statusMessage,
  onChange,
  onSubmit
}) => {

  const renderForm = () => {
    const schema = buildSchema(signUpForm);
    const uiSchema = buildUISchema(signUpForm);

    return (
      <div>
        <h1>Title: {signUpForm.title}</h1>
        <Form
          schema={schema as any}
          uiSchema={uiSchema}
          formData={formData}
          idPrefix="rjsf"
          onChange={onChange}
          onSubmit={onSubmit}
        />
      </div>
    );
  }

  const form = signUpForm !== null
    ? renderForm()
    : <div>Loading...</div>;

  const signups = signUpForm && signUpForm.signups ? renderList(signUpForm) : null;
  return (
    <div className="sign-up-page">
      {statusMessage}
      <PageSection backgroundColor="dark-blue">
        {form}
        {signups}
      </PageSection>
    </div>
  )
}

export default SignUpPageView;