feat(store): remove newGroupConversationStore

Signed-off-by: Maksim Sukharev <[email protected]>

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>
 

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 -->
@@ -125,6 +126,8 @@ export default {
 		},
 	},
 
+	emits: ['update:selected-participants'],
+
 	setup() {
 		const wrapper = ref(null)
 		const setContacts = ref(null)
@@ -247,15 +250,24 @@ 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() {
 			if (!this.participantPhoneItem?.phoneNumber) {
 				return
 			}
 
-			this.$store.dispatch('updateSelectedParticipants', this.participantPhoneItem)
+			this.updateSelectedParticipants(this.participantPhoneItem)
 		}
 	},
 }

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,6 +125,8 @@
 </template>
 
 <script>
+import { provide, ref } from 'vue'
+
 import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 
@@ -179,7 +181,13 @@ export default {
 
 	setup() {
 		const isInCall = useIsInCall()
-		return { isInCall }
+		const selectedParticipants = ref([])
+		provide('selectedParticipants', selectedParticipants)
+
+		return {
+			isInCall,
+			selectedParticipants,
+		}
 	},
 
 	data() {
@@ -213,10 +221,6 @@ export default {
 		disabled() {
 			return this.conversationName === '' || (this.newConversation.hasPassword && this.password === '')
 		},
-
-		selectedParticipants() {
-			return this.$store.getters.selectedParticipants
-		},
 	},
 
 	watch: {
@@ -254,7 +258,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()
@@ -274,7 +278,7 @@ export default {
 			this.password = ''
 			this.listable = CONVERSATION.LISTABLE.NONE
 			this.isAvatarEdited = false
-			this.$store.dispatch('purgeNewGroupConversationStore')
+			this.selectedParticipants = []
 		},
 
 		switchToPage(value) {

src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue

@@ -288,8 +288,7 @@
 </template>
 
 <script>
-
-import isEqual from 'lodash/isEqual.js'
+import { inject } from 'vue'
 
 import Account from 'vue-material-design-icons/Account.vue'
 import Bell from 'vue-material-design-icons/Bell.vue'
@@ -412,7 +411,12 @@ export default {
 
 	setup() {
 		const isInCall = useIsInCall()
-		return { isInCall }
+		const selectedParticipants = inject('selectedParticipants', [])
+
+		return {
+			isInCall,
+			selectedParticipants
+		}
 	},
 
 	data() {
@@ -538,16 +542,11 @@ export default {
 		 * @return {boolean}
 		 */
 		isSelected() {
-			if (this.selectable) {
-				let isSelected = false
-				this.$store.getters.selectedParticipants.forEach(selectedParticipant => {
-					if (isEqual(selectedParticipant, this.participant)) {
-						isSelected = true
-					}
+			return this.selectable
+				? this.selectedParticipants.some(selected => {
+					return selected.id === this.participant.id && selected.source === this.participant.source
 				})
-				return isSelected
-			}
-			return false
+				: false
 		},
 
 		/**

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)

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,