@onereach/webform/src/store/index.js

Content Builder includes several views for: - Content builder view itself; - Web Form view; - Slack block-kit builder;

import Vue from 'vue';
import Vuex from 'vuex';
import output from './modules/output';
import webform from './modules/webform';
import { v4 as uuid } from 'uuid';

import createPersistedState from 'vuex-persistedstate';
import SecureLS from 'secure-ls';

import { SET_MESSAGE, CLEAR_MESSAGE, UNSET_MESSAGE } from './mutation-types';
const ls = new SecureLS({ isCompression: false });

Vue.use(Vuex);

/* const state = {
  errors: []
};
 */
const getters = {
  getError: (state) => state.errors.find((item) => item.type === 'error')
};

const actions = {
  async setMessageAndGetId ({ commit }, payload) {
    const id = uuid();

    const { timer } = payload;

    commit(SET_MESSAGE, { ...payload, contextId: id });

    if (timer) {
      const onTimer = () =>
        new Promise((resolve) => {
          setTimeout(() => {
            commit(UNSET_MESSAGE, id);
            resolve();
          }, timer);
        });

      await onTimer();
    }

    return id;
  }
};

const mutations = {
  [SET_MESSAGE] (state, { type, message, status, description, contextId }) {
    const id = contextId || uuid();

    state.errors.push({
      id,
      type: type || 'warning', // warning | error | infor | success
      message: message || 'Error',
      status: status || 500,
      description
    });

    return id;
  },

  [UNSET_MESSAGE] (state, id) {
    state.errors = state.errors.filter((error) => error.id !== id);
  },

  [CLEAR_MESSAGE] (state) {
    state.errors = [];
  }
};

export default new Vuex.Store({
  plugins: [
    createPersistedState({
      paths: ['webform'],
      storage: {
        getItem: (key) => ls.get(key),
        setItem: (key, value) => ls.set(key, value),
        removeItem: (key) => ls.remove(key),
        removeAll: () => ls.removeAll()
      }
    })
  ],
  namespaced: true,
  modules: {
    output,
    webform
  },
  state () {
    return {
      errors: []
    };
  },

  getters,
  mutations,
  actions
});

export const buildStore = ({ formKey, mode = '' }) => {
  const store = new Vuex.Store({
    plugins: mode === 'lib'
      ? [
        createPersistedState({
          paths: ['webform'],
          key: `vuex_${formKey || ''}`,
          storage: {
            getItem: (key) => ls.get(key),
            setItem: (key, value) => ls.set(key, value),
            removeItem: (key) => ls.remove(key),
            removeAll: () => ls.removeAll()
          }
        })
      ]
      : [],
    namespaced: true,
    modules: {
      output,
      webform
    },
    state () {
      return {
        errors: []
      };
    },
    getters,
    mutations,
    actions
  });
  return store;
};