refactor(pinia): migrate breakoutRoomsStore to Pinia 🍍

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.configureBreakoutRooms({
 					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.configureBreakoutRooms({
 				token: this.token,
 				mode: 2,
 				amount: this.roomNumber,
@@ -326,7 +333,7 @@ export default {
 		},
 
 		reorganizeAttendees() {
-			this.$store.dispatch('reorganizeAttendeesAction', {
+			this.breakoutRoomsStore.reorganizeAttendees({
 				token: this.token,
 				attendeeMap: this.createAttendeeMap(),
 			})
@@ -338,9 +345,7 @@ export default {
 		},
 
 		deleteBreakoutRooms() {
-			this.$store.dispatch('deleteBreakoutRoomsAction', {
-				token: this.token,
-			})
+			this.breakoutRoomsStore.deleteBreakoutRooms(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.broadcastMessageToBreakoutRooms({ 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.dismissRequestAssistance(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.switchToBreakoutRoom({
+							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.startBreakoutRooms(this.mainToken)
 		},
 
 		stopBreakoutRooms() {
-			this.$store.dispatch('stopBreakoutRoomsAction', this.mainToken)
+			this.breakoutRoomsStore.stopBreakoutRooms(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() {
@@ -139,7 +146,9 @@ export default {
 
 	mounted() {
 		// Get the breakout room every time the tab is mounted
-		this.getBreakoutRooms()
+		if (this.breakoutRoomsConfigured) {
+			this.breakoutRoomsStore.getBreakoutRooms(this.mainToken)
+		}
 	},
 
 	beforeDestroy() {
@@ -148,19 +157,9 @@ export default {
 	},
 
 	methods: {
-		getBreakoutRooms() {
-			if (this.breakoutRoomsConfigured) {
-				this.$store.dispatch('getBreakoutRoomsAction', {
-					token: this.mainToken,
-				})
-			}
-		},
-
 		getParticipants() {
 			if (this.breakoutRoomsConfigured) {
-				this.$store.dispatch('getBreakoutRoomsParticipantsAction', {
-					token: this.mainToken,
-				})
+				this.breakoutRoomsStore.fetchBreakoutRoomsParticipants(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

@@ -190,6 +190,7 @@ import PromotedView from '../../assets/missingMaterialDesignIcons/PromotedView.v
 
 import { useIsInCall } from '../../composables/useIsInCall.js'
 import { CALL, CONVERSATION, PARTICIPANT } from '../../constants.js'
+import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.js'
 import { generateAbsoluteUrl } from '../../utils/handleUrl.ts'
 import { callParticipantCollection } from '../../utils/webrtc/index.js'
 
@@ -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.requestAssistance(this.token)
 				} else if (!newState && hasAssistanceRequested) {
-					this.$store.dispatch('resetRequestAssistanceAction', { token: this.token })
+					this.breakoutRoomsStore.dismissRequestAssistance(this.token)
 				}
 			}
 		},

src/services/breakoutRoomsService.js

@@ -114,7 +114,7 @@ const broadcastMessageToBreakoutRooms = async function(token, message) {
  * @param {string} token the conversation token
  * @return {Promise<import('axios').AxiosResponse<any>>} The array of conversations
  */
-const getBreakoutRoomsParticipants = async function(token) {
+const fetchBreakoutRoomsParticipants = async function(token) {
 	return await axios.get(generateOcsUrl('/apps/spreed/api/v4/room/{token}/breakout-rooms/participants', {
 		token,
 	}))
@@ -139,7 +139,7 @@ const requestAssistance = async function(token) {
  * @param {string} token the breakout room token
  * @return {Promise<import('axios').AxiosResponse<any>>} The array of conversations
  */
-const resetRequestAssistance = async function(token) {
+const dismissRequestAssistance = async function(token) {
 	return await axios.delete(generateOcsUrl('/apps/spreed/api/v1/breakout-rooms/{token}/request-assistance', {
 		token,
 	})
@@ -171,8 +171,8 @@ export {
 	startBreakoutRooms,
 	stopBreakoutRooms,
 	broadcastMessageToBreakoutRooms,
-	getBreakoutRoomsParticipants,
+	fetchBreakoutRoomsParticipants,
 	requestAssistance,
-	resetRequestAssistance,
+	dismissRequestAssistance,
 	switchToBreakoutRoom,
 }