From 273b3c7d13fe9c9c219bcda999ee3c8e1fdbdc71 Mon Sep 17 00:00:00 2001
From: AkiraFukushima
Date: Sun, 29 Jan 2023 22:15:25 +0900
Subject: [PATCH] [refactor] Remove favourites timeline store
---
.../TimelineSpace/Contents/Favourites.vue | 115 +++++++++-------
.../TimelineSpace/Contents/Public.vue | 13 +-
src/renderer/store/TimelineSpace/Contents.ts | 3 -
.../TimelineSpace/Contents/Favourites.ts | 123 ------------------
4 files changed, 78 insertions(+), 176 deletions(-)
delete mode 100644 src/renderer/store/TimelineSpace/Contents/Favourites.ts
diff --git a/src/renderer/components/TimelineSpace/Contents/Favourites.vue b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
index 85dc88b3..2d6c5cc7 100644
--- a/src/renderer/components/TimelineSpace/Contents/Favourites.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
@@ -1,7 +1,7 @@
-
-
+
+
(false)
const focusedId = ref(null)
const scroller = ref()
const { j, k, Ctrl_r } = useMagicKeys()
@@ -58,41 +55,53 @@ export default defineComponent({
const win = (window as any) as MyWindow
const id = computed(() => parseInt(route.params.id as string))
+ const loading = ref(false)
const lazyLoading = ref(false)
const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
account: null,
server: null
})
+ const client = ref(null)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
- const favourites = computed(() => store.state.TimelineSpace.Contents.Favourites.favourites)
+ const favourites = ref>([])
+ const nextMaxId = ref(null)
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const currentFocusedIndex = computed(() => favourites.value.findIndex(status => focusedId.value === status.uri))
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)
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
- store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
- store
- .dispatch(`${space}/${ACTION_TYPES.FETCH_FAVOURITES}`, account)
- .catch(() => {
- ElMessage({
- message: i18n.t('message.favourite_fetch_error'),
- type: 'error'
- })
- })
- .finally(() => {
- store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
+ loading.value = true
+ try {
+ const res = await client.value.getFavourites({ limit: 20 })
+ favourites.value = res.data
+ const link = parse(res.headers.link)
+ if (link !== null && link.next) {
+ nextMaxId.value = link.next.max_id
+ } else {
+ nextMaxId.value = null
+ }
+ } catch (err) {
+ console.error(err)
+ ElMessage({
+ message: i18n.t('message.favourite_fetch_error'),
+ type: 'error'
})
+ } finally {
+ loading.value = false
+ }
})
onUnmounted(() => {
- store.commit(`${space}/${MUTATION_TYPES.UPDATE_FAVOURITES}`, [])
const el = document.getElementById('scroller')
if (el !== undefined && el !== null) {
el.removeEventListener('scroll', onScroll)
@@ -125,12 +134,23 @@ export default defineComponent({
if (
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
document.getElementById('scroller')!.scrollHeight - 10 &&
- !lazyLoading.value
+ !lazyLoading.value &&
+ nextMaxId.value
) {
lazyLoading.value = true
- store
- .dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_FAVOURITES}`, account)
- .catch(() => {
+ client.value
+ ?.getFavourites({ limit: 20, max_id: nextMaxId.value })
+ .then(res => {
+ favourites.value = [...favourites.value, ...res.data]
+ const link = parse(res.headers.link)
+ if (link !== null && link.next) {
+ nextMaxId.value = link.next.max_id
+ } else {
+ nextMaxId.value = null
+ }
+ })
+ .catch(err => {
+ console.error(err)
ElMessage({
message: i18n.t('message.favourite_fetch_error'),
type: 'error'
@@ -140,36 +160,43 @@ export default defineComponent({
lazyLoading.value = false
})
}
- // for upper
- if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
- heading.value = false
- } else if ((event.target as HTMLElement)!.scrollTop <= 10 && !heading.value) {
- heading.value = true
- }
}
const updateToot = (message: Entity.Status) => {
- store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
+ favourites.value = favourites.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 = (id: string) => {
- store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, id)
+ favourites.value = favourites.value.filter(status => {
+ if (status.reblog !== null && status.reblog.id === id) {
+ return false
+ } else {
+ return status.id !== id
+ }
+ })
}
const reload = async () => {
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
try {
- await store.dispatch(`${space}/${ACTION_TYPES.FETCH_FAVOURITES}`, account).catch(() => {
- ElMessage({
- message: i18n.t('message.favourite_fetch_error'),
- type: 'error'
- })
- })
+ const res = await client.value!.getFavourites({ limit: 20 })
+ favourites.value = res.data
+ const link = parse(res.headers.link)
+ if (link !== null && link.next) {
+ nextMaxId.value = link.next.max_id
+ } else {
+ nextMaxId.value = null
+ }
} finally {
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
}
}
- const upper = () => {
- scroller.value.scrollToItem(0)
- focusedId.value = null
- }
const focusNext = () => {
if (currentFocusedIndex.value === -1) {
focusedId.value = favourites.value[0].uri
@@ -189,15 +216,15 @@ export default defineComponent({
}
return {
+ loading,
favourites,
+ backgroundColor,
scroller,
focusedId,
modalOpened,
updateToot,
deleteToot,
focusToot,
- heading,
- upper,
account
}
}
diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue
index 293ba4a8..f4a9b461 100644
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Public.vue
@@ -54,6 +54,7 @@ export default defineComponent({
const focusedId = ref(null)
const scroller = ref(null)
const loading = ref(false)
+ const lazyLoading = ref(false)
const heading = ref(true)
const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
account: null,
@@ -129,9 +130,11 @@ export default defineComponent({
const onScroll = (event: Event) => {
if (
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
- document.getElementById('scroller')!.scrollHeight - 10
+ document.getElementById('scroller')!.scrollHeight - 10 &&
+ !lazyLoading.value
) {
const lastStatus = statuses.value[statuses.value.length - 1]
+ lazyLoading.value = true
client.value
?.getPublicTimeline({ max_id: lastStatus.id, limit: 20 })
.then(res => {
@@ -144,6 +147,9 @@ export default defineComponent({
type: 'error'
})
})
+ .finally(() => {
+ lazyLoading.value = false
+ })
}
if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
@@ -174,10 +180,6 @@ export default defineComponent({
}
})
}
- const upper = () => {
- scroller.value.scrollToItem(0)
- focusedId.value = null
- }
const focusNext = () => {
if (currentFocusedIndex.value === -1) {
focusedId.value = statuses.value[0].uri + statuses.value[0].id
@@ -207,7 +209,6 @@ export default defineComponent({
deleteToot,
focusToot,
heading,
- upper,
account,
backgroundColor
}
diff --git a/src/renderer/store/TimelineSpace/Contents.ts b/src/renderer/store/TimelineSpace/Contents.ts
index 718b5e7b..27bd847f 100644
--- a/src/renderer/store/TimelineSpace/Contents.ts
+++ b/src/renderer/store/TimelineSpace/Contents.ts
@@ -1,6 +1,5 @@
import Home, { HomeState } from './Contents/Home'
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 Search, { SearchModuleState } from './Contents/Search'
@@ -19,7 +18,6 @@ type ContentsModule = {
Home: HomeState
Notifications: NotificationsState
DirectMessages: DirectMessagesState
- Favourites: FavouritesState
Bookmarks: BookmarksState
Local: LocalState
Search: SearchModuleState
@@ -60,7 +58,6 @@ const Contents: Module = {
modules: {
Home,
Notifications,
- Favourites,
Bookmarks,
Local,
DirectMessages,
diff --git a/src/renderer/store/TimelineSpace/Contents/Favourites.ts b/src/renderer/store/TimelineSpace/Contents/Favourites.ts
deleted file mode 100644
index 909c229d..00000000
--- a/src/renderer/store/TimelineSpace/Contents/Favourites.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import generator, { Entity } from 'megalodon'
-import parse from 'parse-link-header'
-import { Module, MutationTree, ActionTree } from 'vuex'
-import { RootState } from '@/store'
-import { LocalAccount } from '~/src/types/localAccount'
-import { LocalServer } from '~/src/types/localServer'
-
-export type FavouritesState = {
- favourites: Array
- maxId: string | null
-}
-
-const state = (): FavouritesState => ({
- favourites: [],
- maxId: null
-})
-
-export const MUTATION_TYPES = {
- UPDATE_FAVOURITES: 'updateFavourites',
- INSERT_FAVOURITES: 'insertFavourites',
- UPDATE_TOOT: 'updateToot',
- DELETE_TOOT: 'deleteToot',
- CHANGE_MAX_ID: 'changeMaxId'
-}
-
-const mutations: MutationTree = {
- [MUTATION_TYPES.UPDATE_FAVOURITES]: (state, favourites: Array) => {
- state.favourites = favourites
- },
- [MUTATION_TYPES.INSERT_FAVOURITES]: (state, favourites: Array) => {
- state.favourites = state.favourites.concat(favourites)
- },
- [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Status) => {
- state.favourites = state.favourites.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: Entity.Status) => {
- state.favourites = state.favourites.filter(toot => {
- if (toot.reblog !== null && toot.reblog.id === message.id) {
- return false
- } else {
- return toot.id !== message.id
- }
- })
- },
- [MUTATION_TYPES.CHANGE_MAX_ID]: (state, id: string | null) => {
- state.maxId = id
- }
-}
-
-export const ACTION_TYPES = {
- FETCH_FAVOURITES: 'fetchFavourites',
- LAZY_FETCH_FAVOURITES: 'lazyFetchFavourites'
-}
-
-const actions: ActionTree = {
- [ACTION_TYPES.FETCH_FAVOURITES]: async (
- { commit, rootState },
- req: { account: LocalAccount; server: LocalServer }
- ): Promise> => {
- const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
- const res = await client.getFavourites({ limit: 20 })
- commit(MUTATION_TYPES.UPDATE_FAVOURITES, res.data)
- // Parse link header
- try {
- const link = parse(res.headers.link)
- if (link !== null && link.next) {
- commit(MUTATION_TYPES.CHANGE_MAX_ID, link.next.max_id)
- } else {
- commit(MUTATION_TYPES.CHANGE_MAX_ID, null)
- }
- } catch (err) {
- commit(MUTATION_TYPES.CHANGE_MAX_ID, null)
- console.error(err)
- }
- return res.data
- },
- lazyFetchFavourites: async (
- { state, commit, rootState },
- req: { account: LocalAccount; server: LocalServer }
- ): Promise | null> => {
- if (!state.maxId) {
- return Promise.resolve(null)
- }
- const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
- const res = await client.getFavourites({ max_id: state.maxId, limit: 20 })
- commit(MUTATION_TYPES.INSERT_FAVOURITES, res.data)
- // Parse link header
- try {
- const link = parse(res.headers.link)
- if (link !== null && link.next) {
- commit(MUTATION_TYPES.CHANGE_MAX_ID, link.next.max_id)
- } else {
- commit(MUTATION_TYPES.CHANGE_MAX_ID, null)
- }
- } catch (err) {
- commit(MUTATION_TYPES.CHANGE_MAX_ID, null)
- console.error(err)
- }
- return res.data
- }
-}
-
-const Favourites: Module = {
- namespaced: true,
- state: state,
- mutations: mutations,
- actions: actions
-}
-
-export default Favourites