Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

[refactor] Remove public timeline store

This commit is contained in:
AkiraFukushima 2023-01-29 21:57:54 +09:00
parent 8e7137c672
commit 5ec2a48571
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
8 changed files with 82 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
View File

@ -11,9 +11,9 @@
:filters="[]"
:account="account.account"
:server="account.server"
v-on:update="updateToot"
v-on:delete="deleteToot"
@selectToot="focusToot(item)"
@update="updateToot"
@delete="deleteToot"
@select-toot="focusToot(item)"
>
</toot>
</DynamicScrollerItem>
@ -132,9 +132,9 @@ export default defineComponent({
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, { status: message, accountId: account.account.id })
}
}
const deleteToot = (message: Entity.Status) => {
const deleteToot = (id: string) => {
if (account.account) {
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, { statusId: message.id, accountId: account.account.id })
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, { statusId: id, accountId: account.account.id })
}
}
const upper = () => {

10
src/renderer/components/TimelineSpace/Contents/Favourites.vue
View File

@ -12,9 +12,9 @@
:filters="[]"
:account="account.account"
:server="account.server"
v-on:update="updateToot"
v-on:delete="deleteToot"
@selectToot="focusToot(item)"
@update="updateToot"
@delete="deleteToot"
@select-toot="focusToot(item)"
>
</toot>
</DynamicScrollerItem>
@ -150,8 +150,8 @@ export default defineComponent({
const updateToot = (message: Entity.Status) => {
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
}
const deleteToot = (message: Entity.Status) => {
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message)
const deleteToot = (id: string) => {
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, id)
}
const reload = async () => {
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)

10
src/renderer/components/TimelineSpace/Contents/Home.vue
View File

@ -17,9 +17,9 @@
:filters="filters"
:account="account.account"
:server="account.server"
v-on:update="updateToot"
v-on:delete="deleteToot"
@selectToot="focusToot(item)"
@update="updateToot"
delete="deleteToot"
@select-toot="focusToot(item)"
>
</toot>
</DynamicScrollerItem>
@ -180,9 +180,9 @@ export default defineComponent({
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, { status: message, accountId: account.account.id })
}
}
const deleteToot = (message: Entity.Status) => {
const deleteToot = (id: string) => {
if (account.account) {
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, { statusId: message.id, accountId: account.account.id })
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, { statusId: id, accountId: account.account.id })
}
}
const fetchTimelineSince = (since_id: string) => {

100
src/renderer/components/TimelineSpace/Contents/Public.vue
View File

@ -1,6 +1,7 @@
<template>
<div id="public">
<DynamicScroller :items="timeline" :min-item-size="86" id="scroller" class="scroller" ref="scroller">
<div style="width: 100%; height: 120px" v-loading="loading" :element-loading-background="backgroundColor" v-if="loading" />
<DynamicScroller :items="statuses" :min-item-size="86" id="scroller" class="scroller" ref="scroller" v-else>
<template #default="{ item, index, active }">
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
<toot
@ -11,9 +12,9 @@
:filters="filters"
:account="account.account"
:server="account.server"
v-on:update="updateToot"
v-on:delete="deleteToot"
@selectToot="focusToot(item)"
@update="updateToot"
@delete="deleteToot"
@select-toot="focusToot(item)"
>
</toot>
</DynamicScrollerItem>
@ -27,13 +28,12 @@ import { computed, defineComponent, onBeforeUpdate, onMounted, onUnmounted, ref,
import { logicAnd } from '@vueuse/math'
import { useMagicKeys, whenever } from '@vueuse/core'
import { ElMessage } from 'element-plus'
import { Entity } from 'megalodon'
import generator, { Entity, MegalodonInterface } from 'megalodon'
import { useI18next } from 'vue3-i18next'
import { useRoute } from 'vue-router'
import { useStore } from '@/store'
import Toot from '@/components/organisms/Toot.vue'
import { MUTATION_TYPES as SIDE_MENU_MUTATION } from '@/store/TimelineSpace/SideMenu'
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Public'
import { LocalAccount } from '~/src/types/localAccount'
import { LocalServer } from '~/src/types/localServer'
import { MyWindow } from '~/src/types/global'
@ -53,23 +53,44 @@ export default defineComponent({
const focusedId = ref<string | null>(null)
const scroller = ref<any>(null)
const lazyLoading = ref(false)
const loading = ref<boolean>(false)
const heading = ref(true)
const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
account: null,
server: null
})
const client = ref<MegalodonInterface | null>(null)
const timeline = computed(() => store.state.TimelineSpace.Contents.Public.timeline[id.value])
const statuses = ref<Array<Entity.Status>>([])
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const filters = computed(() => store.getters[`${space}/filters`])
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
const currentFocusedIndex = computed(() => statuses.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
const shortcutEnabled = computed(() => !modalOpened.value)
const userAgent = computed(() => store.state.App.userAgent)
const backgroundColor = computed(() => store.state.App.theme.background_color)
onMounted(async () => {
const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
account.account = a
account.server = s
client.value = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
loading.value = true
try {
const res = await client.value.getPublicTimeline({ limit: 20 })
statuses.value = res.data
} finally {
loading.value = false
}
win.ipcRenderer.removeAllListeners(`update-public-streamings-${a.id}`)
win.ipcRenderer.on(`update-public-streamings-${a.id}`, (_, update: Entity.Status) => {
statuses.value = [update, ...statuses.value]
})
win.ipcRenderer.removeAllListeners(`delete-public-streamings-${a.id}`)
win.ipcRenderer.on(`delete-public-streamings-${a.id}`, (_, id: string) => {
deleteToot(id)
})
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_PUBLIC_TIMELINE}`, false)
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
@ -96,7 +117,7 @@ export default defineComponent({
})
whenever(logicAnd(j, shortcutEnabled), () => {
if (focusedId.value === null) {
focusedId.value = timeline.value[0].uri + timeline.value[0].id
focusedId.value = statuses.value[0].uri + statuses.value[0].id
} else {
focusNext()
}
@ -108,25 +129,21 @@ export default defineComponent({
const onScroll = (event: Event) => {
if (
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
document.getElementById('scroller')!.scrollHeight - 10 &&
!lazyLoading.value
document.getElementById('scroller')!.scrollHeight - 10
) {
lazyLoading.value = true
store
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, {
statuses: timeline.value[timeline.value.length - 1],
account: account.account,
server: account.server
const lastStatus = statuses.value[statuses.value.length - 1]
client.value
?.getPublicTimeline({ max_id: lastStatus.id, limit: 20 })
.then(res => {
statuses.value = [...statuses.value, ...res.data]
})
.catch(() => {
.catch(err => {
console.error(err)
ElMessage({
message: i18n.t('message.timeline_fetch_error'),
type: 'error'
})
})
.finally(() => {
lazyLoading.value = false
})
}
if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
@ -137,14 +154,25 @@ export default defineComponent({
}
const updateToot = (message: Entity.Status) => {
if (account.account) {
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, { status: message, accountId: account.account.id })
}
statuses.value = statuses.value.map(status => {
if (status.id === message.id) {
return message
} else if (status.reblog && status.reblog.id === message.id) {
return Object.assign(status, {
reblog: message
})
}
return status
})
}
const deleteToot = (message: Entity.Status) => {
if (account.account) {
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, { statusId: message.id, accountId: account.account.id })
}
const deleteToot = (id: string) => {
statuses.value = statuses.value.filter(status => {
if (status.reblog !== null && status.reblog.id === id) {
return false
} else {
return status.id !== id
}
})
}
const upper = () => {
scroller.value.scrollToItem(0)
@ -152,16 +180,16 @@ export default defineComponent({
}
const focusNext = () => {
if (currentFocusedIndex.value === -1) {
focusedId.value = timeline.value[0].uri + timeline.value[0].id
} else if (currentFocusedIndex.value < timeline.value.length) {
focusedId.value = timeline.value[currentFocusedIndex.value + 1].uri + timeline.value[currentFocusedIndex.value + 1].id
focusedId.value = statuses.value[0].uri + statuses.value[0].id
} else if (currentFocusedIndex.value < statuses.value.length) {
focusedId.value = statuses.value[currentFocusedIndex.value + 1].uri + statuses.value[currentFocusedIndex.value + 1].id
}
}
const focusPrev = () => {
if (currentFocusedIndex.value === 0) {
focusedId.value = null
} else if (currentFocusedIndex.value > 0) {
focusedId.value = timeline.value[currentFocusedIndex.value - 1].uri + timeline.value[currentFocusedIndex.value - 1].id
focusedId.value = statuses.value[currentFocusedIndex.value - 1].uri + statuses.value[currentFocusedIndex.value - 1].id
}
}
const focusToot = (message: Entity.Status) => {
@ -169,7 +197,8 @@ export default defineComponent({
}
return {
timeline,
loading,
statuses,
scroller,
focusedId,
modalOpened,
@ -179,7 +208,8 @@ export default defineComponent({
focusToot,
heading,
upper,
account
account,
backgroundColor
}
}
})

4
src/renderer/components/organisms/Toot.vue
View File

@ -633,8 +633,8 @@ export default defineComponent({
const deleteToot = (message: Entity.Status) => {
client.value
?.deleteStatus(message.id)
.then(message => {
ctx.emit('delete', message)
.then(() => {
ctx.emit('delete', message.id)
})
.catch(() => {
ElMessage({

9
src/renderer/store/GlobalHeader.ts
View File

@ -122,7 +122,6 @@ const actions: ActionTree<GlobalHeaderState, RootState> = {
await dispatch('TimelineSpace/Contents/Home/fetchTimeline', { account, server }, { root: true })
await dispatch('TimelineSpace/Contents/Notifications/fetchNotifications', { account, server }, { root: true })
await dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', { account, server }, { root: true })
await dispatch('TimelineSpace/Contents/Public/fetchPublicTimeline', { account, server }, { root: true })
await dispatch('TimelineSpace/Contents/DirectMessages/fetchTimeline', { account, server }, { root: true })
})
},
@ -149,14 +148,6 @@ const actions: ActionTree<GlobalHeaderState, RootState> = {
win.ipcRenderer.on(`delete-local-streamings-${account.id}`, (_, id: string) => {
commit('TimelineSpace/Contents/Local/deleteToot', { statusId: id, accountId: account.id }, { root: true })
})
win.ipcRenderer.removeAllListeners(`update-public-streamings-${account.id}`)
win.ipcRenderer.on(`update-public-streamings-${account.id}`, (_, update: Entity.Status) => {
commit('TimelineSpace/Contents/Public/appendTimeline', { status: update, accountId: account.id }, { root: true })
})
win.ipcRenderer.removeAllListeners(`delete-public-streamings-${account.id}`)
win.ipcRenderer.on(`delete-public-streamings-${account.id}`, (_, id: string) => {
commit('TimelineSpace/Contents/Public/deleteToot', { statusId: id, accountId: account.id }, { root: true })
})
win.ipcRenderer.removeAllListeners(`update-direct-streamings-${account.id}`)
win.ipcRenderer.on(`update-direct-streamings-${account.id}`, (_, update: Entity.Status) => {
commit('TimelineSpace/Contents/DirectMessages/appendTimeline', { status: update, accountId: account.id }, { root: true })

3
src/renderer/store/TimelineSpace/Contents.ts
View File

@ -3,7 +3,6 @@ import Notifications, { NotificationsState } from './Contents/Notifications'
import Favourites, { FavouritesState } from './Contents/Favourites'
import Bookmarks, { BookmarksState } from './Contents/Bookmarks'
import Local, { LocalState } from './Contents/Local'
import Public, { PublicState } from './Contents/Public'
import Search, { SearchModuleState } from './Contents/Search'
import Lists, { ListsModuleState } from './Contents/Lists'
import Hashtag, { HashtagModuleState } from './Contents/Hashtag'
@ -23,7 +22,6 @@ type ContentsModule = {
Favourites: FavouritesState
Bookmarks: BookmarksState
Local: LocalState
Public: PublicState
Search: SearchModuleState
Hashtag: HashtagModuleState
FollowRequests: FollowRequestsState
@ -66,7 +64,6 @@ const Contents: Module<ContentsState, RootState> = {
Bookmarks,
Local,
DirectMessages,
Public,
Search,
Lists,
Hashtag,

114
src/renderer/store/TimelineSpace/Contents/Public.ts
View File

@ -1,114 +0,0 @@
import generator, { Entity, FilterContext } from 'megalodon'
import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
import { RootState } from '@/store'
import { LocalAccount } from '~/src/types/localAccount'
import { LocalServer } from '~/src/types/localServer'
export type PublicState = {
timeline: { [key: number]: Array<Entity.Status> }
}
const state = (): PublicState => ({
timeline: {}
})
export const MUTATION_TYPES = {
APPEND_TIMELINE: 'appendTimeline',
REPLACE_TIMELINE: 'replaceTimeline',
INSERT_TIMELINE: 'insertTimeline',
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot'
}
const mutations: MutationTree<PublicState> = {
[MUTATION_TYPES.APPEND_TIMELINE]: (state, obj: { status: Entity.Status; accountId: number }) => {
if (state.timeline[obj.accountId]) {
state.timeline[obj.accountId] = [obj.status, ...state.timeline[obj.accountId]]
} else {
state.timeline[obj.accountId] = [obj.status]
}
},
[MUTATION_TYPES.REPLACE_TIMELINE]: (state, obj: { statuses: Array<Entity.Status>; accountId: number }) => {
state.timeline[obj.accountId] = obj.statuses
},
[MUTATION_TYPES.INSERT_TIMELINE]: (state, obj: { statuses: Array<Entity.Status>; accountId: number }) => {
if (state.timeline[obj.accountId]) {
state.timeline[obj.accountId] = [...state.timeline[obj.accountId], ...obj.statuses]
} else {
state.timeline[obj.accountId] = obj.statuses
}
},
[MUTATION_TYPES.UPDATE_TOOT]: (state, obj: { status: Entity.Status; accountId: number }) => {
state.timeline[obj.accountId] = state.timeline[obj.accountId].map(toot => {
if (toot.id === obj.status.id) {
return obj.status
} else if (toot.reblog && toot.reblog.id === obj.status.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: obj.status
}
return Object.assign(toot, reblog)
} else {
return toot
}
})
},
[MUTATION_TYPES.DELETE_TOOT]: (state, obj: { statusId: string; accountId: number }) => {
state.timeline[obj.accountId] = state.timeline[obj.accountId].filter(toot => {
if (toot.reblog !== null && toot.reblog.id === obj.statusId) {
return false
} else {
return toot.id !== obj.statusId
}
})
}
}
export const ACTION_TYPES = {
FETCH_PUBLIC_TIMELINE: 'fetchPublicTimeline',
LAZY_FETCH_TIMELINE: 'lazyFetchTimeline'
}
const actions: ActionTree<PublicState, RootState> = {
[ACTION_TYPES.FETCH_PUBLIC_TIMELINE]: async (
{ commit, rootState },
req: { account: LocalAccount; server: LocalServer }
): Promise<Array<Entity.Status>> => {
const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
try {
const res = await client.getPublicTimeline({ limit: 20 })
commit(MUTATION_TYPES.REPLACE_TIMELINE, { statuses: res.data, accountId: req.account.id })
return res.data
} catch (err) {
console.error(err)
return []
}
},
[ACTION_TYPES.LAZY_FETCH_TIMELINE]: async (
{ commit, rootState },
req: { lastStatus: Entity.Status; account: LocalAccount; server: LocalServer }
): Promise<Array<Entity.Status> | null> => {
const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
return client.getPublicTimeline({ max_id: req.lastStatus.id, limit: 20 }).then(res => {
commit(MUTATION_TYPES.INSERT_TIMELINE, { statuses: res.data, accountId: req.account.id })
return res.data
})
}
}
const getters: GetterTree<PublicState, RootState> = {
filters: (_state, _getters, rootState) => {
return rootState.TimelineSpace.filters.filter(f => f.context.includes(FilterContext.Public) && !f.irreversible)
}
}
const Public: Module<PublicState, RootState> = {
namespaced: true,
state: state,
mutations: mutations,
actions: actions,
getters: getters
}
export default Public