From 226c36acc186238f12fa9176c54041be580ba3fa Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 1 Jul 2022 01:20:25 +0900
Subject: [PATCH] refs #3301 Rewrite TimelineSpace/HeaderMenu with composition
 API

---
 .../components/TimelineSpace/HeaderMenu.vue   | 176 ++++++++++--------
 .../store/TimelineSpace/HeaderMenu.ts         |   9 +-
 2 files changed, 104 insertions(+), 81 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/HeaderMenu.vue b/src/renderer/components/TimelineSpace/HeaderMenu.vue
index 15f38596..d52a65fc 100644
--- a/src/renderer/components/TimelineSpace/HeaderMenu.vue
+++ b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@@ -36,96 +36,101 @@
   </nav>
 </template>
 
-<script>
-import { mapState } from 'vuex'
+<script lang="ts">
+import { defineComponent, ref, computed, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18next } from 'vue3-i18next'
+import { useStore } from '@/store'
+import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/HeaderMenu'
+import { ACTION_TYPES as NEW_TOOT_ACTION } from '@/store/TimelineSpace/Modals/NewToot'
+import { MUTATION_TYPES as HOME_MUTATION } from '@/store/TimelineSpace/Contents/Home'
 
-export default {
+export default defineComponent({
   name: 'header-menu',
-  data() {
-    return {
-      showReblogs: true,
-      showReplies: true
-    }
-  },
-  computed: {
-    ...mapState('TimelineSpace/HeaderMenu', {
-      title: state => state.title,
-      loading: state => state.loading
+  setup() {
+    const space = 'TimelineSpace/HeaderMenu'
+    const store = useStore()
+    const route = useRoute()
+    const router = useRouter()
+    const i18n = useI18next()
+
+    const showReblogs = ref<boolean>(true)
+    const showReplies = ref<boolean>(true)
+
+    const title = computed(() => store.state.TimelineSpace.HeaderMenu.title)
+    const loading = computed(() => store.state.TimelineSpace.HeaderMenu.loading)
+    const id = computed(() => route.params.id)
+
+    onMounted(() => {
+      channelName()
+      loadTLOption()
+      store.dispatch(`${space}/${ACTION_TYPES.SETUP_LOADING}`)
     })
-  },
-  created() {
-    this.channelName()
-    this.loadTLOption()
-    this.$store.dispatch('TimelineSpace/HeaderMenu/setupLoading')
-  },
-  watch: {
-    $route: function () {
-      this.channelName()
-      this.loadTLOption()
-    }
-  },
-  methods: {
-    id() {
-      return this.$route.params.id
-    },
-    channelName() {
-      switch (this.$route.name) {
+    watch(
+      () => route.name,
+      () => {
+        channelName()
+        loadTLOption()
+      }
+    )
+    const channelName = () => {
+      switch (route.name) {
         case 'home':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.home'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.home'))
           break
         case 'notifications':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.notification'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.notification'))
           break
         case 'favourites':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.favourite'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.favourite'))
           break
         case 'bookmarks':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.bookmark'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.bookmark'))
           break
         case 'mentions':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.mention'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.mention'))
           break
         case 'follow-requests':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.follow_requests'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.follow_requests'))
           break
         case 'local':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.local'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.local'))
           break
         case 'public':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.public'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.public'))
           break
         case 'hashtag-list':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.hashtag'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.hashtag'))
           break
         case 'tag':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', `#${this.$route.params.tag}`)
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, `#${route.params.tag}`)
           break
         case 'search':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.search'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.search'))
           break
         case 'lists':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.lists'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.lists'))
           break
         case 'direct-messages':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.direct_messages'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.direct_messages'))
           break
         case 'edit-list':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.members'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.members'))
           break
         case 'list':
-          this.$store.dispatch('TimelineSpace/HeaderMenu/fetchList', this.$route.params.list_id)
+          store.dispatch(`${space}/${ACTION_TYPES.FETCH_LIST}`, route.params.list_id)
           break
         default:
-          console.log(this.$route)
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.home'))
+          console.debug(route)
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.home'))
           break
       }
-    },
-    openNewTootModal() {
-      this.$store.dispatch('TimelineSpace/Modals/NewToot/openModal')
-    },
-    reload() {
-      switch (this.$route.name) {
+    }
+    const openNewTootModal = () => {
+      store.dispatch(`TimelineSpace/Modals/NewToot/${NEW_TOOT_ACTION.OPEN_MODAL}`)
+    }
+    const reload = () => {
+      switch (route.name) {
         case 'home':
         case 'notifications':
         case 'mentions':
@@ -136,14 +141,14 @@ export default {
         case 'tag':
         case 'list':
         case 'direct-messages':
-          this.$store.commit('TimelineSpace/HeaderMenu/changeReload', true)
+          store.commit(`${space}/${MUTATION_TYPES.CHANGE_RELOAD}`, true)
           break
         default:
-          console.error('Not implemented')
+          console.error('Not implemented: ', route.name)
       }
-    },
-    reloadable() {
-      switch (this.$route.name) {
+    }
+    const reloadable = () => {
+      switch (route.name) {
         case 'home':
         case 'notifications':
         case 'mentions':
@@ -158,41 +163,54 @@ export default {
         default:
           return false
       }
-    },
-    loadTLOption() {
-      switch (this.$route.name) {
+    }
+    const loadTLOption = () => {
+      switch (route.name) {
         case 'home':
-          this.showReblogs = this.$store.state.TimelineSpace.Contents.Home.showReblogs
-          this.showReplies = this.$store.state.TimelineSpace.Contents.Home.showReplies
+          showReblogs.value = store.state.TimelineSpace.Contents.Home.showReblogs
+          showReplies.value = store.state.TimelineSpace.Contents.Home.showReplies
           break
         default:
-          console.log('Not implemented')
+          break
       }
-    },
-    applyTLOption() {
-      switch (this.$route.name) {
+    }
+    const applyTLOption = () => {
+      switch (route.name) {
         case 'home':
-          this.$store.commit('TimelineSpace/Contents/Home/showReblogs', this.showReblogs)
-          this.$store.commit('TimelineSpace/Contents/Home/showReplies', this.showReplies)
+          store.commit(`TimelineSpace/Contents/Home/${HOME_MUTATION.SHOW_REBLOGS}`, showReblogs.value)
+          store.commit(`TimelineSpace/Contents/Home/${HOME_MUTATION.SHOW_REPLIES}`, showReplies.value)
           break
         default:
-          console.log('Not implemented')
+          break
       }
-    },
-    TLOption() {
-      switch (this.$route.name) {
+    }
+    const TLOption = () => {
+      switch (route.name) {
         case 'home':
           return true
         default:
           return false
       }
-    },
-    settings() {
-      const url = `/${this.id()}/settings`
-      this.$router.push(url)
+    }
+    const settings = () => {
+      const url = `/${id.value}/settings`
+      router.push(url)
+    }
+
+    return {
+      title,
+      loading,
+      openNewTootModal,
+      reloadable,
+      reload,
+      TLOption,
+      showReblogs,
+      showReplies,
+      applyTLOption,
+      settings
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/store/TimelineSpace/HeaderMenu.ts b/src/renderer/store/TimelineSpace/HeaderMenu.ts
index fad7aaf0..4a2e8445 100644
--- a/src/renderer/store/TimelineSpace/HeaderMenu.ts
+++ b/src/renderer/store/TimelineSpace/HeaderMenu.ts
@@ -33,8 +33,13 @@ const mutations: MutationTree<HeaderMenuState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  FETCH_LIST: 'fetchList',
+  SETUP_LOADING: 'setupLoading'
+}
+
 const actions: ActionTree<HeaderMenuState, RootState> = {
-  fetchList: async ({ commit, rootState }, listID: string): Promise<Entity.List> => {
+  [ACTION_TYPES.FETCH_LIST]: async ({ commit, rootState }, listID: string): Promise<Entity.List> => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -45,7 +50,7 @@ const actions: ActionTree<HeaderMenuState, RootState> = {
     commit(MUTATION_TYPES.UPDATE_TITLE, `#${res.data.title}`)
     return res.data
   },
-  setupLoading: ({ commit }) => {
+  [ACTION_TYPES.SETUP_LOADING]: ({ commit }) => {
     const axiosLoading = new AxiosLoading()
     axiosLoading.on('start', (_: number) => {
       commit(MUTATION_TYPES.CHANGE_LOADING, true)