feat(store): remove newGroupConversationStore

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

8 files changed, 36 insertions, 210 deletions

diff --git a/src/components/ContactSelectionBubble.vue b/src/components/ContactSelectionBubble.vue
index e71b19692..e44386a33 100644
--- a/src/components/ContactSelectionBubble.vue
+++ b/src/components/ContactSelectionBubble.vue
@@ -33,7 +33,7 @@
 		</span>
 		<NcButton type="tertiary-no-background"
 			:aria-label="removeLabel"
-			@click="removeParticipantFromSelection(participant)">
+			@click="$emit('update', participant)">
 			<template #icon>
 				<Close :size="16" />
 			</template>
@@ -66,6 +66,8 @@ export default {
 		},
 	},
 
+	emits: ['update'],
+
 	setup() {
 		return { AVATAR }
 	},
@@ -81,12 +83,6 @@ export default {
 			return t('spreed', 'Remove participant {name}', { name: this.displayName })
 		},
 	},
-
-	methods: {
-		removeParticipantFromSelection(participant) {
-			this.$store.dispatch('updateSelectedParticipants', participant)
-		},
-	},
 }
 </script>
 
diff --git a/src/components/NewConversationDialog/NewConversationContactsPage.vue b/src/components/NewConversationDialog/NewConversationContactsPage.vue
index 6b694c1f4..2c5dfcb39 100644
--- a/src/components/NewConversationDialog/NewConversationContactsPage.vue
+++ b/src/components/NewConversationDialog/NewConversationContactsPage.vue
@@ -52,7 +52,8 @@
 			group>
 			<ContactSelectionBubble v-for="participant in selectedParticipants"
 				:key="participant.source + participant.id"
-				:participant="participant" />
+				:participant="participant"
+				@update="updateSelectedParticipants" />
 		</TransitionWrapper>
 
 		<!-- Search results -->
@@ -124,6 +125,8 @@ export default {
 		},
 	},
 
+	emits: ['update:selected-participants'],
+
 	setup() {
 		const wrapper = ref(null)
 		const setContacts = ref(null)
@@ -246,7 +249,16 @@ export default {
 		},
 
 		updateSelectedParticipants(participant) {
-			this.$store.dispatch('updateSelectedParticipants', participant)
+			const isSelected = this.selectedParticipants.some(selected => {
+				return selected.id === participant.id && selected.source === participant.source
+			})
+			const payload = isSelected
+				? this.selectedParticipants.filter(selected => {
+					return selected.id !== participant.id || selected.source !== participant.source
+				})
+				: [...this.selectedParticipants, participant]
+
+			this.$emit('update:selected-participants', payload)
 		},
 
 		addParticipantPhone() {
@@ -254,7 +266,7 @@ export default {
 				return
 			}
 
-			this.$store.dispatch('updateSelectedParticipants', this.participantPhoneItem)
+			this.updateSelectedParticipants(this.participantPhoneItem)
 		}
 	},
 }
diff --git a/src/components/NewConversationDialog/NewConversationDialog.vue b/src/components/NewConversationDialog/NewConversationDialog.vue
index a297bc45f..56b750686 100644
--- a/src/components/NewConversationDialog/NewConversationDialog.vue
+++ b/src/components/NewConversationDialog/NewConversationDialog.vue
@@ -44,7 +44,7 @@
 				<!-- Second page -->
 				<NewConversationContactsPage v-if="page === 1"
 					class="new-group-conversation__content"
-					:selected-participants="selectedParticipants"
+					:selected-participants.sync="selectedParticipants"
 					:can-moderate-sip-dial-out="canModerateSipDialOut"
 					:conversation-name="conversationName" />
 			</div>
@@ -125,7 +125,7 @@
 </template>
 
 <script>
-import { provide } from 'vue'
+import { provide, ref } from 'vue'
 
 import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 import Check from 'vue-material-design-icons/Check.vue'
@@ -181,10 +181,16 @@ export default {
 
 	setup() {
 		const isInCall = useIsInCall()
+		const selectedParticipants = ref([])
+		provide('selectedParticipants', selectedParticipants)
+
 		// Add a visual bulk selection state for Participant component
 		provide('bulkParticipantsSelection', true)
 
-		return { isInCall }
+		return {
+			isInCall,
+			selectedParticipants,
+		}
 	},
 
 	data() {
@@ -218,10 +224,6 @@ export default {
 		disabled() {
 			return this.conversationName === '' || (this.newConversation.hasPassword && this.password === '')
 		},
-
-		selectedParticipants() {
-			return this.$store.getters.selectedParticipants
-		},
 	},
 
 	watch: {
@@ -259,7 +261,7 @@ export default {
 			if (item) {
 				// Preload the conversation name from group selection
 				this.newConversation.displayName = item.label
-				this.$store.dispatch('updateSelectedParticipants', item)
+				this.selectedParticipants.push(item)
 			}
 
 			this.showModal()
@@ -279,7 +281,7 @@ export default {
 			this.password = ''
 			this.listable = CONVERSATION.LISTABLE.NONE
 			this.isAvatarEdited = false
-			this.$store.dispatch('purgeNewGroupConversationStore')
+			this.selectedParticipants = []
 		},
 
 		switchToPage(value) {
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
index 9b729743b..1d5f85b57 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
@@ -289,7 +289,6 @@
 
 <script>
 import { inject } from 'vue'
-import isEqual from 'lodash/isEqual.js'
 
 import Account from 'vue-material-design-icons/Account.vue'
 import Bell from 'vue-material-design-icons/Bell.vue'
@@ -404,11 +403,14 @@ export default {
 
 	setup() {
 		const isInCall = useIsInCall()
+		const selectedParticipants = inject('selectedParticipants', [])
+
 		// Toggles the bulk selection state of this component
 		const isSelectable = inject('bulkParticipantsSelection', false)
 
 		return {
 			isInCall,
+			selectedParticipants,
 			isSelectable,
 		}
 	},
@@ -536,16 +538,11 @@ export default {
 		 * @return {boolean}
 		 */
 		isSelected() {
-			if (this.isSelectable) {
-				let isSelected = false
-				this.$store.getters.selectedParticipants.forEach(selectedParticipant => {
-					if (isEqual(selectedParticipant, this.participant)) {
-						isSelected = true
-					}
+			return this.isSelectable
+				? this.selectedParticipants.some(selected => {
+					return selected.id === this.participant.id && selected.source === this.participant.source
 				})
-				return isSelected
-			}
-			return false
+				: false
 		},
 
 		/**
diff --git a/src/store/conversationsStore.spec.js b/src/store/conversationsStore.spec.js
index 6ae38936a..ec5542c51 100644
--- a/src/store/conversationsStore.spec.js
+++ b/src/store/conversationsStore.spec.js
@@ -1225,8 +1225,6 @@ describe('conversationsStore', () => {
 	})
 
 	test('sets default permissions for a conversation', async () => {
-		expect(store.getters.selectedParticipants).toStrictEqual([])
-
 		await store.dispatch('setConversationPermissions', { token: testToken, permissions })
 
 		expect(setConversationPermissions).toHaveBeenCalledWith(testToken, permissions)
@@ -1235,8 +1233,6 @@ describe('conversationsStore', () => {
 	})
 
 	test('sets default permissions for a call', async () => {
-		expect(store.getters.selectedParticipants).toStrictEqual([])
-
 		await store.dispatch('setCallPermissions', { token: testToken, permissions })
 
 		expect(setCallPermissions).toHaveBeenCalledWith(testToken, permissions)
diff --git a/src/store/newGroupConversationStore.js b/src/store/newGroupConversationStore.js
deleted file mode 100644
index 88495d16f..000000000
--- a/src/store/newGroupConversationStore.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>
- *
- * @author Marco Ambrosini <marcoambrosini@icloud.com>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-import isEqual from 'lodash/isEqual.js'
-
-const state = {
-	selectedParticipants: [],
-}
-
-const getDefaultState = () => {
-	return {
-		selectedParticipants: [],
-	}
-}
-
-const getters = {
-	/**
-	 * Gets the selected participants array
-	 *
-	 * @param {object} state the state object.
-	 * @return {Array} the selected participants array
-	 */
-	selectedParticipants: (state) => {
-		if (state.selectedParticipants) {
-			return state.selectedParticipants
-		}
-		return []
-	},
-}
-
-const mutations = {
-	/**
-	 * Adds a the selected participants to the store.
-	 *
-	 * @param {object} state current store state;
-	 * @param {object} participant the selected participant;
-	 */
-	addSelectedParticipant(state, participant) {
-		state.selectedParticipants = [...state.selectedParticipants, participant]
-	},
-
-	/**
-	 * Adds a the selected participants to the store.
-	 *
-	 * @param {object} state current store state;
-	 * @param {object} participant the selected participants
-	 */
-	removeSelectedParticipant(state, participant) {
-		state.selectedParticipants = state.selectedParticipants.filter((selectedParticipant) => {
-			return selectedParticipant.id !== participant.id
-		})
-	},
-
-	/**
-	 * Purges the store
-	 *
-	 * @param {object} state current store state;
-	 */
-	purgeNewGroupConversationStore(state) {
-		Object.assign(state, getDefaultState())
-	},
-}
-
-const actions = {
-
-	/**
-	 * Adds or removes the participant to the selected participants array
-	 *
-	 * @param {object} context default store context;
-	 * @param {Function} context.commit the contexts commit function.
-	 * @param {object} context.state the contexts state object.
-	 * @param {object} participant the clicked participant;
-	 */
-	updateSelectedParticipants({ commit, state }, participant) {
-		let isAlreadySelected = false
-		state.selectedParticipants.forEach(selectedParticipant => {
-			if (isEqual(selectedParticipant, participant)) {
-				isAlreadySelected = true
-			}
-		})
-		if (isAlreadySelected) {
-			/**
-			 * Remove the clicked participant from the selected participants list
-			 */
-			commit('removeSelectedParticipant', participant)
-		} else {
-			/**
-			 * Add the clicked participant from the selected participants list
-			 */
-			commit('addSelectedParticipant', participant)
-		}
-	},
-
-	/**
-	 * Purge the store
-	 *
-	 * @param {object} context default store context;
-	 */
-	purgeNewGroupConversationStore(context) {
-		context.commit('purgeNewGroupConversationStore')
-	},
-}
-
-export default { state, mutations, getters, actions }
diff --git a/src/store/newGroupConversationStore.spec.js b/src/store/newGroupConversationStore.spec.js
deleted file mode 100644
index 135965620..000000000
--- a/src/store/newGroupConversationStore.spec.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { createLocalVue } from '@vue/test-utils'
-import { cloneDeep } from 'lodash'
-import Vuex from 'vuex'
-
-import newGroupConversationStore from './newGroupConversationStore.js'
-
-describe('newGroupConversationStore', () => {
-	let localVue = null
-	let store = null
-
-	beforeEach(() => {
-		localVue = createLocalVue()
-		localVue.use(Vuex)
-
-		// eslint-disable-next-line import/no-named-as-default-member
-		store = new Vuex.Store(cloneDeep(newGroupConversationStore))
-	})
-
-	afterEach(() => {
-		jest.clearAllMocks()
-	})
-
-	test('toggles selected participants', () => {
-		store.dispatch('updateSelectedParticipants', { id: 'participant-1' })
-		store.dispatch('updateSelectedParticipants', { id: 'participant-2' })
-		store.dispatch('updateSelectedParticipants', { id: 'participant-3' })
-
-		expect(store.getters.selectedParticipants).toStrictEqual([
-			{ id: 'participant-1' },
-			{ id: 'participant-2' },
-			{ id: 'participant-3' },
-		])
-
-		store.dispatch('updateSelectedParticipants', { id: 'participant-2' })
-
-		expect(store.getters.selectedParticipants).toStrictEqual([
-			{ id: 'participant-1' },
-			{ id: 'participant-3' },
-		])
-	})
-
-	test('purges selection', () => {
-		expect(store.getters.selectedParticipants).toStrictEqual([])
-
-		store.dispatch('updateSelectedParticipants', { id: 'participant-1' })
-		store.dispatch('updateSelectedParticipants', { id: 'participant-2' })
-
-		store.dispatch('purgeNewGroupConversationStore')
-
-		expect(store.getters.selectedParticipants).toStrictEqual([])
-	})
-
-})
diff --git a/src/store/storeConfig.js b/src/store/storeConfig.js
index 96d39750d..d7c3b07b2 100644
--- a/src/store/storeConfig.js
+++ b/src/store/storeConfig.js
@@ -27,7 +27,6 @@ import callViewStore from './callViewStore.js'
 import conversationsStore from './conversationsStore.js'
 import fileUploadStore from './fileUploadStore.js'
 import messagesStore from './messagesStore.js'
-import newGroupConversationStore from './newGroupConversationStore.js'
 import participantsStore from './participantsStore.js'
 import pollStore from './pollStore.js'
 import sidebarStore from './sidebarStore.js'
@@ -44,7 +43,6 @@ export default {
 		conversationsStore,
 		fileUploadStore,
 		messagesStore,
-		newGroupConversationStore,
 		participantsStore,
 		sidebarStore,
 		soundsStore,