101 lines
2.9 KiB
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 }) => {
|
|
return relationship && relationship.requested
|
|
},
|
|
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> |