Add new FollowCard component
This commit is contained in:
parent
1337e42b2d
commit
9ca805a991
3 changed files with 88 additions and 3 deletions
45
src/components/follow_card/follow_card.js
Normal file
45
src/components/follow_card/follow_card.js
Normal 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
|
40
src/components/follow_card/follow_card.vue
Normal file
40
src/components/follow_card/follow_card.vue
Normal 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>
|
|
@ -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 () {
|
||||
|
|
Loading…
Reference in a new issue