component.js

import { clone } from "ramda"
import { initializeTask , addTask, findTask, editTask, removeTask, saveTask} from "./model.js"
import { log } from "utilities"

export const Item = {
  state: {
    addItem:{},
    editItem:{},
  },
  info:{},
  data: {},
  errors:{},

  edit: id => {
    Item.state.isEditable = true

    const onError = e => log('e')(e)
    const onSuccess = data => {
      Item.state.addItem = data
      Item.state.editItem = clone(Item.state.addItem)
    }

    findTask(id).fork(onError, onSuccess)
  },

  add: () => {
    Item.reset()
  },

  save: () => {
    const onError = e => log("e")(e)

    const onSuccess = item => {
      Item.state.addItem = item
      Item.state.editItem = clone(Item.state.addItem)
    }

    saveTask(Item.state.isEditable)(Item.state.editItem).fork(onError, onSuccess)
  },

  delete:(id) => {
    const onError = e => log('e')(e)
    const onSuccess = s => log('s')(s)

    id
    ? removeTask(id).fork(onError, onSuccess)
    : error("USER IS NOT IN Db ") //TOAST THIS
  },

  reset:() => {
    Item.data = {}
    Item._item =
      { firstName: ""
      , lastName: ""
      , image: "http://www.telegraph.co.uk/content/dam/men/2016/05/24/Untitled-1-large_trans_NvBQzQNjv4BqqVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg"
      , id: ""
      }
    Item.state =
      { isEditable: false
      , addItem: clone(Item._item)
      , editItem: clone(Item._item)
      }
    Item.info={}
    Item.errors = {}
  },
}

module.exports = Item

model.js

import { Item } from './component.js'
import Task from 'data.task'
import { compose, map } from 'ramda'
import { log } from "utilities"


// ==== POST ==================================================================
export const post = data =>
  m.request( { method: "POST", url:'http://localhost:8080/items/add', data:data} )

export const postTask = data =>
  new Task((rej, res) => post(data).then(res, rej))

export const toRequest = item => image =>{
    let Dto =
      { firstName: item.firstName
      , lastName: item.lastName
      , image: image
      }
    return Dto
  }

export const addTask = item =>
  compose(postTask
         , toRequest(item))

// ==== GET ==================================================================
export const fetch = id =>
  m.request({  method:'GET'
            , url:`http://localhost:8080/items/${id}`
            } )

export const findTask = id =>
  new Task((rej, res) => fetch(id).then(res, rej))

  // ==== UPDATE ==================================================================
export const update = id => data =>
  m.request({method:'UPDATE', url:`http://localhost:8080/items/${id}`, data:data})

export const editTask = data =>
  new Task(update(data._id)(data))

  // ==== DELETE ==================================================================
export const remove = id =>
  m.request({ method: 'DELETE', url:`http://localhost:8080/items/${id}`, data:{_id:id}} )

export const removeTask = id =>
  new Task((rej, res) => remove(id).then(res, rej) )


  // ==== SAVE==================================================================
export const saveData = isEditable => data =>
  isEditable
    ? editTask(data)
    : addTask(data)(data.image)

export const saveTask = isEditable =>
  compose(saveData(isEditable))

view.js

import m from "mithril"
import Item from "./component.js"

export const view = {

  view: vnode => {
    m.route.get() !== '/new'
      ? Item.edit(vnode.attrs.id)
      : Item.add()

      Item.info = Item.isEditable ? Item.info : Item.state.addItem

      m("form", {
        onsubmit: function(e) {
          e.preventDefault()
          Item.save()
        }
      }, [  m('formField',
              m("label.label", "First name"),
              m("input.input[type=text][placeholder=First name][required=true]", {
                oninput: m.withAttr("value", value => Item.info.firstName = value),
                value: Item.info.firstName})),

          m("label.label", "Last name"),
          m("input.input[placeholder=Last name][required=true]", {
            oninput: m.withAttr("value", value => Item.info.lastName = value),
            value: Item.info.lastName}),

          m("label.label", "image"),
          m("img", {src:Item.info.image}),

          m("button.button[type=submit]",{class: "c-button button-brand"},"Save"),

          Item.state.edit
            ? m("button.button",{ class:"c-button c-button--error", onclick:m.withAttr("userId", Item.delete )
              , userId:Item.info._id}, "X")
            : ""
            ,
          ])

  }
}

module.exports = view