refs #850 Replace Mentions with typescript

spec/renderer/integration/store/TimelineSpace/Contents/Mentions.spec.ts

@@ -169,13 +169,6 @@ describe('Mentions', () => {
   })
 
   describe('lazyFetchMentions', () => {
-    describe('last is null', () => {
-      it('should not be updated', async () => {
-        const result = await store.dispatch('Mentions/lazyFetchMentions', null)
-        expect(result).toEqual(null)
-      })
-    })
-
     describe('loading', () => {
       beforeAll(() => {
         state = () => {

spec/renderer/unit/store/TimelineSpace/Contents/Mentions.spec.ts

@@ -1,8 +1,100 @@
-import Mentions from '@/store/TimelineSpace/Contents/Mentions'
+import { Account, Notification, Status, Application } from 'megalodon'
+import Mentions, { MentionsState, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Mentions'
+
+const account1: Account = {
+  id: 1,
+  username: 'h3poteto',
+  acct: 'h3poteto@pleroma.io',
+  display_name: 'h3poteto',
+  locked: false,
+  created_at: '2019-03-26T21:30:32',
+  followers_count: 10,
+  following_count: 10,
+  statuses_count: 100,
+  note: 'engineer',
+  url: 'https://pleroma.io',
+  avatar: '',
+  avatar_static: '',
+  header: '',
+  header_static: '',
+  emojis: [],
+  moved: null,
+  fields: null,
+  bot: false
+}
+
+const account2: Account = {
+  id: 2,
+  username: 'h3poteto',
+  acct: 'h3poteto@mstdn.io',
+  display_name: 'h3poteto',
+  locked: false,
+  created_at: '2019-03-26T21:30:32',
+  followers_count: 10,
+  following_count: 10,
+  statuses_count: 100,
+  note: 'engineer',
+  url: 'https://mstdn.io',
+  avatar: '',
+  avatar_static: '',
+  header: '',
+  header_static: '',
+  emojis: [],
+  moved: null,
+  fields: null,
+  bot: false
+}
+
+const status: Status = {
+  id: 1,
+  uri: 'http://example.com',
+  url: 'http://example.com',
+  account: account1,
+  in_reply_to_id: null,
+  in_reply_to_account_id: null,
+  reblog: null,
+  content: 'hoge',
+  created_at: '2019-03-26T21:40:32',
+  emojis: [],
+  replies_count: 0,
+  reblogs_count: 0,
+  favourites_count: 0,
+  reblogged: null,
+  favourited: null,
+  muted: null,
+  sensitive: false,
+  spoiler_text: '',
+  visibility: 'public',
+  media_attachments: [],
+  mentions: [],
+  tags: [],
+  card: null,
+  application: {
+    name: 'Web'
+  } as Application,
+  language: null,
+  pinned: null
+}
+
+const notification1: Notification = {
+  id: 1,
+  account: account2,
+  status: status,
+  type: 'favourite',
+  created_at: '2019-04-01T17:01:32'
+}
+
+const notification2: Notification = {
+  id: 2,
+  account: account2,
+  status: status,
+  type: 'reblog',
+  created_at: '2019-04-01T17:01:32'
+}
 
 describe('TimelineSpace/Contents/Mentions', () => {
   describe('mutations', () => {
-    let state
+    let state: MentionsState
     beforeEach(() => {
       state = {
         lazyLoading: false,
@@ -19,14 +111,14 @@ describe('TimelineSpace/Contents/Mentions', () => {
           state = {
             lazyLoading: false,
             heading: true,
-            mentions: [5, 4, 3, 2, 1],
+            mentions: [notification1],
             unreadMentions: [],
             filter: ''
           }
         })
         it('should update mentions', () => {
-          Mentions.mutations.appendMentions(state, 6)
+          Mentions.mutations![MUTATION_TYPES.APPEND_MENTIONS](state, notification2)
-          expect(state.mentions).toEqual([6, 5, 4, 3, 2, 1])
+          expect(state.mentions).toEqual([notification2, notification1])
           expect(state.unreadMentions).toEqual([])
         })
       })
@@ -35,15 +127,15 @@ describe('TimelineSpace/Contents/Mentions', () => {
           state = {
             lazyLoading: false,
             heading: false,
-            mentions: [5, 4, 3, 2, 1],
+            mentions: [notification1],
             unreadMentions: [],
             filter: ''
           }
         })
         it('should update mentions', () => {
-          Mentions.mutations.appendMentions(state, 6)
+          Mentions.mutations![MUTATION_TYPES.APPEND_MENTIONS](state, notification2)
-          expect(state.mentions).toEqual([5, 4, 3, 2, 1])
+          expect(state.mentions).toEqual([notification1])
-          expect(state.unreadMentions).toEqual([6])
+          expect(state.unreadMentions).toEqual([notification2])
         })
       })
     })
@@ -53,14 +145,14 @@ describe('TimelineSpace/Contents/Mentions', () => {
         state = {
           lazyLoading: false,
           heading: false,
-          mentions: [5, 4, 3, 2, 1],
+          mentions: [notification1],
-          unreadMentions: [8, 7, 6],
+          unreadMentions: [notification2],
           filter: ''
         }
       })
       it('should be merged', () => {
-        Mentions.mutations.mergeMentions(state)
+        Mentions.mutations![MUTATION_TYPES.MERGE_MENTIONS](state, null)
-        expect(state.mentions).toEqual([8, 7, 6, 5, 4, 3, 2, 1])
+        expect(state.mentions).toEqual([notification2, notification1])
         expect(state.unreadMentions).toEqual([])
       })
     })
@@ -70,14 +162,14 @@ describe('TimelineSpace/Contents/Mentions', () => {
         state = {
           lazyLoading: false,
           heading: false,
-          mentions: [5, 4, 3, 2, 1],
+          mentions: [notification2],
           unreadMentions: [],
           filter: ''
         }
       })
       it('should be inserted', () => {
-        Mentions.mutations.insertMentions(state, [-1, -2, -3, -4])
+        Mentions.mutations![MUTATION_TYPES.INSERT_MENTIONS](state, [notification1])
-        expect(state.mentions).toEqual([5, 4, 3, 2, 1, -1, -2, -3, -4])
+        expect(state.mentions).toEqual([notification2, notification1])
       })
     })
 
@@ -86,28 +178,18 @@ describe('TimelineSpace/Contents/Mentions', () => {
         state = {
           lazyLoading: false,
           heading: false,
-          mentions: [
+          mentions: [notification2, notification1],
-            { type: 'mention', status: { id: 20, favourited: false } },
-            { type: 'favourite', status: { id: 19, favourited: false } },
-            { type: 'reblog', status: { id: 18, favourited: false } },
-            { type: 'follow', status: { id: 17, favourited: false } },
-            { type: 'mention', status: { id: 16, favourited: false } }
-          ],
           unreadMentions: [],
           filter: ''
         }
       })
       it('should be updated', () => {
-        Mentions.mutations.updateToot(state, { id: 20, favourited: true })
+        const favourited: Status = Object.assign(status, {
-        expect(state.mentions).toEqual(
+          favourited: true
-          [
+        })
-            { type: 'mention', status: { id: 20, favourited: true } },
+        Mentions.mutations![MUTATION_TYPES.UPDATE_TOOT](state, favourited)
-            { type: 'favourite', status: { id: 19, favourited: false } },
+        expect(state.mentions[0].status!.favourited).toEqual(true)
-            { type: 'reblog', status: { id: 18, favourited: false } },
+        expect(state.mentions[1].status!.favourited).toEqual(true)
-            { type: 'follow', status: { id: 17, favourited: false } },
-            { type: 'mention', status: { id: 16, favourited: false } }
-          ]
-        )
       })
     })
   })

src/renderer/store/TimelineSpace/Contents.ts

@@ -8,7 +8,7 @@ import Search from './Contents/Search'
 import Lists from './Contents/Lists'
 import Hashtag from './Contents/Hashtag'
 import DirectMessages from './Contents/DirectMessages'
-import Mentions from './Contents/Mentions'
+import Mentions, { MentionsState } from './Contents/Mentions'
 import { Module } from 'vuex'
 import { RootState } from '@/store'
 
@@ -18,6 +18,7 @@ export interface ContentsModuleState extends ContentsState {
   SideBar: SideBarModuleState,
   Home: HomeState,
   Notifications: NotificationsState,
+  Mentions: MentionsState,
   Local: LocalState,
   Public: PublicState
 }

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

@@ -1,100 +0,0 @@
-import Mastodon from 'megalodon'
-
-const Mentions = {
-  namespaced: true,
-  state: {
-    lazyLoading: false,
-    heading: true,
-    mentions: [],
-    unreadMentions: [],
-    filter: ''
-  },
-  mutations: {
-    changeLazyLoading (state, value) {
-      state.lazyLoading = value
-    },
-    changeHeading (state, value) {
-      state.heading = value
-    },
-    appendMentions (state, update) {
-      if (state.heading) {
-        state.mentions = [update].concat(state.mentions)
-      } else {
-        state.unreadMentions = [update].concat(state.unreadMentions)
-      }
-    },
-    updateMentions (state, messages) {
-      state.mentions = messages
-    },
-    mergeMentions (state) {
-      state.mentions = state.unreadMentions.slice(0, 80).concat(state.mentions)
-      state.unreadMentions = []
-    },
-    insertMentions (state, messages) {
-      state.mentions = state.mentions.concat(messages)
-    },
-    archiveMentions (state) {
-      state.mentions = state.mentions.slice(0, 40)
-    },
-    clearMentions (state) {
-      state.mentions = []
-      state.unreadMentions = []
-    },
-    updateToot (state, message) {
-      state.mentions = state.mentions.map((mention) => {
-        if (mention.type === 'mention' && mention.status.id === message.id) {
-          const status = {
-            status: message
-          }
-          return Object.assign(mention, status)
-        } else {
-          return mention
-        }
-      })
-    },
-    changeFilter (state, filter) {
-      state.filter = filter
-    }
-  },
-  actions: {
-    fetchMentions ({ commit, rootState }) {
-      const client = new Mastodon(
-        rootState.TimelineSpace.account.accessToken,
-        rootState.TimelineSpace.account.baseURL + '/api/v1'
-      )
-      return client.get('/notifications', { limit: 30, exclude_types: ['follow', 'favourite', 'reblog'] })
-        .then(res => {
-          commit('updateMentions', res.data)
-          return res.data
-        })
-    },
-    lazyFetchMentions ({ state, commit, rootState }, last) {
-      if (last === undefined || last === null) {
-        return Promise.resolve(null)
-      }
-      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('/notifications', { max_id: last.id, limit: 30, exclude_types: ['follow', 'favourite', 'reblog'] })
-        .then(res => {
-          commit('insertMentions', res.data)
-          return res.data
-        })
-        .finally(() => {
-          commit('changeLazyLoading', false)
-        })
-    }
-  },
-  getters: {
-    mentions (state) {
-      return state.mentions.filter(mention => mention.type === 'mention')
-    }
-  }
-}
-
-export default Mentions

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

@@ -0,0 +1,126 @@
+import Mastodon, { Notification, Response } from 'megalodon'
+import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
+import { RootState } from '@/store'
+
+export interface MentionsState {
+  lazyLoading: boolean,
+  heading: boolean,
+  mentions: Array<Notification>,
+  unreadMentions: Array<Notification>,
+  filter: string
+}
+
+const state = (): MentionsState => ({
+  lazyLoading: false,
+  heading: true,
+  mentions: [],
+  unreadMentions: [],
+  filter: ''
+})
+
+export const MUTATION_TYPES = {
+  CHANGE_LAZY_LOADING: 'changeLazyLoading',
+  CHANGE_HEADING: 'changeHeading',
+  APPEND_MENTIONS: 'appendMentions',
+  UPDATE_MENTIONS: 'updateMentions',
+  MERGE_MENTIONS: 'mergeMentions',
+  INSERT_MENTIONS: 'insertMentions',
+  ARCHIVE_MENTIONS: 'archiveMentions',
+  CLEAR_MENTIONS: 'clearMentions',
+  UPDATE_TOOT: 'updateToot',
+  CHANGE_FILTER: 'changeFilter'
+}
+
+const mutations: MutationTree<MentionsState> = {
+  [MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
+    state.lazyLoading = value
+  },
+  [MUTATION_TYPES.CHANGE_HEADING]: (state, value: boolean) => {
+    state.heading = value
+  },
+  [MUTATION_TYPES.APPEND_MENTIONS]: (state, update: Notification) => {
+    if (state.heading) {
+      state.mentions = [update].concat(state.mentions)
+    } else {
+      state.unreadMentions = [update].concat(state.unreadMentions)
+    }
+  },
+  [MUTATION_TYPES.UPDATE_MENTIONS]: (state, messages: Array<Notification>) => {
+    state.mentions = messages
+  },
+  [MUTATION_TYPES.MERGE_MENTIONS]: (state) => {
+    state.mentions = state.unreadMentions.slice(0, 80).concat(state.mentions)
+    state.unreadMentions = []
+  },
+  [MUTATION_TYPES.INSERT_MENTIONS]: (state, messages: Array<Notification>) => {
+    state.mentions = state.mentions.concat(messages)
+  },
+  [MUTATION_TYPES.ARCHIVE_MENTIONS]: (state) => {
+    state.mentions = state.mentions.slice(0, 40)
+  },
+  [MUTATION_TYPES.CLEAR_MENTIONS]: (state) => {
+    state.mentions = []
+    state.unreadMentions = []
+  },
+  [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Notification) => {
+    state.mentions = state.mentions.map((mention) => {
+      if (mention.status !== null && mention.status.id === message.id) {
+        const status = {
+          status: message
+        }
+        return Object.assign(mention, status)
+      } else {
+        return mention
+      }
+    })
+  },
+  [MUTATION_TYPES.CHANGE_FILTER]: (state, filter: string) => {
+    state.filter = filter
+  }
+}
+
+const actions: ActionTree<MentionsState, RootState> = {
+  fetchMentions: async ({ commit, rootState }): Promise<Array<Notification>> => {
+    const client = new Mastodon(
+      rootState.TimelineSpace.account.accessToken!,
+      rootState.TimelineSpace.account.baseURL + '/api/v1'
+    )
+    const res: Response<Array<Notification>> = await client.get<Array<Notification>>('/notifications', { limit: 30, exclude_types: ['follow', 'favourite', 'reblog'] })
+    commit(MUTATION_TYPES.UPDATE_MENTIONS, res.data)
+    return res.data
+  },
+  lazyFetchMentions: async ({ state, commit, rootState }, lastMention: Notification): Promise<Array<Notification> | 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<Notification>>('/notifications', { max_id: lastMention.id, limit: 30, exclude_types: ['follow', 'favourite', 'reblog'] })
+      .then(res => {
+        commit(MUTATION_TYPES.INSERT_MENTIONS, res.data)
+        return res.data
+      })
+      .finally(() => {
+        commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, false)
+      })
+  }
+}
+
+const getters: GetterTree<MentionsState, RootState> = {
+  mentions: (state) => {
+    return state.mentions.filter(mention => mention.type === 'mention')
+  }
+}
+
+const Mentions: Module<MentionsState, RootState> = {
+  namespaced: true,
+  state: state,
+  mutations: mutations,
+  actions: actions,
+  getters: getters
+}
+
+export default Mentions