From f6aa14d54e25026dd9c8ef786de82b2840f9c6de Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Mon, 13 Jun 2022 01:37:55 +0900
Subject: [PATCH] refs #3301 Rewrite TimelineSpace/Contents/Hashtag with
 composition API

---
 .../TimelineSpace/Contents/Hashtag.vue        |  81 ++--
 .../TimelineSpace/Contents/Hashtag/List.vue   |  47 ++-
 .../TimelineSpace/Contents/Hashtag/Tag.vue    | 373 +++++++++---------
 .../TimelineSpace/Contents/Hashtag/List.ts    |  11 +-
 .../TimelineSpace/Contents/Hashtag/Tag.ts     |  18 +-
 5 files changed, 282 insertions(+), 248 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag.vue
index ed2ee0c2..b08e41f6 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag.vue
@@ -3,7 +3,7 @@
     <div class="search-header" v-loading="false">
       <el-form>
         <div class="form-wrapper">
-          <div class="form-item" v-show="tagPage()">
+          <div class="form-item" v-show="tagPage">
             <el-button type="text" @click="back">
               <font-awesome-icon icon="chevron-left" />
             </el-button>
@@ -11,7 +11,7 @@
           <div class="form-item input">
             <input v-model="tag" :placeholder="$t('hashtag.tag_name')" class="search-keyword" v-on:keyup.enter="search" autofocus />
           </div>
-          <div class="form-item" v-show="tagPage()">
+          <div class="form-item" v-show="tagPage">
             <el-button type="text" @click="save" :title="$t('hashtag.save_tag')">
               <font-awesome-icon icon="thumbtack" />
             </el-button>
@@ -23,44 +23,55 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from '@/store'
+
+export default defineComponent({
   name: 'hashtag',
-  data() {
-    return {
-      tag: ''
-    }
-  },
-  mounted() {
-    if (this.$route.name === 'tag') {
-      this.tag = this.$route.params.tag
-    }
-  },
-  watch: {
-    $route: function (route) {
+  setup() {
+    const route = useRoute()
+    const router = useRouter()
+    const store = useStore()
+
+    const tag = ref<string>('')
+    const id = computed(() => route.params.id)
+    const tagPage = computed(() => route.name === 'tag')
+
+    onMounted(() => {
       if (route.name === 'tag') {
-        this.tag = route.params.tag
+        tag.value = route.params.tag as string
       }
+    })
+    watch(
+      () => route.params.tag,
+      () => {
+        if (route.name === 'tag') {
+          tag.value = route.params.tag as string
+        }
+      }
+    )
+    const search = () => {
+      router.push({ path: `/${id.value}/hashtag/${tag.value}` })
+    }
+    const back = () => {
+      router.push({ path: `/${id.value}/hashtag` })
+    }
+    const save = () => {
+      store.dispatch('TimelineSpace/Contents/Hashtag/saveTag', tag.value)
+    }
+
+    return {
+      tagPage,
+      tag,
+      back,
+      search,
+      save
     }
   },
-  methods: {
-    id() {
-      return this.$route.params.id
-    },
-    search() {
-      this.$router.push({ path: `/${this.id()}/hashtag/${this.tag}` })
-    },
-    tagPage() {
-      return this.$route.name === 'tag'
-    },
-    back() {
-      this.$router.push({ path: `/${this.id()}/hashtag` })
-    },
-    save() {
-      this.$store.dispatch('TimelineSpace/Contents/Hashtag/saveTag', this.tag)
-    }
-  }
-}
+  methods: {}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue
index 18e7fdba..f29a3d9d 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue
@@ -17,30 +17,41 @@
   </div>
 </template>
 
-<script>
-import { mapState } from 'vuex'
+<script lang="ts">
+import { defineComponent, computed, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/TimelineSpace/Contents/Hashtag/List'
+import { LocalTag } from '~/src/types/localTag'
 
-export default {
+export default defineComponent({
   name: 'list',
-  computed: {
-    ...mapState({
-      tags: state => state.TimelineSpace.Contents.Hashtag.List.tags
+  setup() {
+    const space = 'TimelineSpace/Contents/Hashtag/List'
+    const store = useStore()
+    const route = useRoute()
+    const router = useRouter()
+    const tags = computed(() => store.state.TimelineSpace.Contents.Hashtag.List.tags)
+
+    onMounted(() => {
+      store.dispatch(`${space}/${ACTION_TYPES.LIST_TAGS}`)
     })
-  },
-  created() {
-    this.$store.dispatch('TimelineSpace/Contents/Hashtag/List/listTags')
-  },
-  methods: {
-    openTimeline(tagName) {
-      this.$router.push({
-        path: `/${this.$route.params.id}/hashtag/${tagName}`
+    const openTimeline = (tagName: string) => {
+      router.push({
+        path: `/${route.params.id}/hashtag/${tagName}`
       })
-    },
-    deleteTag(tag) {
-      this.$store.dispatch('TimelineSpace/Contents/Hashtag/List/removeTag', tag)
+    }
+    const deleteTag = (tag: LocalTag) => {
+      store.dispatch(`${space}/${ACTION_TYPES.REMOVE_TAG}`, tag)
+    }
+
+    return {
+      tags,
+      openTimeline,
+      deleteTag
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
index f9296052..c072dfcf 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
@@ -29,256 +29,253 @@
   </div>
 </template>
 
-<script>
-import { mapState, mapGetters } from 'vuex'
+<script lang="ts">
+import { computed, defineComponent, onBeforeUnmount, onBeforeUpdate, onMounted, ref, toRefs, watch } from 'vue'
 import moment from 'moment'
-import Toot from '~/src/renderer/components/organisms/Toot'
-import { EventEmitter } from '~/src/renderer/components/event'
-import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
+import { ElMessage } from 'element-plus'
+import { Entity } from 'megalodon'
+import { useI18next } from 'vue3-i18next'
+import { useRoute } from 'vue-router'
+import { useStore } from '@/store'
+import Toot from '@/components/organisms/Toot.vue'
+import { EventEmitter } from '@/components/event'
+import { ScrollPosition } from '@/components/utils/scroll'
+import useReloadable from '@/components/utils/reloadable'
+import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
+import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
+import { MUTATION_TYPES as CONTENTS_MUTATION } from '@/store/TimelineSpace/Contents'
+import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Hashtag/Tag'
 
-export default {
-  data() {
-    return {
-      focusedId: null,
-      scrollPosition: null,
-      observer: null,
-      scrollTime: null,
-      resizeTime: null
-    }
-  },
+export default defineComponent({
   name: 'tag',
   components: { Toot },
   props: ['tag'],
-  computed: {
-    ...mapState({
-      openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
-      backgroundColor: state => state.App.theme.background_color,
-      startReload: state => state.TimelineSpace.HeaderMenu.reload,
-      timeline: state => state.TimelineSpace.Contents.Hashtag.Tag.timeline,
-      lazyLoading: state => state.TimelineSpace.Contents.Hashtag.Tag.lazyLoading,
-      heading: state => state.TimelineSpace.Contents.Hashtag.Tag.heading,
-      scrolling: state => state.TimelineSpace.Contents.Hashtag.Tag.scrolling
-    }),
-    ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
-    shortcutEnabled: function () {
-      if (this.modalOpened) {
-        return false
-      }
-      if (!this.focusedId) {
-        return true
-      }
-      // Sometimes toots are deleted, so perhaps focused toot don't exist.
-      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
-      return currentIndex === -1
-    }
-  },
-  mounted() {
-    this.$store.commit('TimelineSpace/Contents/changeLoading', true)
-    this.load(this.tag).finally(() => {
-      this.$store.commit('TimelineSpace/Contents/changeLoading', false)
-    })
-    document.getElementById('scroller').addEventListener('scroll', this.onScroll)
+  setup(props) {
+    const space = 'TimelineSpace/Contents/Hashtag/Tag'
+    const store = useStore()
+    const route = useRoute()
+    const i18n = useI18next()
+    const { reloadable } = useReloadable(store, route, i18n)
 
-    EventEmitter.on('focus-timeline', () => {
-      // If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
-      const previousFocusedId = this.focusedId
-      this.focusedId = 0
-      this.$nextTick(function () {
-        this.focusedId = previousFocusedId
+    const { tag } = toRefs(props)
+    const focusedId = ref<string | null>(null)
+    const scrollPosition = ref<ScrollPosition | null>(null)
+    const observer = ref<ResizeObserver | null>(null)
+    const scrollTime = ref<moment.Moment | null>(null)
+    const resizeTime = ref<moment.Moment | null>(null)
+    const scroller = ref<any>(null)
+
+    const timeline = computed(() => store.state.TimelineSpace.Contents.Hashtag.Tag.timeline)
+    const lazyLoading = computed(() => store.state.TimelineSpace.Contents.Hashtag.Tag.lazyLoading)
+    const heading = computed(() => store.state.TimelineSpace.Contents.Hashtag.Tag.heading)
+    const scrolling = computed(() => store.state.TimelineSpace.Contents.Hashtag.Tag.scrolling)
+    const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
+    const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
+    const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
+    const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
+
+    onMounted(() => {
+      store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
+      load(tag.value).finally(() => {
+        store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
+      })
+      document.getElementById('scroller')?.addEventListener('scroll', onScroll)
+
+      const el = document.getElementById('scroller')
+      if (el) {
+        scrollPosition.value = new ScrollPosition(el)
+        scrollPosition.value.prepare()
+
+        observer.value = new ResizeObserver(() => {
+          if (scrollPosition.value && !heading.value && !lazyLoading.value && !scrolling.value) {
+            resizeTime.value = moment()
+            scrollPosition.value.restore()
+          }
+        })
+
+        const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
+        observer.value.observe(scrollWrapper)
+      }
+    })
+    onBeforeUpdate(() => {
+      if (scrollPosition.value) {
+        scrollPosition.value?.prepare()
+      }
+    })
+    watch(tag, (newTag, _oldTag) => {
+      store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
+      reset()
+      load(newTag).finally(() => {
+        store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
       })
     })
-    const el = document.getElementById('scroller')
-    this.scrollPosition = new ScrollPosition(el)
-    this.scrollPosition.prepare()
-
-    this.observer = new ResizeObserver(() => {
-      if (this.scrollPosition && !this.heading && !this.lazyLoading && !this.scrolling) {
-        this.resizeTime = moment()
-        this.scrollPosition.restore()
-      }
-    })
-
-    const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
-    this.observer.observe(scrollWrapper)
-  },
-  beforeUpdate() {
-    if (this.scrollPosition) {
-      this.scrollPosition.prepare()
-    }
-  },
-  watch: {
-    tag: function (newTag, _oldTag) {
-      this.$store.commit('TimelineSpace/Contents/changeLoading', true)
-      this.reset()
-      this.load(newTag).finally(() => {
-        this.$store.commit('TimelineSpace/Contents/changeLoading', false)
-      })
-    },
-    startReload: function (newState, oldState) {
-      if (!oldState && newState) {
-        this.reload().finally(() => {
-          this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
+    watch(startReload, (newVal, oldVal) => {
+      if (!oldVal && newVal) {
+        reload().finally(() => {
+          store.commit(`TimelineSpace/HeaderMenu/${HEADER_MUTATION.CHANGE_RELOAD}`, false)
         })
       }
-    },
-    focusedId: function (newState, _oldState) {
-      if (newState && this.heading) {
-        this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', false)
-      } else if (newState === null && !this.heading) {
-        this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
-      }
-    }
-  },
-  beforeUnmount() {
-    this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
-    this.reset()
-    EventEmitter.off('focus-timeline')
-    this.observer.disconnect()
-  },
-  methods: {
-    async load(tag) {
-      await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag).catch(() => {
-        this.$message({
-          message: this.$t('message.timeline_fetch_error'),
+    })
+    onBeforeUnmount(() => {
+      store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
+      reset()
+      EventEmitter.off('focus-timeline')
+      observer.value?.disconnect()
+    })
+
+    const load = async (tag: string) => {
+      await store.dispatch(`${space}/${ACTION_TYPES.FETCH}`, tag).catch(() => {
+        ElMessage({
+          message: i18n.t('message.timeline_fetch_error'),
           type: 'error'
         })
       })
-      this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag).catch(() => {
-        this.$message({
-          message: this.$t('message.start_streaming_error'),
+      store.dispatch(`${space}/${ACTION_TYPES.START_STREAMING}`, tag).catch(() => {
+        ElMessage({
+          message: i18n.t('message.start_streaming_error'),
           type: 'error'
         })
       })
       return true
-    },
-    reset() {
-      this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
-      this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/archiveTimeline')
-      this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/clearTimeline')
-      if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
-        document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
-        document.getElementById('scroller').scrollTop = 0
+    }
+    const reset = () => {
+      store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
+      store.commit(`${space}/${MUTATION_TYPES.ARCHIVE_TIMELINE}`)
+      store.commit(`${space}/${MUTATION_TYPES.CLEAR_TIMELINE}`)
+      const el = document.getElementById('scroller')
+      if (el !== undefined && el !== null) {
+        el.removeEventListener('scroll', onScroll)
+        el.scrollTop = 0
       }
-    },
-    updateToot(toot) {
-      this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/updateToot', toot)
-    },
-    deleteToot(toot) {
-      this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/deleteToot', toot.id)
-    },
-    onScroll(event) {
-      if (moment().diff(this.resizeTime) < 500) {
+    }
+    const onScroll = (event: Event) => {
+      if (moment().diff(resizeTime.value) < 500) {
         return
       }
-      this.scrollTime = moment()
-      if (!this.scrolling) {
-        this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', true)
+      scrollTime.value = moment()
+      if (!scrolling.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
       }
 
       if (
-        event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 &&
-        !this.lazyloading
+        (event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
+          document.getElementById('scroller')!.scrollHeight - 10 &&
+        !lazyLoading.value
       ) {
-        this.$store
-          .dispatch('TimelineSpace/Contents/Hashtag/Tag/lazyFetchTimeline', {
-            tag: this.tag,
-            status: this.timeline[this.timeline.length - 1]
+        store
+          .dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, {
+            tag: tag.value,
+            status: timeline.value[timeline.value.length - 1]
           })
           .then(statuses => {
             if (statuses === null) {
               return
             }
             if (statuses.length > 0) {
-              this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', true)
+              store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
               setTimeout(() => {
-                this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', false)
+                store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
               }, 500)
             }
           })
           .catch(() => {
-            this.$message({
-              message: this.$t('message.timeline_fetch_error'),
+            ElMessage({
+              message: i18n.t('message.timeline_fetch_error'),
               type: 'error'
             })
           })
       }
 
-      if (event.target.scrollTop > 10 && this.heading) {
-        this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', false)
-      } else if (event.target.scrollTop <= 10 && !this.heading) {
-        this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
+      if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
+      } else if ((event.target as HTMLElement)!.scrollTop <= 10 && !heading.value) {
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
       }
 
       setTimeout(() => {
         const now = moment()
-        if (now.diff(this.scrollTime) >= 150) {
-          this.scrollTime = null
-          this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', false)
+        if (now.diff(scrollTime.value) >= 150) {
+          scrollTime.value = null
+          store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
         }
       }, 150)
-    },
-    async reload() {
-      const tag = this.tag
-      this.$store.commit('TimelineSpace/changeLoading', true)
+    }
+    const updateToot = (toot: Entity.Status) => {
+      store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, toot)
+    }
+    const deleteToot = (toot: Entity.Status) => {
+      store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, toot.id)
+    }
+    const reload = async () => {
+      store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
       try {
-        await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
-        await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag).catch(() => {
-          this.$message({
-            message: this.$t('message.timeline_fetch_error'),
+        await reloadable()
+        await store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
+        await store.dispatch(`${space}/${ACTION_TYPES.FETCH}`, tag.value).catch(() => {
+          ElMessage({
+            message: i18n.t('message.timeline_fetch_error'),
             type: 'error'
           })
         })
-        this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag).catch(() => {
-          this.$message({
-            message: this.$t('message.start_streaming_error'),
+        store.dispatch(`${space}/${ACTION_TYPES.START_STREAMING}`, tag.value).catch(() => {
+          ElMessage({
+            message: i18n.t('message.start_streaming_error'),
             type: 'error'
           })
         })
       } finally {
-        this.$store.commit('TimelineSpace/changeLoading', false)
+        store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
       }
-    },
-    upper() {
-      this.$refs.scroller.scrollToItem(0)
-      this.focusedId = null
-    },
-    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) {
-        this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
+    }
+    const upper = () => {
+      scroller.value.scrollToItem(0)
+      focusedId.value = null
+    }
+    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
       }
-    },
-    focusPrev() {
-      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
-      if (currentIndex === 0) {
-        this.focusedId = null
-      } else if (currentIndex > 0) {
-        this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 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
       }
-    },
-    focusToot(message) {
-      this.focusedId = message.uri + message.id
-    },
-    focusSidebar() {
+    }
+    const focusToot = (message: Entity.Status) => {
+      focusedId.value = message.uri + message.id
+    }
+    const focusSidebar = () => {
       EventEmitter.emit('focus-sidebar')
-    },
-    handleKey(event) {
-      switch (event.srcKey) {
-        case 'next':
-          this.focusedId = this.timeline[0].uri + this.timeline[0].id
-          break
-      }
-    },
-    sizeChanged() {
-      this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', true)
+    }
+    const sizeChanged = () => {
+      store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
       setTimeout(() => {
-        this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', false)
+        store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
       }, 500)
     }
+
+    return {
+      timeline,
+      scroller,
+      focusedId,
+      modalOpened,
+      updateToot,
+      deleteToot,
+      focusNext,
+      focusPrev,
+      focusSidebar,
+      focusToot,
+      sizeChanged,
+      openSideBar,
+      heading,
+      upper
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/store/TimelineSpace/Contents/Hashtag/List.ts b/src/renderer/store/TimelineSpace/Contents/Hashtag/List.ts
index 5b0baa3c..cd7e6f7c 100644
--- a/src/renderer/store/TimelineSpace/Contents/Hashtag/List.ts
+++ b/src/renderer/store/TimelineSpace/Contents/Hashtag/List.ts
@@ -3,7 +3,7 @@ import { Module, MutationTree, ActionTree } from 'vuex'
 import { RootState } from '@/store'
 import { MyWindow } from '~/src/types/global'
 
-const win = (window as any) as MyWindow
+const win = window as any as MyWindow
 
 export type ListState = {
   tags: Array<LocalTag>
@@ -23,13 +23,18 @@ const mutations: MutationTree<ListState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  LIST_TAGS: 'listTags',
+  REMOVE_TAG: 'removeTag'
+}
+
 const actions: ActionTree<ListState, RootState> = {
-  listTags: async ({ commit }) => {
+  [ACTION_TYPES.LIST_TAGS]: async ({ commit }) => {
     const tags: Array<LocalTag> = await win.ipcRenderer.invoke('list-hashtags')
     commit(MUTATION_TYPES.UPDATE_TAGS, tags)
     return tags
   },
-  removeTag: async ({ dispatch }, tag: LocalTag) => {
+  [ACTION_TYPES.REMOVE_TAG]: async ({ dispatch }, tag: LocalTag) => {
     await win.ipcRenderer.invoke('remove-hashtag', tag)
     dispatch('listTags')
     dispatch('TimelineSpace/SideMenu/listTags', {}, { root: true })
diff --git a/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts b/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts
index 8f17d22f..de5b0e8b 100644
--- a/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts
+++ b/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts
@@ -88,8 +88,15 @@ const mutations: MutationTree<TagState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  FETCH: 'fetch',
+  START_STREAMING: 'startStreaming',
+  STOP_STREAMING: 'stopStreaming',
+  LAZY_FETCH_TIMELINE: 'lazyFetchTimeline'
+}
+
 const actions: ActionTree<TagState, RootState> = {
-  fetch: async ({ commit, rootState }, tag: string): Promise<Array<Entity.Status>> => {
+  [ACTION_TYPES.FETCH]: async ({ commit, rootState }, tag: string): Promise<Array<Entity.Status>> => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -100,7 +107,7 @@ const actions: ActionTree<TagState, RootState> = {
     commit(MUTATION_TYPES.UPDATE_TIMELINE, res.data)
     return res.data
   },
-  startStreaming: ({ state, commit, rootState }, tag: string) => {
+  [ACTION_TYPES.START_STREAMING]: ({ state, commit, rootState }, tag: string) => {
     win.ipcRenderer.on('update-start-tag-streaming', (_, update: Entity.Status) => {
       commit(MUTATION_TYPES.APPEND_TIMELINE, update)
       if (state.heading && Math.random() > 0.8) {
@@ -122,7 +129,7 @@ const actions: ActionTree<TagState, RootState> = {
       })
     })
   },
-  stopStreaming: () => {
+  [ACTION_TYPES.STOP_STREAMING]: () => {
     return new Promise(resolve => {
       win.ipcRenderer.removeAllListeners('error-start-tag-streaming')
       win.ipcRenderer.removeAllListeners('update-start-tag-streaming')
@@ -131,7 +138,10 @@ const actions: ActionTree<TagState, RootState> = {
       resolve(null)
     })
   },
-  lazyFetchTimeline: async ({ state, commit, rootState }, loadPosition: LoadPositionWithTag): Promise<Array<Entity.Status> | null> => {
+  [ACTION_TYPES.LAZY_FETCH_TIMELINE]: async (
+    { state, commit, rootState },
+    loadPosition: LoadPositionWithTag
+  ): Promise<Array<Entity.Status> | null> => {
     if (state.lazyLoading) {
       return Promise.resolve(null)
     }