sgpl/components/form-container.js

import { Component, h } from 'preact'

class FormContainer extends Component {
  constructor (props) {
    super(props)
    this.getSetter = this.getSetter.bind(this)
    this.startingData = props.values
    this.validity = {}
    this.state = Object.assign({}, props.values)
  }

  clearState () {
    const changes = {
      submitting: false,
      submitError: false
    }
    for (const key in this.state) {
      if (key !== 'submitting' && key !== 'submitError') {
        changes[key] = ''
      }
    }
    this.setState(changes)
  }

  setValidity (name, valid) {
    this.validity[name] = !!valid
  }

  getSetter (name) {
    return ({validity, value}) => {
      if (typeof validity !== 'undefined') {
        this.setValidity(name, !!validity)
      }
      if (typeof value !== 'undefined') {
        this.setState({[name]: value})
      }
    }
  }

  isValid () {
    for (const key in this.validity) {
      if (!this.validity[key]) {
        return false
      }
    }
    return true
  }

  getChanged () {
    if (!this.startingData) {
      return Object.assign({}, this.state)
    }
    const changes = {}
    for (const key in this.state) {
      const currentVal = this.state[key]
      if (currentVal !== this.startingData[key]) {
        changes[key] = currentVal
      }
    }
    for (const key in this.startingData) {
      const currentVal = this.state[key]
      if (currentVal !== this.startingData[key]) {
        changes[key] = currentVal
      }
    }
    if (!Object.keys(changes).length) {
      return null
    }
    return changes
  }

  render () {
    const changes = this.getChanged()
    const hasChanged = !!changes
    const isValid = this.isValid()

    const {submitting, submitError} = this.state

    const hasNotSubmitted = !submitting && !submitError

    return (
      h('form', {
        className: this.props.className,
        onSubmit: (e) => {
          e.preventDefault()
          if (isValid && (this.props.submitWhenUnchanged || hasChanged)) {
            const values = Object.assign({}, this.state)
            // clean up
            delete values.submitting
            delete values.submitError
            const res = this.props.onSubmit({
              values,
              changes
            })
            if (res && res.then) {
              this.setState({submitting: true})
              res.then(
                () => {
                  this.clearState()
                },
                () => {
                  this.setState({submitError: true, submitting: false})
                }
              )
            }
          }
        }
      },
        submitting && submitting && h('div', null, this.props.submitMessage),
        submitError && submitting && h('div', null, 'Something went wrong'),
        hasNotSubmitted && this.props.children[0]({
          values: this.state,
          validity: this.validity,
          getSetter: this.getSetter,
          formIsValid: isValid
        })
      )
    )
  }
}

FormContainer.defaultProps = {
  submitMessage: 'Sending...'
}

export default FormContainer