pinafore/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'
import { setAccountMuted } from '../../../_actions/mute'
import { setStatusPinnedOrUnpinned } from '../../../_actions/pin'
import { importShowCopyDialog } from '../asyncDialogs'

export default {
  oncreate,
  computed: {
    relationship: ({$currentAccountRelationship}) => $currentAccountRelationship,
    account: ({$currentAccountProfile}) => $currentAccountProfile,
    verifyCredentials: ({$currentVerifyCredentials}) => $currentVerifyCredentials,
    statusId: ({status}) => status.id,
    pinned: ({status}) => status.pinned,
    //
    // begin copypasta (StatusOptionsDialog.html / AccountProfileOptionsDialog.html)
    //
    verifyCredentialsId: ({verifyCredentials}) => verifyCredentials.id,
    following: ({relationship}) => relationship && relationship.following,
    followRequested: ({relationship}) => relationship && relationship.requested,
    accountId: ({account}) => account && account.id,
    acct: ({account}) => account.acct,
    muting: ({relationship}) => relationship.muting,
    blocking: ({relationship}) => relationship.blocking,
    followLabel: ({following, followRequested, account, acct}) => {
      if (typeof following === 'undefined' || !account) {
        return ''
      }
      return (following || followRequested)
        ? `Unfollow @${acct}`
        : `Follow @${acct}`
    },
    followIcon: ({following, followRequested}) => (
      following ? '#fa-user-times' : followRequested ? '#fa-hourglass' : '#fa-user-plus'
    ),
    blockLabel: ({blocking, acct}) => (
      blocking ? `Unblock @${acct}` : `Block @${acct}`
    ),
    blockIcon: ({blocking}) => blocking ? '#fa-unlock' : '#fa-ban',
    muteLabel: ({muting, acct}) => (
      muting ? `Unmute @${acct}` : `Mute @${acct}`
    ),
    muteIcon: ({muting}) => muting ? '#fa-volume-up' : '#fa-volume-off',
    isUser: ({accountId, verifyCredentialsId}) => accountId === verifyCredentialsId,
    //
    // end copypasta (StatusOptionsDialog.html / AccountProfileOptionsDialog.html)
    //
    pinLabel: ({pinned, isUser}) => isUser ? (pinned ? 'Unpin from profile' : 'Pin to profile') : '',
    visibility: ({status}) => status.visibility,
    items: ({
      blockLabel, blocking, blockIcon, muteLabel, muteIcon, followLabel, followIcon,
      following, followRequested, pinLabel, isUser, visibility
    }) => ([
      isUser && {
        key: 'delete',
        label: 'Delete',
        icon: '#fa-trash'
      },
      visibility !== 'private' && visibility !== 'direct' && isUser && {
        key: 'pin',
        label: pinLabel,
        icon: '#fa-thumb-tack'
      },
      !isUser && !blocking && {
        key: 'follow',
        label: followLabel,
        icon: followIcon
      },
      !isUser && {
        key: 'block',
        label: blockLabel,
        icon: blockIcon
      },
      !isUser && !blocking && {
        key: 'mute',
        label: muteLabel,
        icon: muteIcon
      },
      {
        key: 'copy',
        label: 'Copy link to toot',
        icon: '#fa-copy'
      }
    ].filter(Boolean))
  },
  components: {
    ModalDialog,
    GenericDialogList
  },
  store: () => store,
  methods: {
    show,
    close,
    onClick (item) {
      switch (item.key) {
        case 'delete':
          return this.onDeleteClicked()
        case 'pin':
          return this.onPinClicked()
        case 'follow':
          return this.onFollowClicked()
        case 'block':
          return this.onBlockClicked()
        case 'mute':
          return this.onMuteClicked()
        case 'copy':
          return this.onCopyClicked()
      }
    },
    async onDeleteClicked () {
      let { statusId } = this.get()
      this.close()
      await doDeleteStatus(statusId)
    },
    async onPinClicked () {
      let { statusId, pinned } = this.get()
      this.close()
      await setStatusPinnedOrUnpinned(statusId, !pinned, true)
    },
    async onFollowClicked () {
      let { accountId, following } = this.get()
      this.close()
      await setAccountFollowed(accountId, !following, true)
    },
    async onBlockClicked () {
      let { accountId, blocking } = this.get()
      this.close()
      await setAccountBlocked(accountId, !blocking, true)
    },
    async onMuteClicked () {
      let { accountId, muting } = this.get()
      this.close()
      await setAccountMuted(accountId, !muting, true)
    },
    async onCopyClicked () {
      let { status } = this.get()
      let { url } = status
      let showCopyDialog = await importShowCopyDialog()
      showCopyDialog(url)
    }
  }
}
</script>