import React from 'react'

import ReactDOM from 'react-dom'

import {createEffect, createStore, createEvent, sample} from 'effector'

import {useStore, useStoreMap} from 'effector-react'

​

const sendFormFx = createEffect(params => {

  console.log(params)

})

const submitted = createEvent()

const setField = createEvent()

const $form = createStore({}).on(setField, (s, {key, value}) => ({

  ...s,

  [key]: value,

}))

​

sample({

  clock: submitted,

  source: $form,

  target: sendFormFx,

})

​

const handleChange = setField.prepend(e => ({

  key: e.target.name,

  value: e.target.value,

}))

​

const Field = ({name, type, label}) => {

  const value = useStoreMap({

    store: $form,

    keys: [name],

    fn: values => values[name] || '',

  })

  return (

    <div>

      {label}{' '}

      <input name={name} type={type} value={value} onChange={handleChange} />

    </div>

  )

}

​

const App = () => (

  <form onSubmit={submitted}>

    <Field name="login" label="Login" />

    <Field name="password" type="password" label="Password" />

    <button type="submit">Submit!</button>

  </form>

)

​

submitted.watch(e => {

  e.preventDefault()

})

​

ReactDOM.render(<App />, document.getElementById('root'))