Pinafore-Web-Client-Frontend/routes/_components/dialog/components/StatusOptionsDialog.html

<ModalDialog
  :id
  :label
  :title
  background="var(--main-bg)"
>
  <GenericDialogList :items on:click="onClick(event)"/>
</ModalDialog>
<script>
import ModalDialog from './ModalDialog.html'
import { store } from '../../../_store/store'
import GenericDialogList from './GenericDialogList.html'
import { setAccountFollowed } from '../../../_actions/follow'
import { doDeleteStatus } from '../../../_actions/delete'
import { show } from '../helpers/showDialog'
import { close } from '../helpers/closeDialog'
import { oncreate } from '../helpers/onCreateDialog'
import { setAccountBlocked } from '../../../_actions/block'

export default {
  oncreate,
  computed: {
    relationship: ($currentAccountRelationship) => $currentAccountRelationship,
    account: ($currentAccountProfile) => $currentAccountProfile,
    verifyCredentials: ($currentVerifyCredentials) => $currentVerifyCredentials,
    verifyCredentialsId: (verifyCredentials) => verifyCredentials.id,
    following: (relationship) => relationship && relationship.following,
    followRequested: (relationship) => relationship && relationship.requested,
    accountId: (account) => account && account.id,
    blocking: (relationship) => relationship.blocking,
    followLabel: (following, followRequested, account) => {
      if (typeof following === 'undefined' || !account) {
        return ''
      }
      return (following || followRequested)
        ? `Unfollow @${account.acct}`
        : `Follow @${account.acct}`
    },
    blockLabel: (blocking, account) => {
      return blocking ? `Unblock @${account.acct}` : `Block @${account.acct}`
    },
    items: (blockLabel, blocking, followLabel, following, followRequested, accountId, verifyCredentialsId) => (
      [
        accountId === verifyCredentialsId &&
        {
          key: 'delete',
          label: 'Delete',
          icon: '#fa-trash'
        },
        accountId !== verifyCredentialsId && !blocking &&
        {
          key: 'follow',
          label: followLabel,
          icon: following ? '#fa-user-times' : followRequested ? '#fa-hourglass' : '#fa-user-plus'
        },
        accountId !== verifyCredentialsId &&
        {
          key: 'block',
          label: blockLabel,
          icon: blocking ? '#fa-unlock' : '#fa-ban'
        }
      ].filter(Boolean)
    )
  },
  components: {
    ModalDialog,
    GenericDialogList
  },
  store: () => store,
  methods: {
    show,
    close,
    onClick(item) {
      switch (item.key) {
        case 'delete':
          return this.onDeleteClicked()
        case 'follow':
          return this.onFollowClicked()
        case 'block':
          return this.onBlockClicked()
      }
    },
    async onDeleteClicked() {
      let statusId = this.get('statusId')
      this.close()
      await doDeleteStatus(statusId)
    },
    async onFollowClicked() {
      let accountId = this.get('accountId')
      let following = this.get('following')
      this.close()
      await setAccountFollowed(accountId, !following, true)
    },
    async onBlockClicked() {
      let accountId = this.get('accountId')
      let blocking = this.get('blocking')
      this.close()
      await setAccountBlocked(accountId, !blocking, true)
    }
  }
}
</script>