Govern — React Armory

main.js

import SignUpEndpoint from './SignUpEndpoint.js'
import createModel from './createModel.js'

const SignUp = [
  {
    firstName: createModel({
      defaultPropName: 'defaultFirstName',
      validate: value =>
        !value ? "Please enter your first name" : null
    }),
    email: createModel({
      defaultPropName: 'defaultEmail',
      validate: value =>
        !value ? "Please enter your e-mail" : null
    })
  },
  SignUpEndpoint,
]

function SignUpForm({ firstName, email, status, startEndpoint }) {
  return (
    <div>
      <p>For more info on Govern, see the <a href="https://github.com/jamesknelson/govern">GitHub Page</a></p>
      <label>
        Name
        <input
          value={firstName.value}
          onChange={e => firstName.change(e.target.value)}
        />
        { firstName.error &&
          <p style={{color: 'red'}}>{firstName.error}</p>
        }
      </label>
      <label>
        E-mail
        <input
          value={email.value}
          onChange={e => email.change(e.target.value)}
        />
        { email.error &&
          <p style={{color: 'red'}}>{email.error}</p>
        }
      </label>
      <button onClick={startEndpoint}>Sign up</button>
      { status !== 'fresh' &&
        <div>{status}</div>
      }
    </div>
  )
}

const ControlledSignUpForm = ReactGovern.controlledBy(SignUp)(SignUpForm)

ReactDOM.render(
  <ControlledSignUpForm
    defaultFirstName='Mr. Tesla'
  />,
  document.getElementById('app')
)

Build In Progress