Fix(ParticipantsStore): Add a getter to the store

Signed-off-by: DorraJaouad <[email protected]>

src/components/RightSidebar/Participants/ParticipantsTab.vue

@@ -128,15 +128,11 @@ export default {
 		const { isActive } = toRefs(props)
 		const { sortParticipants } = useSortParticipants()
 		const isInCall = useIsInCall()
-		const {
-			participantsInitialised,
-			cancelableGetParticipants,
-		} = useGetParticipants(isActive, false)
+		const { cancelableGetParticipants } = useGetParticipants(isActive, false)
 
 		return {
 			sortParticipants,
 			isInCall,
-			participantsInitialised,
 			cancelableGetParticipants,
 		}
 	},
@@ -154,6 +150,10 @@ export default {
 	},
 
 	computed: {
+		participantsInitialised() {
+			return this.$store.getters.participantsInitialised(this.token)
+		},
+
 		participants() {
 			return this.$store.getters.participantsList(this.token).slice().sort(this.sortParticipants)
 		},

src/composables/useGetParticipants.js

@@ -45,15 +45,11 @@ export function useGetParticipants(isActive = ref(true), isTopBar = true) {
 	let fetchingParticipants = false
 	let pendingChanges = true
 
-	// Exposed
-	const participantsInitialised = ref(false)
-
 	/**
 	 * Initialise the get participants listeners
 	 *
 	 */
 	function initialiseGetParticipants() {
-		EventBus.$on('route-change', onRouteChange)
 		EventBus.$on('joined-conversation', onJoinedConversation)
 
 		// FIXME this works only temporary until signaling is fixed to be only on the calls
@@ -68,16 +64,11 @@ export function useGetParticipants(isActive = ref(true), isTopBar = true) {
 	 *
 	 */
 	function stopGetParticipants() {
-		EventBus.$off('route-change', onRouteChange)
 		EventBus.$off('joined-conversation', onJoinedConversation)
 		EventBus.$off('signaling-participant-list-changed', debounceUpdateParticipants)
 		unsubscribe('guest-promoted', onJoinedConversation)
 	}
 
-	const onRouteChange = () => {
-		participantsInitialised.value = store.getters.participantsList(token.value).length > 1
-	}
-
 	const onJoinedConversation = () => {
 		if (isOneToOneConversation.value) {
 			cancelableGetParticipants()
@@ -112,10 +103,7 @@ export function useGetParticipants(isActive = ref(true), isTopBar = true) {
 		debounceFastUpdateParticipants.clear()
 		debounceSlowUpdateParticipants.clear()
 
-		const response = await store.dispatch('fetchParticipants', { token: token.value })
-		if (response) {
-			participantsInitialised.value = true
-		}
+		await store.dispatch('fetchParticipants', { token: token.value })
 		fetchingParticipants = false
 	}
 
@@ -143,7 +131,6 @@ export function useGetParticipants(isActive = ref(true), isTopBar = true) {
 	})
 
 	return {
-		participantsInitialised,
 		cancelableGetParticipants,
 	}
 }

src/store/participantsStore.js

@@ -85,6 +85,8 @@ const state = {
 	},
 	speaking: {
 	},
+	initialised: {
+	},
 	/**
 	 * Stores the cancel function returned by `cancelableFetchParticipants`,
 	 * which allows to cancel the previous request for participants
@@ -204,6 +206,19 @@ const getters = {
 		return null
 	},
 
+	/**
+	 * Gets the initialisation status of the participants for a conversation.
+	 * This is used to determine if the participants have been fetched for a
+	 * conversation or not.
+	 *
+	 * @param {object} state - the state object.
+	 * param {string} token - the conversation token.
+	 * @return {boolean} - The initialisation status of the participants.
+	 */
+	participantsInitialised: (state) => (token) => {
+		return state.initialised[token]
+	},
+
 	/**
 	 * Replaces the legacy getParticipant getter. Returns a callback function in which you can
 	 * pass in the token and attendeeId as arguments to get the participant object.
@@ -316,6 +331,10 @@ const mutations = {
 		}
 	},
 
+	setParticipantsInitialised(state, { token, initialised }) {
+		Vue.set(state.initialised, token, initialised)
+	},
+
 	setInCall(state, { token, sessionId, flags }) {
 		if (flags === PARTICIPANT.CALL_FLAG.DISCONNECTED) {
 			if (state.inCall[token] && state.inCall[token][sessionId]) {
@@ -507,6 +526,7 @@ const actions = {
 		const attendee = getters.findParticipant(token, participant)
 		if (!attendee) {
 			commit('addParticipant', { token, participant })
+			commit('setParticipantsInitialised', { token, initialised: false })
 		}
 	},
 
@@ -647,6 +667,9 @@ const actions = {
 				}
 			})
 
+			if (context.state.initialised[token] === false) {
+				context.commit('setParticipantsInitialised', { token, initialised: true })
+			}
 			// Discard current cancel function
 			context.commit('setCancelFetchParticipants', null)