Pinafore-Web-Client-Frontend/routes/_components/profile/AccountProfileFollow.html

<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}}"
  />
</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()
        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)
        }

        this.set({animateFollowButton: false}) // let animation play next time
      }
    },
    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
      },
      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>