From 666d7a0db9dec3b438d5e2bef1df41a91af44e16 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 24 Jun 2022 23:22:30 +0900
Subject: [PATCH] refs #3301 Rewrite
 TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies with
 composition API

---
 .../Timeline/PostsAndReplies.vue              | 199 ++++++++++--------
 .../Contents/SideBar/AccountProfile.ts        |   4 +-
 .../SideBar/AccountProfile/Timeline.ts        |   2 +-
 .../Timeline/PostsAndReplies.ts               |  12 +-
 4 files changed, 121 insertions(+), 96 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies.vue
index ba2f98ba..bebeb7de 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies.vue
@@ -24,118 +24,137 @@
   </div>
 </template>
 
-<script>
-import { mapState, mapGetters } from 'vuex'
-import Toot from '~/src/renderer/components/organisms/Toot'
-import { EventEmitter } from '~/src/renderer/components/event'
+<script lang="ts">
+import { defineComponent, PropType, ref, computed, onMounted, onBeforeUnmount, onUnmounted, watch, toRefs } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useI18next } from 'vue3-i18next'
+import { Entity } from 'megalodon'
+import { useStore } from '@/store'
+import Toot from '@/components/organisms/Toot.vue'
+import { EventEmitter } from '@/components/event'
+import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies'
 
-export default {
+export default defineComponent({
   name: 'posts-and-replies',
-  props: ['account', 'buffer', 'filters'],
   components: { Toot },
-  data() {
-    return {
-      focusedId: null
+  props: {
+    account: {
+      type: Object as PropType<Entity.Account>,
+      required: true
+    },
+    buffer: {
+      type: Number,
+      required: true
+    },
+    filters: {
+      type: Object as PropType<Array<Entity.Filter>>,
+      required: true
     }
   },
-  computed: {
-    ...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies', {
-      timeline: state => state.timeline,
-      lazyLoading: state => state.lazyLoading
-    }),
-    ...mapState('App', {
-      backgroundColor: state => state.theme.background_color
-    }),
-    ...mapGetters('TimelineSpace/Modals', ['modalOpened'])
-  },
-  created() {
-    this.load()
-  },
-  mounted() {
-    this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/clearTimeline')
-    document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
-    EventEmitter.on('focus-sidebar', () => {
-      this.focusedId = 0
-      this.$nextTick(function () {
-        this.focusedId = this.timeline[0].uri + this.timeline[0].id
-      })
+  setup(props) {
+    const space = 'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies'
+    const store = useStore()
+    const i18n = useI18next()
+    const { account } = toRefs(props)
+
+    const focusedId = ref<string | null>(null)
+
+    const timeline = computed(() => store.state.TimelineSpace.Contents.SideBar.AccountProfile.Timeline.PostsAndReplies.timeline)
+    const lazyLoading = computed(() => store.state.TimelineSpace.Contents.SideBar.AccountProfile.Timeline.PostsAndReplies.lazyLoading)
+    const backgroundColor = computed(() => store.state.App.theme.background_color)
+    const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
+    const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
+
+    onMounted(() => {
+      load()
+      store.dispatch(`${space}/${ACTION_TYPES.CLEAR_TIMELINE}`)
+      document.getElementById('sidebar_scrollable')?.addEventListener('scroll', onScroll)
     })
-  },
-  beforeUnmount() {
-    EventEmitter.emit('focus-timeline')
-    EventEmitter.off('focus-sidebar')
-  },
-  unmounted() {
-    if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
-      document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
-    }
-  },
-  watch: {
-    account: function (_newAccount, _oldAccount) {
-      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/clearTimeline')
-      this.load()
-    }
-  },
-  methods: {
-    load() {
-      this.$store
-        .dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/fetchTimeline', this.account)
-        .catch(() => {
-          this.$message({
-            message: this.$t('message.timeline_fetch_error'),
-            type: 'error'
-          })
+    onBeforeUnmount(() => {
+      EventEmitter.emit('focus-timeline')
+      EventEmitter.off('focus-sidebar')
+    })
+    onUnmounted(() => {
+      const el = document.getElementById('sidebar_scrollable')
+      if (el !== undefined && el !== null) {
+        el.removeEventListener('scroll', onScroll)
+      }
+    })
+    watch(account, () => {
+      store.dispatch(`${space}/${ACTION_TYPES.CLEAR_TIMELINE}`)
+      load()
+    })
+
+    const load = () => {
+      store.dispatch(`${space}/${ACTION_TYPES.FETCH_TIMELINE}`, account.value).catch(() => {
+        ElMessage({
+          message: i18n.t('message.timeline_fetch_error'),
+          type: 'error'
         })
-    },
-    updateToot(message) {
-      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/updateToot', message)
-    },
-    deleteToot(message) {
-      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/deleteToot', message)
-    },
-    onScroll(event) {
+      })
+    }
+    const onScroll = (event: Event) => {
       // for lazyLoading
       if (
-        event.target.clientHeight + event.target.scrollTop >= document.getElementById('account_profile').clientHeight - 10 &&
-        !this.lazyloading
+        (event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
+          document.getElementById('account_profile')!.clientHeight - 10 &&
+        !lazyLoading
       ) {
-        this.$store
-          .dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/lazyFetchTimeline', {
-            account: this.account,
-            status: this.timeline[this.timeline.length - 1]
+        store
+          .dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, {
+            account: account.value,
+            status: timeline[timeline.value.length - 1]
           })
           .catch(err => {
             console.error(err)
-            this.$message({
-              message: this.$t('message.timeline_fetch_error'),
+            ElMessage({
+              message: i18n.t('message.timeline_fetch_error'),
               type: 'error'
             })
           })
       }
-    },
-    focusNext() {
-      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
-      if (currentIndex === -1) {
-        this.focusedId = this.timeline[0].uri + this.timeline[0].id
-      } else if (currentIndex < this.timeline.length - 1) {
-        this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
+    }
+    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 focusNext = () => {
+      if (currentFocusedIndex.value === -1) {
+        focusedId.value = timeline.value[0].uri + timeline.value[0].id
+      } else if (currentFocusedIndex.value < timeline.value.length - 1) {
+        focusedId.value = timeline.value[currentFocusedIndex.value + 1].uri + timeline.value[currentFocusedIndex.value + 1].id
       }
-    },
-    focusPrev() {
-      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
-      if (currentIndex > 0) {
-        this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
+    }
+    const focusPrev = () => {
+      if (currentFocusedIndex.value > 0) {
+        focusedId.value = timeline.value[currentFocusedIndex.value - 1].uri + timeline.value[currentFocusedIndex.value - 1].id
       }
-    },
-    focusToot(message) {
-      this.focusedId = message.uri + message.id
-    },
-    focusTimeline() {
-      this.focusedId = 0
+    }
+    const focusToot = (message: Entity.Status) => {
+      focusedId.value = message.uri + message.id
+    }
+    const focusTimeline = () => {
+      focusedId.value = null
       EventEmitter.emit('focus-timeline')
     }
+
+    return {
+      timeline,
+      focusedId,
+      modalOpened,
+      updateToot,
+      deleteToot,
+      focusNext,
+      focusPrev,
+      focusTimeline,
+      focusToot,
+      lazyLoading,
+      backgroundColor
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts
index 9d18f3a6..4ad9eb01 100644
--- a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts
+++ b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts
@@ -1,5 +1,5 @@
 import generator, { Entity } from 'megalodon'
-import Timeline, { TimelineState } from './AccountProfile/Timeline'
+import Timeline, { TimelineModuleState } from './AccountProfile/Timeline'
 import Follows, { FollowsState } from './AccountProfile/Follows'
 import Followers, { FollowersState } from './AccountProfile/Followers'
 import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
@@ -26,7 +26,7 @@ export type AccountProfileState = {
 type AccountProfileModule = {
   Followers: FollowersState
   Follows: FollowsState
-  Timeline: TimelineState
+  Timeline: TimelineModuleState
 }
 
 export type AccountProfileModuleState = AccountProfileModule & AccountProfileState
diff --git a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.ts b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.ts
index 4141230c..372ec6dd 100644
--- a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.ts
+++ b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.ts
@@ -6,7 +6,7 @@ import PostsAndReplies, { PostsAndRepliesState } from './Timeline/PostsAndReplie
 import Media, { MediaState } from './Timeline/Media'
 import { FilterContext } from 'megalodon'
 
-export type TimelineState = {}
+type TimelineState = {}
 
 type TimelineModule = {
   Posts: PostsState
diff --git a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies.ts b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies.ts
index b3edeb1e..f4da2e23 100644
--- a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies.ts
+++ b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies.ts
@@ -59,8 +59,14 @@ const mutations: MutationTree<PostsAndRepliesState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  FETCH_TIMELINE: 'fetchTimeline',
+  LAZY_FETCH_TIMELINE: 'lazyFetchTimeline',
+  CLEAR_TIMELINE: 'clearTimeline'
+}
+
 const actions: ActionTree<PostsAndRepliesState, RootState> = {
-  fetchTimeline: async ({ commit, rootState }, account: Entity.Account) => {
+  [ACTION_TYPES.FETCH_TIMELINE]: async ({ commit, rootState }, account: Entity.Account) => {
     commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true, { root: true })
     const client = generator(
       rootState.TimelineSpace.sns,
@@ -73,7 +79,7 @@ const actions: ActionTree<PostsAndRepliesState, RootState> = {
     commit(MUTATION_TYPES.UPDATE_TIMELINE, res.data)
     return res.data
   },
-  lazyFetchTimeline: async ({ state, commit, rootState }, loadPosition: LoadPositionWithAccount): Promise<null> => {
+  [ACTION_TYPES.LAZY_FETCH_TIMELINE]: async ({ state, commit, rootState }, loadPosition: LoadPositionWithAccount): Promise<null> => {
     if (state.lazyLoading) {
       return Promise.resolve(null)
     }
@@ -96,7 +102,7 @@ const actions: ActionTree<PostsAndRepliesState, RootState> = {
     }
     return null
   },
-  clearTimeline: ({ commit }) => {
+  [ACTION_TYPES.CLEAR_TIMELINE]: ({ commit }) => {
     commit(MUTATION_TYPES.UPDATE_TIMELINE, [])
   }
 }