refs #850 Replace AddListMember with typescript

src/renderer/store/Preferences.ts

@@ -1,14 +1,22 @@
-import General from './Preferences/General'
+import General, { GeneralState } from './Preferences/General'
-import Account from './Preferences/Account'
+import Account, { AccountState } from './Preferences/Account'
-import Language from './Preferences/Language'
+import Language, { LanguageState } from './Preferences/Language'
-import Notification from './Preferences/Notification'
+import Appearance, { AppearanceState } from './Preferences/Appearance'
-import Appearance from './Preferences/Appearance'
+import Notification, { NotificationState } from './Preferences/Notification'
 import { Module } from 'vuex'
 
 export interface PreferencesState {}
 
 const state = (): PreferencesState => ({})
 
+export interface PreferencesModuleState extends PreferencesState {
+  General: GeneralState,
+  Account: AccountState,
+  Language: LanguageState,
+  Notification: NotificationState,
+  Appearance: AppearanceState
+}
+
 // TODO: use type of rootState
 const Preferences: Module<PreferencesState, any> = {
   namespaced: true,

src/renderer/store/Settings.ts

@@ -1,5 +1,5 @@
-import General from './Settings/General'
+import General, { GeneralState } from './Settings/General'
-import Timeline from './Settings/Timeline'
+import Timeline, { TimelineState } from './Settings/Timeline'
 import { Module, MutationTree } from 'vuex'
 
 export interface SettingsState {
@@ -20,6 +20,11 @@ const mutations: MutationTree<SettingsState> = {
   }
 }
 
+export interface SettingsModuleState extends SettingsState {
+  General: GeneralState,
+  Timeline: TimelineState,
+}
+
 // TODO: use type of rootState
 const Settings: Module<SettingsState, any> = {
   namespaced: true,

src/renderer/store/TimelineSpace.ts

@@ -1,9 +1,9 @@
 import sanitizeHtml from 'sanitize-html'
 import { ipcRenderer } from 'electron'
 import Mastodon, { Account, Emoji, Instance, Status, Notification as NotificationType } from 'megalodon'
-import SideMenu from './TimelineSpace/SideMenu'
+import SideMenu, { SideMenuState } from './TimelineSpace/SideMenu'
-import HeaderMenu from './TimelineSpace/HeaderMenu'
+import HeaderMenu, { HeaderMenuState } from './TimelineSpace/HeaderMenu'
-import Modals from './TimelineSpace/Modals'
+import Modals, { ModalsModuleState } from './TimelineSpace/Modals'
 import Contents from './TimelineSpace/Contents'
 import router from '@/router'
 import unreadSettings from '~/src/constants/unreadNotification'
@@ -416,6 +416,13 @@ const actions: ActionTree<TimelineSpaceState, any> = {
   }
 }
 
+export interface TimelineSpaceModuleState extends TimelineSpaceState {
+  SideMenu: SideMenuState,
+  HeaderMenu: HeaderMenuState,
+  Modals: ModalsModuleState
+  // TODO: Contents: ContentsState
+}
+
 const TimelineSpace: Module<TimelineSpaceState, any> = {
   namespaced: true,
   modules: {

src/renderer/store/TimelineSpace/Modals.ts

@@ -1,19 +1,25 @@
 import NewToot from './Modals/NewToot'
 import ImageViewer from './Modals/ImageViewer'
-import Jump from './Modals/Jump'
+import Jump, { JumpState } from './Modals/Jump'
 import ListMembership from './Modals/ListMembership'
-import AddListMember from './Modals/AddListMember'
+import AddListMember, { AddListMemberState } from './Modals/AddListMember'
 import MuteConfirm from './Modals/MuteConfirm'
 import Shortcut from './Modals/Shortcut'
 import Report from './Modals/Report'
 import { Module, GetterTree } from 'vuex'
+import { RootState } from '@/store/index'
 
 export interface ModalsState {}
 
+export interface ModalsModuleState extends ModalsState {
+  Jump: JumpState,
+  AddListMember: AddListMemberState
+}
+
 const state = (): ModalsState => ({})
 
-// TODO: use type of rootState
+
-const getters: GetterTree<ModalsState, any> = {
+const getters: GetterTree<ModalsState, RootState> = {
   modalOpened: (_state, _getters, rootState) => {
     const imageViewer = rootState.TimelineSpace.Modals.ImageViewer.modalOpen
     const newToot = rootState.TimelineSpace.Modals.NewToot.modalOpen
@@ -27,7 +33,7 @@ const getters: GetterTree<ModalsState, any> = {
   }
 }
 
-const Modals: Module<ModalsState, any> = {
+const Modals: Module<ModalsState, RootState> = {
   namespaced: true,
   modules: {
     ImageViewer,

src/renderer/store/TimelineSpace/Modals/AddListMember.js

@@ -1,49 +0,0 @@
-import Mastodon from 'megalodon'
-
-export default {
-  namespaced: true,
-  state: {
-    modalOpen: false,
-    accounts: [],
-    targetListId: null
-  },
-  mutations: {
-    changeModal (state, value) {
-      state.modalOpen = value
-    },
-    updateAccounts (state, accounts) {
-      state.accounts = accounts
-    },
-    setListId (state, id) {
-      state.targetListId = id
-    }
-  },
-  actions: {
-    changeModal ({ commit }, value) {
-      commit('changeModal', value)
-    },
-    search ({ commit, rootState }, name) {
-      const client = new Mastodon(
-        rootState.TimelineSpace.account.accessToken,
-        rootState.TimelineSpace.account.baseURL + '/api/v1'
-      )
-      return client.get('/accounts/search', {
-        q: name,
-        following: true
-      })
-        .then(res => {
-          commit('updateAccounts', res.data)
-          return res.data
-        })
-    },
-    add ({ state, rootState }, account) {
-      const client = new Mastodon(
-        rootState.TimelineSpace.account.accessToken,
-        rootState.TimelineSpace.account.baseURL + '/api/v1'
-      )
-      return client.post(`/lists/${state.targetListId}/accounts`, {
-        account_ids: [account.id]
-      })
-    }
-  }
-}

src/renderer/store/TimelineSpace/Modals/AddListMember.ts

@@ -0,0 +1,70 @@
+import Mastodon, { Account, Response } from 'megalodon'
+import { Module, MutationTree, ActionTree } from 'vuex'
+
+export interface AddListMemberState {
+  modalOpen: boolean,
+  accounts: Array<Account>,
+  targetListId: number | null
+}
+
+const state = (): AddListMemberState => ({
+  modalOpen: false,
+  accounts: [],
+  targetListId: null
+})
+
+export const MUTATION_TYPES = {
+  CHANGE_MODAL: 'changeModal',
+  UPDATE_ACCOUNTS: 'updateAccounts',
+  SET_LIST_ID: 'setListId'
+}
+
+const mutations: MutationTree<AddListMemberState> = {
+  [MUTATION_TYPES.CHANGE_MODAL]: (state, value: boolean) => {
+    state.modalOpen = value
+  },
+  [MUTATION_TYPES.UPDATE_ACCOUNTS]: (state, accounts: Array<Account>) => {
+    state.accounts = accounts
+  },
+  [MUTATION_TYPES.SET_LIST_ID]: (state, id: number) => {
+    state.targetListId = id
+  }
+}
+
+// TODO: use type of rootState
+const actions: ActionTree<AddListMemberState, any> = {
+  changeModal: ({ commit }, value: boolean) => {
+    commit(MUTATION_TYPES.CHANGE_MODAL, value)
+  },
+  search: async ({ commit, rootState }, name: string): Promise<Array<Account>> => {
+    const client = new Mastodon(
+      rootState.TimelineSpace.account.accessToken,
+      rootState.TimelineSpace.account.baseURL + '/api/v1'
+    )
+    const res: Response<Array<Account>> = await client.get<Array<Account>>('/accounts/search', {
+      q: name,
+      following: true
+    })
+    commit(MUTATION_TYPES.UPDATE_ACCOUNTS, res.data)
+    return res.data
+  },
+  add: async ({ state, rootState }, account: Account): Promise<{}> => {
+    const client = new Mastodon(
+      rootState.TimelineSpace.account.accessToken,
+      rootState.TimelineSpace.account.baseURL + '/api/v1'
+    )
+    const res: Response<{}> = await client.post<{}>(`/lists/${state.targetListId}/accounts`, {
+      account_ids: [account.id]
+    })
+    return res.data
+  }
+}
+
+const AddListMember: Module<AddListMemberState, any> = {
+  namespaced: true,
+  state: state,
+  mutations: mutations,
+  actions: actions
+}
+
+export default AddListMember

src/renderer/store/index.ts

@@ -2,17 +2,28 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import createLogger from 'vuex/dist/logger'
 
-import App from './App'
+import App, { AppState } from './App'
-import GlobalHeader from './GlobalHeader'
+import GlobalHeader, { GlobalHeaderState } from './GlobalHeader'
-import Login from './Login'
+import Login, { LoginState } from './Login'
-import Authorize from './Authorize'
+import Authorize, { AuthorizeState } from './Authorize'
-import TimelineSpace from './TimelineSpace'
+import TimelineSpace, { TimelineSpaceModuleState } from './TimelineSpace'
-import Preferences from './Preferences'
+import Preferences, { PreferencesModuleState } from './Preferences'
-import Settings from './Settings'
+import Settings, { SettingsModuleState } from './Settings'
-import molecules from './molecules'
+import molecules, { MoleculesModuleState } from './molecules'
 
 Vue.use(Vuex)
 
+export interface RootState {
+  App: AppState,
+  GlobalHeader: GlobalHeaderState,
+  Login: LoginState,
+  Authorize: AuthorizeState,
+  TimelineSpace: TimelineSpaceModuleState,
+  Preferences: PreferencesModuleState,
+  Settings: SettingsModuleState,
+  molecules: MoleculesModuleState
+}
+
 export default new Vuex.Store({
   strict: process.env.NODE_ENV !== 'production',
   plugins: process.env.NODE_ENV !== 'production'

src/renderer/store/molecules.ts

@@ -1,5 +1,8 @@
 import Toot from './molecules/Toot'
 
+export interface MoleculesModuleState {
+}
+
 export default {
   namespaced: true,
   modules: {