Merge pull request #1650 from h3poteto/iss-1642

closes #1642 Fix calcurate diff in change list memberships

spec/renderer/integration/store/TimelineSpace/Modals/ListMembership.spec.ts

@@ -26,27 +26,35 @@ const mockClient = {
       resolve(res)
     })
   },
-  deleteAccountsFromList: () => {
-    return new Promise<Response>(resolve => {
-      const res: Response = {
-        data: {},
-        status: 200,
-        statusText: 'OK',
-        headers: {}
-      }
-      resolve(res)
-    })
+  deleteAccountsFromList: (id: string, account_ids: Array<string>) => {
+    if (id === list3.id && account_ids[0]) {
+      return new Promise<Response>(resolve => {
+        const res: Response = {
+          data: {},
+          status: 200,
+          statusText: 'OK',
+          headers: {}
+        }
+        resolve(res)
+      })
+    } else {
+      return Promise.reject(new Error('list id or account id is not match'))
+    }
   },
-  addAccountsToList: () => {
-    return new Promise<Response>(resolve => {
-      const res: Response = {
-        data: {},
-        status: 200,
-        statusText: 'OK',
-        headers: {}
-      }
-      resolve(res)
-    })
+  addAccountsToList: (id: string, account_ids: Array<string>) => {
+    if (id === list1.id && account_ids[0] === account.id) {
+      return new Promise<Response>(resolve => {
+        const res: Response = {
+          data: {},
+          status: 200,
+          statusText: 'OK',
+          headers: {}
+        }
+        resolve(res)
+      })
+    } else {
+      return Promise.reject(new Error('list id or account id is not match'))
+    }
   }
 }
 
@@ -88,6 +96,11 @@ const list2: Entity.List = {
   title: 'list2'
 }
 
+const list3: Entity.List = {
+  id: '3',
+  title: 'list3'
+}
+
 let state = (): ListMembershipState => {
   return {
     modalOpen: false,
@@ -143,7 +156,7 @@ describe('ListMembership', () => {
       await store.dispatch('ListMembership/fetchListMembership', {
         id: '5'
       })
-      expect(store.state.ListMembership.belongToLists).toEqual(['1', '2'])
+      expect(store.state.ListMembership.belongToLists).toEqual([list1, list2])
     })
   })
 
@@ -161,13 +174,13 @@ describe('ListMembership', () => {
           modalOpen: false,
           account: account,
           lists: [],
-          belongToLists: [list2]
+          belongToLists: [list2, list3]
         }
       }
     })
     it('should be changed', async () => {
-      await store.dispatch('ListMembership/changeBelongToLists', [list1])
-      expect(store.state.ListMembership.belongToLists).toEqual([list1])
+      await store.dispatch('ListMembership/changeBelongToLists', [list1.id, list2.id])
+      expect(store.state.ListMembership.belongToLists).toEqual([list1, list2])
     })
   })
 })

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

@@ -1,10 +1,5 @@
 <template>
-  <el-dialog
-    :title="$t('modals.list_membership.title')"
-    :visible.sync="listMembershipModal"
-    width="400px"
-    class="list-membership-modal"
-    >
+  <el-dialog :title="$t('modals.list_membership.title')" :visible.sync="listMembershipModal" width="400px" class="list-membership-modal">
     <el-checkbox-group v-model="belongToLists" v-loading="loading">
       <table class="lists">
         <tbody>
@@ -24,7 +19,7 @@ import { mapState } from 'vuex'
 
 export default {
   name: 'list-membership',
-  data () {
+  data() {
     return {
       loading: false
     }
@@ -35,25 +30,28 @@ export default {
       lists: state => state.TimelineSpace.Modals.ListMembership.lists
     }),
     listMembershipModal: {
-      get () {
+      get() {
         return this.$store.state.TimelineSpace.Modals.ListMembership.modalOpen
       },
-      set (value) {
+      set(value) {
         this.$store.dispatch('TimelineSpace/Modals/ListMembership/changeModal', value)
       }
     },
     belongToLists: {
-      get () {
-        return this.$store.state.TimelineSpace.Modals.ListMembership.belongToLists
+      get() {
+        return this.$store.state.TimelineSpace.Modals.ListMembership.belongToLists.map(l => l.id)
       },
-      set (value) {
-        return this.$store.dispatch('TimelineSpace/Modals/ListMembership/changeBelongToLists', value)
+      set(value) {
+        this.loading = true
+        return this.$store
+          .dispatch('TimelineSpace/Modals/ListMembership/changeBelongToLists', value)
           .catch(() => {
             this.$message({
               message: this.$t('message.update_list_memberships_error'),
               type: 'error'
             })
           })
+          .finally(() => (this.loading = false))
       }
     }
   },
@@ -65,7 +63,7 @@ export default {
     }
   },
   methods: {
-    async init () {
+    async init() {
       this.loading = true
       try {
         await this.$store.dispatch('TimelineSpace/Modals/ListMembership/fetchListMembership', this.account)

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

@@ -1,5 +1,4 @@
 import generator, { Entity } from 'megalodon'
-import lodash from 'lodash'
 import { Module, MutationTree, ActionTree } from 'vuex'
 import { RootState } from '@/store'
 
@@ -54,10 +53,7 @@ const actions: ActionTree<ListMembershipState, RootState> = {
       rootState.App.userAgent
     )
     const res = await client.getAccountLists(account.id)
-    commit(
-      MUTATION_TYPES.CHANGE_BELONG_TO_LISTS,
-      res.data.map(l => l.id)
-    )
+    commit(MUTATION_TYPES.CHANGE_BELONG_TO_LISTS, res.data)
     return res.data
   },
   fetchLists: async ({ commit, rootState }) => {
@@ -71,17 +67,10 @@ const actions: ActionTree<ListMembershipState, RootState> = {
     commit(MUTATION_TYPES.CHANGE_LISTS, res.data)
     return res.data
   },
-  changeBelongToLists: async ({ rootState, commit, state }, belongToLists: Array<string>) => {
+  changeBelongToLists: async ({ rootState, dispatch, state }, belongToLists: Array<string>) => {
     // Calcurate diff
-    const removedLists = lodash.difference(
-      state.belongToLists.map(l => l.id),
-      belongToLists
-    )
-    const addedLists = lodash.difference(
-      belongToLists,
-      state.belongToLists.map(l => l.id)
-    )
-    commit(MUTATION_TYPES.CHANGE_BELONG_TO_LISTS, belongToLists)
+    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)
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -95,6 +84,7 @@ const actions: ActionTree<ListMembershipState, RootState> = {
       return client.addAccountsToList(id, [state.account!.id])
     })
     const res = await Promise.all(removedPromise.concat(addedPromise))
+    await dispatch('fetchListMembership', state.account!)
     return res
   }
 }