pinafore/routes/_components/profile/AccountProfileFollow.html

99 lines
3.1 KiB
HTML
Raw Normal View History

<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}}"
/>
2018-04-01 01:51:18 +02:00
</div>
<style>
.account-profile-follow {
grid-area: follow;
align-self: flex-start;
display: none;
}
.account-profile-follow.shown {
display: block;
2018-04-01 01:51:18 +02:00
}
</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'
2018-04-01 01:51:18 +02:00
export default {
methods: {
async onFollowButtonClick(e) {
e.preventDefault()
e.stopPropagation()
2018-04-03 18:51:34 +02:00
let account = this.get('account')
2018-04-01 01:51:18 +02:00
let accountId = this.get('accountId')
let following = this.get('following')
let followRequested = this.get('followRequested')
let blocking = this.get('blocking')
this.set({animateFollowButton: true}) // TODO: this should be an event, not toggling a boolean
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})
}
await setAccountFollowed(accountId, newFollowingValue)
2018-04-03 18:51:34 +02:00
}
this.set({animateFollowButton: false}) // let animation play next time
2018-04-01 01:51:18 +02:00
}
},
store: () => store,
data: () => ({
followButtonAnimation: FOLLOW_BUTTON_ANIMATION
}),
computed: {
accountId: (account) => account.id,
2018-04-03 18:51:34 +02:00
following: (relationship, overrideFollowing) => {
if (typeof overrideFollowing === 'boolean') {
return overrideFollowing
}
return relationship && relationship.following
},
blocking: (relationship) => relationship.blocking,
2018-04-01 01:51:18 +02:00
followRequested: (relationship, account) => {
return relationship && relationship.requested && account && account.locked
},
followLabel: (blocking, following, followRequested) => {
if (blocking) {
return 'Unblock'
} else if (following) {
2018-04-01 01:51:18 +02:00
return 'Unfollow'
} else if (followRequested) {
return 'Unfollow (follow requested)'
} else {
return 'Follow'
}
},
followIcon: (blocking, following, followRequested) => {
if (blocking) {
return '#fa-unlock'
} else if (following) {
2018-04-01 01:51:18 +02:00
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
2018-04-01 01:51:18 +02:00
}
},
components: {
IconButton
}
}
</script>