pinafore/routes/_components/profile/AccountProfileFollow.html

87 lines
2.7 KiB
HTML

<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}}"
/>
</div>
<style>
.account-profile-follow {
grid-area: follow;
align-self: flex-start;
display: none;
}
.account-profile-follow.shown {
display: block;
}
</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()
let account = this.get('account')
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
let newFollowingValue = !(following || followRequested)
if (!account.locked) { // be optimistic, show the user that it succeeded
this.set({overrideFollowing: newFollowingValue})
}
await setAccountFollowed(accountId, newFollowingValue)
this.set({animateFollowButton: false}) // let animation play next time
}
},
store: () => store,
data: () => ({
followButtonAnimation: FOLLOW_BUTTON_ANIMATION
}),
computed: {
accountId: (account) => account.id,
following: (relationship, overrideFollowing) => {
if (typeof overrideFollowing === 'boolean') {
return overrideFollowing
}
return relationship && relationship.following
},
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
}
},
components: {
IconButton
}
}
</script>