refs #850 Replace Mentions with typescript

This commit is contained in:
AkiraFukushima 2019-04-14 17:12:20 +09:00
parent 7623ef757f
commit 10236e1192
5 changed files with 243 additions and 141 deletions

View File

@ -169,13 +169,6 @@ describe('Mentions', () => {
}) })
describe('lazyFetchMentions', () => { 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', () => { describe('loading', () => {
beforeAll(() => { beforeAll(() => {
state = () => { state = () => {

View File

@ -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('TimelineSpace/Contents/Mentions', () => {
describe('mutations', () => { describe('mutations', () => {
let state let state: MentionsState
beforeEach(() => { beforeEach(() => {
state = { state = {
lazyLoading: false, lazyLoading: false,
@ -19,14 +111,14 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = { state = {
lazyLoading: false, lazyLoading: false,
heading: true, heading: true,
mentions: [5, 4, 3, 2, 1], mentions: [notification1],
unreadMentions: [], unreadMentions: [],
filter: '' filter: ''
} }
}) })
it('should update mentions', () => { 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([]) expect(state.unreadMentions).toEqual([])
}) })
}) })
@ -35,15 +127,15 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = { state = {
lazyLoading: false, lazyLoading: false,
heading: false, heading: false,
mentions: [5, 4, 3, 2, 1], mentions: [notification1],
unreadMentions: [], unreadMentions: [],
filter: '' filter: ''
} }
}) })
it('should update mentions', () => { 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 = { state = {
lazyLoading: false, lazyLoading: false,
heading: false, heading: false,
mentions: [5, 4, 3, 2, 1], mentions: [notification1],
unreadMentions: [8, 7, 6], unreadMentions: [notification2],
filter: '' filter: ''
} }
}) })
it('should be merged', () => { 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([]) expect(state.unreadMentions).toEqual([])
}) })
}) })
@ -70,14 +162,14 @@ describe('TimelineSpace/Contents/Mentions', () => {
state = { state = {
lazyLoading: false, lazyLoading: false,
heading: false, heading: false,
mentions: [5, 4, 3, 2, 1], mentions: [notification2],
unreadMentions: [], unreadMentions: [],
filter: '' filter: ''
} }
}) })
it('should be inserted', () => { 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 = { state = {
lazyLoading: false, lazyLoading: false,
heading: 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: [], unreadMentions: [],
filter: '' filter: ''
} }
}) })
it('should be updated', () => { 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 } }
]
)
}) })
}) })
}) })

View File

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

View File

@ -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

View File

@ -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