145 lines
4.2 KiB
TypeScript
145 lines
4.2 KiB
TypeScript
import { useState } from 'react'
|
|
import toast from 'react-hot-toast'
|
|
|
|
import { Comment } from 'common/comment'
|
|
import { User } from 'common/user'
|
|
import { useUser } from 'web/hooks/use-user'
|
|
import { transact } from 'web/lib/firebase/api'
|
|
import { track } from 'web/lib/service/analytics'
|
|
import { TipButton } from './contract/tip-button'
|
|
import { Row } from './layout/row'
|
|
import { LIKE_TIP_AMOUNT, TIP_UNDO_DURATION } from 'common/like'
|
|
import { formatMoney } from 'common/util/format'
|
|
import { Button } from './button'
|
|
import clsx from 'clsx'
|
|
|
|
export function Tipper(prop: {
|
|
comment: Comment
|
|
myTip: number
|
|
totalTip: number
|
|
}) {
|
|
const { comment, myTip, totalTip } = prop
|
|
|
|
// This is a temporary tipping amount before it actually gets confirmed. This is so tha we dont accidentally tip more than you have
|
|
const [tempTip, setTempTip] = useState(0)
|
|
|
|
const me = useUser()
|
|
|
|
const [saveTip] = useState(
|
|
() => async (user: User, comment: Comment, change: number) => {
|
|
if (change === 0) {
|
|
return
|
|
}
|
|
|
|
const contractId =
|
|
comment.commentType === 'contract' ? comment.contractId : undefined
|
|
const groupId =
|
|
comment.commentType === 'group' ? comment.groupId : undefined
|
|
const postId = comment.commentType === 'post' ? comment.postId : undefined
|
|
await transact({
|
|
amount: change,
|
|
fromId: user.id,
|
|
fromType: 'USER',
|
|
toId: comment.userId,
|
|
toType: 'USER',
|
|
token: 'M$',
|
|
category: 'TIP',
|
|
data: { commentId: comment.id, contractId, groupId, postId },
|
|
description: `${user.name} tipped M$ ${change} to ${comment.userName} for a comment`,
|
|
})
|
|
|
|
track('send comment tip', {
|
|
commentId: comment.id,
|
|
contractId,
|
|
groupId,
|
|
postId,
|
|
amount: change,
|
|
fromId: user.id,
|
|
toId: comment.userId,
|
|
})
|
|
}
|
|
)
|
|
|
|
const addTip = (delta: number) => {
|
|
setTempTip(tempTip + delta)
|
|
const timeoutId = setTimeout(() => {
|
|
me &&
|
|
saveTip(me, comment, delta)
|
|
.then(() => setTempTip(tempTip - delta))
|
|
.catch((e) => console.error(e))
|
|
}, TIP_UNDO_DURATION + 1000)
|
|
toast.custom(
|
|
() => (
|
|
<TipToast
|
|
userName={comment.userName}
|
|
onUndoClick={() => {
|
|
clearTimeout(timeoutId)
|
|
setTempTip(tempTip - delta)
|
|
}}
|
|
/>
|
|
),
|
|
{ duration: TIP_UNDO_DURATION }
|
|
)
|
|
}
|
|
|
|
const canUp =
|
|
me && comment.userId !== me.id && me.balance - tempTip >= LIKE_TIP_AMOUNT
|
|
|
|
return (
|
|
<Row className="items-center gap-0.5">
|
|
<TipButton
|
|
tipAmount={LIKE_TIP_AMOUNT}
|
|
totalTipped={totalTip}
|
|
onClick={() => addTip(+LIKE_TIP_AMOUNT)}
|
|
userTipped={tempTip > 0 || myTip > 0}
|
|
disabled={!canUp}
|
|
isCompact
|
|
/>
|
|
</Row>
|
|
)
|
|
}
|
|
|
|
export function TipToast(props: { userName: string; onUndoClick: () => void }) {
|
|
const { userName, onUndoClick } = props
|
|
const [cancelled, setCancelled] = useState(false)
|
|
|
|
// There is a strange bug with toast where sometimes if you interact with one popup, the others will not dissappear at the right time, overriding it for now with this
|
|
const [timedOut, setTimedOut] = useState(false)
|
|
setTimeout(() => {
|
|
setTimedOut(true)
|
|
}, TIP_UNDO_DURATION)
|
|
if (timedOut) {
|
|
return <></>
|
|
}
|
|
return (
|
|
<div className="relative overflow-hidden rounded-lg bg-white drop-shadow-md">
|
|
<div
|
|
className={clsx(
|
|
'animate-progress-loading absolute bottom-0 z-10 h-1 w-full bg-indigo-600',
|
|
cancelled ? 'hidden' : ''
|
|
)}
|
|
/>
|
|
<Row className="text-greyscale-6 items-center gap-4 px-4 py-2 text-sm">
|
|
<div className={clsx(cancelled ? 'hidden' : 'inline')}>
|
|
Tipping {userName} {formatMoney(LIKE_TIP_AMOUNT)}...
|
|
</div>
|
|
<div className={clsx('py-1', cancelled ? 'inline' : 'hidden')}>
|
|
Cancelled tipping
|
|
</div>
|
|
<Button
|
|
className={clsx(cancelled ? 'hidden' : 'inline')}
|
|
size="xs"
|
|
color="gray-outline"
|
|
onClick={() => {
|
|
onUndoClick()
|
|
setCancelled(true)
|
|
}}
|
|
disabled={cancelled}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</Row>
|
|
</div>
|
|
)
|
|
}
|