accounts-frontend/packages/app/components/ui/form/Form.tsx

import React from 'react';
import clsx from 'clsx';

import logger from 'app/services/logger';

import FormModel from './FormModel';
import styles from './form.scss';

interface BaseProps {
  id: string;
  isLoading: boolean;
  onInvalid: (errors: Record<string, string>) => void;
  children: React.ReactNode;
}

interface PropsWithoutForm extends BaseProps {
  onSubmit: (form: FormData) => Promise<void> | void;
}

interface PropsWithForm extends BaseProps {
  form: FormModel;
  onSubmit: (form: FormModel) => Promise<void> | void;
}

type Props = PropsWithoutForm | PropsWithForm;

function hasForm(props: Props): props is PropsWithForm {
  return 'form' in props;
}

interface State {
  id: string; // just to track value for derived updates
  isTouched: boolean;
  isLoading: boolean;
}
type InputElement = HTMLInputElement | HTMLTextAreaElement;

export default class Form extends React.Component<Props, State> {
  static defaultProps = {
    id: 'default',
    isLoading: false,
    onSubmit() {},
    onInvalid() {},
  };

  state: State = {
    id: this.props.id,
    isTouched: false,
    isLoading: this.props.isLoading || false,
  };

  formEl: HTMLFormElement | null;

  mounted = false;

  componentDidMount() {
    if (hasForm(this.props)) {
      this.props.form.addLoadingListener(this.onLoading);
    }

    this.mounted = true;
  }

  static getDerivedStateFromProps(props: Props, state: State) {
    const patch: Partial<State> = {};

    if (
      typeof props.isLoading !== 'undefined' &&
      props.isLoading !== state.isLoading
    ) {
      patch.isLoading = props.isLoading;
    }

    if (props.id !== state.id) {
      patch.id = props.id;
      patch.isTouched = true;
    }

    return patch;
  }

  componentDidUpdate(prevProps: Props) {
    const nextForm = hasForm(this.props) ? this.props.form : undefined;
    const prevForm = hasForm(prevProps) ? prevProps.form : undefined;

    if (nextForm !== prevForm) {
      if (prevForm) {
        prevForm.removeLoadingListener(this.onLoading);
      }

      if (nextForm) {
        nextForm.addLoadingListener(this.onLoading);
      }
    }
  }

  componentWillUnmount() {
    if (hasForm(this.props)) {
      this.props.form.removeLoadingListener(this.onLoading);
    }

    this.mounted = false;
  }

  render() {
    const { isLoading } = this.state;

    return (
      <form
        className={clsx(styles.form, {
          [styles.isFormLoading]: isLoading,
          [styles.formTouched]: this.state.isTouched,
        })}
        onSubmit={this.onFormSubmit}
        ref={(el: HTMLFormElement | null) => (this.formEl = el)}
        noValidate
      >
        {this.props.children}
      </form>
    );
  }

  submit() {
    if (!this.state.isTouched) {
      this.setState({
        isTouched: true,
      });
    }

    const form = this.formEl;

    if (!form) {
      return;
    }

    if (form.checkValidity()) {
      let result: Promise<void> | void;

      if (hasForm(this.props)) {
        result = this.props.onSubmit(this.props.form);
      } else {
        result = this.props.onSubmit(new FormData(form));
      }

      if (result && result.then) {
        this.setState({ isLoading: true });

        result
          .catch((errors: Record<string, string>) => {
            this.setErrors(errors);
          })
          .finally(() => this.mounted && this.setState({ isLoading: false }));
      }
    } else {
      const invalidEls: NodeListOf<InputElement> = form.querySelectorAll(
        ':invalid',
      );
      const errors: Record<string, string> = {};
      invalidEls[0].focus(); // focus on first error

      Array.from(invalidEls).reduce((acc, el) => {
        if (!el.name) {
          logger.warn('Found an element without name', { el });

          return acc;
        }

        let errorMessage = el.validationMessage;

        if (el.validity.valueMissing) {
          errorMessage = `error.${el.name}_required`;
        } else if (el.validity.typeMismatch) {
          errorMessage = `error.${el.name}_invalid`;
        }

        acc[el.name] = errorMessage;

        return acc;
      }, errors);

      this.setErrors(errors);
    }
  }

  setErrors(errors: { [key: string]: string }) {
    if (hasForm(this.props)) {
      this.props.form.setErrors(errors);
    }

    this.props.onInvalid(errors);
  }

  onFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    this.submit();
  };

  onLoading = (isLoading: boolean) => this.setState({ isLoading });
}