Merge pull request #11700 from nextcloud/fix/noid/specify-invitation-loader

fix(federation): scope button disabling to invitation user interacted with

2 files changed, 19 insertions, 18 deletions

diff --git a/src/components/LeftSidebar/InvitationHandler.vue b/src/components/LeftSidebar/InvitationHandler.vue
index 9c453643c..7ac0bd230 100644
--- a/src/components/LeftSidebar/InvitationHandler.vue
+++ b/src/components/LeftSidebar/InvitationHandler.vue
@@ -31,8 +31,8 @@
 				{{ t('spreed', 'Join conversations from remote Nextcloud servers') }}
 			</p>
 			<ul class="inbox__list">
-				<li v-for="item of invitations"
-					:key="`invitation_${item.id}`"
+				<li v-for="(item, id) in invitations"
+					:key="`invitation_${id}`"
 					class="inbox__item">
 					<ConversationIcon :item="item" hide-user-status />
 					<div class="inbox__item-desc">
@@ -49,20 +49,20 @@
 					<NcButton type="tertiary"
 						:aria-label="t('spreed', 'Decline invitation')"
 						:title="t('spreed', 'Decline invitation')"
-						:disabled="isLoading"
-						@click="rejectShare(item.id)">
+						:disabled="!!item.loading"
+						@click="rejectShare(id)">
 						<template #icon>
-							<NcLoadingIcon v-if="isLoading" :size="20" />
+							<NcLoadingIcon v-if="item.loading === 'reject'" :size="20" />
 							<CancelIcon v-else :size="20" />
 						</template>
 					</NcButton>
 					<NcButton type="primary"
 						:aria-label="t('spreed', 'Accept invitation')"
 						:title="t('spreed', 'Accept invitation')"
-						:disabled="isLoading"
-						@click="acceptShare(item.id)">
+						:disabled="!!item.loading"
+						@click="acceptShare(id)">
 						<template #icon>
-							<NcLoadingIcon v-if="isLoading" :size="20" />
+							<NcLoadingIcon v-if="item.loading === 'accept'" :size="20" />
 							<CheckIcon v-else :size="20" />
 						</template>
 						{{ t('spreed', 'Accept') }}
@@ -108,7 +108,6 @@ export default {
 	data() {
 		return {
 			modal: false,
-			isLoading: false,
 		}
 	},
 
@@ -118,13 +117,15 @@ export default {
 		},
 
 		invitations() {
-			return Object.values(this.federationStore.pendingShares)
-				.map(item => ({
-					...item,
+			const pendingShares = this.federationStore.pendingShares
+			for (const id in pendingShares) {
+				pendingShares[id] = Object.assign({}, pendingShares[id], {
 					type: CONVERSATION.TYPE.GROUP,
 					isFederatedConversation: true,
 					isDummyConversation: true,
-				}))
+				})
+			}
+			return pendingShares
 		},
 	},
 
@@ -140,20 +141,17 @@ export default {
 		},
 
 		async acceptShare(id) {
-			this.isLoading = true
 			const conversation = await this.federationStore.acceptShare(id)
-			this.isLoading = false
 			if (conversation?.token) {
 				this.$store.dispatch('addConversation', conversation)
-				this.$router.push({ name: 'conversation', params: { token: conversation.token } })
+			}
+			if (this.invitations.length === 0) {
 				this.closeModal()
 			}
 		},
 
 		async rejectShare(id) {
-			this.isLoading = true
 			await this.federationStore.rejectShare(id)
-			this.isLoading = false
 			if (this.invitations.length === 0) {
 				this.closeModal()
 			}
diff --git a/src/stores/federation.js b/src/stores/federation.js
index 5d4bc5228..455e30b52 100644
--- a/src/stores/federation.js
+++ b/src/stores/federation.js
@@ -118,6 +118,7 @@ export const useFederationStore = defineStore('federation', {
 			if (!this.pendingShares[id]) {
 				return
 			}
+			Vue.delete(this.pendingShares[id], 'loading')
 			Vue.set(this.acceptedShares, id, {
 				...this.pendingShares[id],
 				accessToken: conversation.remoteAccessToken,
@@ -138,6 +139,7 @@ export const useFederationStore = defineStore('federation', {
 				return
 			}
 			try {
+				Vue.set(this.pendingShares[id], 'loading', 'accept')
 				const response = await acceptShare(id)
 				this.markInvitationAccepted(id, response.data.ocs.data)
 				return response.data.ocs.data
@@ -157,6 +159,7 @@ export const useFederationStore = defineStore('federation', {
 				return
 			}
 			try {
+				Vue.set(this.pendingShares[id], 'loading', 'reject')
 				await rejectShare(id)
 				Vue.delete(this.pendingShares, id)
 			} catch (error) {