[refactor] Remove public timeline store

src/renderer/components/TimelineSpace/Contents/DirectMessages.vue

@@ -11,9 +11,9 @@
             :filters="[]"
             :account="account.account"
             :server="account.server"
-            v-on:update="updateToot"
+            @update="updateToot"
-            v-on:delete="deleteToot"
+            @delete="deleteToot"
-            @selectToot="focusToot(item)"
+            @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 = () => {

src/renderer/components/TimelineSpace/Contents/Favourites.vue

@@ -12,9 +12,9 @@
             :filters="[]"
             :account="account.account"
             :server="account.server"
-            v-on:update="updateToot"
+            @update="updateToot"
-            v-on:delete="deleteToot"
+            @delete="deleteToot"
-            @selectToot="focusToot(item)"
+            @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) => {
+    const deleteToot = (id: string) => {
-      store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message)
+      store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, id)
     }
     const reload = async () => {
       store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)

src/renderer/components/TimelineSpace/Contents/Home.vue

@@ -17,9 +17,9 @@
               :filters="filters"
               :account="account.account"
               :server="account.server"
-              v-on:update="updateToot"
+              @update="updateToot"
-              v-on:delete="deleteToot"
+              delete="deleteToot"
-              @selectToot="focusToot(item)"
+              @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) => {

src/renderer/components/TimelineSpace/Contents/Public.vue

@@ -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"
+            @update="updateToot"
-            v-on:delete="deleteToot"
+            @delete="deleteToot"
-            @selectToot="focusToot(item)"
+            @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 &&
+        document.getElementById('scroller')!.scrollHeight - 10
-        !lazyLoading.value
       ) {
-        lazyLoading.value = true
+        const lastStatus = statuses.value[statuses.value.length - 1]
-        store
+        client.value
-          .dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, {
+          ?.getPublicTimeline({ max_id: lastStatus.id, limit: 20 })
-            statuses: timeline.value[timeline.value.length - 1],
+          .then(res => {
-            account: account.account,
+            statuses.value = [...statuses.value, ...res.data]
-            server: account.server
           })
-          .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) {
+      statuses.value = statuses.value.map(status => {
-        store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, { status: message, accountId: account.account.id })
+        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) => {
+    const deleteToot = (id: string) => {
-      if (account.account) {
+      statuses.value = statuses.value.filter(status => {
-        store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, { statusId: message.id, accountId: account.account.id })
+        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
+        focusedId.value = statuses.value[0].uri + statuses.value[0].id
-      } else if (currentFocusedIndex.value < timeline.value.length) {
+      } else if (currentFocusedIndex.value < statuses.value.length) {
-        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 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
     }
   }
 })

src/renderer/components/organisms/Toot.vue

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

src/renderer/store/GlobalHeader.ts

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

src/renderer/store/TimelineSpace/Contents.ts

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

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

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