add redux-form driver

[fabienjuif]

Waiting for #69 so the lib are not requiring redux-form everytime... for everycases.

driver

import { setSubmitSucceeded, getFormValues, setSubmitFailed, startSubmit, stopSubmit, isSubmitting } from 'redux-form'

const asyncSubmit = (name, dispatch, getState) => async (callback, ...options) => {
  dispatch(startSubmit(name))
  await callback(...options)
  if (isSubmitting(name)(getState())) dispatch(stopSubmit)
}

export default ({ dispatch, getState }) => name => ({
  getFormValues: () => getFormValues(name, state => state.ui.form)(getState()),
  setSubmitFailed: (...fields) => dispatch(setSubmitFailed(name, ...fields)),
  setSubmitSucceeded: () => dispatch(setSubmitSucceeded(name)),
  startSubmit: () => dispatch(startSubmit(name)),
  stopSubmit: errors => dispatch(stopSubmit(name, errors)),
  asyncSubmit: (callback, ...options) => asyncSubmit(name, dispatch, getState)(callback, ...options),
})

Example usage in a reaction (plugued to a listener)

export const login = reaction((action, store, { http, form }) => {
  // retrieve credentials from redux
  const signin = form('signin')
  const values = signin.getFormValues()
  // submit
  signin.asyncSubmit(http('AUTH').post, '/api/login')
})

[fabienjuif]

FYI @guillaumecrespel @bpetetot I just changed the example about asyncSubmit so it passes http.post
And I changed the driver so it recieve a callback and not http.

Maybe we should rename callback to promiseCallback ?

[bpetetot]

maybe :

const asyncSubmit = (name, dispatch, getState) => async (promise, ...args) => {

[fabienjuif]

this is not a promise this a callback that returns a promise

[bpetetot]

And be careful, your not sure that the form will be in state.ui.form :

getFormValues: () => getFormValues(name, state => state.ui.form)(getState()),

[fabienjuif]

Yes you are right, this is something to think about :)

[fabienjuif]

The driver should be currified to give this accessor:

instanciation

import { createStore } from 'k-ramel'
import form from '@k-ramel/driver-reduxform'

export default createStore(
  {/* */},
  {
    drivers: {
      form: form(store => store.ui.form),
    }
  }
)

driver source code

import { setSubmitSucceeded, getFormValues, setSubmitFailed, startSubmit, stopSubmit, isSubmitting } from 'redux-form'

const asyncSubmit = (name, { getState, dispatch }) => async (callback, ...options) => {
  dispatch(startSubmit(name))
  await callback(...options)
  if (isSubmitting(name)(getState())) dispatch(stopSubmit)
}

export default selector => store => (name) => 
  const { dispatch, getState } = store

  return {
    getFormValues: () => getFormValues(name, selector(store))(getState()),
    setSubmitFailed: (...fields) => dispatch(setSubmitFailed(name, ...fields)),
    setSubmitSucceeded: () => dispatch(setSubmitSucceeded(name)),
    startSubmit: () => dispatch(startSubmit(name)),
    stopSubmit: errors => dispatch(stopSubmit(name, errors)),
    asyncSubmit: (callback, ...options) => asyncSubmit(name, store)(callback, ...options),
  }
}

[bpetetot]

Be careful there is a typo here :

const asyncSubmit = (name, { getState, dispatch }) => async (callback, ...options) => {
  dispatch(startSubmit(name))
  await callback(...options)
  // error calling stopSubmit
  if (isSubmitting(name)(getState())) dispatch(stopSubmit(name))
}

[bpetetot]

And the async function should return a response (for example with http post) :

const asyncSubmit = (name, { getState, dispatch }) => async (callback, ...options) => {
  dispatch(startSubmit(name))
  const response = await callback(...options)
  // error calling stopSubmit
  if (isSubmitting(name)(getState())) dispatch(stopSubmit(name))
  return response
}