pinafore/routes/_components/profile/AccountProfileFollow.html

87 lines
2.7 KiB
HTML
Raw Normal View History

<div class="account-profile-follow {{shown ? 'shown' : ''}}">
<IconButton
label="{{followLabel}}"
href="{{followIcon}}"
pressable="true"
pressed="{{following}}"
big="true"
on:click="onFollowButtonClick(event)"
animation="{{animateFollowButton && followButtonAnimation}}"
/>
2018-03-31 23:51:18 +00:00
</div>
<style>
.account-profile-follow {
grid-area: follow;
align-self: flex-start;
display: none;
}
.account-profile-follow.shown {
display: block;
2018-03-31 23:51:18 +00:00
}
</style>
<script>
import IconButton from '../IconButton.html'
import { FOLLOW_BUTTON_ANIMATION } from '../../_static/animations'
import { store } from '../../_store/store'
import { setAccountFollowed } from '../../_actions/follow'
export default {
methods: {
async onFollowButtonClick(e) {
e.preventDefault()
e.stopPropagation()
2018-04-03 16:51:34 +00:00
let account = this.get('account')
2018-03-31 23:51:18 +00:00
let accountId = this.get('accountId')
let following = this.get('following')
let followRequested = this.get('followRequested')
this.set({animateFollowButton: true}) // TODO: this should be an event, not toggling a boolean
2018-04-03 16:51:34 +00:00
let newFollowingValue = !(following || followRequested)
if (!account.locked) { // be optimistic, show the user that it succeeded
2018-04-04 00:27:30 +00:00
this.set({overrideFollowing: newFollowingValue})
2018-04-03 16:51:34 +00:00
}
await setAccountFollowed(accountId, newFollowingValue)
this.set({animateFollowButton: false}) // let animation play next time
2018-03-31 23:51:18 +00:00
}
},
store: () => store,
data: () => ({
followButtonAnimation: FOLLOW_BUTTON_ANIMATION
}),
computed: {
accountId: (account) => account.id,
2018-04-03 16:51:34 +00:00
following: (relationship, overrideFollowing) => {
if (typeof overrideFollowing === 'boolean') {
return overrideFollowing
}
return relationship && relationship.following
},
2018-03-31 23:51:18 +00:00
followRequested: (relationship, account) => {
return relationship && relationship.requested && account && account.locked
},
followLabel: (following, followRequested) => {
if (following) {
return 'Unfollow'
} else if (followRequested) {
return 'Unfollow (follow requested)'
} else {
return 'Follow'
}
},
followIcon: (following, followRequested) => {
if (following) {
return '#fa-user-times'
} else if (followRequested) {
return '#fa-hourglass'
} else {
return '#fa-user-plus'
}
},
shown: (verifyCredentials, relationship) => {
return verifyCredentials && relationship && verifyCredentials.id !== relationship.id
2018-03-31 23:51:18 +00:00
}
},
components: {
IconButton
}
}
</script>