From 54356b8d2f82c25b4add64c77bcaffd19f0f45b3 Mon Sep 17 00:00:00 2001 From: Sinclair Chen Date: Mon, 27 Jun 2022 11:18:15 -0500 Subject: [PATCH] Remove undo. Show full tip amount. Linear scale. (#573) --- web/components/tipper.tsx | 47 +++++++++++++++------------------------ 1 file changed, 18 insertions(+), 29 deletions(-) diff --git a/web/components/tipper.tsx b/web/components/tipper.tsx index 3b4d3603..64bad4eb 100644 --- a/web/components/tipper.tsx +++ b/web/components/tipper.tsx @@ -7,8 +7,8 @@ import clsx from 'clsx' import { Comment } from 'common/comment' import { User } from 'common/user' import { formatMoney } from 'common/util/format' -import { debounce, sumBy } from 'lodash' -import { useEffect, useMemo, useRef, useState } from 'react' +import { debounce, sum } from 'lodash' +import { useEffect, useRef, useState } from 'react' import { CommentTips } from 'web/hooks/use-tip-txns' import { useUser } from 'web/hooks/use-user' import { transact } from 'web/lib/firebase/fn-call' @@ -16,33 +16,24 @@ import { track } from 'web/lib/service/analytics' import { Row } from './layout/row' import { Tooltip } from './tooltip' -// xth triangle number * 5 = 5 + 10 + 15 + ... + (x * 5) -const quad = (x: number) => (5 / 2) * x * (x + 1) - -// inverse (see https://math.stackexchange.com/questions/2041988/how-to-get-inverse-of-formula-for-sum-of-integers-from-1-to-nsee ) -const invQuad = (y: number) => Math.sqrt((2 / 5) * y + 1 / 4) - 1 / 2 - export function Tipper(prop: { comment: Comment; tips: CommentTips }) { const { comment, tips } = prop const me = useUser() const myId = me?.id ?? '' - const savedTip = tips[myId] as number | undefined + const savedTip = tips[myId] ?? 0 - // optimistically increase the tip count, but debounce the update - const [localTip, setLocalTip] = useState(savedTip ?? 0) + const [localTip, setLocalTip] = useState(savedTip) + // listen for user being set const initialized = useRef(false) useEffect(() => { - if (savedTip && !initialized.current) { - setLocalTip(savedTip) + if (tips[myId] && !initialized.current) { + setLocalTip(tips[myId]) initialized.current = true } - }, [savedTip]) + }, [tips, myId]) - const score = useMemo(() => { - const tipVals = Object.values({ ...tips, [myId]: localTip }) - return sumBy(tipVals, invQuad) - }, [localTip, tips, myId]) + const total = sum(Object.values(tips)) - savedTip + localTip // declare debounced function only on first render const [saveTip] = useState(() => @@ -80,7 +71,7 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) { const changeTip = (tip: number) => { setLocalTip(tip) - me && saveTip(me, tip - (savedTip ?? 0)) + me && saveTip(me, tip - savedTip) } return ( @@ -88,13 +79,13 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) { - {Math.floor(score)} + {Math.floor(total)} {localTip === 0 ? ( '' @@ -118,16 +109,15 @@ function DownTip(prop: { disabled?: boolean }) { const { onChange, value, disabled } = prop - const marginal = 5 * invQuad(value) return ( @@ -141,19 +131,18 @@ function UpTip(prop: { disabled?: boolean }) { const { onChange, value, disabled } = prop - const marginal = 5 * invQuad(value) + 5 return (