Finish part2 - recomposition

src/modulator/index.js

@@ -16,86 +16,84 @@ const camelize = function (snakeText, capitalizeFirstLetter = true) {
  return out
}

const mutations = function (singular) {
  const mutations = {}
export default {
  mutations (singular) {
    const mutations = {}

  mutations[`set_${singular}`] = (state, entity) => { Vue.set(state, entity.id, entity) }
  mutations[`remove_${singular}`] = (state, id) => {Vue.delete(state, id)}
    mutations[`set_${singular}`] = (state, entity) => { Vue.set(state, entity.id, entity) }
    mutations[`remove_${singular}`] = (state, id) => {Vue.delete(state, id)}

  return mutations
}

const actions = function (endpoint, singular, plural, editable = true, destroyable = true) {
  const camelSingular = camelize(singular)
  const camelPlural = camelize(plural)
  const actions = {}
    return mutations
  },
  actions (endpoint, singular, plural, editable = true, destroyable = true) {
    const camelSingular = camelize(singular)
    const camelPlural = camelize(plural)
    const actions = {}

  actions[`load${camelPlural}`] = ({commit}) => {
    api.get(endpoint)
      .then((data) => {
        for (let i = 0; i < data.length; i++) {
          commit(`set_${singular}`, data[i])
        }
      })
      .catch((error) => {console.log(`ERROR in load${camelPlural}:`, error)})
  }
  actions[`load${camelSingular}`] = ({commit}, id) => {
    api.get(`${endpoint}/${id}`)
      .then((data) => {commit(`set_${singular}`, data)})
      .catch((error) => {console.log(`ERROR in load${camelSingular}:`, error)})
  }
  if (editable) {
    actions[`create${camelSingular}`] = ({commit}, payload) => {
      api.post(endpoint, payload)
    actions[`load${camelPlural}`] = ({commit}) => {
      api.get(endpoint)
        .then((data) => {
          // Let's assume "data" is the new article, sent back by the API
          // We don't want to store the user input in our store :)
          commit(`set_${singular}`, data)
          for (let i = 0; i < data.length; i++) {
            commit(`set_${singular}`, data[i])
          }
        })
        .catch((error) => {console.log(`ERROR in create${camelSingular}:`, error)})
        .catch((error) => {console.log(`ERROR in load${camelPlural}:`, error)})
    }
    actions[`update${camelSingular}`] = ({commit}, payload) => {
      api.patch(`${endpoint}/${payload.id}`, payload)
        .then((data) => {
          // Let's assume "data" is the updated article
          commit(`set_${singular}`, data)
        })
        .catch((error) => {console.log(`ERROR in update${camelSingular}:`, error)})
    actions[`load${camelSingular}`] = ({commit}, id) => {
      api.get(`${endpoint}/${id}`)
        .then((data) => {commit(`set_${singular}`, data)})
        .catch((error) => {console.log(`ERROR in load${camelSingular}:`, error)})
    }
  }
  if (destroyable) {
    actions[`destroy${camelSingular}`] = ({commit}, id) => {
      api.delete(`${endpoint}/${id}`)
        .then(() => { commit(`remove_${singular}`, id) })
        .catch((error) => {console.log('ERROR in DESTROY_ARTICLE:', error)})
    if (editable) {
      actions[`create${camelSingular}`] = ({commit}, payload) => {
        api.post(endpoint, payload)
          .then((data) => {
            // Let's assume "data" is the new article, sent back by the API
            // We don't want to store the user input in our store :)
            commit(`set_${singular}`, data)
          })
          .catch((error) => {console.log(`ERROR in create${camelSingular}:`, error)})
      }
      actions[`update${camelSingular}`] = ({commit}, payload) => {
        api.patch(`${endpoint}/${payload.id}`, payload)
          .then((data) => {
            // Let's assume "data" is the updated article
            commit(`set_${singular}`, data)
          })
          .catch((error) => {console.log(`ERROR in update${camelSingular}:`, error)})
      }
    }
    if (destroyable) {
      actions[`destroy${camelSingular}`] = ({commit}, id) => {
        api.delete(`${endpoint}/${id}`)
          .then(() => { commit(`remove_${singular}`, id) })
          .catch((error) => {console.log('ERROR in DESTROY_ARTICLE:', error)})
      }
    }
  }

  return actions
}

const getters = function (singular, plural) {
  const lowCamelSingular = camelize(singular, false)
  const lowCamelPlural = camelize(plural, false)

  const getters = {}

  getters[lowCamelPlural] = state => state
  getters[lowCamelSingular] = state => id => state[id] || undefined
    return actions
  },
  getters (singular, plural) {
    const lowCamelSingular = camelize(singular, false)
    const lowCamelPlural = camelize(plural, false)

  return getters
}
    const getters = {}

export default function (endpoint, singular, plural, editable = true, destroyable = true) {
  const module = {
    state: {}, mutations: {
      ...mutations(singular),
    }, actions: {
      ...actions(endpoint, singular, plural, editable, destroyable),
    }, getters: {
      ...getters(singular, plural),
    },
  }
    getters[lowCamelPlural] = state => state
    getters[lowCamelSingular] = state => id => state[id] || undefined

  return module
    return getters
  },
  generateModule (endpoint, singular, plural, editable = true, destroyable = true) {
    return {
      state: {},
      mutations: {
        ...this.mutations(singular),
      }, actions: {
        ...this.actions(endpoint, singular, plural, editable, destroyable),
      }, getters: {
        ...this.getters(singular, plural),
      },
    }
  },
}

src/store.js

@@ -1,6 +1,6 @@
import Vue from 'vue'
import Vuex from 'vuex'
import moduleGenerator from './modulator'
import Modulator from './modulator'

Vue.use(Vuex)

@@ -9,8 +9,8 @@ export default new Vuex.Store({
  mutations: {},
  actions: {},
  modules: {
    users: moduleGenerator('users', 'user', 'users', true, false),
    posts: moduleGenerator('posts', 'post', 'posts'),
    postTypes: moduleGenerator('post_types', 'post_type', 'post_types'),
    users: Modulator.generateModule('users', 'user', 'users', true, false),
    posts: Modulator.generateModule('posts', 'post', 'posts'),
    postTypes: Modulator.generateModule('post_types', 'post_type', 'post_types'),
  }
})