akkoma-fe/src/components/follow_button/follow_button.js

54 lines
1.5 KiB
JavaScript
Raw Normal View History

2019-10-08 07:21:48 +00:00
import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
export default {
2020-04-21 20:27:51 +00:00
props: ['relationship', 'labelFollowing', 'buttonClass'],
2019-10-08 07:21:48 +00:00
data () {
return {
inProgress: false
}
},
computed: {
isPressed () {
2020-04-21 20:27:51 +00:00
return this.inProgress || this.relationship.following
2019-10-08 07:21:48 +00:00
},
title () {
2020-04-21 20:27:51 +00:00
if (this.inProgress || this.relationship.following) {
2019-10-08 07:21:48 +00:00
return this.$t('user_card.follow_unfollow')
2020-04-21 20:27:51 +00:00
} else if (this.relationship.requested) {
2019-10-08 07:21:48 +00:00
return this.$t('user_card.follow_again')
} else {
return this.$t('user_card.follow')
}
},
label () {
if (this.inProgress) {
return this.$t('user_card.follow_progress')
2020-04-21 20:27:51 +00:00
} else if (this.relationship.following) {
2019-10-17 13:19:52 +00:00
return this.labelFollowing || this.$t('user_card.following')
2020-04-21 20:27:51 +00:00
} else if (this.relationship.requested) {
2019-10-08 07:21:48 +00:00
return this.$t('user_card.follow_sent')
} else {
return this.$t('user_card.follow')
}
}
},
methods: {
onClick () {
2020-04-21 20:27:51 +00:00
this.relationship.following ? this.unfollow() : this.follow()
2019-10-08 07:21:48 +00:00
},
follow () {
this.inProgress = true
2020-04-22 12:06:10 +00:00
requestFollow(this.relationship.id, this.$store).then(() => {
2019-10-08 07:21:48 +00:00
this.inProgress = false
})
},
unfollow () {
const store = this.$store
this.inProgress = true
2020-04-22 12:06:10 +00:00
requestUnfollow(this.relationship.id, store).then(() => {
2019-10-08 07:21:48 +00:00
this.inProgress = false
2020-04-22 12:06:10 +00:00
store.commit('removeStatus', { timeline: 'friends', userId: this.relationship.id })
2019-10-08 07:21:48 +00:00
})
}
}
}