Rewrite Modals/ListMembership with composition API

src/renderer/components/TimelineSpace/Modals.vue

@@ -3,7 +3,7 @@
     <new-toot></new-toot>
     <jump v-if="jumpModal"></jump>
     <image-viewer></image-viewer>
-    <list-membership></list-membership>
+    <list-membership v-if="listMembershipModal"></list-membership>
     <add-list-member v-if="addListMemberModal"></add-list-member>
     <mute-confirm v-if="muteConfirmModal"></mute-confirm>
     <shortcut></shortcut>
@@ -39,7 +39,8 @@ export default {
       jumpModal: state => state.TimelineSpace.Modals.Jump.modalOpen,
       reportModal: state => state.TimelineSpace.Modals.Report.modalOpen,
       muteConfirmModal: state => state.TimelineSpace.Modals.MuteConfirm.modalOpen,
-      addListMemberModal: state => state.TimelineSpace.Modals.AddListMember.modalOpen
+      addListMemberModal: state => state.TimelineSpace.Modals.AddListMember.modalOpen,
+      listMembershipModal: state => state.TimelineSpace.Modals.ListMembership.modalOpen
     })
   }
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="$t('modals.list_membership.title')" v-model="listMembershipModal" width="400px" class="list-membership-modal">
+  <el-dialog :title="$t('modals.list_membership.title')" v-model="listMembershipModal" width="400px" custom-class="list-membership-modal">
     <el-checkbox-group v-model="belongToLists" v-loading="loading">
       <table class="lists">
         <tbody>
@@ -14,71 +14,66 @@
   </el-dialog>
 </template>
 
-<script>
-import { mapState } from 'vuex'
+<script lang="ts">
+import { defineComponent, ref, computed, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useI18next } from 'vue3-i18next'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/ListMembership'
 
-export default {
+export default defineComponent({
   name: 'list-membership',
-  data() {
-    return {
-      loading: false
-    }
-  },
-  computed: {
-    ...mapState({
-      account: state => state.TimelineSpace.Modals.ListMembership.account,
-      lists: state => state.TimelineSpace.Modals.ListMembership.lists
-    }),
-    listMembershipModal: {
-      get() {
-        return this.$store.state.TimelineSpace.Modals.ListMembership.modalOpen
-      },
-      set(value) {
-        this.$store.dispatch('TimelineSpace/Modals/ListMembership/changeModal', value)
-      }
-    },
-    belongToLists: {
-      get() {
-        return this.$store.state.TimelineSpace.Modals.ListMembership.belongToLists.map(l => l.id)
-      },
-      set(value) {
-        this.loading = true
-        return this.$store
-          .dispatch('TimelineSpace/Modals/ListMembership/changeBelongToLists', value)
+  setup() {
+    const space = 'TimelineSpace/Modals/ListMembership'
+    const loading = ref<boolean>(false)
+    const store = useStore()
+    const i18n = useI18next()
+
+    const account = computed(() => store.state.TimelineSpace.Modals.ListMembership.account)
+    const lists = computed(() => store.state.TimelineSpace.Modals.ListMembership.lists)
+    const listMembershipModal = computed({
+      get: () => store.state.TimelineSpace.Modals.ListMembership.modalOpen,
+      set: (value: boolean) => store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, value)
+    })
+    const belongToLists = computed({
+      get: () => store.state.TimelineSpace.Modals.ListMembership.belongToLists.map(l => l.id),
+      set: (value: Array<string>) => {
+        loading.value = true
+        store
+          .dispatch(`${space}/${ACTION_TYPES.CHANGE_BELONG_TO_LISTS}`, value)
           .catch(() => {
-            this.$message({
-              message: this.$t('message.update_list_memberships_error'),
+            ElMessage({
+              message: i18n.t('message.update_list_memberships_error'),
               type: 'error'
             })
           })
-          .finally(() => (this.loading = false))
+          .finally(() => (loading.value = false))
       }
-    }
-  },
-  watch: {
-    listMembershipModal: function (newState, oldState) {
-      if (!oldState && newState) {
-        this.init()
-      }
-    }
-  },
-  methods: {
-    async init() {
-      this.loading = true
+    })
+
+    onMounted(async () => {
+      loading.value = true
       try {
-        await this.$store.dispatch('TimelineSpace/Modals/ListMembership/fetchListMembership', this.account)
-        await this.$store.dispatch('TimelineSpace/Modals/ListMembership/fetchLists')
+        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_LIST_MEMBERSHIP}`, account.value)
+        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_LISTS}`)
       } catch (err) {
-        this.$message({
-          message: this.$t('message.lists_fetch_error'),
+        ElMessage({
+          message: i18n.t('message.lists_fetch_error'),
           type: 'error'
         })
       } finally {
-        this.loading = false
+        loading.value = false
       }
+    })
+
+    return {
+      loading,
+      lists,
+      listMembershipModal,
+      belongToLists
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

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

@@ -38,14 +38,22 @@ const mutations: MutationTree<ListMembershipState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  CHANGE_MODAL: 'changeModal',
+  SET_ACCOUNT: 'setAccount',
+  FETCH_LIST_MEMBERSHIP: 'fetchListMembership',
+  FETCH_LISTS: 'fetchLists',
+  CHANGE_BELONG_TO_LISTS: 'changeBelongToLists'
+}
+
 const actions: ActionTree<ListMembershipState, RootState> = {
-  changeModal: ({ commit }, value: boolean) => {
+  [ACTION_TYPES.CHANGE_MODAL]: ({ commit }, value: boolean) => {
     commit(MUTATION_TYPES.CHANGE_MODAL, value)
   },
-  setAccount: ({ commit }, account: Entity.Account) => {
+  [ACTION_TYPES.SET_ACCOUNT]: ({ commit }, account: Entity.Account) => {
     commit(MUTATION_TYPES.CHANGE_ACCOUNT, account)
   },
-  fetchListMembership: async ({ commit, rootState }, account: Entity.Account) => {
+  [ACTION_TYPES.FETCH_LIST_MEMBERSHIP]: async ({ commit, rootState }, account: Entity.Account) => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -56,7 +64,7 @@ const actions: ActionTree<ListMembershipState, RootState> = {
     commit(MUTATION_TYPES.CHANGE_BELONG_TO_LISTS, res.data)
     return res.data
   },
-  fetchLists: async ({ commit, rootState }) => {
+  [ACTION_TYPES.FETCH_LISTS]: async ({ commit, rootState }) => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -67,7 +75,7 @@ const actions: ActionTree<ListMembershipState, RootState> = {
     commit(MUTATION_TYPES.CHANGE_LISTS, res.data)
     return res.data
   },
-  changeBelongToLists: async ({ rootState, dispatch, state }, belongToLists: Array<string>) => {
+  [ACTION_TYPES.CHANGE_BELONG_TO_LISTS]: async ({ rootState, dispatch, state }, belongToLists: Array<string>) => {
     // Calcurate diff
     const removedLists = state.belongToLists.map(l => l.id).filter(i => belongToLists.indexOf(i) === -1)
     const addedLists = belongToLists.filter(i => state.belongToLists.map(l => l.id).indexOf(i) === -1)