Add new FollowCard component

This commit is contained in:
taehoon 2019-02-25 22:51:04 -05:00
parent 1337e42b2d
commit 9ca805a991
3 changed files with 88 additions and 3 deletions

View file

@ -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

View file

@ -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>

View file

@ -1,7 +1,7 @@
import { compose } from 'vue-compose' import { compose } from 'vue-compose'
import get from 'lodash/get' import get from 'lodash/get'
import UserCardContent from '../user_card_content/user_card_content.vue' 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 Timeline from '../timeline/timeline.vue'
import withLoadMore from '../../hocs/with_load_more/with_load_more' import withLoadMore from '../../hocs/with_load_more/with_load_more'
import withList from '../../hocs/with_list/with_list' import withList from '../../hocs/with_list/with_list'
@ -15,7 +15,7 @@ const FollowerList = compose(
additionalPropNames: ['userId'] additionalPropNames: ['userId']
}), }),
withList({ getEntryProps: user => ({ user }) }) withList({ getEntryProps: user => ({ user }) })
)(UserCard) )(FollowCard)
const FriendList = compose( const FriendList = compose(
withLoadMore({ withLoadMore({
@ -26,7 +26,7 @@ const FriendList = compose(
additionalPropNames: ['userId'] additionalPropNames: ['userId']
}), }),
withList({ getEntryProps: user => ({ user }) }) withList({ getEntryProps: user => ({ user }) })
)(UserCard) )(FollowCard)
const UserProfile = { const UserProfile = {
data () { data () {