Merge pull request #1571 from nextcloud/artonge/fix/correctly_store_followers_in_store

Fixes on user profile

3 files changed, 115 insertions, 57 deletions

diff --git a/src/components/FollowButton.vue b/src/components/FollowButton.vue
index 634f02de..980b30a9 100644
--- a/src/components/FollowButton.vue
+++ b/src/components/FollowButton.vue
@@ -23,19 +23,30 @@
 <template>
 	<!-- Show button only if user is authenticated and she is not the same as the account viewed -->
 	<div v-if="!serverData.public && accountInfo && accountInfo.viewerLink!='viewer'">
-		<NcButton v-if="isCurrentUserFollowing"
-			:class="{'icon-loading-small': followLoading}"
-			@click="unfollow()"
-			@mouseover="followingText=t('social', 'Unfollow')"
-			@mouseleave="followingText=t('social', 'Following')">
-			<template #icon>
-				<Check :size="32" />
-			</template>
-			{{ followingText }}
-		</NcButton>
+		<div v-if="isCurrentUserFollowing"
+			class="follow-button-container">
+			<NcButton :disabled="loading"
+				class="follow-button follow-button--following"
+				type="success">
+				<template #icon>
+					<Check :size="32" />
+				</template>
+				{{ t('social', 'Following') }}
+			</NcButton>
+			<NcButton :disabled="loading"
+				class="follow-button follow-button--unfollow"
+				type="error"
+				@click="unfollow()">
+				<template #icon>
+					<CloseOctagon :size="32" />
+				</template>
+				{{ t('social', 'Unfollow') }}
+			</NcButton>
+		</div>
 		<NcButton v-else
-			:class="{'icon-loading-small': followLoading}"
-			class="primary"
+			:disabled="loading"
+			type="primary"
+			class="follow-button"
 			@click="follow">
 			{{ t('social', 'Follow') }}
 		</NcButton>
@@ -46,12 +57,14 @@
 import accountMixins from '../mixins/accountMixins.js'
 import currentUser from '../mixins/currentUserMixin.js'
 import Check from 'vue-material-design-icons/Check.vue'
+import CloseOctagon from 'vue-material-design-icons/CloseOctagon.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'FollowButton',
 	components: {
 		Check,
+		CloseOctagon,
 		NcButton,
 	},
 	mixins: [
@@ -70,28 +83,58 @@ export default {
 	},
 	data() {
 		return {
-			followingText: t('social', 'Following'),
+			loading: false,
 		}
 	},
 	computed: {
-		followLoading() {
-			return false
-		},
 		isCurrentUserFollowing() {
 			return this.$store.getters.isFollowingUser(this.account)
 		},
 	},
 	methods: {
-		follow() {
-			this.$store.dispatch('followAccount', { currentAccount: this.cloudId, accountToFollow: this.account })
+		async follow() {
+			try {
+				this.loading = true
+				await this.$store.dispatch('followAccount', { currentAccount: this.cloudId, accountToFollow: this.account })
+			} catch {
+			} finally {
+				this.loading = false
+			}
 		},
-		unfollow() {
-			this.$store.dispatch('unfollowAccount', { currentAccount: this.cloudId, accountToUnfollow: this.account })
+		async unfollow() {
+			try {
+				this.loading = true
+				await this.$store.dispatch('unfollowAccount', { currentAccount: this.cloudId, accountToUnfollow: this.account })
+			} catch {
+			} finally {
+				this.loading = false
+			}
 		},
 	},
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
+	.follow-button {
+		width: 150px !important;
+	}
+
+	.follow-button-container {
+		.follow-button--following {
+			display: flex;
+		}
+		.follow-button--unfollow {
+			display: none;
+		}
+
+		&:hover {
+			.follow-button--following {
+				display: none;
+			}
+			.follow-button--unfollow {
+				display: flex;
+			}
+		}
+	}
 	.user-entry {
 		padding: 20px;
 		margin-bottom: 10px;
diff --git a/src/components/ProfileInfo.vue b/src/components/ProfileInfo.vue
index 4d1ab16f..319dcd7c 100644
--- a/src/components/ProfileInfo.vue
+++ b/src/components/ProfileInfo.vue
@@ -32,7 +32,7 @@
 			:size="128" />
 		<h2>{{ displayName }}</h2>
 		<!-- TODO: we have no details, timeline and follower list for non-local accounts for now -->
-		<ul v-if="accountInfo.details && accountInfo.local" class="user-profile--sections">
+		<ul v-if="accountInfo.details && accountInfo.local" class="user-profile__info user-profile__sections">
 			<li>
 				<router-link :to="{ name: 'profile', params: { account: uid } }" class="icon-category-monitoring">
 					{{ getCount('post') }} {{ t('social', 'posts') }}
@@ -49,14 +49,18 @@
 				</router-link>
 			</li>
 		</ul>
-		<p>@{{ accountInfo.account }}</p>
-		<p v-if="accountInfo.website">
-			Website: <a :href="accountInfo.website.value">
-				{{ accountInfo.website.value }}
-			</a>
+		<p class="user-profile__info">
+			<a :href="accountInfo.url" target="_blank">@{{ accountInfo.account }}</a>
 		</p>
-		<FollowButton :account="accountInfo.account" :uid="uid" />
-		<NcButton v-if="serverData.public" class="primary" @click="followRemote">
+
+		<p v-if="accountInfo.website" class="user-profile__info">
+			{{ t('social', 'Website') }}: <a :href="accountInfo.website.value">{{ accountInfo.website.value }}</a>
+		</p>
+
+		<FollowButton class="user-profile__info" :account="accountInfo.account" :uid="uid" />
+		<NcButton v-if="serverData.public"
+			class="user-profile__info primary"
+			@click="followRemote">
 			{{ t('social', 'Follow') }}
 		</NcButton>
 	</div>
@@ -126,7 +130,7 @@ export default {
 }
 
 </script>
-<style scoped>
+<style scoped lang="scss">
 	.user-profile {
 		display: flex;
 		flex-wrap: wrap;
@@ -137,28 +141,36 @@ export default {
 		padding-top: 20px;
 		align-items: center;
 		margin-bottom: 20px;
-	}
-	h2 {
-		margin-bottom: 5px;
-	}
 
-	.user-profile--sections {
-		display: flex;
-	}
-	.user-profile--sections li {
-		flex-grow: 1;
-	}
-	.user-profile--sections li a {
-		padding: 10px;
-		padding-left: 24px;
-		display: inline-block;
-		background-position: 0 center;
-		height: 40px;
-		opacity: .6;
-	}
-	.user-profile--sections li a.router-link-exact-active,
-	.user-profile--sections li a:focus{
-		opacity: 1;
-		border-bottom: 1px solid var(--color-main-text);
+		&__info {
+			margin-bottom: 12px;
+
+			a:hover {
+				text-decoration: underline;
+			}
+		}
+
+		&__sections {
+			display: flex;
+
+			li {
+				flex-grow: 1;
+
+				a {
+					padding: 10px;
+					padding-left: 24px;
+					display: inline-block;
+					background-position: 0 center;
+					height: 40px;
+					opacity: .6;
+
+					&.router-link-exact-active,
+					&:focus {
+						opacity: 1;
+						border-bottom: 1px solid var(--color-main-text);
+					}
+				}
+			}
+		}
 	}
 </style>
diff --git a/src/store/account.js b/src/store/account.js
index 2174317d..7f35e00a 100644
--- a/src/store/account.js
+++ b/src/store/account.js
@@ -36,7 +36,7 @@ const addAccount = (state, { actorId, data }) => {
 		details: {
 			following: false,
 			follower: false,
-		}
+		},
 	}, state.accounts[actorId], data))
 	Vue.set(state.accountIdMap, data.account, data.id)
 }
@@ -53,10 +53,13 @@ const mutations = {
 		const users = []
 		for (const index in data) {
 			const actor = data[index].actor_info
-			addAccount(state, {
-				actorId: actor.id,
-				data: actor,
-			})
+			if (typeof actor !== 'undefined' && account !== actor.account) {
+				users.push(actor.id)
+				addAccount(state, {
+					actorId: actor.id,
+					data: actor,
+				})
+			}
 		}
 		Vue.set(state.accounts[_getActorIdForAccount(account)], 'followersList', users)
 	},