From 358a2629f9ca006a9df21f72adf411a9bc69d3c9 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Fri, 22 Mar 2024 10:52:31 +0100 Subject: [PATCH] refactor(pinia): refactor and rename store methods Signed-off-by: Maksim Sukharev --- .../BreakoutRoomsEditor.vue | 2 +- .../BreakoutRoomsParticipantsEditor.vue | 6 +- src/components/NewMessage/NewMessage.vue | 2 +- .../BreakoutRooms/BreakoutRoomItem.vue | 4 +- .../BreakoutRooms/BreakoutRoomsActions.vue | 4 +- .../BreakoutRooms/BreakoutRoomsTab.vue | 16 +- src/components/TopBar/TopBarMenu.vue | 4 +- src/store/conversationsStore.js | 5 +- src/stores/breakoutRooms.js | 200 +++++++++++------- 9 files changed, 139 insertions(+), 104 deletions(-) diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue index dbdbde6d95c..8774914f4be 100644 --- a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue +++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue @@ -156,7 +156,7 @@ export default { methods: { async handleCreateRooms() { try { - await this.breakoutRoomsStore.configureBreakoutRoomsAction({ + await this.breakoutRoomsStore.configureBreakoutRooms({ token: this.token, mode: this.mode, amount: this.amount, diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue index 300ba89eae4..ee432733a9f 100644 --- a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue +++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue @@ -323,7 +323,7 @@ export default { }, createRooms() { - this.breakoutRoomsStore.configureBreakoutRoomsAction({ + this.breakoutRoomsStore.configureBreakoutRooms({ token: this.token, mode: 2, amount: this.roomNumber, @@ -333,7 +333,7 @@ export default { }, reorganizeAttendees() { - this.breakoutRoomsStore.reorganizeAttendeesAction({ + this.breakoutRoomsStore.reorganizeAttendees({ token: this.token, attendeeMap: this.createAttendeeMap(), }) @@ -345,7 +345,7 @@ export default { }, deleteBreakoutRooms() { - this.breakoutRoomsStore.deleteBreakoutRoomsAction({ token: this.token }) + this.breakoutRoomsStore.deleteBreakoutRooms(this.token) }, }, } diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue index 70a600c7acf..8e81bd6abaa 100644 --- a/src/components/NewMessage/NewMessage.vue +++ b/src/components/NewMessage/NewMessage.vue @@ -718,7 +718,7 @@ export default { // Broadcast message to all breakout rooms async broadcastMessage(token, message) { try { - await this.breakoutRoomsStore.broadcastMessageToBreakoutRoomsAction({ token, message }) + await this.breakoutRoomsStore.broadcastMessageToBreakoutRooms({ token, message }) this.$emit('sent') } catch { this.$emit('failure') diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue index 6ea66ecef26..7ff6fd03b11 100644 --- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue +++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue @@ -224,7 +224,7 @@ export default { }, dismissRequestAssistance() { - this.breakoutRoomsStore.resetRequestAssistanceAction({ token: this.roomToken }) + this.breakoutRoomsStore.dismissRequestAssistance(this.roomToken) }, async joinRoom() { @@ -235,7 +235,7 @@ export default { } else { try { if (this.mainConversation.breakoutRoomMode === CONVERSATION.BREAKOUT_ROOM_MODE.FREE) { - await this.breakoutRoomsStore.switchToBreakoutRoomAction({ + await this.breakoutRoomsStore.switchToBreakoutRoom({ token: this.breakoutRoomsStore.getParentRoomToken(this.roomToken), target: this.roomToken, }) diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue index d3b2ccab1ab..a1a2441cf22 100644 --- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue +++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue @@ -238,11 +238,11 @@ export default { methods: { startBreakoutRooms() { - this.breakoutRoomsStore.startBreakoutRoomsAction(this.mainToken) + this.breakoutRoomsStore.startBreakoutRooms(this.mainToken) }, stopBreakoutRooms() { - this.breakoutRoomsStore.stopBreakoutRoomsAction(this.mainToken) + this.breakoutRoomsStore.stopBreakoutRooms(this.mainToken) }, openSendMessageDialog() { diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue index d80d4b5b7dc..41485c64349 100644 --- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue +++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue @@ -146,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() { @@ -155,19 +157,9 @@ export default { }, methods: { - getBreakoutRooms() { - if (this.breakoutRoomsConfigured) { - this.breakoutRoomsStore.getBreakoutRoomsAction({ - token: this.mainToken, - }) - } - }, - getParticipants() { if (this.breakoutRoomsConfigured) { - this.breakoutRoomsStore.getBreakoutRoomsParticipantsAction({ - token: this.mainToken, - }) + this.breakoutRoomsStore.fetchBreakoutRoomsParticipants(this.mainToken) } }, }, diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue index 9b18bcbbcd4..b6dfa224fa8 100644 --- a/src/components/TopBar/TopBarMenu.vue +++ b/src/components/TopBar/TopBarMenu.vue @@ -478,9 +478,9 @@ export default { } const hasAssistanceRequested = this.conversation.breakoutRoomStatus === CONVERSATION.BREAKOUT_ROOM_STATUS.STATUS_ASSISTANCE_REQUESTED if (newState && !hasAssistanceRequested) { - this.breakoutRoomsStore.requestAssistanceAction({ token: this.token }) + this.breakoutRoomsStore.requestAssistance(this.token) } else if (!newState && hasAssistanceRequested) { - this.breakoutRoomsStore.resetRequestAssistanceAction({ token: this.token }) + this.breakoutRoomsStore.dismissRequestAssistance(this.token) } } }, diff --git a/src/store/conversationsStore.js b/src/store/conversationsStore.js index a7469c77b7a..ffdb6a913e8 100644 --- a/src/store/conversationsStore.js +++ b/src/store/conversationsStore.js @@ -394,10 +394,7 @@ const actions = { } if (newConversation.objectType === CONVERSATION.OBJECT_TYPE.BREAKOUT_ROOM) { - breakoutRoomsStore.addBreakoutRoom({ - parentRoomToken: newConversation.objectId, - breakoutRoom: newConversation, - }) + breakoutRoomsStore.addBreakoutRoom(newConversation.objectId, newConversation) } } diff --git a/src/stores/breakoutRooms.js b/src/stores/breakoutRooms.js index d748ae5133b..796378ce233 100644 --- a/src/stores/breakoutRooms.js +++ b/src/stores/breakoutRooms.js @@ -27,6 +27,7 @@ import Vue from 'vue' import { showError } from '@nextcloud/dialogs' import { emit } from '@nextcloud/event-bus' +import { CONVERSATION } from '../constants.js' import { configureBreakoutRooms, deleteBreakoutRooms, @@ -44,17 +45,17 @@ import store from '../store/index.js' export const useBreakoutRoomsStore = defineStore('breakoutRooms', { state: () => ({ - breakoutRooms: {}, + rooms: {}, }), getters: { breakoutRooms: (state) => (token) => { - return state.breakoutRooms[token] ?? [] + return Object.values(Object(state.rooms[token])) }, getParentRoomToken: (state) => (token) => { - for (const parentRoomToken in state.breakoutRooms) { - if (state.breakoutRooms[parentRoomToken].find(breakoutRoom => breakoutRoom.token === token)) { + for (const parentRoomToken in state.rooms) { + if (state.rooms[parentRoomToken]?.[token] !== undefined) { return parentRoomToken } } @@ -63,57 +64,64 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', { actions: { /** - * The breakout rooms api return an array with mixed breakout rooms and "parent" conversations, we want to add the - * breakout rooms to this store and update the parent conversations in the conversations store. + * 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} conversationOrArray a single conversation or an array of conversations. * - * @param {Array} conversationsList the array of mixed breakout rooms and "parent" conversation - * @param {string }parentRoomToken the parent room token; */ - processConversations(conversationsList, parentRoomToken) { - conversationsList.forEach(conversation => { - if (conversation.token === parentRoomToken) { - store.commit('addConversation', conversation) - } else { - this.addBreakoutRoom({ - parentRoomToken, - breakoutRoom: conversation, - }) + processConversations(token, conversationOrArray) { + const conversations = Array.isArray(conversationOrArray) ? conversationOrArray : [conversationOrArray] + conversations.forEach(conversation => { + if (conversation.objectType === CONVERSATION.OBJECT_TYPE.BREAKOUT_ROOM) { + this.addBreakoutRoom(token, conversation) } }) + store.dispatch('patchConversations', { conversations }) }, /** - * Adds a breakout room to the store. + * Purges breakout rooms from both stores. * - * @param {object} payload the action payload; - * @param {string} payload.parentRoomToken the parent room token; - * @param {object} payload.breakoutRoom the breakout room; + * @param {string} token the parent room token; */ - addBreakoutRoom({ parentRoomToken, breakoutRoom }) { - if (!this.breakoutRooms[parentRoomToken]) { - Vue.set(this.breakoutRooms, parentRoomToken, []) + purgeBreakoutRoomsStore(token) { + for (const roomToken in this.rooms[token]) { + store.dispatch('deleteConversation', roomToken) } - // The breakout room to be added is first removed if it exists already. - this.breakoutRooms[parentRoomToken] = this.breakoutRooms[parentRoomToken].filter(current => current.token !== breakoutRoom.token) - Vue.set(this.breakoutRooms, parentRoomToken, [...this.breakoutRooms[parentRoomToken], breakoutRoom]) + Vue.delete(this.rooms, token) }, /** - * Deletes all breakout rooms for a given parent room token. + * Adds a breakout room to the store. * - * @param {string} parentRoomToken the parent room token; + * @param {string} token the parent room token; + * @param {object} breakoutRoom the breakout room. */ - deleteBreakoutRooms(parentRoomToken) { - Vue.delete(this.breakoutRooms, parentRoomToken) + addBreakoutRoom(token, breakoutRoom) { + if (!this.rooms[token]) { + Vue.set(this.rooms, token, {}) + } + Vue.set(this.rooms[token], breakoutRoom.token, breakoutRoom) }, - async configureBreakoutRoomsAction({ token, mode, amount, attendeeMap }) { + /** + * 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. + */ + async configureBreakoutRooms({ token, mode, amount, attendeeMap }) { try { const response = await configureBreakoutRooms(token, mode, amount, attendeeMap) - // Get the participants of the breakout rooms - this.getBreakoutRoomsParticipantsAction({ token }) + this.processConversations(token, response.data.ocs.data) - this.processConversations(response.data.ocs.data, token) + // Get the participants of the breakout rooms + await this.fetchBreakoutRoomsParticipants(token) // Open the sidebar and switch to the breakout rooms tab emit('spreed:select-active-sidebar-tab', 'breakout-rooms') @@ -124,13 +132,20 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', { } }, - async reorganizeAttendeesAction({ token, attendeeMap }) { + /** + * 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. + */ + async reorganizeAttendees({ token, attendeeMap }) { try { const response = await reorganizeAttendees(token, attendeeMap) - // Get the participants of the breakout rooms - this.getBreakoutRoomsParticipantsAction({ token }) + this.processConversations(token, response.data.ocs.data) - this.processConversations(response.data.ocs.data, token) + // Get the participants of the breakout rooms + await this.fetchBreakoutRoomsParticipants(token) } catch (error) { console.error(error) @@ -138,56 +153,76 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', { } }, - async deleteBreakoutRoomsAction({ token }) { + /** + * Deletes configured breakout rooms for a given parent room token. + * + * @param {string} token the parent room token. + */ + async deleteBreakoutRooms(token) { try { const response = await deleteBreakoutRooms(token) - const conversation = response.data.ocs.data - - // Add the updated parent conversation to the conversations store - store.commit('addConversation', conversation) - + // Update returned parent conversation + this.processConversations(token, response.data.ocs.data) // Remove breakout rooms from this store - this.deleteBreakoutRooms(token) + this.purgeBreakoutRoomsStore(token) } catch (error) { console.error(error) showError(t('spreed', 'An error occurred while deleting breakout rooms')) } }, - async getBreakoutRoomsAction({ token }) { + /** + * Get configured breakout rooms for a given parent room token. + * + * @param {string} token the parent room token. + */ + async getBreakoutRooms(token) { try { const response = await getBreakoutRooms(token) - - this.processConversations(response.data.ocs.data, token) - + this.processConversations(token, response.data.ocs.data) } catch (error) { console.error(error) } }, - async startBreakoutRoomsAction(token) { + /** + * Start a breakout rooms session for a given parent room token. + * + * @param {string} token the parent room token. + */ + async startBreakoutRooms(token) { try { const response = await startBreakoutRooms(token) - - this.processConversations(response.data.ocs.data, token) + this.processConversations(token, response.data.ocs.data) } catch (error) { console.error(error) showError(t('spreed', 'An error occurred while starting breakout rooms')) } }, - async stopBreakoutRoomsAction(token) { + /** + * Stop a breakout rooms session for a given parent room token. + * + * @param {string} token the parent room token. + */ + async stopBreakoutRooms(token) { try { const response = await stopBreakoutRooms(token) - - this.processConversations(response.data.ocs.data, token) + this.processConversations(token, response.data.ocs.data) } catch (error) { console.error(error) showError(t('spreed', 'An error occurred while stopping breakout rooms')) } }, - async broadcastMessageToBreakoutRoomsAction({ token, message }) { + /** + * 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. + */ + async broadcastMessageToBreakoutRooms({ token, message }) { try { await broadcastMessageToBreakoutRooms(token, message) } catch (error) { @@ -196,7 +231,12 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', { } }, - async getBreakoutRoomsParticipantsAction({ token }) { + /** + * Update a participants in breakout rooms for a given token. + * + * @param {string} token the parent room token. + */ + async fetchBreakoutRoomsParticipants(token) { try { const response = await getBreakoutRoomsParticipants(token) const splittedParticipants = response.data.ocs.data.reduce((acc, participant) => { @@ -215,43 +255,49 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', { } }, - async requestAssistanceAction({ token }) { + /** + * Notify moderators when raise a hand in a breakout room with given token. + * + * @param {string} token the breakout room token. + */ + async requestAssistance(token) { try { const response = await requestAssistance(token) - // Add the updated parent conversation to the conversations store - store.commit('addConversation', response.data.ocs.data) - this.addBreakoutRoom({ - parentRoomToken: response.data.ocs.data.objectId, - breakoutRoom: response.data.ocs.data, - }) + const parentToken = response.data.ocs.data.objectId + this.processConversations(parentToken, response.data.ocs.data) } catch (error) { console.error(error) showError(t('spreed', 'An error occurred while requesting assistance')) } }, - async resetRequestAssistanceAction({ token }) { + /** + * Dismiss a notification about raised hand for a breakout room with given token. + * + * @param {string} token the breakout room token. + */ + async dismissRequestAssistance(token) { try { const response = await resetRequestAssistance(token) - // Add the updated parent conversation to the conversations store - store.commit('addConversation', response.data.ocs.data) - this.addBreakoutRoom({ - parentRoomToken: response.data.ocs.data.objectId, - breakoutRoom: response.data.ocs.data, - }) + const parentToken = response.data.ocs.data.objectId + this.processConversations(parentToken, response.data.ocs.data) } catch (error) { console.error(error) showError(t('spreed', 'An error occurred while resetting the request for assistance')) } }, - async switchToBreakoutRoomAction({ token, target }) { + /** + * 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. + */ + async switchToBreakoutRoom({ token, target }) { try { const response = await switchToBreakoutRoom(token, target) - - // A single breakout room (the target one) is returned, so it needs - // to be wrapper in an array. - this.processConversations([response.data.ocs.data], token) + this.processConversations(token, response.data.ocs.data) } catch (error) { console.error(error) showError(t('spreed', 'An error occurred while joining breakout room'))