import Button from 'react-bootstrap/Button' import { fixedDecimal, numWithUnits } from '@/lib/format' import { timeLeft } from '@/lib/time' import { useMe } from './me' import styles from './poll.module.css' import { signIn } from 'next-auth/react' import ActionTooltip from './action-tooltip' import { useQrPayment } from './payment' import { useToast } from './toast' import { usePaidMutation } from './use-paid-mutation' import { POLL_VOTE, RETRY_PAID_ACTION } from '@/fragments/paidAction' export default function Poll ({ item }) { const me = useMe() const pollVote = usePollVote({ query: POLL_VOTE, itemId: item.id }) const toaster = useToast() const PollButton = ({ v }) => { return ( ) } const RetryVote = () => { const retryVote = usePollVote({ query: RETRY_PAID_ACTION, itemId: item.id }) const waitForQrPayment = useQrPayment() if (item.poll.meInvoiceActionState === 'PENDING') { return ( waitForQrPayment( { id: parseInt(item.poll.meInvoiceId) }, null, { cancelOnClose: false }).catch(console.error)} >vote pending ) } return ( retryVote({ variables: { invoiceId: parseInt(item.poll.meInvoiceId) } })} > retry vote ) } const hasExpiration = !!item.pollExpiresAt const timeRemaining = timeLeft(new Date(item.pollExpiresAt)) const mine = item.user.id === me?.id const meVotePending = item.poll.meInvoiceActionState && item.poll.meInvoiceActionState !== 'PAID' const showPollButton = me && (!hasExpiration || timeRemaining) && !item.poll.meVoted && !meVotePending && !mine const pollCount = item.poll.count return (
{item.poll.options.map(v => showPollButton ? : )}
{numWithUnits(item.poll.count, { unitSingular: 'vote', unitPlural: 'votes' })} {hasExpiration && ` \\ ${timeRemaining ? `${timeRemaining} left` : 'poll ended'}`} {!showPollButton && meVotePending && }
) } function PollResult ({ v, progress }) { return (
{v.option} {progress}%
) } export function usePollVote ({ query = POLL_VOTE, itemId }) { const update = (cache, { data }) => { // the mutation name varies for optimistic retries const response = Object.values(data)[0] if (!response) return const { result, invoice } = response const { id } = result cache.modify({ id: `Item:${itemId}`, fields: { poll (existingPoll) { const poll = { ...existingPoll } poll.meVoted = true if (invoice) { poll.meInvoiceActionState = 'PENDING' poll.meInvoiceId = invoice.id } poll.count += 1 return poll } } }) cache.modify({ id: `PollOption:${id}`, fields: { count (existingCount) { return existingCount + 1 } } }) } const onPayError = (e, cache, { data }) => { // the mutation name varies for optimistic retries const response = Object.values(data)[0] if (!response) return const { result, invoice } = response const { id } = result cache.modify({ id: `Item:${itemId}`, fields: { poll (existingPoll) { const poll = { ...existingPoll } poll.meVoted = false if (invoice) { poll.meInvoiceActionState = 'FAILED' poll.meInvoiceId = invoice?.id } poll.count -= 1 return poll } } }) cache.modify({ id: `PollOption:${id}`, fields: { count (existingCount) { return existingCount - 1 } } }) } const onPaid = (cache, { data }) => { // the mutation name varies for optimistic retries const response = Object.values(data)[0] if (!response?.invoice) return const { invoice } = response cache.modify({ id: `Item:${itemId}`, fields: { poll (existingPoll) { const poll = { ...existingPoll } poll.meVoted = true poll.meInvoiceActionState = 'PAID' poll.meInvoiceId = invoice.id return poll } } }) } const [pollVote] = usePaidMutation(query, { update, onPayError, onPaid }) return pollVote }