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

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

@@ -18,104 +18,123 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { mapState } from 'vuex'
+import { defineComponent, PropType, computed, onMounted, watch, onUnmounted, toRefs } from 'vue'
-import User from '~/src/renderer/components/molecules/User'
+import { ElMessage } from 'element-plus'
+import { useI18next } from 'vue3-i18next'
+import { Entity } from 'megalodon'
+import { useStore } from '@/store'
+import User from '@/components/molecules/User.vue'
+import { ACTION_TYPES } from '@/store/TimelineSpace/Contents/SideBar/AccountProfile/Follows'
+import { ACTION_TYPES as PROFILE_ACTION, MUTATION_TYPES as PROFILE_MUTATION } from '@/store/TimelineSpace/Contents/SideBar/AccountProfile'
 
-export default {
+export default defineComponent({
   name: 'follows',
-  props: ['account'],
+  props: {
+    account: {
+      type: Object as PropType<Entity.Account>,
+      required: true
+    }
+  },
   components: { User },
-  computed: {
+  setup(props) {
-    ...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Follows', {
+    const space = 'TimelineSpace/Contents/SideBar/AccountProfile/Follows'
-      follows: state => state.follows,
+    const { account } = toRefs(props)
-      relationships: state => state.relationships,
+    const store = useStore()
-      lazyLoading: state => state.lazyLoading
+    const i18n = useI18next()
-    }),
+
-    ...mapState('App', {
+    const follows = computed(() => store.state.TimelineSpace.Contents.SideBar.AccountProfile.Follows.follows)
-      backgroundColor: state => state.theme.background_color
+    const relationships = computed(() => store.state.TimelineSpace.Contents.SideBar.AccountProfile.Follows.relationships)
+    const lazyLoading = computed(() => store.state.TimelineSpace.Contents.SideBar.AccountProfile.Follows.lazyLoading)
+    const backgroundColor = computed(() => store.state.App.theme.background_color)
+
+    onMounted(() => {
+      load()
+      document.getElementById('sidebar_scrollable')?.addEventListener('scroll', onScroll)
     })
-  },
+    watch(account, () => {
-  created() {
+      load()
-    this.load()
+    })
-  },
+    onUnmounted(() => {
-  mounted() {
+      const el = document.getElementById('sidebar_scrollable')
-    document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
+      if (el !== undefined && el !== null) {
-  },
+        el.removeEventListener('scroll', onScroll)
-  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) {
+    const load = async () => {
-      this.load()
+      store.commit(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_MUTATION.CHANGE_LOADING}`, true)
-    }
-  },
-  methods: {
-    async load() {
-      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true)
       try {
-        const follows = await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchFollows', this.account)
+        const follows = await store.dispatch(`${space}/${ACTION_TYPES.FETCH_FOLLOWS}`, account.value)
-        await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchRelationships', follows)
+        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_RELATIONSHIPS}`, follows.value)
       } catch (err) {
         console.error(err)
-        this.$message({
+        ElMessage({
-          message: this.$t('message.follows_fetch_error'),
+          message: i18n.t('message.follows_fetch_error'),
           type: 'error'
         })
       } finally {
-        this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false)
+        store.commit(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_MUTATION.CHANGE_LOADING}`, false)
       }
-    },
+    }
-    onScroll(event) {
+    const onScroll = (event: 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.value
       ) {
-        this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/lazyFetchFollows', this.account).catch(err => {
+        store.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_FOLLOWS}`, account.value).catch(err => {
           console.error(err)
-          this.$message({
+          ElMessage({
-            message: this.$t('message.timeline_fetch_error'),
+            message: i18n.t('message.timeline_fetch_error'),
             type: 'error'
           })
         })
       }
-    },
+    }
-    targetRelation(id) {
+    const targetRelation = (id: string) => {
-      return this.relationships.find(r => r.id === id)
+      return relationships.value.find(r => r.id === id)
-    },
+    }
-    async followAccount(account) {
+    const followAccount = async (account: Entity.Account) => {
-      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true)
+      store.commit(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_MUTATION.CHANGE_LOADING}`, true)
       try {
-        await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/follow', account)
+        await store.dispatch(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_ACTION.FOLLOW}`, account)
-        await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchRelationships', this.follows)
+        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_RELATIONSHIPS}`, follows.value)
       } catch (err) {
-        this.$message({
+        ElMessage({
-          message: this.$t('message.follow_error'),
+          message: i18n.t('message.follow_error'),
           type: 'error'
         })
       } finally {
-        this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false)
+        store.commit(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_MUTATION.CHANGE_LOADING}`, false)
       }
-    },
+    }
-    async unfollowAccount(account) {
+    const unfollowAccount = async (account: Entity.Status) => {
-      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true)
+      store.commit(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_MUTATION.CHANGE_LOADING}`, true)
       try {
-        await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/unfollow', account)
+        await store.dispatch(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_ACTION.UNFOLLOW}`, account)
-        await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchRelationships', this.follows)
+        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_RELATIONSHIPS}`, follows.value)
       } catch (err) {
-        this.$message({
+        ElMessage({
-          message: this.$t('message.unfollow_error'),
+          message: i18n.t('message.unfollow_error'),
           type: 'error'
         })
       } finally {
-        this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false)
+        store.commit(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_MUTATION.CHANGE_LOADING}`, false)
       }
     }
+
+    return {
+      follows,
+      targetRelation,
+      followAccount,
+      unfollowAccount,
+      lazyLoading,
+      backgroundColor
     }
-}
+  }
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Follows.ts

@@ -43,8 +43,14 @@ const mutations: MutationTree<FollowsState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  FETCH_FOLLOWS: 'fetchFollows',
+  LAZY_FETCH_FOLLOWS: 'lazyFetchFollows',
+  FETCH_RELATIONSHIPS: 'fetchRelationships'
+}
+
 const actions: ActionTree<FollowsState, RootState> = {
-  fetchFollows: async ({ commit, rootState }, account: Entity.Account) => {
+  [ACTION_TYPES.FETCH_FOLLOWS]: async ({ commit, rootState }, account: Entity.Account) => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -67,7 +73,7 @@ const actions: ActionTree<FollowsState, RootState> = {
     }
     return res.data
   },
-  lazyFetchFollows: async ({ commit, state, rootState }, account: Entity.Account) => {
+  [ACTION_TYPES.LAZY_FETCH_FOLLOWS]: async ({ commit, state, rootState }, account: Entity.Account) => {
     if (state.lazyLoading) {
       return Promise.resolve(null)
     }
@@ -100,7 +106,7 @@ const actions: ActionTree<FollowsState, RootState> = {
     }
     return res.data
   },
-  fetchRelationships: async ({ commit, rootState }, accounts: Array<Entity.Account>) => {
+  [ACTION_TYPES.FETCH_RELATIONSHIPS]: async ({ commit, rootState }, accounts: Array<Entity.Account>) => {
     const ids = accounts.map(a => a.id)
     const client = generator(
       rootState.TimelineSpace.sns,