refactor(ui): avoid store class instances in vuex

We should only store plain objects in vuex to avoid not being able to call the class instance methods
witnet · Nov 8, 2022 · 31dd173 · 31dd173
1 parent 8569f3f
commit 31dd173
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 61 deletions.
diff --git a/src/components/WelcomeBack/WalletList.vue b/src/components/WelcomeBack/WalletList.vue
@@ -45,6 +45,7 @@
 
 <script>
 import { mapState, mapActions, mapMutations } from 'vuex'
+import { localStorageWrapper } from '@/main'
 import Select from '@/components/Select'
 import Card from '@/components/card/Card'
 
@@ -65,11 +66,13 @@ export default {
       walletId: state => {
         return state.wallet.walletId
       },
-      getWalletIndex: state => state.wallet.localStorage.getWalletIndex(),
       sessionId: state => state.wallet.sessionId,
       unlockWalletError: state => state.wallet.errors.unlockWallet,
       wallets: state => state.wallet.walletInfos,
     }),
+    getWalletIndex() {
+      return localStorageWrapper.getWalletIndex()
+    },
     lastWalletOpen() {
       return this.getWalletIndex || 0
     },

diff --git a/src/main.ts b/src/main.ts
@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import IdleVue from 'idle-vue'
+import { WalletApi, LocalStorageApi } from './api'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import ProcessWalletEvent from './services/ProcessWalletEvent'
 import i18n from '@/plugins/i18n'
 import './plugins/element.js'
 import './fontAwesome'
@@ -11,6 +13,10 @@ import '@/ipcHandlers'
 // TODO: delete
 declare let window: any
 
+const api = new WalletApi()
+const localStorageWrapper = new LocalStorageApi()
+const eventProcessor = new ProcessWalletEvent()
+
 Vue.config.productionTip = false
 
 const eventsHub = new Vue()
@@ -32,3 +38,5 @@ function runApp() {
 
   window.vm = vm
 }
+
+export { api, localStorageWrapper, eventProcessor }
diff --git a/src/router.js b/src/router.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import { api } from './main'
 import Community from '@/components/Community.vue'
 import DataRequest from '@/components/DataRequest.vue'
 import Editor from '@/components/Editor.vue'
@@ -33,7 +34,7 @@ import { SETTINGS_SECTIONS } from '@/constants'
 
 Vue.use(Router)
 function redirectOnReload(to, from, next) {
-  if (store.state.wallet.api.client.ws.ready) {
+  if (api.client.ws.ready) {
     next()
   } else {
     next('/')
@@ -71,7 +72,7 @@ export default new Router({
       name: 'main',
       component: Main,
       beforeEnter: async (to, from, next) => {
-        const isReady = store.state.wallet.api.client.ws.ready
+        const isReady = api.client.ws.ready
 
         if (isReady) {
           await store.dispatch('getWalletInfos')
@@ -86,9 +87,9 @@ export default new Router({
           }
           // when the computer is blocked the client closes but it should not redirect to
           // wallet not found if the wallet is not closed
-          store.state.wallet.api.client.ws.on('close', () => {
+          api.client.ws.on('close', () => {
             setTimeout(() => {
-              if (!store.state.wallet.api.client.ws.ready) {
+              if (!api.client.ws.ready) {
                 next('/wallet-not-found')
               }
             }, 1000)
@@ -100,7 +101,7 @@ export default new Router({
               next('/wallet-not-found')
             }
           }, 3000)
-          store.state.wallet.api.client.ws.on('open', async () => {
+          api.client.ws.on('open', async () => {
             const polling = setInterval(async () => {
               error = false
               clearInterval(polling)
@@ -171,7 +172,7 @@ export default new Router({
       path: '/wallet-not-found',
       name: 'runWalletAlert',
       beforeEnter: async (to, from, next) => {
-        if (store.state.wallet.api.client.ws.ready) {
+        if (api.client.ws.ready) {
           await store.dispatch('getWalletInfos')
           const walletInfos = store.state.wallet.walletInfos
           if (walletInfos && walletInfos.length > 0) {
@@ -187,7 +188,7 @@ export default new Router({
             }
           }, 2000)
 
-          store.state.wallet.api.client.ws.on('open', async () => {
+          api.client.ws.on('open', async () => {
             error = false
             await store.dispatch('getWalletInfos')
             const polling = setInterval(() => {

diff --git a/src/store/uiInteractions.js b/src/store/uiInteractions.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { LocalStorageApi } from '@/api'
+import { localStorageWrapper } from '@/main'
 
 export default {
   state: {
@@ -9,7 +9,6 @@ export default {
     setupMessage: 'Updating wallet backend',
     setupProgress: 0,
     sessionExpired: false,
-    localStorage: new LocalStorageApi(),
     isResyncConfirmationVisible: false,
     isWalletDescriptionVisible: false,
     isRenameWalletConfirmationVisible: false,
@@ -84,8 +83,8 @@ export default {
     notify(context, payload) {
       Vue.prototype.$notify(payload)
     },
-    saveShowModalAgain(context, val) {
-      context.state.localStorage.setSkipSessionExpirationInfo(val)
+    saveShowModalAgain(val) {
+      localStorageWrapper.setSkipSessionExpirationInfo(val)
     },
   },
 }