Rewrite Modals/AddListMember with composition API

src/renderer/components/TimelineSpace/Modals.vue

@@ -4,8 +4,8 @@
     <jump v-if="jumpModal"></jump>
     <image-viewer></image-viewer>
     <list-membership></list-membership>
-    <add-list-member></add-list-member>
-    <mute-confirm></mute-confirm>
+    <add-list-member v-if="addListMemberModal"></add-list-member>
+    <mute-confirm v-if="muteConfirmModal"></mute-confirm>
     <shortcut></shortcut>
     <report v-if="reportModal"></report>
   </div>
@@ -37,7 +37,9 @@ export default {
   computed: {
     ...mapState({
       jumpModal: state => state.TimelineSpace.Modals.Jump.modalOpen,
-      reportModal: state => state.TimelineSpace.Modals.Report.modalOpen
+      reportModal: state => state.TimelineSpace.Modals.Report.modalOpen,
+      muteConfirmModal: state => state.TimelineSpace.Modals.MuteConfirm.modalOpen,
+      addListMemberModal: state => state.TimelineSpace.Modals.AddListMember.modalOpen
     })
   }
 }

src/renderer/components/TimelineSpace/Modals/AddListMember.vue

@@ -33,58 +33,68 @@
   </div>
 </template>
 
-<script>
-import { mapState } from 'vuex'
+<script lang="ts">
+import { defineComponent, computed, ref } from 'vue'
+import { Entity } from 'megalodon'
+import { ElMessage } from 'element-plus'
+import { useI18next } from 'vue3-i18next'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/AddListMember'
+import { ACTION_TYPES as LIST_ACTION_TYPES } from '@/store/TimelineSpace/Contents/Lists/Edit'
 
-export default {
+export default defineComponent({
   name: 'add-list-member',
-  data() {
-    return {
-      name: ''
-    }
-  },
-  computed: {
-    ...mapState({
-      loadingBackground: state => state.App.theme.wrapper_mask_color,
-      accounts: state => state.TimelineSpace.Modals.AddListMember.accounts,
-      listId: state => state.TimelineSpace.Modals.AddListMember.targetListId
-    }),
-    addListMemberModal: {
-      get() {
-        return this.$store.state.TimelineSpace.Modals.AddListMember.modalOpen
-      },
-      set(value) {
-        this.$store.dispatch('TimelineSpace/Modals/AddListMember/changeModal', value)
-      }
-    }
-  },
-  methods: {
-    username(account) {
+  setup() {
+    const space = 'TimelineSpace/Modals/AddListMember'
+    const store = useStore()
+    const i18n = useI18next()
+
+    const name = ref<string>('')
+
+    const loadingBackground = computed(() => store.state.App.theme.wrapper_mask_color)
+    const accounts = computed(() => store.state.TimelineSpace.Modals.AddListMember.accounts)
+    const listId = computed(() => store.state.TimelineSpace.Modals.AddListMember.targetListId)
+    const addListMemberModal = computed({
+      get: () => store.state.TimelineSpace.Modals.AddListMember.modalOpen,
+      set: (value: boolean) => store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, value)
+    })
+
+    const username = (account: Entity.Account): string => {
       if (account.display_name !== '') {
         return account.display_name
       } else {
         return account.username
       }
-    },
-    search() {
-      this.$store.dispatch('TimelineSpace/Modals/AddListMember/search', this.name)
-    },
-    add(user) {
-      this.$store
-        .dispatch('TimelineSpace/Modals/AddListMember/add', user)
+    }
+    const search = () => {
+      store.dispatch(`${space}/${ACTION_TYPES.SEARCH}`, name.value)
+    }
+    const add = (account: Entity.Account) => {
+      store
+        .dispatch(`${space}/${ACTION_TYPES.ADD}`, account)
         .then(() => {
-          this.addListMemberModal = false
-          this.$store.dispatch('TimelineSpace/Contents/Lists/Edit/fetchMembers', this.listId)
+          store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, false)
+          store.dispatch(`TimelineSpace/Contents/Lists/Edit/${LIST_ACTION_TYPES.FETCH_MEMBERS}`, listId.value)
         })
         .catch(() => {
-          this.$message({
-            message: this.$t('message.add_user_error'),
+          ElMessage({
+            message: i18n.t('message.add_user_error'),
             type: 'error'
           })
         })
     }
+
+    return {
+      name,
+      loadingBackground,
+      accounts,
+      addListMemberModal,
+      username,
+      search,
+      add
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/store/TimelineSpace/Contents/Lists/Edit.ts

@@ -21,8 +21,13 @@ const mutations: MutationTree<EditState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  FETCH_MEMBERS: 'fetchMembers',
+  REMOVE_ACCOUNT: 'removeAccount'
+}
+
 const actions: ActionTree<EditState, RootState> = {
-  fetchMembers: async ({ commit, rootState }, listId: string): Promise<Array<Entity.Account>> => {
+  [ACTION_TYPES.FETCH_MEMBERS]: async ({ commit, rootState }, listId: string): Promise<Array<Entity.Account>> => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -33,7 +38,7 @@ const actions: ActionTree<EditState, RootState> = {
     commit(MUTATION_TYPES.CHANGE_MEMBERS, res.data)
     return res.data
   },
-  removeAccount: async ({ rootState }, remove: RemoveAccountFromList): Promise<{}> => {
+  [ACTION_TYPES.REMOVE_ACCOUNT]: async ({ rootState }, remove: RemoveAccountFromList): Promise<{}> => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,

src/renderer/store/TimelineSpace/Modals/AddListMember.ts

@@ -32,11 +32,17 @@ const mutations: MutationTree<AddListMemberState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  CHANGE_MODAL: 'changeModal',
+  SEARCH: 'search',
+  ADD: 'add'
+}
+
 const actions: ActionTree<AddListMemberState, RootState> = {
-  changeModal: ({ commit }, value: boolean) => {
+  [ACTION_TYPES.CHANGE_MODAL]: ({ commit }, value: boolean) => {
     commit(MUTATION_TYPES.CHANGE_MODAL, value)
   },
-  search: async ({ commit, rootState }, name: string): Promise<Array<Entity.Account>> => {
+  [ACTION_TYPES.SEARCH]: async ({ commit, rootState }, name: string): Promise<Array<Entity.Account>> => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -47,7 +53,7 @@ const actions: ActionTree<AddListMemberState, RootState> = {
     commit(MUTATION_TYPES.UPDATE_ACCOUNTS, res.data)
     return res.data
   },
-  add: async ({ state, rootState }, account: Entity.Account): Promise<{}> => {
+  [ACTION_TYPES.ADD]: async ({ state, rootState }, account: Entity.Account): Promise<{}> => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,