Use local cache to store data

app/javascript/dashboard/App.vue

@@ -79,6 +79,11 @@ export default {
     },
   },
   mounted() {
+    this.$store.dispatch('inboxes/setInboxes');
+    this.$store.dispatch('labels/setLabels');
+    this.$store.dispatch('customViews/setCustomViews');
+    this.$store.dispatch('teams/setTeams');
+    this.$store.dispatch('setConversationList');
     this.setLocale(window.chatwootConfig.selectedLocale);
   },
   methods: {

app/javascript/dashboard/components/ChatList.vue

@@ -478,7 +478,7 @@ export default {
     resetAndFetchData() {
       this.resetBulkActions();
       this.$store.dispatch('conversationPage/reset');
-      this.$store.dispatch('emptyAllConversations');
+      // this.$store.dispatch('emptyAllConversations');
       this.$store.dispatch('clearConversationFilters');
       if (this.hasActiveFolders) {
         const payload = this.activeFolder.query;

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -120,12 +120,12 @@ export default {
     },
   },
   mounted() {
-    this.$store.dispatch('labels/get');
-    this.$store.dispatch('inboxes/get');
+    // this.$store.dispatch('labels/get');
+    // this.$store.dispatch('inboxes/get');
     this.$store.dispatch('notifications/unReadCount');
-    this.$store.dispatch('teams/get');
+    // this.$store.dispatch('teams/get');
     this.$store.dispatch('attributes/get');
-    this.fetchCustomViews();
+    // this.fetchCustomViews();
   },
 
   methods: {

app/javascript/dashboard/helper/dbStorage.js

@@ -0,0 +1,7 @@
+import localforage from 'localforage';
+
+const dbStorage = localforage.createInstance({
+  name: 'chatwoot-db',
+});
+
+export default dbStorage;

app/javascript/dashboard/store/modules/accounts.js

@@ -38,6 +38,20 @@ export const actions = {
       });
     }
   },
+  setAccount: async ({ commit }) => {
+    commit(types.default.SET_ACCOUNT_UI_FLAG, { isFetchingItem: true });
+    try {
+      const response = await AccountAPI.get();
+      commit(types.default.ADD_ACCOUNT, response.data);
+      commit(types.default.SET_ACCOUNT_UI_FLAG, {
+        isFetchingItem: false,
+      });
+    } catch (error) {
+      commit(types.default.SET_ACCOUNT_UI_FLAG, {
+        isFetchingItem: false,
+      });
+    }
+  },
   update: async ({ commit }, updateObj) => {
     commit(types.default.SET_ACCOUNT_UI_FLAG, { isUpdating: true });
     try {

app/javascript/dashboard/store/modules/conversations/actions.js

@@ -8,6 +8,7 @@ import {
   buildConversationList,
   isOnMentionsView,
 } from './helpers/actionHelpers';
+import dbStorage from '../../../helper/dbStorage';
 
 // actions
 const actions = {
@@ -37,6 +38,14 @@ const actions = {
       // Handle error
     }
   },
+  async setConversationList({ commit }) {
+    try {
+      const conversations = await dbStorage.getItem('conversations');
+      commit(types.SET_ALL_CONVERSATION, conversations);
+    } catch (error) {
+      // Ignore Error
+    }
+  },
 
   fetchFilteredConversations: async ({ commit, dispatch }, params) => {
     commit(types.SET_LIST_LOADING_STATUS);

app/javascript/dashboard/store/modules/conversations/helpers/actionHelpers.js

@@ -1,3 +1,4 @@
+import dbStorage from '../../../../helper/dbStorage';
 import types from '../../../mutation-types';
 
 export const setPageFilter = ({ dispatch, filter, page, markEndReached }) => {
@@ -22,7 +23,7 @@ export const isOnMentionsView = ({ route: { name: routeName } }) => {
   return MENTION_ROUTES.includes(routeName);
 };
 
-export const buildConversationList = (
+export const buildConversationList = async (
   context,
   requestPayload,
   responseData,
@@ -43,4 +44,5 @@ export const buildConversationList = (
     page: requestPayload.page,
     markEndReached: !conversationList.length,
   });
+  await dbStorage.setItem('conversations', conversationList || []);
 };

app/javascript/dashboard/store/modules/customViews.js

@@ -1,6 +1,7 @@
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import types from '../mutation-types';
 import CustomViewsAPI from '../../api/customViews';
+import dbStorage from '../../helper/dbStorage';
 
 export const state = {
   records: [],
@@ -31,12 +32,22 @@ export const actions = {
         filterType
       );
       commit(types.SET_CUSTOM_VIEW, response.data);
+      await dbStorage.setItem('customViews', response.data);
     } catch (error) {
       // Ignore error
     } finally {
       commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isFetching: false });
     }
   },
+
+  setCustomViews: async ({ commit }) => {
+    try {
+      const customViews = await dbStorage.getItem('customViews');
+      commit(types.SET_CUSTOM_VIEW, customViews || []);
+    } catch (err) {
+      // Ignore retrieving errors
+    }
+  },
   create: async function createCustomViews({ commit }, obj) {
     commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: true });
     try {

app/javascript/dashboard/store/modules/inboxes.js

@@ -6,6 +6,7 @@ import WebChannel from '../../api/channel/webChannel';
 import FBChannel from '../../api/channel/fbChannel';
 import TwilioChannel from '../../api/channel/twilioChannel';
 import { parseAPIErrorResponse } from '../utils/api';
+import dbStorage from '../../helper/dbStorage';
 
 const buildInboxData = inboxParams => {
   const formData = new FormData();
@@ -50,6 +51,7 @@ const throwErrorMessage = error => {
 
 export const getters = {
   getInboxes($state) {
+    console.log($state.records);
     return $state.records;
   },
   getWhatsAppTemplates: $state => inboxId => {
@@ -129,10 +131,20 @@ export const actions = {
       const response = await InboxesAPI.get();
       commit(types.default.SET_INBOXES_UI_FLAG, { isFetching: false });
       commit(types.default.SET_INBOXES, response.data.payload);
+      await dbStorage.setItem('inboxes', response.data.payload);
     } catch (error) {
       commit(types.default.SET_INBOXES_UI_FLAG, { isFetching: false });
     }
   },
+  async setInboxes({ commit }) {
+    try {
+      const inboxes = await dbStorage.getItem('inboxes');
+      console.log(inboxes);
+      commit(types.default.SET_INBOXES, inboxes || []);
+    } catch (err) {
+      // Ignore retrieving errors
+    }
+  },
   createChannel: async ({ commit }, params) => {
     try {
       commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: true });

app/javascript/dashboard/store/modules/labels.js

@@ -1,6 +1,7 @@
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import types from '../mutation-types';
 import LabelsAPI from '../../api/labels';
+import dbStorage from '../../helper/dbStorage';
 
 export const state = {
   records: [],
@@ -32,6 +33,7 @@ export const actions = {
     try {
       const response = await LabelsAPI.get();
       commit(types.SET_LABELS, response.data.payload);
+      await dbStorage.setItem('labels', response.data.payload);
     } catch (error) {
       // Ignore error
     } finally {
@@ -39,6 +41,15 @@ export const actions = {
     }
   },
 
+  async setLabels({ commit }) {
+    try {
+      const labels = await dbStorage.getItem('labels');
+      commit(types.default.SET_LABELS, labels || []);
+    } catch (err) {
+      // Ignore retrieving errors
+    }
+  },
+
   create: async function createLabels({ commit }, cannedObj) {
     commit(types.SET_LABEL_UI_FLAG, { isCreating: true });
     try {

app/javascript/dashboard/store/modules/teams/actions.js

@@ -7,6 +7,7 @@ import {
   DELETE_TEAM,
 } from './types';
 import TeamsAPI from '../../../api/teams';
+import dbStorage from '../../../helper/dbStorage';
 
 export const actions = {
   create: async ({ commit }, teamInfo) => {
@@ -28,13 +29,21 @@ export const actions = {
       const { data } = await TeamsAPI.get();
       commit(CLEAR_TEAMS);
       commit(SET_TEAMS, data);
+      await dbStorage.setItem('teams', data || {});
     } catch (error) {
       throw new Error(error);
     } finally {
       commit(SET_TEAM_UI_FLAG, { isFetching: false });
     }
   },
-
+  setTeams: async ({ commit }) => {
+    try {
+      const teams = await dbStorage.getItem('teams');
+      commit(SET_TEAMS, teams || {});
+    } catch (err) {
+      // Ignore retrieving errors
+    }
+  },
   show: async ({ commit }, { id }) => {
     commit(SET_TEAM_UI_FLAG, { isFetchingItem: true });
     try {

package.json

@@ -43,6 +43,7 @@
     "highlight.js": "~10.4.1",
     "ionicons": "~2.0.1",
     "js-cookie": "^2.2.1",
+    "localforage": "^1.10.0",
     "lodash.groupby": "^4.6.0",
     "marked": "4.0.10",
     "md5": "^2.3.0",

yarn.lock

@@ -8013,6 +8013,11 @@ ignore@^5.1.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
+
 immer@8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656"
@@ -9549,6 +9554,13 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==
+  dependencies:
+    immediate "~3.0.5"
+
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -9707,6 +9719,13 @@ loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+localforage@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
+  integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"