Merge pull request #878 from h3poteto/iss-850

refs #850 Replace Lists with typescript

src/renderer/components/TimelineSpace/Contents/Lists/Show.vue

@@ -157,7 +157,7 @@ export default {
       if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementsByName('list')[0].clientHeight - 10) && !this.lazyloading) {
         this.$store.dispatch('TimelineSpace/Contents/Lists/Show/lazyFetchTimeline', {
           list_id: this.list_id,
-          last: this.timeline[this.timeline.length - 1]
+          status: this.timeline[this.timeline.length - 1]
         })
       }
       // for unread control

src/renderer/store/TimelineSpace/Contents/Lists.js

@@ -1,12 +0,0 @@
-import Index from './Lists/Index'
-import Show from './Lists/Show'
-import Edit from './Lists/Edit'
-
-export default {
-  namespaced: true,
-  modules: {
-    Index,
-    Show,
-    Edit
-  }
-}

src/renderer/store/TimelineSpace/Contents/Lists.ts

@@ -0,0 +1,25 @@
+import Index, { IndexState } from './Lists/Index'
+import Show, { ShowState } from './Lists/Show'
+import Edit, { EditState } from './Lists/Edit'
+import { Module } from 'vuex'
+import { RootState } from '@/store'
+
+export interface ListsState {}
+
+export interface ListsModuleState extends ListsState {
+  Index: IndexState,
+  Show: ShowState,
+  Edit: EditState
+}
+
+const state = (): ListsState => ({})
+
+export default {
+  namespaced: true,
+  state: state,
+  modules: {
+    Index,
+    Show,
+    Edit
+  }
+} as Module<ListsState, RootState>

src/renderer/store/TimelineSpace/Contents/Lists/Edit.js

@@ -1,36 +0,0 @@
-import Mastodon from 'megalodon'
-
-export default {
-  namespaced: true,
-  state: {
-    members: []
-  },
-  mutations: {
-    changeMembers (state, members) {
-      state.members = members
-    }
-  },
-  actions: {
-    fetchMembers ({ commit, rootState }, listId) {
-      const client = new Mastodon(
-        rootState.TimelineSpace.account.accessToken,
-        rootState.TimelineSpace.account.baseURL + '/api/v1'
-      )
-      return client.get(`/lists/${listId}/accounts`, {
-        limit: 0
-      })
-        .then((res) => {
-          commit('changeMembers', res.data)
-        })
-    },
-    removeAccount ({ rootState }, obj) {
-      const client = new Mastodon(
-        rootState.TimelineSpace.account.accessToken,
-        rootState.TimelineSpace.account.baseURL + '/api/v1'
-      )
-      return client.del(`/lists/${obj.listId}/accounts`, {
-        account_ids: [obj.account.id]
-      })
-    }
-  }
-}

src/renderer/store/TimelineSpace/Contents/Lists/Edit.ts

@@ -0,0 +1,52 @@
+import Mastodon, { Account, Response } from 'megalodon'
+import { Module, MutationTree, ActionTree } from 'vuex'
+import { RootState } from '@/store'
+import { RemoveAccountFromList } from '~/src/types/remove_account_from_list'
+
+export interface EditState {
+  members: Array<Account>
+}
+
+const state = (): EditState => ({
+  members: []
+})
+
+export const MUTATION_TYPES = {
+  CHANGE_MEMBERS: 'changeMembers'
+}
+
+const mutations: MutationTree<EditState> = {
+  [MUTATION_TYPES.CHANGE_MEMBERS]: (state, members: Array<Account>) => {
+    state.members = members
+  }
+}
+
+const actions: ActionTree<EditState, RootState> = {
+  fetchMembers: async ({ commit, rootState }, listId: number): 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>>(`/lists/${listId}/accounts`, {
+      limit: 0
+    })
+    commit(MUTATION_TYPES.CHANGE_MEMBERS, res.data)
+    return res.data
+  },
+  removeAccount: async ({ rootState }, remove: RemoveAccountFromList): Promise<{}> => {
+    const client = new Mastodon(
+      rootState.TimelineSpace.account.accessToken!,
+      rootState.TimelineSpace.account.baseURL + '/api/v1'
+    )
+    return client.del<{}>(`/lists/${remove.listId}/accounts`, {
+      account_ids: [remove.account.id]
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state: state,
+  mutations: mutations,
+  actions: actions
+} as Module<EditState, RootState>

src/renderer/store/TimelineSpace/Contents/Lists/Index.js

@@ -1,35 +0,0 @@
-import Mastodon from 'megalodon'
-
-export default {
-  namespaced: true,
-  state: {
-    lists: []
-  },
-  mutations: {
-    changeLists (state, lists) {
-      state.lists = lists
-    }
-  },
-  actions: {
-    fetchLists ({ commit, rootState }) {
-      const client = new Mastodon(
-        rootState.TimelineSpace.account.accessToken,
-        rootState.TimelineSpace.account.baseURL + '/api/v1'
-      )
-      return client.get('/lists')
-        .then((res) => {
-          commit('changeLists', res.data)
-          return res.data
-        })
-    },
-    createList ({ rootState }, title) {
-      const client = new Mastodon(
-        rootState.TimelineSpace.account.accessToken,
-        rootState.TimelineSpace.account.baseURL + '/api/v1'
-      )
-      return client.post('/lists', {
-        title: title
-      })
-    }
-  }
-}

src/renderer/store/TimelineSpace/Contents/Lists/Index.ts

@@ -0,0 +1,50 @@
+import Mastodon, { List, Response } from 'megalodon'
+import { Module, MutationTree, ActionTree } from 'vuex'
+import { RootState } from '@/store'
+
+export interface IndexState {
+  lists: Array<List>
+}
+
+const state = (): IndexState => ({
+  lists: []
+})
+
+export const MUTATION_TYPES = {
+  CHANGE_LISTS: 'changeLists'
+}
+
+const mutations: MutationTree<IndexState> = {
+  [MUTATION_TYPES.CHANGE_LISTS]: (state, lists: Array<List>) => {
+    state.lists = lists
+  }
+}
+
+const actions: ActionTree<IndexState, RootState> = {
+  fetchLists: async ({ commit, rootState }): Promise<Array<List>> => {
+    const client = new Mastodon(
+      rootState.TimelineSpace.account.accessToken!,
+      rootState.TimelineSpace.account.baseURL + '/api/v1'
+    )
+    const res: Response<Array<List>> = await client.get<Array<List>>('/lists')
+    commit(MUTATION_TYPES.CHANGE_LISTS, res.data)
+    return res.data
+  },
+  createList: async ({ rootState }, title: string): Promise<List> => {
+    const client = new Mastodon(
+      rootState.TimelineSpace.account.accessToken!,
+      rootState.TimelineSpace.account.baseURL + '/api/v1'
+    )
+    const res: Response<List> = await client.post<List>('/lists', {
+      title: title
+    })
+    return res.data
+  }
+}
+
+export default {
+  namespaced: true,
+  state: state,
+  mutations: mutations,
+  actions: actions
+} as Module<IndexState, RootState>

src/renderer/store/TimelineSpace/Contents/Lists/Show.js

@@ -1,134 +0,0 @@
-import { ipcRenderer } from 'electron'
-import Mastodon from 'megalodon'
-
-const Show = {
-  namespaced: true,
-  state: {
-    timeline: [],
-    unreadTimeline: [],
-    lazyLoading: false,
-    heading: true,
-    filter: ''
-  },
-  mutations: {
-    changeHeading (state, value) {
-      state.heading = value
-    },
-    appendTimeline (state, update) {
-      if (state.heading) {
-        state.timeline = [update].concat(state.timeline)
-      } else {
-        state.unreadTimeline = [update].concat(state.unreadTimeline)
-      }
-    },
-    updateTimeline (state, timeline) {
-      state.timeline = timeline
-    },
-    mergeTimeline (state) {
-      state.timeline = state.unreadTimeline.slice(0, 80).concat(state.timeline)
-      state.unreadTimeline = []
-    },
-    insertTimeline (state, messages) {
-      state.timeline = state.timeline.concat(messages)
-    },
-    archiveTimeline (state) {
-      state.timeline = state.timeline.slice(0, 40)
-    },
-    clearTimeline (state) {
-      state.timeline = []
-      state.unreadTimeline = []
-    },
-    updateToot (state, message) {
-      state.timeline = state.timeline.map((toot) => {
-        if (toot.id === message.id) {
-          return message
-        } else if (toot.reblog !== null && toot.reblog.id === message.id) {
-          // When user reblog/favourite a reblogged toot, target message is a original toot.
-          // So, a message which is received now is original toot.
-          const reblog = {
-            reblog: message
-          }
-          return Object.assign(toot, reblog)
-        } else {
-          return toot
-        }
-      })
-    },
-    deleteToot (state, message) {
-      state.timeline = state.timeline.filter((toot) => {
-        if (toot.reblog !== null && toot.reblog.id === message.id) {
-          return false
-        } else {
-          return toot.id !== message.id
-        }
-      })
-    },
-    changeLazyLoading (state, value) {
-      state.lazyLoading = value
-    },
-    changeFilter (state, filter) {
-      state.filter = filter
-    }
-  },
-  actions: {
-    fetchTimeline ({ commit, rootState }, listID) {
-      const client = new Mastodon(
-        rootState.TimelineSpace.account.accessToken,
-        rootState.TimelineSpace.account.baseURL + '/api/v1'
-      )
-      return client.get(`/timelines/list/${listID}`, { limit: 40 })
-        .then(res => {
-          commit('updateTimeline', res.data)
-          return res.data
-        })
-    },
-    startStreaming ({ state, commit, rootState }, listID) {
-      ipcRenderer.on('update-start-list-streaming', (event, update) => {
-        commit('appendTimeline', update)
-        if (state.heading && Math.random() > 0.8) {
-          commit('archiveTimeline')
-        }
-      })
-      return new Promise((resolve, reject) => {
-        ipcRenderer.send('start-list-streaming', {
-          listID: listID,
-          account: rootState.TimelineSpace.account,
-          useWebsocket: rootState.TimelineSpace.useWebsocket
-        })
-        ipcRenderer.once('error-start-list-streaming', (event, err) => {
-          reject(err)
-        })
-      })
-    },
-    stopStreaming () {
-      return new Promise(resolve => {
-        ipcRenderer.removeAllListeners('error-start-list-streaming')
-        ipcRenderer.removeAllListeners('update-start-list-streaming')
-        ipcRenderer.send('stop-list-streaming')
-        resolve()
-      })
-    },
-    lazyFetchTimeline ({ state, commit, rootState }, obj) {
-      if (state.lazyLoading) {
-        return Promise.resolve(null)
-      }
-      commit('changeLazyLoading', true)
-      const client = new Mastodon(
-        rootState.TimelineSpace.account.accessToken,
-        rootState.TimelineSpace.account.baseURL + '/api/v1'
-      )
-      return client.get(`/timelines/list/${obj.list_id}`, { max_id: obj.last.id, limit: 40 })
-        .then(res => {
-          commit('insertTimeline', res.data)
-          commit('changeLazyLoading', false)
-          return res.data
-        })
-        .catch(err => {
-          commit('changeLazyLoading', false)
-          throw err
-        })
-    }
-  }
-}
-
-export default Show

src/renderer/store/TimelineSpace/Contents/Lists/Show.ts

@@ -0,0 +1,160 @@
+import { ipcRenderer } from 'electron'
+import Mastodon, { Status, Response } from 'megalodon'
+import { Module, MutationTree, ActionTree } from 'vuex'
+import { RootState } from '@/store'
+import { LoadPositionWithList } from '~src/types/load_position'
+
+export interface ShowState {
+  timeline: Array<Status>,
+  unreadTimeline: Array<Status>,
+  lazyLoading: boolean,
+  heading: boolean,
+  filter: string
+}
+
+const state = (): ShowState => ({
+  timeline: [],
+  unreadTimeline: [],
+  lazyLoading: false,
+  heading: true,
+  filter: ''
+})
+
+export const MUTATION_TYPES = {
+  CHANGE_HEADING: 'changeHeading',
+  APPEND_TIMELINE: 'appendTimeline',
+  UPDATE_TIMELINE: 'updateTimeline',
+  MERGE_TIMELINE: 'mergeTimeline',
+  INSERT_TIMELINE: 'insertTimeline',
+  ARCHIVE_TIMELINE: 'archiveTimeline',
+  CLEAR_TIMELINE: 'clearTimeline',
+  UPDATE_TOOT: 'updateToot',
+  DELETE_TOOT: 'deleteToot',
+  CHANGE_LAZY_LOADING: 'changeLazyLoading',
+  CHANGE_FILTER: 'changeFilter'
+}
+
+const mutations: MutationTree<ShowState> = {
+  [MUTATION_TYPES.CHANGE_HEADING]: (state, value: boolean) => {
+    state.heading = value
+  },
+  [MUTATION_TYPES.APPEND_TIMELINE]: (state, update: Status) => {
+    if (state.heading) {
+      state.timeline = [update].concat(state.timeline)
+    } else {
+      state.unreadTimeline = [update].concat(state.unreadTimeline)
+    }
+  },
+  [MUTATION_TYPES.UPDATE_TIMELINE]: (state, timeline: Array<Status>) => {
+    state.timeline = timeline
+  },
+  [MUTATION_TYPES.MERGE_TIMELINE]: (state) => {
+    state.timeline = state.unreadTimeline.slice(0, 80).concat(state.timeline)
+    state.unreadTimeline = []
+  },
+  [MUTATION_TYPES.INSERT_TIMELINE]: (state, messages: Array<Status>) => {
+    state.timeline = state.timeline.concat(messages)
+  },
+  [MUTATION_TYPES.ARCHIVE_TIMELINE]: (state) => {
+    state.timeline = state.timeline.slice(0, 40)
+  },
+  [MUTATION_TYPES.CLEAR_TIMELINE]: (state) => {
+    state.timeline = []
+    state.unreadTimeline = []
+  },
+  [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Status) => {
+    state.timeline = state.timeline.map((toot) => {
+      if (toot.id === message.id) {
+        return message
+      } else if (toot.reblog !== null && toot.reblog.id === message.id) {
+        // When user reblog/favourite a reblogged toot, target message is a original toot.
+        // So, a message which is received now is original toot.
+        const reblog = {
+          reblog: message
+        }
+        return Object.assign(toot, reblog)
+      } else {
+        return toot
+      }
+    })
+  },
+  [MUTATION_TYPES.DELETE_TOOT]: (state, message: Status) => {
+    state.timeline = state.timeline.filter((toot) => {
+      if (toot.reblog !== null && toot.reblog.id === message.id) {
+        return false
+      } else {
+        return toot.id !== message.id
+      }
+    })
+  },
+  [MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
+    state.lazyLoading = value
+  },
+  [MUTATION_TYPES.CHANGE_FILTER]: (state, filter: string) => {
+    state.filter = filter
+  }
+}
+
+const actions: ActionTree<ShowState, RootState> = {
+  fetchTimeline: async ({ commit, rootState }, listID: number): Promise<Array<Status>> => {
+    const client = new Mastodon(
+      rootState.TimelineSpace.account.accessToken!,
+      rootState.TimelineSpace.account.baseURL + '/api/v1'
+    )
+    const res: Response<Array<Status>> = await client.get<Array<Status>>(`/timelines/list/${listID}`, { limit: 40 })
+    commit(MUTATION_TYPES.UPDATE_TIMELINE, res.data)
+    return res.data
+  },
+  startStreaming: ({ state, commit, rootState }, listID: number) => {
+    ipcRenderer.on('update-start-list-streaming', (_, update: Status) => {
+      commit(MUTATION_TYPES.APPEND_TIMELINE, update)
+      if (state.heading && Math.random() > 0.8) {
+        commit(MUTATION_TYPES.ARCHIVE_TIMELINE)
+      }
+    })
+    // @ts-ignore
+    return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
+      ipcRenderer.send('start-list-streaming', {
+        listID: listID,
+        account: rootState.TimelineSpace.account,
+        useWebsocket: rootState.TimelineSpace.useWebsocket
+      })
+      ipcRenderer.once('error-start-list-streaming', (_, err: Error) => {
+        reject(err)
+      })
+    })
+  },
+  stopStreaming: () => {
+    return new Promise(resolve => {
+      ipcRenderer.removeAllListeners('error-start-list-streaming')
+      ipcRenderer.removeAllListeners('update-start-list-streaming')
+      ipcRenderer.send('stop-list-streaming')
+      resolve()
+    })
+  },
+  lazyFetchTimeline: async ({ state, commit, rootState }, loadPosition: LoadPositionWithList): Promise<Array<Status> | null> => {
+    if (state.lazyLoading) {
+      return Promise.resolve(null)
+    }
+    commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, true)
+    const client = new Mastodon(
+      rootState.TimelineSpace.account.accessToken!,
+      rootState.TimelineSpace.account.baseURL + '/api/v1'
+    )
+    return client.get<Array<Status>>(`/timelines/list/${loadPosition.list_id}`, { max_id: loadPosition.status.id, limit: 40 })
+      .then(res => {
+        commit(MUTATION_TYPES.INSERT_TIMELINE, res.data)
+        return res.data
+      })
+      .finally(() => {
+        commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, false)
+      })
+  }
+}
+
+export default {
+  namespaced: true,
+  state: state,
+  mutations: mutations,
+  actions: actions
+} as Module<ShowState, RootState>

src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.ts

@@ -1,7 +1,7 @@
 import Mastodon, { Status, Response } from 'megalodon'
 import { Module, MutationTree, ActionTree } from 'vuex'
 import { RootState } from '@/store'
-import { LoadPosition } from '~src/types/load_position'
+import { LoadPositionWithAccount } from '~src/types/load_position'
 
 export interface TimelineState {
   timeline: Array<Status>,
@@ -96,7 +96,7 @@ const actions: ActionTree<TimelineState, RootState> = {
     commit(MUTATION_TYPES.UPDATE_TIMELINE, res.data)
     return res.data
   },
-  lazyFetchTimeline: async ({ state, commit, rootState }, loadPosition: LoadPosition): Promise<null> => {
+  lazyFetchTimeline: async ({ state, commit, rootState }, loadPosition: LoadPositionWithAccount): Promise<null> => {
     if (state.lazyLoading) {
       return Promise.resolve(null)
     }

src/types/load_position.ts

@@ -1,6 +1,13 @@
 import { Status, Account } from 'megalodon'
 
 export interface LoadPosition {
-  status: Status,
+  status: Status
+}
+
+export interface LoadPositionWithAccount extends LoadPosition {
   account: Account
 }
+
+export interface LoadPositionWithList extends LoadPosition {
+  list_id: number
+}

src/types/remove_account_from_list.ts

@@ -0,0 +1,6 @@
+import { Account } from 'megalodon'
+
+export interface RemoveAccountFromList {
+  account: Account,
+  listId: number
+}