leadchat/app/javascript/dashboard/store/captain/storeFactory.js

import { throwErrorMessage } from 'dashboard/store/utils/api';
import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';

export const generateMutationTypes = name => {
  const capitalizedName = name.toUpperCase();
  return {
    SET_UI_FLAG: `SET_${capitalizedName}_UI_FLAG`,
    SET: `SET_${capitalizedName}`,
    ADD: `ADD_${capitalizedName}`,
    EDIT: `EDIT_${capitalizedName}`,
    DELETE: `DELETE_${capitalizedName}`,
    SET_META: `SET_${capitalizedName}_META`,
  };
};

export const createInitialState = () => ({
  records: [],
  meta: {},
  uiFlags: {
    fetchingList: false,
    fetchingItem: false,
    creatingItem: false,
    updatingItem: false,
    deletingItem: false,
  },
});

export const createGetters = () => ({
  getRecords: state => state.records.sort((r1, r2) => r2.id - r1.id),
  getRecord: state => id =>
    state.records.find(record => record.id === Number(id)) || {},
  getUIFlags: state => state.uiFlags,
  getMeta: state => state.meta,
});

// store/mutations.js
export const createMutations = mutationTypes => ({
  [mutationTypes.SET_UI_FLAG](state, data) {
    state.uiFlags = {
      ...state.uiFlags,
      ...data,
    };
  },
  [mutationTypes.SET_META](state, meta) {
    state.meta = {
      totalCount: Number(meta.total_count),
      page: Number(meta.page),
    };
  },
  [mutationTypes.SET]: MutationHelpers.set,
  [mutationTypes.ADD]: MutationHelpers.create,
  [mutationTypes.EDIT]: MutationHelpers.update,
  [mutationTypes.DELETE]: MutationHelpers.destroy,
});

// store/actions/crud.js
export const createCrudActions = (API, mutationTypes) => ({
  async get({ commit }, params = {}) {
    commit(mutationTypes.SET_UI_FLAG, { fetchingList: true });
    try {
      const response = await API.get(params);
      commit(mutationTypes.SET, response.data.payload);
      commit(mutationTypes.SET_META, response.data.meta);
      return response.data.payload;
    } catch (error) {
      return throwErrorMessage(error);
    } finally {
      commit(mutationTypes.SET_UI_FLAG, { fetchingList: false });
    }
  },

  async show({ commit }, id) {
    commit(mutationTypes.SET_UI_FLAG, { fetchingItem: true });
    try {
      const response = await API.show(id);
      commit(mutationTypes.ADD, response.data);
      return response.data;
    } catch (error) {
      return throwErrorMessage(error);
    } finally {
      commit(mutationTypes.SET_UI_FLAG, { fetchingItem: false });
    }
  },

  async create({ commit }, dataObj) {
    commit(mutationTypes.SET_UI_FLAG, { creatingItem: true });
    try {
      const response = await API.create(dataObj);
      commit(mutationTypes.ADD, response.data);
      return response.data;
    } catch (error) {
      return throwErrorMessage(error);
    } finally {
      commit(mutationTypes.SET_UI_FLAG, { creatingItem: false });
    }
  },

  async update({ commit }, { id, ...updateObj }) {
    commit(mutationTypes.SET_UI_FLAG, { updatingItem: true });
    try {
      const response = await API.update(id, updateObj);
      commit(mutationTypes.EDIT, response.data);
      return response.data;
    } catch (error) {
      return throwErrorMessage(error);
    } finally {
      commit(mutationTypes.SET_UI_FLAG, { updatingItem: false });
    }
  },

  async delete({ commit }, id) {
    commit(mutationTypes.SET_UI_FLAG, { deletingItem: true });
    try {
      await API.delete(id);
      commit(mutationTypes.DELETE, id);
      return id;
    } catch (error) {
      return throwErrorMessage(error);
    } finally {
      commit(mutationTypes.SET_UI_FLAG, { deletingItem: false });
    }
  },
});
export const createStore = options => {
  const { name, API, actions } = options;
  const mutationTypes = generateMutationTypes(name);

  const customActions = actions ? actions(mutationTypes) : {};

  return {
    namespaced: true,
    state: createInitialState(),
    getters: createGetters(),
    mutations: createMutations(mutationTypes),
    actions: {
      ...createCrudActions(API, mutationTypes),
      ...customActions,
    },
  };
};