refs #3301 Rewrite TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media with composition API

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue

@@ -10,42 +10,56 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { mapGetters } from 'vuex'
+import { defineComponent, PropType, ref, computed, onMounted } from 'vue'
-import Posts from './Timeline/Posts'
+import { Entity } from 'megalodon'
-import PostsAndReplies from './Timeline/PostsAndReplies'
+import { useStore } from '@/store'
-import Media from './Timeline/Media'
+import Posts from './Timeline/Posts.vue'
+import PostsAndReplies from './Timeline/PostsAndReplies.vue'
+import Media from './Timeline/Media.vue'
 
-export default {
+export default defineComponent({
   name: 'timeline',
-  props: ['account'],
+  props: {
+    account: {
+      type: Object as PropType<Entity.Account>,
+      required: true
+    }
+  },
   components: {
     Posts,
     PostsAndReplies,
     Media
   },
-  data() {
+  setup() {
-    return {
+    const space = 'TimelineSpace/Contents/SideBar/AccountProfile/Timeline'
-      activeName: 'posts',
+    const store = useStore()
-      defaultBuffer: 200,
+
-      buffer: 200
+    const activeName = ref<string>('posts')
-    }
+    const defaultBuffer = ref<number>(200)
-  },
+    const buffer = ref<number>(200)
-  computed: {
+
-    ...mapGetters('TimelineSpace/Contents/SideBar/AccountProfile/Timeline', ['filters'])
+    const filters = computed(() => store.getters[`${space}/filters`])
-  },
+
-  mounted() {
+    onMounted(() => {
-    const timeline = document.getElementById('sidebar_tabs')
+      const timeline = document.getElementById('sidebar_tabs')
-    if (timeline !== undefined && timeline !== null) {
+      if (timeline !== undefined && timeline !== null) {
-      this.buffer = this.defaultBuffer + timeline.getBoundingClientRect().top
+        buffer.value = defaultBuffer.value + timeline.getBoundingClientRect().top
-    }
+      }
-  },
+    })
-  methods: {
+
-    handleClick(tab, event) {
+    const handleClick = (tab, event) => {
       console.log(tab, event)
     }
+
+    return {
+      activeName,
+      handleClick,
+      buffer,
+      filters
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media.vue

@@ -24,116 +24,136 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { mapState, mapGetters } from 'vuex'
+import { defineComponent, PropType, ref, computed, onMounted, onBeforeUnmount, onUnmounted, watch, toRefs } from 'vue'
-import Toot from '~/src/renderer/components/organisms/Toot'
+import { ElMessage } from 'element-plus'
-import { EventEmitter } from '~/src/renderer/components/event'
+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/Media'
 
-export default {
+export default defineComponent({
   name: 'media',
-  props: ['account', 'buffer', 'filters'],
   components: { Toot },
-  data() {
+  props: {
-    return {
+    account: {
-      focusedId: null
+      type: Object as PropType<Entity.Account>,
+      required: true
+    },
+    buffer: {
+      type: Number,
+      required: true
+    },
+    filters: {
+      type: Object as PropType<Array<Entity.Filter>>,
+      required: true
     }
   },
-  computed: {
+  setup(props) {
-    ...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media', {
+    const space = 'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media'
-      timeline: state => state.timeline,
+    const store = useStore()
-      lazyLoading: state => state.lazyLoading
+    const i18n = useI18next()
-    }),
+    const { account } = toRefs(props)
-    ...mapState('App', {
+
-      backgroundColor: state => state.theme.background_color
+    const focusedId = ref<string | null>(null)
-    }),
+    const timeline = computed(() => store.state.TimelineSpace.Contents.SideBar.AccountProfile.Timeline.Media.timeline)
-    ...mapGetters('TimelineSpace/Modals', ['modalOpened'])
+    const lazyLoading = computed(() => store.state.TimelineSpace.Contents.SideBar.AccountProfile.Timeline.Media.lazyLoading)
-  },
+    const backgroundColor = computed(() => store.state.App.theme.background_color)
-  created() {
+    const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
-    this.load()
+    const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
-  },
+
-  mounted() {
+    onMounted(() => {
-    this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/clearTimeline')
+      load()
-    document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
+      store.dispatch(`${space}/${ACTION_TYPES.CLEAR_TIMELINE}`)
-    EventEmitter.on('focus-sidebar', () => {
+      document.getElementById('sidebar_scrollable')?.addEventListener('scroll', onScroll)
-      this.focusedId = 0
-      this.$nextTick(function () {
-        this.focusedId = this.timeline[0].uri + this.timeline[0].id
-      })
     })
-  },
+    onBeforeUnmount(() => {
-  beforeUnmount() {
+      EventEmitter.emit('focus-timeline')
-    EventEmitter.emit('focus-timeline')
+      EventEmitter.off('focus-sidebar')
-    EventEmitter.off('focus-sidebar')
+    })
-  },
+    onUnmounted(() => {
-  unmounted() {
+      const el = document.getElementById('sidebar_scrollable')
-    if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
+      if (el !== undefined && el !== null) {
-      document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
+        el.removeEventListener('scroll', onScroll)
-    }
+      }
-  },
+    })
-  watch: {
+    watch(account, () => {
-    account: function (_newAccount, _oldAccount) {
+      store.dispatch(`${space}/${ACTION_TYPES.CLEAR_TIMELINE}`)
-      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/clearTimeline')
+      load()
-      this.load()
+    })
-    }
+
-  },
+    const load = () => {
-  methods: {
+      store.dispatch(`${space}/${ACTION_TYPES.FETCH_TIMELINE}`, account.value).catch(() => {
-    load() {
+        ElMessage({
-      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/fetchTimeline', this.account).catch(() => {
+          message: i18n.t('message.timeline_fetch_error'),
-        this.$message({
-          message: this.$t('message.timeline_fetch_error'),
           type: 'error'
         })
       })
-    },
+    }
-    updateToot(message) {
+    const onScroll = (event: Event) => {
-      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/updateToot', message)
-    },
-    deleteToot(message) {
-      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/deleteToot', message)
-    },
-    onScroll(event) {
       // for lazyLoading
       if (
-        event.target.clientHeight + event.target.scrollTop >= document.getElementById('account_profile').clientHeight - 10 &&
+        (event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
-        !this.lazyloading
+          document.getElementById('account_profile')!.clientHeight - 10 &&
+        !lazyLoading
       ) {
-        this.$store
+        store
-          .dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/lazyFetchTimeline', {
+          .dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, {
-            account: this.account,
+            account: account.value,
-            status: this.timeline[this.timeline.length - 1]
+            status: timeline[timeline.value.length - 1]
           })
           .catch(err => {
             console.error(err)
-            this.$message({
+            ElMessage({
-              message: this.$t('message.timeline_fetch_error'),
+              message: i18n.t('message.timeline_fetch_error'),
               type: 'error'
             })
           })
       }
-    },
+    }
-    focusNext() {
+    const updateToot = (message: Entity.Status) => {
-      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
+      store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
-      if (currentIndex === -1) {
+    }
-        this.focusedId = this.timeline[0].uri + this.timeline[0].id
+    const deleteToot = (message: Entity.Status) => {
-      } else if (currentIndex < this.timeline.length - 1) {
+      store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message)
-        this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
+    }
+    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 focusPrev = () => {
-      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
+      if (currentFocusedIndex.value > 0) {
-      if (currentIndex > 0) {
+        focusedId.value = timeline.value[currentFocusedIndex.value - 1].uri + timeline.value[currentFocusedIndex.value - 1].id
-        this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
       }
-    },
+    }
-    focusToot(message) {
+    const focusToot = (message: Entity.Status) => {
-      this.focusedId = message.uri + message.id
+      focusedId.value = message.uri + message.id
-    },
+    }
-    focusTimeline() {
+    const focusTimeline = () => {
-      this.focusedId = 0
+      focusedId.value = null
       EventEmitter.emit('focus-timeline')
     }
+
+    return {
+      timeline,
+      focusedId,
+      modalOpened,
+      updateToot,
+      deleteToot,
+      focusNext,
+      focusPrev,
+      focusTimeline,
+      focusToot,
+      lazyLoading,
+      backgroundColor
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media.ts

@@ -59,8 +59,14 @@ const mutations: MutationTree<MediaState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  FETCH_TIMELINE: 'fetchTimeline',
+  LAZY_FETCH_TIMELINE: 'lazyFetchTimeline',
+  CLEAR_TIMELINE: 'clearTimeline'
+}
+
 const actions: ActionTree<MediaState, 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<MediaState, 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)
     }
@@ -97,7 +103,7 @@ const actions: ActionTree<MediaState, RootState> = {
     }
     return null
   },
-  clearTimeline: ({ commit }) => {
+  [ACTION_TYPES.CLEAR_TIMELINE]: ({ commit }) => {
     commit(MUTATION_TYPES.UPDATE_TIMELINE, [])
   }
 }