MobX/JSX/Flow/Rxjs Example Organism (in atomic design pattern)

form.jsx

import type { Observable } from 'rxjs/Observable'

import Field from '../molecules/field'
import { sendMessage } from '../../utils/slack'
import { subscribingObserver } from '../../utils/subscribingObserver'

/* subscribingObserver is a HOC that manages Rx observables.
 * `sub` subscribes to an observable and unsubscribes it when the
 * subscribingObserver is unmounted.
 */
const onSubmit = (sub: (o: Observable) => void, form, ui) => sub(() =>
  /* This whole function is totally delarative and contains very little logic.
   * Ergo; no need to test it. Declaring side-effects inside the component makes
   * components a lot easier to read. I'm not 100% sure that this sould be here,
   * alternatively this would be in `./store.js`.
   */
  sendMessage(form.requestParameters)
    /* When the observable emmits a value or fails, do some state manipulation */
    .do(
      form.sendMessageSuccess,
      form.sendMessageFailed
    )
    .do(null, ui.displayError)
)

export default subscribingObserver(({ form, ui, sub }) =>
  <form>
    <Field label='Organization' state={form.fields.organization} />
    <Field label='Title' state={form.fields.title} />
    <textarea
      onChange={ (e) => form.fields.body.update(e.target.value) }
      placeholder='body'
      state=state.form.fields.body
      >
    </textarea>
    <input
      type='submit'
      disabled={ !state.form.isDataValid }
      onSubmit={ onSubmit(sub, form, ui) }
      />
  </form>
)