Fix following/followers UI bugs

Signed-off-by: Julius Härtl <jus@bitgrid.net>

2 files changed, 52 insertions, 6 deletions

diff --git a/src/components/UserEntry.vue b/src/components/UserEntry.vue
index ecf6f3a7..601aadcc 100644
--- a/src/components/UserEntry.vue
+++ b/src/components/UserEntry.vue
@@ -36,10 +36,12 @@
 				<!-- TODO check where the html is coming from to avoid security issues -->
 				<p v-html="item.summary" />
 			</div>
-			<button class="icon-checkmark-color" @click="unfollow()"
-				@mouseover="followingText=t('social', 'Unfollow')"
-				@mouseleave="followingText=t('social', 'Following')">{{ followingText }}</button>
-			<button class="primary" @click="follow">Follow</button>
+			<button v-if="item.details.following" :class="{'icon-loading-small': followLoading}"
+				@click="unfollow()"
+				@mouseover="followingText=t('social', 'Unfollow')" @mouseleave="followingText=t('social', 'Following')">
+			<span><span class="icon-checkmark" />{{ followingText }}</span></button>
+			<button v-else :class="{'icon-loading-small': followLoading}" class="primary"
+				@click="follow"><span>{{ t('social', 'Follow') }}</span></button>
 		</div>
 	</div>
 </template>
@@ -91,4 +93,12 @@ export default {
 	.user-description {
 		opacity: 0.7;
 	}
+
+	button {
+		min-width: 110px;
+	}
+
+	button * {
+		cursor: pointer;
+	}
 </style>
diff --git a/src/mixins/follow.js b/src/mixins/follow.js
index 111ec18e..2a9a3aa9 100644
--- a/src/mixins/follow.js
+++ b/src/mixins/follow.js
@@ -22,13 +22,49 @@
 
 import axios from 'nextcloud-axios'
 
+class FollowException {
+
+}
+
+class UnfollowException {
+
+}
+
 export default {
+	data() {
+		return {
+			followLoading: false
+		}
+	},
 	methods: {
 		follow() {
-			return axios.put(OC.generateUrl('/apps/social/api/v1/current/follow?account=' + this.item.account))
+			this.followLoading = true
+			return axios.put(OC.generateUrl('/apps/social/api/v1/current/follow?account=' + this.item.account)).then((response) => {
+				this.followLoading = false
+				if (response.data.status === -1) {
+					throw new FollowException()
+				}
+				this.item.details.following = true
+			}).catch((error) => {
+				this.followLoading = false
+				OC.Notification.showTemporary(`Failed to follow user ${this.item.account}`)
+				console.error(`Failed to follow user ${this.item.account}`, error)
+			})
+
 		},
 		unfollow() {
-			return axios.delete(OC.generateUrl('/apps/social/api/v1/current/follow?account=' + this.item.account))
+			this.followLoading = true
+			return axios.delete(OC.generateUrl('/apps/social/api/v1/current/follow?account=' + this.item.account)).then((response) => {
+				this.followLoading = false
+				if (response.data.status === -1) {
+					throw new UnfollowException()
+				}
+				this.item.details.following = false
+			}).catch((error) => {
+				this.followLoading = false
+				OC.Notification.showTemporary(`Failed to unfollow user ${this.item.account}`)
+				console.error(`Failed to unfollow user ${this.item.account}`, error)
+			})
 		}
 	}
 }