diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index be7a2349..206dba88 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -5,6 +5,8 @@ export default { props: [ 'user', 'switcher', 'selected', 'hideBio', 'activatePanel' ], data () { return { + followRequestInProgress: false, + followRequestSent: false, hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined' ? this.$store.state.instance.hideUserStats : this.$store.state.config.hideUserStats, @@ -84,13 +86,68 @@ export default { methods: { followUser () { const store = this.$store + this.followRequestInProgress = true store.state.api.backendInteractor.followUser(this.user.id) .then((followedUser) => store.commit('addNewUsers', [followedUser])) + .then(() => { + // For locked users we just mark it that we sent the follow request + if (this.user.locked) { + this.followRequestInProgress = false + this.followRequestSent = true + return + } + + if (this.user.following) { + // If we get result immediately, just stop. + this.followRequestInProgress = false + return + } + + // But usually we don't get result immediately, so we ask server + // for updated user profile to confirm if we are following them + // Sometimes it takes several tries. Sometimes we end up not following + // user anyway, probably because they locked themselves and we + // don't know that yet. + // Recursive Promise, it will call itself up to 3 times. + const fetchUser = (attempt) => new Promise((resolve, reject) => { + setTimeout(() => { + store.state.api.backendInteractor.fetchUser({ id: this.user.id }) + .then((user) => store.commit('addNewUsers', [user])) + .then(() => resolve([this.user.following, attempt])) + .catch((e) => reject(e)) + }, 500) + }).then(([following, attempt]) => { + if (!following && attempt <= 3) { + // If we BE reports that we still not following that user - retry, + // increment attempts by one + return fetchUser(++attempt) + } else { + // If we run out of attempts, just return whatever status is. + return following + } + }) + + return fetchUser(1) + .then((following) => { + if (following) { + // We confirmed and everything its good. + this.followRequestInProgress = false + } else { + // If after all the tries, just treat it as if user is locked + this.followRequestInProgress = false + this.followRequestSent = true + } + }) + }) }, unfollowUser () { const store = this.$store + this.followRequestInProgress = true store.state.api.backendInteractor.unfollowUser(this.user.id) .then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser])) + .then(() => { + this.followRequestInProgress = false + }) }, blockUser () { const store = this.$store diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 08b25595..a40aff35 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -44,13 +44,26 @@
- -
diff --git a/src/i18n/en.json b/src/i18n/en.json index 1ce53796..f445bfc2 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -320,6 +320,10 @@ "blocked": "Blocked!", "deny": "Deny", "follow": "Follow", + "follow_sent": "Request sent!", + "follow_progress": "Requesting…", + "follow_again": "Send request again?", + "follow_unfollow": "Stop following", "followees": "Following", "followers": "Followers", "following": "Following!", diff --git a/src/i18n/ru.json b/src/i18n/ru.json index 80598b0c..249eab69 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -280,6 +280,10 @@ "block": "Заблокировать", "blocked": "Заблокирован", "follow": "Читать", + "follow_sent": "Запрос отправлен!", + "follow_progress": "Запрашиваем…", + "follow_again": "Запросить еще заново?", + "follow_unfollow": "Перестать читать", "followees": "Читаемые", "followers": "Читатели", "following": "Читаю",