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 { buildFormSchema, buildUISchema } from "./FormUtils";
import AsideSection from "@components/AsideSection";
import MainSection from "@components/MainSection";
import Checkboxes from "@components/Checkbox/Checkboxes";
import RadioButtonWidget from "@components/RadioButton/RadioButtonWidget";

const customWidgets = {
  "radio": RadioButtonWidget,
  "checkboxes": Checkboxes
};

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 (
    <>
      <h6>
        Ilmoittautuneet {signUpForm.quota && (`(${signUpForm.signups.length}/${signUpForm.quota})`)}:
      </h6>
      <ol>
        {signUpForm.signups.map((s, idx) => (
          <li key={idx} className={signUpForm.quota && idx + 1 > signUpForm.quota ? "reserved" : ""}>{s}</li>
        ))}
      </ol>
    </>
  )
}

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

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

    return (
      <>
        <h1>
          {signUpForm.title}
        </h1>
        <Form
          schema={schema as any}
          uiSchema={uiSchema}
          formData={formData}
          widgets={customWidgets}
          idPrefix="rjsf"
          onChange={onChange}
          onSubmit={onSubmit}
          className="sign-up-form"
        />
      </>
    );
  }

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

  const signups = signUpForm && signUpForm.signups ? renderList(signUpForm) : null;
  return (
    <PageSection className="sign-up-page" backgroundColor="white1" textColor="dark-blue">
      <AsideSection />
      <MainSection>
        <span className="sign-up-statusmessage">
          {statusMessage}
        </span>
        {form}
      </MainSection>
      <AsideSection className="sign-up-list">
        {signups}
      </AsideSection>
    </PageSection>
  )
}

export default SignUpPageView;