diff options
| -rw-r--r-- | src/components/follow_card/follow_card.js | 45 | ||||
| -rw-r--r-- | src/components/follow_card/follow_card.vue | 40 | ||||
| -rw-r--r-- | src/components/user_profile/user_profile.js | 6 |
3 files changed, 88 insertions, 3 deletions
diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js new file mode 100644 index 00000000..85e6a6d2 --- /dev/null +++ b/src/components/follow_card/follow_card.js @@ -0,0 +1,45 @@ +import BasicUserCard from '../basic_user_card/basic_user_card.vue' +import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate' + +const FollowCard = { + props: [ + 'user', + 'noFollowsYou' + ], + data () { + return { + progress: false, + requestSent: false, + updated: false + } + }, + components: { + BasicUserCard + }, + 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.progress = true + requestFollow(this.user, this.$store).then(({ sent, updated }) => { + this.progress = false + this.requestSent = sent + this.updated = updated + }) + }, + unfollowUser () { + this.progress = true + requestUnfollow(this.user, this.$store).then(({ updated }) => { + this.progress = false + this.updated = updated + }) + } + } +} + +export default FollowCard diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue new file mode 100644 index 00000000..dcb85d62 --- /dev/null +++ b/src/components/follow_card/follow_card.vue @@ -0,0 +1,40 @@ +<template> + <basic-user-card :user="user"> + <template slot="secondary-area"> + <div class="follow-box"> + <button + v-if="showFollow" + class="btn btn-default" + @click="followUser" + :disabled="progress" + :title="requestSent ? $t('user_card.follow_again') : ''" + > + <template v-if="progress"> + {{ $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="progress"> + <template v-if="progress"> + {{ $t('user_card.follow_progress') }} + </template> + <template v-else> + {{ $t('user_card.follow_unfollow') }} + </template> + </button> + </div> + </template> + <template slot="third-area"> + <span class="faint" v-if="!noFollowsYou && user.follows_you"> + {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }} + </span> + </template> + </basic-user-card> +</template> + +<script src="./follow_card.js"></script> diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 643727de..7708141c 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -1,7 +1,7 @@ import { compose } from 'vue-compose' import get from 'lodash/get' import UserCardContent from '../user_card_content/user_card_content.vue' -import UserCard from '../user_card/user_card.vue' +import FollowCard from '../follow_card/follow_card.vue' import Timeline from '../timeline/timeline.vue' import withLoadMore from '../../hocs/with_load_more/with_load_more' import withList from '../../hocs/with_list/with_list' @@ -15,7 +15,7 @@ const FollowerList = compose( additionalPropNames: ['userId'] }), withList({ getEntryProps: user => ({ user }) }) -)(UserCard) +)(FollowCard) const FriendList = compose( withLoadMore({ @@ -26,7 +26,7 @@ const FriendList = compose( additionalPropNames: ['userId'] }), withList({ getEntryProps: user => ({ user }) }) -)(UserCard) +)(FollowCard) const UserProfile = { data () { |