Vuex Example

/**
 * Utils
 */

import setToInitialState from '@/store/utils/set-to-initial-state';
import createGetter from '@/store/utils/create-getter';
import {
  createStatuses,
  createMutations,
  commitStatus,
} from '@/store/utils/create-internals';
import createTypesObject from '@/store/utils/create-types-object';

/**
 * Data
 */

import Roles from '@/data/enum/roles';
import API_CONFIG from '@/data/api-config';
import Statuses from '@/data/enum/generic-statuses';


/**
 * Misc
 */

import Vue from 'vue';
import toUrlSearchParams from '@/utils/helpers/to-url-search-params';
import { get } from 'lodash';

const AsyncActionTypes = {
  loadUsers: 'loadUsers',
  loadUser: 'loadUser',
  loadUserAddresses: 'loadUserAddresses',
  createUser: 'createUser',
  updateUser: 'updateUser',
  toggleUser: 'toggleUser',
  loginAs: 'loginAs',
  passwordReset: 'passwordReset',
  loadAssigneeOptions: 'loadAssigneeOptions',
};

const SyncActionTypes = {
  clearUser: 'clearUser',
  resetUsersState: 'resetUsersState',
};

const initialState = () => ({
  ...createStatuses(AsyncActionTypes),

  users: null,
  user: null,
  userAddresses: null,
  sudosuToken: '',
  assigneeOptions: [],
});

export const UsersStateProps = createTypesObject(initialState(), 'UserStateProps');

const getters = {
  ...createGetter('user', 'user.data'),
  ...createGetter('users', 'users.data'),
  ...createGetter('userAddresses', 'userAddresses.data'),
  ...createGetter('totalNumberOfUsers', 'users.meta.total'),
  ...createGetter('totalNumberOfPages', 'users.meta.last_page'),
  ...createGetter('usersPerPage', 'users.meta.per_page'),
  ...createGetter('sudosuToken'),
  ...createGetter('assigneeOptions'),
};

export const UsersGetterTypes = createTypesObject(getters, 'UsersGetterTypes');

const mutations = {
  ...createMutations(AsyncActionTypes),

  SAVE_USERS(state, responseData) {
    state.users = responseData;
  },
  SAVE_USER(state, responseData) {
    state.user = responseData;
  },
  SAVE_USER_ADDRESSES(state, responseData) {
    state.userAddresses = responseData;
  },
  SAVE_SUDOSU_TOKEN(state, token) {
    state.sudosuToken = token;
  },
  SAVE_ASSIGNEE_OPTIONS(state, responseData) {
    state.assigneeOptions = responseData;
  },
  CLEAR_USER(state) {
    state.user = initialState().user;
  },
  RESET_STATE(state) {
    setToInitialState(state, initialState());
  },
};

export const UsersMutationTypes = createTypesObject(mutations, 'UsersMutationTypes');

const actions = {
  /**
   * @desc Load users.
   *
   * @param {Object} context
   * @param {{ [roles]: string, [search]: string, [sort]: string, [page]: number|string }} query
   * @returns {Promise} paginated collection.
   */
  async [AsyncActionTypes.loadUsers]({ commit }, query) {
    const actionType = AsyncActionTypes.loadUsers;

    try {
      commitStatus(commit, actionType, Statuses.PENDING);

      const urlSearchParams = toUrlSearchParams(query);

      const { method, path } = API_CONFIG.XXX.ENDPOINTS.USER.LIST_USERS;

      const responseData = await Vue.http[method](`${path}?${urlSearchParams}`);

      commit(UsersMutationTypes.SAVE_USERS, responseData);

      commitStatus(commit, actionType, Statuses.FULFILLED);

      return responseData;
    } catch (error) {
      if (process.env.VUE_APP_CONSOLE_MESSAGES === 'on') {
        console.warn('[UsersModule] An error occurred while retrieving list of users.', error || '(no data)');
      }

      commitStatus(commit, actionType, Statuses.REJECTED);

      throw error;
    }
  },

  /**
   * @desc Get user by id.
   *
   * @param {Object} context
   * @param {number|string} userId
   * @returns {Promise}
   */
  async [AsyncActionTypes.loadUser]({ commit }, userId) {
    const actionType = AsyncActionTypes.loadUser;

    try {
      commitStatus(commit, actionType, Statuses.PENDING);

      const { method, path } = API_CONFIG.XXX.ENDPOINTS.USER.GET_USER;

      const responseData = await Vue.http[method](path.replace('{id}', userId));

      commit(UsersMutationTypes.SAVE_USER, responseData);

      commitStatus(commit, actionType, Statuses.FULFILLED);

      return responseData;
    } catch (error) {
      if (process.env.VUE_APP_CONSOLE_MESSAGES === 'on') {
        console.warn('[UsersModule] An error occurred while retrieving a user data.', error || '(no data)');
      }

      commitStatus(commit, actionType, Statuses.REJECTED);

      throw error;
    }
  },

  /**
   * @desc List user addresses by id.
   *
   * @param {Object} context
   * @param {number|string} userId
   * @returns {Promise}
   */
  async [AsyncActionTypes.loadUserAddresses]({ commit }, userId) {
    const actionType = AsyncActionTypes.loadUserAddresses;

    try {
      commitStatus(commit, actionType, Statuses.PENDING);

      const { method, path } = API_CONFIG.XXX.ENDPOINTS.USER.LIST_USER_ADDRESSES;

      const responseData = await Vue.http[method](path.replace('{id}', userId));

      commit(UsersMutationTypes.SAVE_USER_ADDRESSES, responseData);

      commitStatus(commit, actionType, Statuses.FULFILLED);

      return responseData;
    } catch (error) {
      if (process.env.VUE_APP_CONSOLE_MESSAGES === 'on') {
        console.warn('[UsersModule] An error occurred while loading list of user addresses.', error || '(no data)');
      }

      commitStatus(commit, actionType, Statuses.REJECTED);

      throw error;
    }
  },

  /**
   * @desc Create user.
   *
   * @param {Object} context
   * @param {{ role: string, email: string,
   * first_name: string, last_name: string, [phone]: string }} user
   * @returns {Promise}
   */
  async [AsyncActionTypes.createUser]({ commit }, user) {
    const actionType = AsyncActionTypes.createUser;

    try {
      commitStatus(commit, actionType, Statuses.PENDING);

      const { method, path } = API_CONFIG.XXX.ENDPOINTS.USER.CREATE_USER;

      const responseData = await Vue.http[method](path, user);

      commitStatus(commit, actionType, Statuses.FULFILLED);

      return responseData;
    } catch (error) {
      if (process.env.VUE_APP_CONSOLE_MESSAGES === 'on') {
        console.warn('[UsersModule] An error occurred while creating a user.', error || '(no data)');
      }

      commitStatus(commit, actionType, Statuses.REJECTED);

      throw error;
    }
  },

  /**
   * @desc Update user by id.
   * If User is granted 'Admin' – use Update User, otherwise – use Update User Details.
   *
   * @param {Object} context
   * @param {{ id: number|string, data: { role: string,
   * first_name: string, last_name: string, [phone]: string }
   * | {first_name: string, last_name: string, [phone]: string} }} user
   * @returns {Promise}
   */
  async [AsyncActionTypes.updateUser]({ commit }, user) {
    const actionType = AsyncActionTypes.updateUser;

    try {
      commitStatus(commit, actionType, Statuses.PENDING);

      let responseData;

      const { id, data } = user;

      const isGrantedAdmin = Vue.auth.checkRole(Roles.ADMIN);

      if (isGrantedAdmin) {
        const { method, path } = API_CONFIG.XXX.ENDPOINTS.USER.UPDATE_USER;

        responseData = await Vue.http[method](path.replace('{id}', id), data);
      } else {
        const { method, path } = API_CONFIG.XXX.ENDPOINTS.USER.UPDATE_USER_DETAILS;

        responseData = await Vue.http[method](path.replace('{id}', id), data);
      }

      commitStatus(commit, actionType, Statuses.FULFILLED);

      return responseData;
    } catch (error) {
      if (process.env.VUE_APP_CONSOLE_MESSAGES === 'on') {
        console.warn('[UserModule] An error occurred while updating user data.', error || '(no data)');
      }

      commitStatus(commit, actionType, Statuses.REJECTED);

      throw error;
    }
  },

  /**
   * @desc Toggle user.
   *
   * @param {Object} context
   * @param {{ isDisabledNow: boolean, user_id: number|string }} user
   * @returns {Promise}
   */
  async [AsyncActionTypes.toggleUser]({ commit }, user) {
    const actionType = AsyncActionTypes.toggleUser;

    try {
      commitStatus(commit, actionType, Statuses.PENDING);

      let responseData;

      if (user.isDisabledNow) {
        const { method, path } = API_CONFIG.XXX.ENDPOINTS.USER.DELETE_DISABLED_USER;

        responseData = await Vue.http[method](path.replace('{id}', user.id));
      } else {
        const { method, path } = API_CONFIG.XXX.ENDPOINTS.USER.CREATE_DISABLED_USER;

        responseData = await Vue.http[method](path, { user_id: user.id });
      }

      commitStatus(commit, actionType, Statuses.FULFILLED);

      return responseData;
    } catch (error) {
      if (process.env.VUE_APP_CONSOLE_MESSAGES === 'on') {
        console.warn('[UsersModule] An error occurred while toggling user.', error || '(no data)');
      }

      commitStatus(commit, actionType, Statuses.REJECTED);

      throw error;
    }
  },

  /**
   * @desc Login As.
   *
   * @param {Object} context
   * @param {number|string} id
   * @returns {Promise}
   */
  async [AsyncActionTypes.loginAs]({ commit }, id) {
    const actionType = AsyncActionTypes.loginAs;

    try {
      commitStatus(commit, actionType, Statuses.PENDING);

      const { method, path } = API_CONFIG.XXX.ENDPOINTS.USER.CREATE_SUDOSU_TOKEN;

      const responseData = await Vue.http[method](path, { user_id: id });

      commit(UsersMutationTypes.SAVE_SUDOSU_TOKEN, get(responseData, 'data.token'));

      commitStatus(commit, actionType, Statuses.FULFILLED);

      return responseData;
    } catch (error) {
      if (process.env.VUE_APP_CONSOLE_MESSAGES === 'on') {
        console.warn('[UsersModule] An error occurred while logging as.', error || '(no data)');
      }

      commitStatus(commit, actionType, Statuses.REJECTED);

      throw error;
    }
  },

  /**
   * @desc Password reset.
   *
   * @param {Object} context
   * @param {{ token: string, email: string, password: string }} data
   * @returns {Promise}
   */
  async [AsyncActionTypes.passwordReset]({ commit }, data) {
    const actionType = AsyncActionTypes.passwordReset;

    try {
      commitStatus(commit, actionType, Statuses.PENDING);

      const { method, path } = API_CONFIG.XXX.ENDPOINTS.ACCOUNT.CREATE_PASSWORD_RESET;

      const responseData = await Vue.http[method](path, data);

      commitStatus(commit, actionType, Statuses.FULFILLED);

      return responseData;
    } catch (error) {
      if (process.env.VUE_APP_CONSOLE_MESSAGES === 'on') {
        console.warn('[UsersModule] An error occurred while resetting password.', error || '(no data)');
      }

      commitStatus(commit, actionType, Statuses.REJECTED);

      throw error;
    }
  },

  /**
   * @desc Load list of assignable users.
   *
   * @param {Object} context
   * @returns {Promise}
   */
  async [AsyncActionTypes.loadAssigneeOptions]({ commit }) {
    const actionType = AsyncActionTypes.loadAssigneeOptions;

    try {
      commitStatus(commit, actionType, Statuses.PENDING);

      const { method, path } = API_CONFIG.XXX.ENDPOINTS.USER.LIST_ASSIGNEE_OPTIONS;

      const responseData = await Vue.http[method](path);

      commit(UsersMutationTypes.SAVE_ASSIGNEE_OPTIONS, responseData.data);

      commitStatus(commit, actionType, Statuses.FULFILLED);

      return responseData;
    } catch (error) {
      if (process.env.VUE_APP_CONSOLE_MESSAGES === 'on') {
        console.warn('[UsersModule] An error occurred while retrieving list of assignable users.', error || '(no data)');
      }

      commitStatus(commit, actionType, Statuses.REJECTED);

      throw error;
    }
  },

  /**
   * @desc Remove user's info from the store.
   *
   * @param {Object} context
   */
  [SyncActionTypes.clearUser]({ commit }) {
    commit(UsersMutationTypes.CLEAR_USER);
  },

  /**
   * Reset full module's state to it's initial state.
   *
   * @param {Object} context
   */
  [SyncActionTypes.resetUsersState]({ commit }) {
    commit(UsersMutationTypes.RESET_STATE);
  },
};

export const UsersActionTypes = createTypesObject(actions, 'UsersActionTypes');

export default {
  namespaced: true,

  state: initialState(),

  getters,

  mutations,

  actions,
};