pinafore/routes/_components/profile/AccountProfileFollow.html

101 lines
2.9 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,
data: () => ({
overrideFollowing: void 0
}),
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>