stacker.news/components/invite.js

62 lines
1.7 KiB
JavaScript

import { CopyInput } from './form'
import { gql, useMutation } from '@apollo/client'
import { INVITE_FIELDS } from '@/fragments/invites'
import styles from '@/styles/invites.module.css'
import { useToast } from '@/components/toast'
export default function Invite ({ invite, active }) {
const [revokeInvite] = useMutation(
gql`
${INVITE_FIELDS}
mutation revokeInvite($id: ID!) {
revokeInvite(id: $id) {
...InviteFields
}
}`
)
const toaster = useToast()
return (
<div
className={styles.invite}
>
{invite.description && <small className='text-muted'>{invite.description}</small>}
<CopyInput
groupClassName='mb-1'
size='sm' type='text'
placeholder={`${process.env.NEXT_PUBLIC_URL}/invites/${invite.id}`} readOnly noForm
/>
<div className={styles.other}>
<span>{invite.gift} sat gift</span>
<span> \ </span>
<span>{invite.invitees.length} joined{invite.limit ? ` of ${invite.limit}` : ''}</span>
{active
? (
<>
<span> \ </span>
<span
className={styles.revoke}
onClick={async () => {
try {
await revokeInvite({ variables: { id: invite.id } })
} catch (err) {
toaster.danger(err.message)
}
}}
>revoke
</span>
</>)
: invite.revoked && (
<>
<span> \ </span>
<span
className='text-danger'
>revoked
</span>
</>)}
</div>
</div>
)
}