Fix circle membership request

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

5 files changed, 28 insertions, 42 deletions

diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
index a0f1de97..1fe478e4 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/src/components/AppContent/CircleContent.vue
@@ -46,45 +46,27 @@
 		<CircleDetails :circle="circle">
 			<!-- not a member -->
 			<template v-if="!circle.isMember">
-				<!-- Join request in progress -->
-				<EmptyContent v-if="loadingJoin" icon="icon-loading">
-					{{ t('contacts', 'Joining circle') }}
-				</EmptyContent>
-
 				<!-- Pending request validation -->
-				<EmptyContent v-else-if="circle.isPendingJoin" icon="icon-loading">
+				<EmptyContent v-if="circle.isPendingJoin" icon="icon-loading">
 					{{ t('contacts', 'Your request to join this circle is pending approval') }}
 				</EmptyContent>
 
 				<EmptyContent v-else icon="icon-circles">
 					{{ t('contacts', 'You are not a member of {circle}', { circle: circle.displayName}) }}
-
-					<!-- Only show the join button if the circle is accepting requests -->
-					<template v-if="circle.canJoin" #desc>
-						<button :disabled="loadingJoin" class="primary" @click="requestJoin">
-							<Login slot="icon"
-								:size="16"
-								decorative />
-							{{ t('contacts', 'Request to join') }}
-						</button>
-					</template>
 				</EmptyContent>
 			</template>
 		</CircleDetails>
 	</AppContent>
 </template>
 <script>
+import { showError } from '@nextcloud/dialogs'
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
 
-import Login from 'vue-material-design-icons/Login'
-
 import CircleDetails from '../CircleDetails'
 import MemberList from '../MemberList'
 import RouterMixin from '../../mixins/RouterMixin'
-import { joinCircle } from '../../services/circles.ts'
-import { showError } from '@nextcloud/dialogs'
 
 export default {
 	name: 'CircleContent',
@@ -93,7 +75,6 @@ export default {
 		AppContent,
 		CircleDetails,
 		EmptyContent,
-		Login,
 		MemberList,
 	},
 
@@ -108,7 +89,6 @@ export default {
 
 	data() {
 		return {
-			loadingJoin: false,
 			loadingList: false,
 			showDetails: false,
 		}
@@ -164,22 +144,6 @@ export default {
 			}
 		},
 
-		/**
-		 * Request to join this circle
-		 */
-		async requestJoin() {
-			this.loadingJoin = true
-
-			try {
-				await joinCircle(this.circle.id)
-			} catch (error) {
-				showError(t('contacts', 'Unable to join the circle'))
-			} finally {
-				this.loadingJoin = false
-			}
-
-		},
-
 		// Hide the circle details
 		hideDetails() {
 			this.showDetails = false
diff --git a/src/components/AppNavigation/CircleNavigationItem.vue b/src/components/AppNavigation/CircleNavigationItem.vue
index 9b4ec1d6..e2ee53eb 100644
--- a/src/components/AppNavigation/CircleNavigationItem.vue
+++ b/src/components/AppNavigation/CircleNavigationItem.vue
@@ -61,6 +61,7 @@
 			<!-- join circle -->
 			<ActionButton
 				v-else-if="!circle.isMember && circle.canJoin"
+				:disabled="loadingJoin"
 				@click="joinCircle">
 				{{ joinButtonTitle }}
 				<LocationEnter slot="icon"
diff --git a/src/components/CircleDetails.vue b/src/components/CircleDetails.vue
index 774d7dce..b9346491 100644
--- a/src/components/CircleDetails.vue
+++ b/src/components/CircleDetails.vue
@@ -54,7 +54,7 @@
 			</template>
 		</DetailsHeader>
 
-		<section class="circle-details-section">
+		<section class="circle-details-section circle-details-section__actions">
 			<!-- copy circle link -->
 			<a class="circle-details__action-copy-link button"
 				:href="circleUrl"
@@ -62,6 +62,17 @@
 				@click.stop.prevent="copyToClipboard(circleUrl)">
 				{{ copyButtonText }}
 			</a>
+
+			<!-- Only show the join button if the circle is accepting requests -->
+			<button v-if="!circle.isMember && circle.canJoin"
+				:disabled="loadingJoin"
+				class="primary"
+				@click="joinCircle">
+				<Login slot="icon"
+					:size="16"
+					decorative />
+				{{ t('contacts', 'Request to join') }}
+			</button>
 		</section>
 
 		<section v-if="showDescription" class="circle-details-section">
@@ -118,6 +129,7 @@ import AppContentDetails from '@nextcloud/vue/dist/Components/AppContentDetails'
 import Avatar from '@nextcloud/vue/dist/Components/Avatar'
 import RichContenteditable from '@nextcloud/vue/dist/Components/RichContenteditable'
 
+import Login from 'vue-material-design-icons/Login'
 import Logout from 'vue-material-design-icons/Logout'
 
 import { CircleEdit, editCircle } from '../services/circles.ts'
@@ -135,6 +147,7 @@ export default {
 		CircleConfigs,
 		ContentHeading,
 		DetailsHeader,
+		Login,
 		Logout,
 		RichContenteditable,
 	},
@@ -223,6 +236,13 @@ export default {
 		margin-top: 24px;
 	}
 
+	&__actions {
+		display: flex;
+		a, button {
+			margin-right: 8px;
+		}
+	}
+
 	&__description {
 		max-width: 800px;
 	}
diff --git a/src/mixins/CircleActionsMixin.js b/src/mixins/CircleActionsMixin.js
index 00f0c299..873db246 100644
--- a/src/mixins/CircleActionsMixin.js
+++ b/src/mixins/CircleActionsMixin.js
@@ -40,6 +40,7 @@ export default {
 	data() {
 		return {
 			loadingAction: false,
+			loadingJoin: false,
 		}
 	},
 
@@ -102,13 +103,13 @@ export default {
 		},
 
 		async joinCircle() {
-			this.loadingAction = true
+			this.loadingJoin = true
 			try {
 				await joinCircle(this.circle.id)
 			} catch (error) {
 				showError(t('contacts', 'Unable to join the circle'))
 			} finally {
-				this.loadingAction = false
+				this.loadingJoin = false
 			}
 
 		},
diff --git a/src/models/constants.ts b/src/models/constants.ts
index d8356e17..9b7e83aa 100644
--- a/src/models/constants.ts
+++ b/src/models/constants.ts
@@ -87,7 +87,7 @@ export const CIRCLES_MEMBER_TYPES = {
 }
 
 export const CIRCLES_MEMBER_LEVELS = {
-	// [MEMBER_LEVEL_NONE]: t('circles', 'None'),
+	[MEMBER_LEVEL_NONE]: t('circles', 'Pending'),
 	[MEMBER_LEVEL_MEMBER]: t('circles', 'Member'),
 	[MEMBER_LEVEL_MODERATOR]: t('circles', 'Moderator'),
 	[MEMBER_LEVEL_ADMIN]: t('circles', 'Admin'),