129 lines
3.8 KiB
HTML
129 lines
3.8 KiB
HTML
<div class="account-profile-follow {shown ? 'shown' : ''}">
|
|
<!--
|
|
This button has a few different states.
|
|
- If we're blocking, then it's a normal non-toggle button that unblocks.
|
|
- Otherwise it's a pseudo-toggle button that changes whether we're following the account or not.
|
|
- If a follow is requested, then the button is pressed but shows as "follow requested" with
|
|
a different icon.
|
|
-->
|
|
<IconButton
|
|
className="account-profile-follow-icon-button"
|
|
{label}
|
|
{pressedLabel}
|
|
{href}
|
|
{pressable}
|
|
{pressed}
|
|
toggleButton={false}
|
|
big={!$isVeryTinyMobileSize}
|
|
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;
|
|
}
|
|
|
|
@media (max-width: 240px) {
|
|
.account-profile-follow {
|
|
justify-self: flex-end;
|
|
}
|
|
}
|
|
</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: {
|
|
oncreate () {
|
|
if (process.browser) {
|
|
window.__button = this
|
|
}
|
|
},
|
|
async onFollowButtonClick (e) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
const {
|
|
account,
|
|
accountId,
|
|
following,
|
|
followRequested,
|
|
blocking
|
|
} = this.get()
|
|
if (blocking) { // unblock
|
|
await setAccountBlocked(accountId, false)
|
|
} else { // follow/unfollow
|
|
const 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: undefined
|
|
}),
|
|
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
|
|
},
|
|
labelExtraText: ({ blocking, following, followRequested }) => {
|
|
if (!blocking && !following && followRequested) {
|
|
return ' (follow requested)'
|
|
} else {
|
|
return ''
|
|
}
|
|
},
|
|
label: ({ blocking, labelExtraText }) => {
|
|
return (blocking ? 'Unblock' : 'Follow') + labelExtraText
|
|
},
|
|
pressedLabel: ({ labelExtraText }) => {
|
|
return 'Unfollow' + labelExtraText
|
|
},
|
|
href: ({ 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 }) => (
|
|
verifyCredentials && relationship && verifyCredentials.id !== relationship.id
|
|
),
|
|
pressable: ({ blocking }) => !blocking,
|
|
pressed: ({ blocking, following, followRequested }) => (
|
|
!blocking && (following || followRequested)
|
|
)
|
|
},
|
|
components: {
|
|
IconButton
|
|
}
|
|
}
|
|
</script>
|