diff options
Diffstat (limited to 'src/components/follow_card')
| -rw-r--r-- | src/components/follow_card/follow_card.js | 38 | ||||
| -rw-r--r-- | src/components/follow_card/follow_card.vue | 63 |
2 files changed, 38 insertions, 63 deletions
diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js index 425c9c3e..aefd609e 100644 --- a/src/components/follow_card/follow_card.js +++ b/src/components/follow_card/follow_card.js @@ -1,43 +1,23 @@ import BasicUserCard from '../basic_user_card/basic_user_card.vue' -import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate' +import RemoteFollow from '../remote_follow/remote_follow.vue' +import FollowButton from '../follow_button/follow_button.vue' const FollowCard = { props: [ 'user', 'noFollowsYou' ], - data () { - return { - inProgress: false, - requestSent: false, - updated: false - } - }, components: { - BasicUserCard + BasicUserCard, + RemoteFollow, + FollowButton }, computed: { - isMe () { return this.$store.state.users.currentUser.id === this.user.id }, - following () { return this.updated ? this.updated.following : this.user.following }, - showFollow () { - return !this.following || this.updated && !this.updated.following - } - }, - methods: { - followUser () { - this.inProgress = true - requestFollow(this.user, this.$store).then(({ sent, updated }) => { - this.inProgress = false - this.requestSent = sent - this.updated = updated - }) + isMe () { + return this.$store.state.users.currentUser.id === this.user.id }, - unfollowUser () { - this.inProgress = true - requestUnfollow(this.user, this.$store).then(({ updated }) => { - this.inProgress = false - this.updated = updated - }) + loggedIn () { + return this.$store.state.users.currentUser } } } diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue index 6cb064eb..81e6e6dc 100644 --- a/src/components/follow_card/follow_card.vue +++ b/src/components/follow_card/follow_card.vue @@ -1,34 +1,27 @@ <template> <basic-user-card :user="user"> <div class="follow-card-content-container"> - <span class="faint" v-if="!noFollowsYou && user.follows_you"> + <span + v-if="!noFollowsYou && user.follows_you" + class="faint" + > {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }} </span> - <button - v-if="showFollow" - class="btn btn-default" - @click="followUser" - :disabled="inProgress" - :title="requestSent ? $t('user_card.follow_again') : ''" - > - <template v-if="inProgress"> - {{ $t('user_card.follow_progress') }} - </template> - <template v-else-if="requestSent"> - {{ $t('user_card.follow_sent') }} - </template> - <template v-else> - {{ $t('user_card.follow') }} - </template> - </button> - <button v-if="following" class="btn btn-default pressed" @click="unfollowUser" :disabled="inProgress"> - <template v-if="inProgress"> - {{ $t('user_card.follow_progress') }} - </template> - <template v-else> - {{ $t('user_card.follow_unfollow') }} - </template> - </button> + <template v-if="!loggedIn"> + <div + v-if="!user.following" + class="follow-card-follow-button" + > + <RemoteFollow :user="user" /> + </div> + </template> + <template v-else> + <FollowButton + :user="user" + class="follow-card-follow-button" + :label-following="$t('user_card.follow_unfollow')" + /> + </template> </div> </basic-user-card> </template> @@ -36,15 +29,17 @@ <script src="./follow_card.js"></script> <style lang="scss"> -.follow-card-content-container { - flex-shrink: 0; - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - line-height: 1.5em; +.follow-card { + &-content-container { + flex-shrink: 0; + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + line-height: 1.5em; + } - .btn { + &-follow-button { margin-top: 0.5em; margin-left: auto; width: 10em; |