pinafore/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)"
    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>