index.js

import A from "axios"
import * as F from "framework"
import K from "kefir"
import * as D from "selfdb"
import * as R from "ramda"
import React from "react"
import {validate} from "tcomb-validation"
import * as T from "common/types"
import Loading from "../common/Loading"
import PostForm from "./PostForm"

// SEED
export let seed = {
  input: {
    title: "",
    text: "",
    tags: "",
    isPublished: false,
    publishDate: "",
  },
  errors: {},
  loading: false,
}

export default (sources, key) => {
  let {params} = sources.props
  let baseLens = ["posts", params.id]

  // INTENTS
  let intents = {
    changeTitle$: sources.DOM.fromName("title").listen("input")
      .map(ee => ee.element.value),

    changeText$: sources.DOM.fromName("text").listen("input")
      .map(ee => ee.element.value),

    changeTags$: sources.DOM.fromName("tags").listen("input")
      .map(ee => ee.element.value),

    changeIsPublished$: sources.DOM.fromName("isPublished").listen("click")
      .map(ee => ee.element.checked),

    changePublishDate$: sources.DOM.fromName("publishDate").listen("input")
      .map(ee => ee.element.value),

    submit$: sources.DOM.from("form").listen("submit")
      .map(ee => (ee.event.preventDefault(), ee))
      .map(R.always(true)),
  }

  // HTTP
  let fetchStart$ = sources.state$
    .filter(s => !R.view(baseLens, s))

  let fetchEnd$ = fetchStart$
    .flatMapConcat(_ => K
      .fromPromise(A.get(`/api/posts/${params.id}/`))
      .map(resp => resp.data.models[params.id])
    )

  // STATE
  let form$ = D.run(
    () => D.makeStore({}),
    // D.withLog({key}),
  )(
    D.init(seed),

    intents.changeTitle$.map(x => R.set(["input", "title"], x)),
    intents.changeTitle$.debounce(200).map(x => {
      let res = validate(x, T.PostForm.meta.props.title)
      return res.isValid()
        ? R.unset(["errors", "title"])
        : R.set(["errors", "title"], res.firstError().message)
    }),

    intents.changeText$.map(x => R.set(["input", "text"], x)),
    intents.changeText$.debounce(200).map(x => {
      let res = validate(x, T.PostForm.meta.props.text)
      return res.isValid()
        ? R.unset(["errors", "text"])
        : R.set(["errors", "text"], res.firstError().message)
    }),

    intents.changeTags$.map(x => R.set(["input", "tags"], x)),
    intents.changeTags$.debounce(200).map(x => {
      let res = validate(x, T.PostForm.meta.props.tags)
      return res.isValid()
        ? R.unset(["errors", "tags"])
        : R.set(["errors", "tags"], res.firstError().message)
    }),

    intents.changeIsPublished$.map(x => R.set(["input", "isPublished"], x)),
    intents.changeIsPublished$.debounce(200).map(x => {
      let res = validate(x, T.PostForm.meta.props.isPublished)
      return res.isValid()
        ? R.unset(["errors", "isPublished"])
        : R.set(["errors", "isPublished"], res.firstError().message)
    }),

    intents.changePublishDate$.map(x => R.set(["input", "publishDate"], x)),
    intents.changePublishDate$.debounce(200).map(x => {
      let res = validate(x, T.PostForm.meta.props.publishDate)
      return res.isValid()
        ? R.unset(["errors", "publishDate"])
        : R.set(["errors", "publishDate"], res.firstError().message)
    }),

    // Resets
    sources.state$.map(R.view(["posts", params.id])).filter(Boolean).map(post => function initFromRoot() {
      let input = {
        title: post.title,
        text: post.text,
        tags: R.join(", ", post.tags),
        isPublished: post.isPublished,
        publishDate: post.publishDate,
      }
      let res = validate(input, T.PostForm)
      if (res.isValid()) {
        let errors = {}
        return {input, errors}
      } else {
        let errors = R.reduce((z, key) => {
          let e = R.find(e => R.equals(e.path, [key]), res.errors)
          return e ? R.set(key, e.message, z) : z
        }, {}, R.keys(input))
        return {input, errors}
      }
    }),

    D.ifBrowser(
      fetchStart$.merge(fetchEnd$.delay(1)).map(_ => R.over(["loading"], R.not))
    ),
  ).$

  // COMPONENT
  let Component = F.connect(
    {
      loading: D.deriveOne(form$, ["loading"]),
      form: form$,
    },
    ({loading, form}) => loading
      ? <Loading/>
      : <PostForm input={form.input} errors={form.errors}/>
  )

  // ACTION (external)
  let action$ = K.merge([
    fetchEnd$.map(post => {
      if (post) {
        return function afterFetch(state) {
          return R.set(baseLens, post, state)
        }
      } else {
        return R.id // TODO add alert box
      }
    }).flatMapErrors(err => {
      console.warn(`Request to "${err.response.config.url}" failed with message "${err.response.status} ${err.response.statusText}"`)
      return K.never() // TODO add alert box
    }),

    form$.sampledBy(intents.submit$).flatMapConcat(form => {
      let postForm
      try {
        postForm = T.PostForm(form.input)
      } catch (e) {
        return K.never()
      }
      return K.constant(postForm)
    }).flatMapConcat(form => K
      .fromPromise(A.put(`/api/posts/${params.id}/`, form))
      .map(resp => resp.data.model)
    )
    .map(post => {
      return function afterPUT(state) {
        return R.set([...baseLens, post.id], post, state)
      }
    }).flatMapErrors(err => {
      console.warn(`Request to "${err.response.config.url}" failed with message "${err.response.status} ${err.response.statusText}"`)
      return K.never() // TODO add alert box
    })
  ])

  return {Component, action$}
}