refactor(breakout): migrate store to typescript

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

src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue

@@ -97,7 +97,7 @@ import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import BreakoutRoomsParticipantsEditor from './BreakoutRoomsParticipantsEditor.vue'
 
-import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.js'
+import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.ts'
 
 export default {
 	name: 'BreakoutRoomsEditor',

src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue

@@ -119,7 +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'
+import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.ts'
 
 export default {
 	name: 'BreakoutRoomsParticipantsEditor',

src/components/NewMessage/NewMessage.vue

@@ -224,7 +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 { useBreakoutRoomsStore } from '../../stores/breakoutRooms.ts'
 import { useChatExtrasStore } from '../../stores/chatExtras.js'
 import { useSettingsStore } from '../../stores/settings.js'
 import { fetchClipboardContent } from '../../utils/clipboard.js'

src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue

@@ -93,7 +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'
+import { useBreakoutRoomsStore } from '../../../stores/breakoutRooms.ts'
 
 export default {
 	name: 'BreakoutRoomItem',

src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue

@@ -124,7 +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'
+import { useBreakoutRoomsStore } from '../../../stores/breakoutRooms.ts'
 
 export default {
 	name: 'BreakoutRoomsActions',

src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue

@@ -58,7 +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'
+import { useBreakoutRoomsStore } from '../../../stores/breakoutRooms.ts'
 
 export default {
 	name: 'BreakoutRoomsTab',

src/components/TopBar/CallButton.vue

@@ -116,7 +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 { useBreakoutRoomsStore } from '../../stores/breakoutRooms.ts'
 import { useSettingsStore } from '../../stores/settings.js'
 import { useTalkHashStore } from '../../stores/talkHash.js'
 import { blockCalls, unsupportedWarning } from '../../utils/browserCheck.js'

src/components/TopBar/TopBarMenu.vue

@@ -190,7 +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 { useBreakoutRoomsStore } from '../../stores/breakoutRooms.ts'
 import { generateAbsoluteUrl } from '../../utils/handleUrl.ts'
 import { callParticipantCollection } from '../../utils/webrtc/index.js'
 

src/store/conversationsStore.js

@@ -70,7 +70,7 @@ import {
 	stopCallRecording,
 } from '../services/recordingService.js'
 import { talkBroadcastChannel } from '../services/talkBroadcastChannel.js'
-import { useBreakoutRoomsStore } from '../stores/breakoutRooms.js'
+import { useBreakoutRoomsStore } from '../stores/breakoutRooms.ts'
 import { useChatExtrasStore } from '../stores/chatExtras.js'
 import { useReactionsStore } from '../stores/reactions.js'
 import { useTalkHashStore } from '../stores/talkHash.js'

src/stores/breakoutRooms.js → src/stores/breakoutRooms.ts

@@ -41,18 +41,31 @@ import {
 	switchToBreakoutRoom,
 } from '../services/breakoutRoomsService.ts'
 import store from '../store/index.js'
+import type {
+	Conversation,
+	Participant,
+	BreakoutRoom,
+	broadcastChatMessageParams,
+	configureBreakoutRoomsParams,
+	reorganizeAttendeesParams,
+	switchToBreakoutRoomParams
+} from '../types'
 
+type Payload<T> = T & { token: string }
+type State = {
+	rooms: Record<string, Record<string, BreakoutRoom>>
+}
 export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
-	state: () => ({
+	state: (): State => ({
 		rooms: {},
 	}),
 
 	getters: {
-		breakoutRooms: (state) => (token) => {
+		breakoutRooms: (state) => (token: string): BreakoutRoom[] => {
 			return Object.values(Object(state.rooms[token]))
 		},
 
-		getParentRoomToken: (state) => (token) => {
+		getParentRoomToken: (state) => (token: string): string | undefined => {
 			for (const parentRoomToken in state.rooms) {
 				if (state.rooms[parentRoomToken]?.[token] !== undefined) {
 					return parentRoomToken
@@ -66,11 +79,11 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
 		 * The breakout rooms API return an array with mixed breakout and parent rooms, we want to update
 		 * breakout rooms in this store and all conversations in conversationsStore.
 		 *
-		 * @param {string} token the parent room token;
-		 * @param {Array<object>|object} conversationOrArray a single conversation or an array of conversations.
+		 * @param token the parent room token;
+		 * @param conversationOrArray a single conversation or an array of conversations.
 		 *
 		 */
-		processConversations(token, conversationOrArray) {
+		processConversations(token: string, conversationOrArray: Conversation | Conversation[]) {
 			const conversations = Array.isArray(conversationOrArray) ? conversationOrArray : [conversationOrArray]
 			store.dispatch('patchConversations', { conversations })
 		},
@@ -78,9 +91,9 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
 		/**
 		 * Purges breakout rooms from both stores.
 		 *
-		 * @param {string} token the parent room token;
+		 * @param token the parent room token;
 		 */
-		purgeBreakoutRoomsStore(token) {
+		purgeBreakoutRoomsStore(token: string) {
 			for (const roomToken in this.rooms[token]) {
 				store.dispatch('deleteConversation', roomToken)
 			}
@@ -90,10 +103,10 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
 		/**
 		 * Adds a breakout room to the store.
 		 *
-		 * @param {string} token the parent room token;
-		 * @param {object} breakoutRoom the breakout room.
+		 * @param token the parent room token;
+		 * @param breakoutRoom the breakout room.
 		 */
-		addBreakoutRoom(token, breakoutRoom) {
+		addBreakoutRoom(token: string, breakoutRoom: BreakoutRoom) {
 			if (!this.rooms[token]) {
 				Vue.set(this.rooms, token, {})
 			}
@@ -103,13 +116,13 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
 		/**
 		 * Creates breakout rooms for specified conversation.
 		 *
-		 * @param {object} payload the action payload;
-		 * @param {string} payload.token the parent room token;
-		 * @param {string} payload.mode the mode of the breakout rooms;
-		 * @param {number} payload.amount the amount of the breakout rooms to create;
-		 * @param {string} payload.attendeeMap the stringified JSON object with attendee map.
+		 * @param payload the action payload;
+		 * @param payload.token the parent room token;
+		 * @param payload.mode the mode of the breakout rooms;
+		 * @param payload.amount the amount of the breakout rooms to create;
+		 * @param payload.attendeeMap the stringified JSON object with attendee map.
 		 */
-		async configureBreakoutRooms({ token, mode, amount, attendeeMap }) {
+		async configureBreakoutRooms({ token, mode, amount, attendeeMap }: Payload<configureBreakoutRoomsParams>) {
 			try {
 				const response = await configureBreakoutRooms(token, mode, amount, attendeeMap)
 				this.processConversations(token, response.data.ocs.data)
@@ -129,11 +142,11 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
 		/**
 		 * Reassign participants to another breakout rooms.
 		 *
-		 * @param {object} payload the action payload;
-		 * @param {string} payload.token the parent room token;
-		 * @param {string} payload.attendeeMap the stringified JSON object with attendee map.
+		 * @param payload the action payload;
+		 * @param payload.token the parent room token;
+		 * @param payload.attendeeMap the stringified JSON object with attendee map.
 		 */
-		async reorganizeAttendees({ token, attendeeMap }) {
+		async reorganizeAttendees({ token, attendeeMap }: Payload<reorganizeAttendeesParams>) {
 			try {
 				const response = await reorganizeAttendees(token, attendeeMap)
 				this.processConversations(token, response.data.ocs.data)
@@ -150,9 +163,9 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
 		/**
 		 * Deletes configured breakout rooms for a given parent room token.
 		 *
-		 * @param {string} token the parent room token.
+		 * @param token the parent room token.
 		 */
-		async deleteBreakoutRooms(token) {
+		async deleteBreakoutRooms(token: string) {
 			try {
 				const response = await deleteBreakoutRooms(token)
 				// Update returned parent conversation
@@ -168,9 +181,9 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
 		/**
 		 * Get configured breakout rooms for a given parent room token.
 		 *
-		 * @param {string} token the parent room token.
+		 * @param token the parent room token.
 		 */
-		async getBreakoutRooms(token) {
+		async getBreakoutRooms(token: string) {
 			try {
 				const response = await getBreakoutRooms(token)
 				this.processConversations(token, response.data.ocs.data)
@@ -182,9 +195,9 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
 		/**
 		 * Start a breakout rooms session for a given parent room token.
 		 *
-		 * @param {string} token the parent room token.
+		 * @param token the parent room token.
 		 */
-		async startBreakoutRooms(token) {
+		async startBreakoutRooms(token: string) {
 			try {
 				const response = await startBreakoutRooms(token)
 				this.processConversations(token, response.data.ocs.data)
@@ -197,9 +210,9 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
 		/**
 		 * Stop a breakout rooms session for a given parent room token.
 		 *
-		 * @param {string} token the parent room token.
+		 * @param token the parent room token.
 		 */
-		async stopBreakoutRooms(token) {
+		async stopBreakoutRooms(token: string) {
 			try {
 				const response = await stopBreakoutRooms(token)
 				this.processConversations(token, response.data.ocs.data)
@@ -212,11 +225,11 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
 		/**
 		 * Send a message to all breakout rooms for a given parent room token.
 		 *
-		 * @param {object} payload the action payload;
-		 * @param {string} payload.token the parent room token;
-		 * @param {string} payload.message the message text.
+		 * @param payload the action payload;
+		 * @param payload.token the parent room token;
+		 * @param payload.message the message text.
 		 */
-		async broadcastMessageToBreakoutRooms({ token, message }) {
+		async broadcastMessageToBreakoutRooms({ token, message }: Payload<broadcastChatMessageParams>) {
 			try {
 				await broadcastMessageToBreakoutRooms(token, message)
 			} catch (error) {
@@ -228,12 +241,12 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
 		/**
 		 * Update participants in breakout rooms for a given token.
 		 *
-		 * @param {string} token the parent room token.
+		 * @param token the parent room token.
 		 */
-		async fetchBreakoutRoomsParticipants(token) {
+		async fetchBreakoutRoomsParticipants(token: string) {
 			try {
 				const response = await fetchBreakoutRoomsParticipants(token)
-				const splittedParticipants = response.data.ocs.data.reduce((acc, participant) => {
+				const splittedParticipants = response.data.ocs.data.reduce((acc: Record<string, Participant[]>, participant) => {
 					if (!acc[participant.roomToken]) {
 						acc[participant.roomToken] = []
 					}
@@ -252,9 +265,9 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
 		/**
 		 * Notify moderators when raise a hand in a breakout room with given token.
 		 *
-		 * @param {string} token the breakout room token.
+		 * @param token the breakout room token.
 		 */
-		async requestAssistance(token) {
+		async requestAssistance(token: string) {
 			try {
 				const response = await requestAssistance(token)
 				const parentToken = response.data.ocs.data.objectId
@@ -268,9 +281,9 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
 		/**
 		 * Dismiss a notification about raised hand for a breakout room with given token.
 		 *
-		 * @param {string} token the breakout room token.
+		 * @param token the breakout room token.
 		 */
-		async dismissRequestAssistance(token) {
+		async dismissRequestAssistance(token: string) {
 			try {
 				const response = await dismissRequestAssistance(token)
 				const parentToken = response.data.ocs.data.objectId
@@ -284,11 +297,11 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
 		/**
 		 * Switch between breakout rooms if participant is allowed to choose the room freely
 		 *
-		 * @param {object} payload the action payload;
-		 * @param {string} payload.token the parent room token;
-		 * @param {string} payload.target the breakout room token.
+		 * @param payload the action payload;
+		 * @param payload.token the parent room token;
+		 * @param payload.target the breakout room token.
 		 */
-		async switchToBreakoutRoom({ token, target }) {
+		async switchToBreakoutRoom({ token, target }: Payload<switchToBreakoutRoomParams>) {
 			try {
 				const response = await switchToBreakoutRoom(token, target)
 				this.processConversations(token, response.data.ocs.data)