mstform example

settings.tsx

import React from 'react'
import { observer } from 'mobx-react-lite'
import validatorjs from 'validatorjs'
import MobxReactForm from 'mobx-react-form'
import dvr from 'mobx-react-form/lib/validators/DVR'
import { MaterialTextField } from './MaterialTextField'
import { Button } from '@material-ui/core'
import { SnackbarPopup } from './shared/SnackbarPopup'
import { useLocalStore } from 'mobx-react-lite'
import { RouteComponentProps } from '@reach/router'
import { useStore } from '../stores/MainStore'
import { Field, Form, FormState, converters } from 'mstform'
import { SettingFields, ISettings } from '../stores/SettingsStore'
import { useDidMount } from 'rooks'
import { types, ModelInstanceTypeProps, IModelType } from 'mobx-state-tree'
import { observer as od } from 'mobx-react'
import { useWillMount } from '~/utils/hooks'
import { useState } from 'react'
import { MaterialTextFieldMst } from './MaterialTextFieldMst'
import { isEmail } from 'validator'

const settingsForm = new Form(SettingFields, {
  foo: new Field(converters.string, {
    validators: [value => (value !== 'correct' ? 'Wrong' : false)] //isEmail(value) as any]
  }),
  bar: new Field(converters.string),
  baz: new Field(converters.string)
})

// we have a MST model with a string field foo
const M = types.model('M', {
  foo: types.string
})

// we expose this field in our form
const sform = new Form(M, {
  foo: new Field(converters.string, {
    validators: [value => (value !== 'correct' ? 'Wrong' : false)]
  })
})

// const formState = form.state(o)

// const { inputProps } = formState.field('foo')

@od
class Input extends React.Component {
  render() {
    const { type, field } = this.props as any
    return <input type={type} {...field.inputProps} />
  }
}

@od
class InlineError extends React.Component {
  render() {
    const { children, field } = this.props as any
    return (
      <div>
        {children}
        <span>{field.error}</span>
      </div>
    )
  }
}

export const Settings = observer<RouteComponentProps>(props => {
  const { mainStore } = useStore()
  const { settingsStore } = mainStore

  const popupConfig = useLocalStore(() => ({
    message: 'Settings updated',
    open: false
  }))

  console.log(isEmail)

  // const formHooks = {
  //   onError: form => {
  //     console.error('Form Error')
  //   },
  //   onSuccess: async form => {
  //     const values = form.values()
  //     await this.props.appStore.saveSettings(values)
  //     this.popupConfig.open = true
  //   }
  // }

  // const formFields = {
  //   first_name: {
  //     label: 'First Name',
  //     placeholder: 'Insert First Name',
  //     rules: 'required|string|between:5,25',
  //     default: 'John'
  //   },
  //   last_name: {
  //     label: 'Last Name',
  //     placeholder: 'Insert Last Name',
  //     rules: 'required|string|between:5,25',
  //     default: 'Doe'
  //   }
  // }
  // const form = new MobxReactForm(
  //   { fields: formFields },
  //   { plugins: { dvr: dvr(validatorjs) }, hooks: formHooks }
  // )

  const [formState] = useState(settingsForm.state(settingsStore.settings))

  const fooField = formState.field('foo')
  const barField = formState.field('bar')

  // console.log(fooField)
  // console.log(fooField.inputProps.value)
  // console.log(barField.inputProps.value)
  // console.log(settingsStore.settings.bar)
  // console.log('render')
  console.log(fooField)
  return (
    <div className='p-8'>
      <input type='text' {...fooField.inputProps} />
      <input type='text' {...barField.inputProps} />
      {/* <form onSubmit={form.onSubmit}> */}
      <MaterialTextFieldMst label='Foo' className='mb-5' field={fooField} />
      {/* <MaterialTextField testId='last_name' field={form.$('last_name')} /> */}

      <br />
      <Button
        data-testid='submit_button'
        className='mr-2'
        variant='outlined'
        color='primary'
        // onClick={form.onSubmit}
      >
        Submit
      </Button>
      <Button
        className='mr-2'
        variant='outlined'
        color='secondary'
        // onClick={form.onClear}
      >
        Clear
      </Button>
      <Button
        variant='outlined'
        // onClick={form.onReset}
      >
        Reset
      </Button>

      {/* <p>{form.error}</p> */}
      {/* </form> */}
      <SnackbarPopup config={popupConfig} />
    </div>
  )
})