wip

4 files changed, 44 insertions, 52 deletions

diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index aff21b14d8..368655095f 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -50,7 +50,7 @@
 						</div>
 					</template>
 
-					<template v-if="notification.type == 'followRequest'">
+					<template v-if="notification.type == 'reciveFollowRequest'">
 						<mk-avatar class="avatar" :user="notification.user"/>
 						<div class="text">
 							<p>%fa:user-clock%
@@ -268,7 +268,7 @@ root(isDark)
 					.text p i
 						color #53c7ce
 
-				&.followRequest
+				&.reciveFollowRequest
 					.text p i
 						color #888
 
diff --git a/src/client/app/mobile/views/components/follow-button.vue b/src/client/app/mobile/views/components/follow-button.vue
index 9c363d7164..a247db95f6 100644
--- a/src/client/app/mobile/views/components/follow-button.vue
+++ b/src/client/app/mobile/views/components/follow-button.vue
@@ -1,14 +1,14 @@
 <template>
 <button class="mk-follow-button"
-	:class="{ wait: wait, following: user.isFollowing, unfollow: user.isFollowing }"
+	:class="{ wait: wait, following: u.isFollowing }"
 	@click="onClick"
 	:disabled="wait"
 >
 	<template v-if="!wait">
-		<template v-if="user.hasPendingFollowRequestFromYou">%fa:hourglass-half% %i18n:@request-pending%</template>
-		<template v-else-if="user.isFollowing">%fa:minus% %i18n:@unfollow%</template>
-		<template v-else-if="!user.isFollowing && user.isLocked">%fa:plus% %i18n:@follow-request%</template>
-		<template v-else-if="!user.isFollowing && !user.isLocked">%fa:plus% %i18n:@follow%</template>
+		<template v-if="u.hasPendingFollowRequestFromYou">%fa:hourglass-half% %i18n:@request-pending%</template>
+		<template v-else-if="u.isFollowing">%fa:minus% %i18n:@unfollow%</template>
+		<template v-else-if="!u.isFollowing && u.isLocked">%fa:plus% %i18n:@follow-request%</template>
+		<template v-else-if="!u.isFollowing && !u.isLocked">%fa:plus% %i18n:@follow%</template>
 	</template>
 	<template v-else>%fa:spinner .pulse .fw%</template>
 </button>
@@ -25,6 +25,7 @@ export default Vue.extend({
 	},
 	data() {
 		return {
+			u: this.user,
 			wait: false,
 			connection: null,
 			connectionId: null
@@ -45,51 +46,44 @@ export default Vue.extend({
 	methods: {
 
 		onFollow(user) {
-			if (user.id == this.user.id) {
-				this.user.isFollowing = user.isFollowing;
+			if (user.id == this.u.id) {
+				this.u.isFollowing = user.isFollowing;
 			}
 		},
 
 		onUnfollow(user) {
-			if (user.id == this.user.id) {
-				this.user.isFollowing = user.isFollowing;
+			if (user.id == this.u.id) {
+				this.u.isFollowing = user.isFollowing;
 			}
 		},
 
-		onClick() {
+		async onClick() {
 			this.wait = true;
-			if (this.user.isFollowing) {
-				(this as any).api('following/delete', {
-					userId: this.user.id
-				}).then(() => {
-					this.user.isFollowing = false;
-				}).catch(err => {
-					console.error(err);
-				}).then(() => {
-					this.wait = false;
-				});
-			} else {
-				if (this.user.isLocked && this.user.hasPendingFollowRequestFromYou) {
-					(this as any).api('following/requests/cancel', {
-						userId: this.user.id
-					}).then(() => {
-						this.user.hasPendingFollowRequestFromYou = false;
-					}).catch(err => {
-						console.error(err);
-					}).then(() => {
-						this.wait = false;
+
+			try {
+				if (this.u.isFollowing) {
+					this.u = await (this as any).api('following/delete', {
+						userId: this.u.id
 					});
 				} else {
-					(this as any).api('following/create', {
-						userId: this.user.id
-					}).then(() => {
-						this.user.isFollowing = true;
-					}).catch(err => {
-						console.error(err);
-					}).then(() => {
-						this.wait = false;
-					});
+					if (this.u.isLocked && this.u.hasPendingFollowRequestFromYou) {
+						this.u = await (this as any).api('following/requests/cancel', {
+							userId: this.u.id
+						});
+					} else if (this.u.isLocked) {
+						this.u = await (this as any).api('following/create', {
+							userId: this.u.id
+						});
+					} else {
+						this.u = await (this as any).api('following/create', {
+							userId: this.user.id
+						});
+					}
 				}
+			} catch (e) {
+				console.error(e);
+			} finally {
+				this.wait = false;
 			}
 		}
 	}
@@ -107,6 +101,8 @@ export default Vue.extend({
 	margin 0
 	line-height 36px
 	font-size 14px
+	color $theme-color
+	background transparent
 	outline none
 	border solid 1px $theme-color
 	border-radius 36px
@@ -114,9 +110,9 @@ export default Vue.extend({
 	*
 		pointer-events none
 
-	&.follow
-		color $theme-color
-		background transparent
+	&.following
+		color $theme-color-foreground
+		background $theme-color
 
 		&:hover
 			background rgba($theme-color, 0.1)
@@ -124,10 +120,6 @@ export default Vue.extend({
 		&:active
 			background rgba($theme-color, 0.2)
 
-	&.unfollow
-		color $theme-color-foreground
-		background $theme-color
-
 	&.wait
 		cursor wait !important
 		opacity 0.7
diff --git a/src/client/app/mobile/views/components/notification-preview.vue b/src/client/app/mobile/views/components/notification-preview.vue
index b1f6fd1495..6046f77242 100644
--- a/src/client/app/mobile/views/components/notification-preview.vue
+++ b/src/client/app/mobile/views/components/notification-preview.vue
@@ -31,7 +31,7 @@
 		</div>
 	</template>
 
-	<template v-if="notification.type == 'followRequest'">
+	<template v-if="notification.type == 'reciveFollowRequest'">
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div class="text">
 			<p>%fa:user-clock%{{ notification.user | userName }}</p>
@@ -125,7 +125,7 @@ export default Vue.extend({
 		.text p i
 			color #53c7ce
 
-	&.followRequest
+	&.reciveFollowRequest
 		.text p i
 			color #888
 
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index da69fc79cc..8109bef38e 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -40,7 +40,7 @@
 		</div>
 	</div>
 
-	<div class="notification followRequest" v-if="notification.type == 'followRequest'">
+	<div class="notification followRequest" v-if="notification.type == 'reciveFollowRequest'">
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
@@ -167,7 +167,7 @@ root(isDark)
 			> div > header i
 				color #53c7ce
 
-		&.followRequest
+		&.reciveFollowRequest
 			> div > header i
 				color #888