pinafore/routes/_components/profile/AccountProfileFollow.html
2018-04-29 17:45:03 -07:00

98 lines
2.8 KiB
HTML

<div class="account-profile-follow {{shown ? 'shown' : ''}}">
<IconButton
label={{followLabel}}
href={{followIcon}}
pressable="true"
pressed={{following}}
big="true"
on:click="onFollowButtonClick(event)"
ref:icon
/>
</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'
import { setAccountBlocked } from '../../_actions/block'
export default {
methods: {
async onFollowButtonClick (e) {
e.preventDefault()
e.stopPropagation()
let {
account,
accountId,
following,
followRequested,
blocking
} = this.get()
if (blocking) { // unblock
await setAccountBlocked(accountId, false)
} else { // follow/unfollow
let newFollowingValue = !(following || followRequested)
if (!account.locked) { // be optimistic, show the user that it succeeded
this.set({overrideFollowing: newFollowingValue})
}
if (newFollowingValue) {
this.refs.icon.animate(FOLLOW_BUTTON_ANIMATION)
}
await setAccountFollowed(accountId, newFollowingValue)
}
}
},
store: () => store,
computed: {
accountId: (account) => account.id,
following: (relationship, overrideFollowing) => {
if (typeof overrideFollowing === 'boolean') {
return overrideFollowing
}
return relationship && relationship.following
},
blocking: (relationship) => relationship && relationship.blocking,
followRequested: (relationship, account) => {
return relationship && relationship.requested && account && account.locked
},
followLabel: (blocking, following, followRequested) => {
if (blocking) {
return 'Unblock'
} else if (following) {
return 'Unfollow'
} else if (followRequested) {
return 'Unfollow (follow requested)'
} else {
return 'Follow'
}
},
followIcon: (blocking, following, followRequested) => {
if (blocking) {
return '#fa-unlock'
} else 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>