refactor(pinia): migrate breakoutRoomsStore to Pinia

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

src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue

@@ -97,6 +97,8 @@ import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import BreakoutRoomsParticipantsEditor from './BreakoutRoomsParticipantsEditor.vue'
 
+import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.js'
+
 export default {
 	name: 'BreakoutRoomsEditor',
 
@@ -117,6 +119,12 @@ export default {
 
 	emits: ['close'],
 
+	setup() {
+		return {
+			breakoutRoomsStore: useBreakoutRoomsStore(),
+		}
+	},
+
 	data() {
 		return {
 			mode: '1',
@@ -148,7 +156,7 @@ export default {
 	methods: {
 		async handleCreateRooms() {
 			try {
-				await this.$store.dispatch('configureBreakoutRoomsAction', {
+				await this.breakoutRoomsStore.configureBreakoutRoomsAction({
 					token: this.token,
 					mode: this.mode,
 					amount: this.amount,

src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue

@@ -119,6 +119,7 @@ import SelectableParticipant from './SelectableParticipant.vue'
 import BreakoutRoomItem from '../RightSidebar/BreakoutRooms/BreakoutRoomItem.vue'
 
 import { ATTENDEE, CONVERSATION, PARTICIPANT } from '../../constants.js'
+import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.js'
 
 export default {
 	name: 'BreakoutRoomsParticipantsEditor',
@@ -149,12 +150,18 @@ export default {
 
 		breakoutRooms: {
 			type: Array,
-			default: undefined,
+			default: () => [],
 		},
 	},
 
 	emits: ['back', 'close'],
 
+	setup() {
+		return {
+			breakoutRoomsStore: useBreakoutRoomsStore(),
+		}
+	},
+
 	data() {
 		return {
 			selectedParticipants: [],
@@ -207,7 +214,7 @@ export default {
 		// If the breakoutRooms prop is populated it means that this component is
 		// being used to reorganize the attendees of an existing breakout room.
 		isReorganizingAttendees() {
-			return this.breakoutRooms?.length
+			return this.breakoutRooms.length
 		},
 
 		confirmButtonLabel() {
@@ -316,7 +323,7 @@ export default {
 		},
 
 		createRooms() {
-			this.$store.dispatch('configureBreakoutRoomsAction', {
+			this.breakoutRoomsStore.configureBreakoutRoomsAction({
 				token: this.token,
 				mode: 2,
 				amount: this.roomNumber,
@@ -326,7 +333,7 @@ export default {
 		},
 
 		reorganizeAttendees() {
-			this.$store.dispatch('reorganizeAttendeesAction', {
+			this.breakoutRoomsStore.reorganizeAttendeesAction({
 				token: this.token,
 				attendeeMap: this.createAttendeeMap(),
 			})
@@ -338,9 +345,7 @@ export default {
 		},
 
 		deleteBreakoutRooms() {
-			this.$store.dispatch('deleteBreakoutRoomsAction', {
-				token: this.token,
-			})
+			this.breakoutRoomsStore.deleteBreakoutRoomsAction({ token: this.token })
 		},
 	},
 }

src/components/NewMessage/NewMessage.vue

@@ -224,6 +224,7 @@ import BrowserStorage from '../../services/BrowserStorage.js'
 import { EventBus } from '../../services/EventBus.js'
 import { shareFile } from '../../services/filesSharingServices.js'
 import { searchPossibleMentions } from '../../services/mentionsService.js'
+import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.js'
 import { useChatExtrasStore } from '../../stores/chatExtras.js'
 import { useSettingsStore } from '../../stores/settings.js'
 import { fetchClipboardContent } from '../../utils/clipboard.js'
@@ -314,12 +315,10 @@ export default {
 	expose: ['focusInput'],
 
 	setup() {
-		const chatExtrasStore = useChatExtrasStore()
-		const settingsStore = useSettingsStore()
-
 		return {
-			chatExtrasStore,
-			settingsStore,
+			breakoutRoomsStore: useBreakoutRoomsStore(),
+			chatExtrasStore: useChatExtrasStore(),
+			settingsStore: useSettingsStore(),
 			supportTypingStatus,
 		}
 	},
@@ -719,7 +718,7 @@ export default {
 		// Broadcast message to all breakout rooms
 		async broadcastMessage(token, message) {
 			try {
-				await this.$store.dispatch('broadcastMessageToBreakoutRoomsAction', { token, message })
+				await this.breakoutRoomsStore.broadcastMessageToBreakoutRoomsAction({ token, message })
 				this.$emit('sent')
 			} catch {
 				this.$emit('failure')

src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue

@@ -93,6 +93,7 @@ import SendMessageDialog from '../../BreakoutRoomsEditor/SendMessageDialog.vue'
 
 import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
 import { EventBus } from '../../../services/EventBus.js'
+import { useBreakoutRoomsStore } from '../../../stores/breakoutRooms.js'
 
 export default {
 	name: 'BreakoutRoomItem',
@@ -138,6 +139,12 @@ export default {
 		},
 	},
 
+	setup() {
+		return {
+			breakoutRoomsStore: useBreakoutRoomsStore(),
+		}
+	},
+
 	data() {
 		return {
 			showParticipants: true,
@@ -217,7 +224,7 @@ export default {
 		},
 
 		dismissRequestAssistance() {
-			this.$store.dispatch('resetRequestAssistanceAction', { token: this.roomToken })
+			this.breakoutRoomsStore.resetRequestAssistanceAction({ token: this.roomToken })
 		},
 
 		async joinRoom() {
@@ -228,8 +235,8 @@ export default {
 			} else {
 				try {
 					if (this.mainConversation.breakoutRoomMode === CONVERSATION.BREAKOUT_ROOM_MODE.FREE) {
-						await this.$store.dispatch('switchToBreakoutRoomAction', {
-							token: this.$store.getters.parentRoomToken(this.roomToken),
+						await this.breakoutRoomsStore.switchToBreakoutRoomAction({
+							token: this.breakoutRoomsStore.getParentRoomToken(this.roomToken),
 							target: this.roomToken,
 						})
 					}

src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue

@@ -124,6 +124,7 @@ import SendMessageDialog from '../../BreakoutRoomsEditor/SendMessageDialog.vue'
 import { useIsInCall } from '../../../composables/useIsInCall.js'
 import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
 import { EventBus } from '../../../services/EventBus.js'
+import { useBreakoutRoomsStore } from '../../../stores/breakoutRooms.js'
 
 export default {
 	name: 'BreakoutRoomsActions',
@@ -169,8 +170,10 @@ export default {
 	},
 
 	setup() {
-		const isInCall = useIsInCall()
-		return { isInCall }
+		return {
+			isInCall: useIsInCall(),
+			breakoutRoomsStore: useBreakoutRoomsStore(),
+		}
 	},
 
 	data() {
@@ -235,11 +238,11 @@ export default {
 
 	methods: {
 		startBreakoutRooms() {
-			this.$store.dispatch('startBreakoutRoomsAction', this.mainToken)
+			this.breakoutRoomsStore.startBreakoutRoomsAction(this.mainToken)
 		},
 
 		stopBreakoutRooms() {
-			this.$store.dispatch('stopBreakoutRoomsAction', this.mainToken)
+			this.breakoutRoomsStore.stopBreakoutRoomsAction(this.mainToken)
 		},
 
 		openSendMessageDialog() {

src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue

@@ -58,6 +58,7 @@ import BreakoutRoomsActions from './BreakoutRoomsActions.vue'
 import Participant from '../Participants/Participant.vue'
 
 import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
+import { useBreakoutRoomsStore } from '../../../stores/breakoutRooms.js'
 
 export default {
 	name: 'BreakoutRoomsTab',
@@ -90,6 +91,12 @@ export default {
 		},
 	},
 
+	setup() {
+		return {
+			breakoutRoomsStore: useBreakoutRoomsStore(),
+		}
+	},
+
 	data() {
 		return {
 			breakoutRoomsParticipantsInterval: undefined,
@@ -111,7 +118,7 @@ export default {
 		},
 
 		breakoutRooms() {
-			return this.$store.getters.breakoutRooms(this.mainToken)
+			return this.breakoutRoomsStore.breakoutRooms(this.mainToken)
 		},
 
 		breakoutRoomsConfigured() {
@@ -150,15 +157,15 @@ export default {
 	methods: {
 		getBreakoutRooms() {
 			if (this.breakoutRoomsConfigured) {
-				this.$store.dispatch('getBreakoutRoomsAction', {
+				this.breakoutRoomsStore.getBreakoutRoomsAction({
 					token: this.mainToken,
 				})
 			}
 		},
 
 		getParticipants() {
 			if (this.breakoutRoomsConfigured) {
-				this.$store.dispatch('getBreakoutRoomsParticipantsAction', {
+				this.breakoutRoomsStore.getBreakoutRoomsParticipantsAction({
 					token: this.mainToken,
 				})
 			}

src/components/TopBar/CallButton.vue

@@ -116,6 +116,7 @@ import { useIsInCall } from '../../composables/useIsInCall.js'
 import { ATTENDEE, CALL, CONVERSATION, PARTICIPANT } from '../../constants.js'
 import { callSIPDialOut } from '../../services/callsService.js'
 import { EventBus } from '../../services/EventBus.js'
+import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.js'
 import { useSettingsStore } from '../../stores/settings.js'
 import { useTalkHashStore } from '../../stores/talkHash.js'
 import { blockCalls, unsupportedWarning } from '../../utils/browserCheck.js'
@@ -184,13 +185,11 @@ export default {
 	},
 
 	setup() {
-		const isInCall = useIsInCall()
-		const talkHashStore = useTalkHashStore()
-		const settingsStore = useSettingsStore()
 		return {
-			isInCall,
-			settingsStore,
-			talkHashStore,
+			isInCall: useIsInCall(),
+			breakoutRoomsStore: useBreakoutRoomsStore(),
+			talkHashStore: useTalkHashStore(),
+			settingsStore: useSettingsStore(),
 		}
 	},
 
@@ -430,9 +429,8 @@ export default {
 		},
 
 		async switchToParentRoom() {
-			const parentRoomToken = this.$store.getters.parentRoomToken(this.token)
 			EventBus.$emit('switch-to-conversation', {
-				token: parentRoomToken,
+				token: this.breakoutRoomsStore.getParentRoomToken(this.token),
 			})
 		},
 

src/components/TopBar/TopBarMenu.vue

@@ -191,6 +191,7 @@ import PromotedView from '../../assets/missingMaterialDesignIcons/PromotedView.v
 import { useIsInCall } from '../../composables/useIsInCall.js'
 import { CALL, CONVERSATION, PARTICIPANT } from '../../constants.js'
 import { generateAbsoluteUrl } from '../../utils/handleUrl.ts'
+import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.js'
 import { callParticipantCollection } from '../../utils/webrtc/index.js'
 
 export default {
@@ -252,8 +253,10 @@ export default {
 	emits: ['open-breakout-rooms-editor'],
 
 	setup() {
-		const isInCall = useIsInCall()
-		return { isInCall }
+		return {
+			isInCall: useIsInCall(),
+			breakoutRoomsStore: useBreakoutRoomsStore(),
+		}
 	},
 
 	data() {
@@ -475,9 +478,9 @@ export default {
 				}
 				const hasAssistanceRequested = this.conversation.breakoutRoomStatus === CONVERSATION.BREAKOUT_ROOM_STATUS.STATUS_ASSISTANCE_REQUESTED
 				if (newState && !hasAssistanceRequested) {
-					this.$store.dispatch('requestAssistanceAction', { token: this.token })
+					this.breakoutRoomsStore.requestAssistanceAction({ token: this.token })
 				} else if (!newState && hasAssistanceRequested) {
-					this.$store.dispatch('resetRequestAssistanceAction', { token: this.token })
+					this.breakoutRoomsStore.resetRequestAssistanceAction({ token: this.token })
 				}
 			}
 		},