pinafore/routes/_components/profile/AccountProfileFollow.html

<div class="account-profile-follow">
  {{#if verifyCredentials && relationship && verifyCredentials.id !== relationship.id}}
    <IconButton
      label="{{followLabel}}"
      href="{{followIcon}}"
      pressable="true"
      pressed="{{following}}"
      big="true"
      on:click="onFollowButtonClick(event)"
      animation="{{animateFollowButton && followButtonAnimation}}"
    />
  {{/if}}
</div>
<style>
  .account-profile-follow {
    grid-area: follow;
    align-self: flex-start;
  }
</style>
<script>
  import IconButton from '../IconButton.html'
  import { FOLLOW_BUTTON_ANIMATION } from '../../_static/animations'
  import { store } from '../../_store/store'
  import { setAccountFollowed } from '../../_actions/follow'

  export default {
    methods: {
      async onFollowButtonClick(e) {
        e.preventDefault()
        e.stopPropagation()
        let account = this.get('account')
        let accountId = this.get('accountId')
        let following = this.get('following')
        let followRequested = this.get('followRequested')
        this.set({animateFollowButton: true})
        let newFollowingValue = !(following || followRequested)
        await setAccountFollowed(accountId, newFollowingValue)
        if (!account.locked) { // be optimistic, show the user that it succeeded
          this.set({overrideFollowing: newFollowingValue)
        }
      }
    },
    store: () => store,
    data: () => ({
      followButtonAnimation: FOLLOW_BUTTON_ANIMATION
    }),
    computed: {
      accountId: (account) => account.id,
      following: (relationship, overrideFollowing) => {
        if (typeof overrideFollowing === 'boolean') {
          return overrideFollowing
        }
        return relationship && relationship.following
      },
      followRequested: (relationship, account) => {
        return relationship && relationship.requested && account && account.locked
      },
      followLabel: (following, followRequested) => {
        if (following) {
          return 'Unfollow'
        } else if (followRequested) {
          return 'Unfollow (follow requested)'
        } else {
          return 'Follow'
        }
      },
      followIcon: (following, followRequested) => {
        if (following) {
          return '#fa-user-times'
        } else if (followRequested) {
          return '#fa-hourglass'
        } else {
          return '#fa-user-plus'
        }
      }
    },
    components: {
      IconButton
    }
  }
</script>