Merge pull request #871 from h3poteto/iss-850

refs #850 Replace HeaderMenu with typescript

spec/renderer/integration/store/TimelineSpace/HeaderMenu.spec.ts

@@ -2,7 +2,7 @@ import { Response, List } from 'megalodon'
 import mockedMegalodon from '~/spec/mock/megalodon'
 import { createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
-import HeaderMenu from '~/src/renderer/store/TimelineSpace/HeaderMenu'
+import HeaderMenu, { HeaderMenuState } from '~/src/renderer/store/TimelineSpace/HeaderMenu'
 
 jest.mock('megalodon')
 
@@ -11,7 +11,7 @@ const list: List = {
   title: 'example'
 }
 
-const state = () => {
+const state = (): HeaderMenuState => {
   return {
     title: 'Home',
     reload: false

spec/renderer/unit/store/TimelineSpace/HeaderMenu.spec.ts

@@ -1,8 +1,8 @@
-import HeaderMenu from '@/store/TimelineSpace/HeaderMenu'
+import HeaderMenu, { HeaderMenuState, MUTATION_TYPES } from '@/store/TimelineSpace/HeaderMenu'
 
 describe('TimelineSpace/HeaderMenu', () => {
   describe('mutations', () => {
-    let state
+    let state: HeaderMenuState
     beforeEach(() => {
       state = {
         title: 'Home',
@@ -11,7 +11,7 @@ describe('TimelineSpace/HeaderMenu', () => {
     })
     describe('changeReload', () => {
       it('should be changed', () => {
-        HeaderMenu.mutations.changeReload(state, true)
+        HeaderMenu.mutations![MUTATION_TYPES.CHANGE_RELOAD](state, true)
         expect(state.reload).toEqual(true)
       })
     })

src/renderer/store/TimelineSpace/HeaderMenu.js

@@ -1,32 +0,0 @@
-import Mastodon from 'megalodon'
-
-const HeaderMenu = {
-  namespaced: true,
-  state: {
-    title: 'Home',
-    reload: false
-  },
-  mutations: {
-    updateTitle (state, title) {
-      state.title = title
-    },
-    changeReload (state, value) {
-      state.reload = value
-    }
-  },
-  actions: {
-    fetchList ({ commit, rootState }, listID) {
-      const client = new Mastodon(
-        rootState.TimelineSpace.account.accessToken,
-        rootState.TimelineSpace.account.baseURL + '/api/v1'
-      )
-      return client.get(`/lists/${listID}`)
-        .then(res => {
-          commit('updateTitle', `#${res.data.title}`)
-          return res.data
-        })
-    }
-  }
-}
-
-export default HeaderMenu

src/renderer/store/TimelineSpace/HeaderMenu.ts

@@ -0,0 +1,48 @@
+import Mastodon, { List, Response } from 'megalodon'
+import { Module, MutationTree, ActionTree } from 'vuex'
+
+export interface HeaderMenuState {
+  title: string,
+  reload: boolean
+}
+
+const state = (): HeaderMenuState => ({
+  title: 'Home',
+  reload: false
+})
+
+export const MUTATION_TYPES = {
+  UPDATE_TITLE: 'updateTitle',
+  CHANGE_RELOAD: 'changeReload'
+}
+
+const mutations: MutationTree<HeaderMenuState> = {
+  [MUTATION_TYPES.UPDATE_TITLE]: (state, title: string) => {
+    state.title = title
+  },
+  [MUTATION_TYPES.CHANGE_RELOAD]: (state, value: boolean) => {
+    state.reload = value
+  }
+}
+
+// TODO: use type of rootState
+const actions: ActionTree<HeaderMenuState, any> = {
+  fetchList: async ({ commit, rootState }, listID: number): Promise<List> => {
+    const client = new Mastodon(
+      rootState.TimelineSpace.account.accessToken,
+      rootState.TimelineSpace.account.baseURL + '/api/v1'
+    )
+    const res: Response<List> = await client.get<List>(`/lists/${listID}`)
+    commit(MUTATION_TYPES.UPDATE_TITLE, `#${res.data.title}`)
+    return res.data
+  }
+}
+
+const HeaderMenu: Module<HeaderMenuState, any> = {
+  namespaced: true,
+  state: state,
+  mutations: mutations,
+  actions: actions
+}
+
+export default HeaderMenu

src/renderer/store/TimelineSpace/SideMenu.ts

@@ -16,7 +16,7 @@ export interface SideMenuState {
   collapse: boolean
 }
 
-const state: SideMenuState = {
+const state = (): SideMenuState => ({
   unreadHomeTimeline: false,
   unreadNotifications: false,
   unreadMentions: false,
@@ -26,7 +26,7 @@ const state: SideMenuState = {
   lists: [],
   tags: [],
   collapse: false
-}
+})
 
 export const MUTATION_TYPES = {
   CHANGE_UNREAD_HOME_TIMELINE: 'changeUnreadHomeTimeline',