Cancel getparticipants requests once changing conversation

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

Author: marcoambrosini

src/components/RightSidebar/Participants/ParticipantsTab.vue

@@ -91,6 +91,7 @@ import isInLobby from '../../../mixins/isInLobby'
 import { loadState } from '@nextcloud/initial-state'
 import SHA1 from 'crypto-js/sha1'
 import Hex from 'crypto-js/enc-hex'
+import CancelableRequest from '../../../utils/cancelableRequest'
 
 export default {
 	name: 'ParticipantsTab',
@@ -120,6 +121,10 @@ export default {
 			contactsLoading: false,
 			participantsInitialised: false,
 			isCirclesEnabled: loadState('talk', 'circles_enabled'),
+			/**
+			 * Stores the cancel function for cancelableGetParticipants
+			 */
+			cancelGetParticipants: () => {},
 		}
 	},
 
@@ -230,13 +235,13 @@ export default {
 		// FIXME this works only temporary until signaling is fixed to be only on the calls
 		// Then we have to search for another solution. Maybe the room list which we update
 		// periodically gets a hash of all online sessions?
-		EventBus.$on('Signaling::participantListChanged', this.getParticipants)
+		EventBus.$on('Signaling::participantListChanged', this.cancelableGetParticipnts)
 	},
 
 	beforeDestroy() {
 		EventBus.$off('routeChange', this.onRouteChange)
 		EventBus.$off('joinedConversation', this.onJoinedConversation)
-		EventBus.$off('Signaling::participantListChanged', this.getParticipants)
+		EventBus.$off('Signaling::participantListChanged', this.cancelableGetParticipnts)
 	},
 
 	methods: {
@@ -254,7 +259,7 @@ export default {
 		 */
 		onJoinedConversation() {
 			this.$nextTick(() => {
-				this.getParticipants()
+				this.cancelableGetParticipnts()
 			})
 		},
 
@@ -277,7 +282,7 @@ export default {
 			try {
 				const response = await searchPossibleConversations(this.searchText, this.token)
 				this.searchResults = response.data.ocs.data
-				this.getParticipants()
+				this.cancelableGetParticipnts()
 				this.contactsLoading = false
 			} catch (exception) {
 				console.error(exception)
@@ -295,13 +300,13 @@ export default {
 			try {
 				await addParticipant(this.token, item.id, item.source)
 				this.searchText = ''
-				this.getParticipants()
+				this.cancelableGetParticipnts()
 			} catch (exception) {
 				console.debug(exception)
 			}
 		},
 
-		async getParticipants() {
+		async cancelableGetParticipnts() {
 			if (this.token === '' || this.isInLobby) {
 				return
 			}
@@ -310,7 +315,12 @@ export default {
 				// The token must be stored in a local variable to ensure that
 				// the same token is used after waiting.
 				const token = this.token
-				const participants = await fetchParticipants(token)
+				// Clear previous requests if there's one pending
+				this.cancelGetParticipants('Cancel get participants')
+				// Get a new cancelable request function and cancel function pair
+				const { request, cancel } = CancelableRequest(fetchParticipants)
+				this.cancelGetParticipants = cancel
+				const participants = await request(token)
 				this.$store.dispatch('purgeParticipantsStore', token)
 				participants.data.ocs.data.forEach(participant => {
 					this.$store.dispatch('addParticipant', {

src/services/participantsService.js

@@ -137,8 +137,8 @@ const demoteFromModerator = async(token, options) => {
 	return response
 }
 
-const fetchParticipants = async(token) => {
-	const response = await axios.get(generateOcsUrl('apps/spreed/api/v1/room', 2) + token + '/participants')
+const fetchParticipants = async(token, options) => {
+	const response = await axios.get(generateOcsUrl('apps/spreed/api/v1/room', 2) + token + '/participants', options)
 	return response
 }