with-form.js

import React, { Component } from 'react'
import validatejs from 'validate.js'


const validate = (fieldName, value, rule) => {
  const result = validatejs({ [fieldName]: value }, { [fieldName]: rule })

  if (result) {
    return result[fieldName][0]
  }

  return null
}


export const withForm = ({
  initialState = {},
  rules = {},
}) => (BaseComponent) =>
  class WithForm extends Component {
    state = {
      form: typeof initialState === 'function'
        ? initialState(this.props)
        : initialState,
      errors: {},
    }

    validate = (field = undefined) => {
      if (typeof field === 'string') {
        const error = validate(field, this.state.form[field], rules[field])

        this.setState((prev) => {
          return {
            ...prev,
            errors: {
              ...prev.errors,
              [field]: error,
            },
          }
        })

        return !!error
      }

      if (typeof field === 'undefined') {
        const errors = Object.keys(this.state.form)
          .reduce((acc, key) => {
            if (rules[key]) {
              return { ...acc, [key]: validate(key, this.state.form[key], rules[key]) }
            }

            return acc
          }, this.state.errors)

        const isValid = Object.keys(errors)
          .filter((key) => errors[key]).length === 0

        this.setState((prev) => {
          return {
            ...prev,
            errors,
          }
        })

        return isValid
      }
    }

    updateField = (fields, value) => {
      if (typeof fields === 'string') {
        this.setState((prev) => {
          return {
            ...prev,
            form: {
              ...prev.form,
              [fields]: value,
            },
          }
        })

        return
      }

      if (typeof fields === 'object') {
        this.setState((prev) => {
          return {
            ...prev,
            form: {
              ...prev.form,
              ...fields,
            },
          }
        })
      }
    }

    render() {
      return (
        <BaseComponent
          {...this.props}
          {...this.state}
          updateField={this.updateField}
          validate={this.validate}
        />
      )
    }
  }