refs #3301 Rewrite molecules/User with composition API

src/renderer/components/molecules/User.vue

@@ -48,18 +48,23 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
+import { defineComponent, PropType } from 'vue'
+import { Entity } from 'megalodon'
+import { useStore } from '@/store'
+import { ACTION_TYPES as SIDEBAR_ACTION, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/SideBar'
+import { ACTION_TYPES as PROFILE_ACTION } from '@/store/TimelineSpace/Contents/SideBar/AccountProfile'
+import FailoverImg from '~/src/renderer/components/atoms/FailoverImg.vue'
 import emojify from '~/src/renderer/utils/emojify'
 
-export default {
+export default defineComponent({
   name: 'user',
   components: {
     FailoverImg
   },
   props: {
     user: {
-      type: Object,
+      type: Object as PropType<Entity.Account>,
       default: {}
     },
     remove: {
@@ -75,36 +80,48 @@ export default {
       default: false
     }
   },
-  methods: {
+  setup(_props, ctx) {
-    username(account) {
+    const store = useStore()
+
+    const username = (account: Entity.Account) => {
       if (account.display_name !== '') {
         return emojify(account.display_name, account.emojis)
       } else {
         return account.username
       }
-    },
+    }
-    openUser(account) {
+    const openUser = (account: Entity.Account) => {
-      this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
+      store.dispatch(`TimelineSpace/Contents/SideBar/${SIDEBAR_ACTION.OPEN_ACCOUNT_COMPONENT}`)
-      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
+      store.dispatch(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_ACTION.CHANGE_ACCOUNT}`, account)
-      this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
+      store.commit(`TimelineSpace/Contents/SideBar/${MUTATION_TYPES.CHANGE_OPEN_SIDEBAR}`, true)
-    },
+    }
-    removeAccount(account) {
+    const removeAccount = (account: Entity.Account) => {
-      this.$emit('removeAccount', account)
+      ctx.emit('removeAccount', account)
-    },
+    }
-    unfollowAccount(account) {
+    const unfollowAccount = (account: Entity.Account) => {
-      this.$emit('unfollowAccount', account)
+      ctx.emit('unfollowAccount', account)
-    },
+    }
-    followAccount(account) {
+    const followAccount = (account: Entity.Account) => {
-      this.$emit('followAccount', account)
+      ctx.emit('followAccount', account)
-    },
+    }
-    acceptRequest(account) {
+    const acceptRequest = (account: Entity.Account) => {
-      this.$emit('acceptRequest', account)
+      ctx.emit('acceptRequest', account)
-    },
+    }
-    rejectRequest(account) {
+    const rejectRequest = (account: Entity.Account) => {
-      this.$emit('rejectRequest', account)
+      ctx.emit('rejectRequest', account)
-    }
+    }
+
+    return {
+      username,
+      openUser,
+      removeAccount,
+      unfollowAccount,
+      followAccount,
+      acceptRequest,
+      rejectRequest
     }
   }
+})
 </script>
 
 <style lang="scss" scoped>

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

@@ -40,23 +40,30 @@ const mutations: MutationTree<SideBarState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  CLOSE: 'close',
+  RELOAD: 'reload',
+  OPEN_ACCOUNT_COMPONENT: 'openAccountComponent',
+  OPEN_TOOT_COMPONENT: 'openTootComponent'
+}
+
 const actions: ActionTree<SideBarState, RootState> = {
-  close: ({ dispatch, commit }) => {
+  [ACTION_TYPES.CLOSE]: ({ dispatch, commit }) => {
     dispatch('TimelineSpace/Contents/SideBar/AccountProfile/close', {}, { root: true })
     commit(MUTATION_TYPES.CHANGE_OPEN_SIDEBAR, false)
     commit(MUTATION_TYPES.CHANGE_COMPONENT, Component.Blank)
   },
-  reload: ({ state, dispatch }) => {
+  [ACTION_TYPES.RELOAD]: ({ state, dispatch }) => {
     if (state.component === Component.AccountProfile) {
       dispatch('TimelineSpace/Contents/SideBar/AccountProfile/reload', {}, { root: true })
     } else if (state.component === Component.TootDetail) {
       dispatch('TimelineSpace/Contents/SideBar/TootDetail/reload', {}, { root: true })
     }
   },
-  openAccountComponent: ({ commit }) => {
+  [ACTION_TYPES.OPEN_ACCOUNT_COMPONENT]: ({ commit }) => {
     commit(MUTATION_TYPES.CHANGE_COMPONENT, Component.AccountProfile)
   },
-  openTootComponent: ({ commit }) => {
+  [ACTION_TYPES.OPEN_TOOT_COMPONENT]: ({ commit }) => {
     commit(MUTATION_TYPES.CHANGE_COMPONENT, Component.TootDetail)
   }
 }

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

@@ -60,6 +60,23 @@ const mutations: MutationTree<AccountProfileState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  FETCH_ACCOUNT: 'fetchAccount',
+  SEARCH_ACCOUNT: 'searchAccount',
+  CHANGE_ACCOUNT: 'changeAccount',
+  FETCH_RELATIONSHIP: 'fetchRelationship',
+  RELOAD: 'reload',
+  FOLLOW: 'follow',
+  UNFOLLOW: 'unfollow',
+  CLOSE: 'close',
+  UNMUTE: 'unmute',
+  BLOCK: 'block',
+  UNBLOCK: 'unblock',
+  IDENTITY_PROOFS: 'identityProofs',
+  SUBSCRIBE: 'subscribe',
+  UNSBSCRIBE: 'unsubscribe'
+}
+
 const actions: ActionTree<AccountProfileState, RootState> = {
   fetchAccount: async ({ rootState, dispatch }, accountID: string): Promise<Entity.Account> => {
     const client = generator(