refs #850 Replace GlobalHeader with typescript

spec/renderer/integration/store/GlobalHeader.spec.ts

@@ -1,9 +1,9 @@
 import { createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import { ipcMain } from '~/spec/mock/electron'
-import GlobalHeader from '~/src/renderer/store/GlobalHeader'
+import GlobalHeader, { GlobalHeaderState } from '~/src/renderer/store/GlobalHeader'
 
-const state = () => {
+const state = (): GlobalHeaderState => {
   return {
     accounts: [],
     changing: false,

src/renderer/store/GlobalHeader.js

@@ -1,95 +0,0 @@
-import { ipcRenderer } from 'electron'
-import router from '@/router'
-
-const GlobalHeader = {
-  namespaced: true,
-  state: {
-    accounts: [],
-    changing: false,
-    hide: false
-  },
-  mutations: {
-    updateAccounts (state, accounts) {
-      state.accounts = accounts
-    },
-    updateChanging (state, value) {
-      state.changing = value
-    },
-    changeHide (state, value) {
-      state.hide = value
-    }
-  },
-  actions: {
-    listAccounts ({ dispatch, commit }) {
-      return new Promise((resolve, reject) => {
-        ipcRenderer.send('list-accounts', 'list')
-        ipcRenderer.once('error-list-accounts', (event, err) => {
-          ipcRenderer.removeAllListeners('response-list-accounts')
-          reject(err)
-        })
-        ipcRenderer.once('response-list-accounts', (event, accounts) => {
-          ipcRenderer.removeAllListeners('error-list-accounts')
-          commit('updateAccounts', accounts)
-          dispatch('refreshAccounts')
-          resolve(accounts)
-        })
-      })
-    },
-    // Fetch account informations and save current state when GlobalHeader is displayed
-    refreshAccounts ({ commit }) {
-      return new Promise((resolve, reject) => {
-        ipcRenderer.send('refresh-accounts')
-        ipcRenderer.once('error-refresh-accounts', (event, err) => {
-          ipcRenderer.removeAllListeners('response-refresh-accounts')
-          reject(err)
-        })
-        ipcRenderer.once('response-refresh-accounts', (event, accounts) => {
-          ipcRenderer.removeAllListeners('error-refresh-accounts')
-          commit('updateAccounts', accounts)
-          resolve(accounts)
-        })
-      })
-    },
-    watchShortcutEvents ({ state, commit, rootState, rootGetters }) {
-      ipcRenderer.on('change-account', (event, account) => {
-        if (state.changing) {
-          return null
-        }
-        if (rootState.route.params.id === account._id) {
-          return null
-        }
-        // When the modal window is active, don't change account
-        if (rootGetters['TimelineSpace/Modals/modalOpened']) {
-          return null
-        }
-        // changing finish after loading
-        commit('updateChanging', true)
-        router.push(`/${account._id}/home`)
-      })
-    },
-    async removeShortcutEvents () {
-      ipcRenderer.removeAllListeners('change-account')
-      return true
-    },
-    loadHide ({ commit }) {
-      return new Promise(resolve => {
-        ipcRenderer.send('get-global-header')
-        ipcRenderer.once('response-get-global-header', (event, value) => {
-          commit('changeHide', value)
-          resolve(value)
-        })
-      })
-    },
-    switchHide ({ dispatch }, value) {
-      return new Promise(resolve => {
-        ipcRenderer.send('change-global-header', value)
-        ipcRenderer.once('response-change-global-header', () => {
-          dispatch('loadHide')
-          resolve(true)
-        })
-      })
-    }
-  }
-}
-
-export default GlobalHeader

src/renderer/store/GlobalHeader.ts

@@ -0,0 +1,118 @@
+import { ipcRenderer } from 'electron'
+import router from '@/router'
+import Account from '~/src/types/account'
+import { Module, MutationTree, ActionTree } from 'vuex'
+
+export interface GlobalHeaderState {
+  accounts: Array<Account>,
+  changing: boolean,
+  hide: boolean
+}
+
+const state = (): GlobalHeaderState => ({
+  accounts: [],
+  changing: false,
+  hide: false
+})
+
+export const MUTATION_TYPES = {
+  UPDATE_ACCOUNTS: 'updateAccounts',
+  UPDATE_CHANGING: 'updateChanging',
+  CHANGE_HIDE: 'changeHide'
+}
+
+const mutations: MutationTree<GlobalHeaderState> = {
+  [MUTATION_TYPES.UPDATE_ACCOUNTS]: (state: GlobalHeaderState, accounts: Array<Account>) => {
+    state.accounts = accounts
+  },
+  [MUTATION_TYPES.UPDATE_CHANGING]: (state: GlobalHeaderState, value: boolean) => {
+    state.changing = value
+  },
+  [MUTATION_TYPES.CHANGE_HIDE]: (state: GlobalHeaderState, value: boolean) => {
+    state.hide = value
+  }
+}
+
+// TODO: use type of rootState
+const actions: ActionTree<GlobalHeaderState, any> = {
+  listAccounts: ({ dispatch, commit }): Promise<Array<Account>> => {
+    return new Promise((resolve, reject) => {
+      ipcRenderer.send('list-accounts', 'list')
+      ipcRenderer.once('error-list-accounts', (_, err: Error) => {
+        ipcRenderer.removeAllListeners('response-list-accounts')
+        reject(err)
+      })
+      ipcRenderer.once('response-list-accounts', (_, accounts: Array<Account>) => {
+        ipcRenderer.removeAllListeners('error-list-accounts')
+        commit(MUTATION_TYPES.UPDATE_ACCOUNTS, accounts)
+        dispatch('refreshAccounts')
+        resolve(accounts)
+      })
+    })
+  },
+  // Fetch account informations and save current state when GlobalHeader is displayed
+  refreshAccounts: ({ commit }): Promise<Array<Account>> => {
+    return new Promise((resolve, reject) => {
+      ipcRenderer.send('refresh-accounts')
+      ipcRenderer.once('error-refresh-accounts', (_, err: Error) => {
+        ipcRenderer.removeAllListeners('response-refresh-accounts')
+        reject(err)
+      })
+      ipcRenderer.once('response-refresh-accounts', (_, accounts: Array<Account>) => {
+        ipcRenderer.removeAllListeners('error-refresh-accounts')
+        commit(MUTATION_TYPES.UPDATE_ACCOUNTS, accounts)
+        resolve(accounts)
+      })
+    })
+  },
+  watchShortcutEvents: ({ state, commit, rootState, rootGetters }) => {
+    ipcRenderer.on('change-account', (_, account: Account) => {
+      if (state.changing) {
+        return null
+      }
+      if (rootState.route.params.id as string === account._id!) {
+        return null
+      }
+      // When the modal window is active, don't change account
+      if (rootGetters['TimelineSpace/Modals/modalOpened']) {
+        return null
+      }
+      // changing finish after loading
+      commit(MUTATION_TYPES.UPDATE_CHANGING, true)
+      router.push(`/${account._id}/home`)
+      return true
+    })
+  },
+  removeShortcutEvents: async () => {
+    ipcRenderer.removeAllListeners('change-account')
+    return true
+  },
+  loadHide: ({ commit }): Promise<boolean> => {
+    return new Promise(resolve => {
+      ipcRenderer.send('get-global-header')
+      ipcRenderer.once('response-get-global-header', (_, hide: boolean) => {
+        commit(MUTATION_TYPES.CHANGE_HIDE, hide)
+        resolve(hide)
+      })
+    })
+  },
+  switchHide: ({ dispatch }, hide: boolean): Promise<boolean> => {
+    return new Promise(resolve => {
+      ipcRenderer.send('change-global-header', hide)
+      ipcRenderer.once('response-change-global-header', () => {
+        dispatch('loadHide')
+        resolve(true)
+      })
+    })
+  }
+}
+
+// TODO: use type of rootState
+const GlobalHeader: Module<GlobalHeaderState, any> = {
+  namespaced: true,
+  state: state,
+  mutations: mutations,
+  actions: actions
+}
+
+export default GlobalHeader

src/types/account.ts

@@ -0,0 +1,13 @@
+export default interface Account {
+  _id?: string,
+  baseURL: string,
+  domain: string,
+  clientId: string,
+  clientSecret: string,
+  accessToken: string | null,
+  refreshToken: string | null,
+  username: string | null,
+  accountId: number | null,
+  avatar: string | null,
+  order: number
+}