Refactor tipper (#734)

* Clean up tipping components

* Pass comment into tip callback

web/components/tipper.tsx

@@ -37,7 +37,7 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
 
   // declare debounced function only on first render
   const [saveTip] = useState(() =>
-    debounce(async (user: User, change: number) => {
+    debounce(async (user: User, comment: Comment, change: number) => {
       if (change === 0) {
         return
       }
@@ -71,30 +71,24 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
   // instant save on unrender
   useEffect(() => () => void saveTip.flush(), [saveTip])
 
-  const changeTip = (tip: number) => {
+  const addTip = (delta: number) => {
-    setLocalTip(tip)
+    setLocalTip(localTip + delta)
-    me && saveTip(me, tip - savedTip)
+    me && saveTip(me, comment, localTip - savedTip + delta)
   }
 
+  const canDown = me && localTip > savedTip
+  const canUp = me && me.id !== comment.userId && me.balance >= localTip + 5
   return (
     <Row className="items-center gap-0.5">
-      <DownTip
+      <DownTip onClick={canDown ? () => addTip(-5) : undefined} />
-        value={localTip}
-        onChange={changeTip}
-        disabled={!me || localTip <= savedTip}
-      />
       <span className="font-bold">{Math.floor(total)}</span>
-      <UpTip
+      <UpTip onClick={canUp ? () => addTip(+5) : undefined} value={localTip} />
-        value={localTip}
-        onChange={changeTip}
-        disabled={!me || me.id === comment.userId || me.balance < localTip + 5}
-      />
       {localTip === 0 ? (
         ''
       ) : (
         <span
           className={clsx(
-            'font-semibold',
+            'ml-1 font-semibold',
             localTip > 0 ? 'text-primary' : 'text-red-400'
           )}
         >
@@ -105,21 +99,17 @@ export function Tipper(prop: { comment: Comment; tips: CommentTips }) {
   )
 }
 
-function DownTip(prop: {
+function DownTip(props: { onClick?: () => void }) {
-  value: number
+  const { onClick } = props
-  onChange: (tip: number) => void
-  disabled?: boolean
-}) {
-  const { onChange, value, disabled } = prop
   return (
     <Tooltip
-      className="tooltip-bottom"
+      className="tooltip-bottom h-6 w-6"
-      text={!disabled && `-${formatMoney(5)}`}
+      text={onClick && `-${formatMoney(5)}`}
     >
       <button
-        className="flex h-max items-center hover:text-red-600 disabled:text-gray-300"
+        className="hover:text-red-600 disabled:text-gray-300"
-        disabled={disabled}
+        disabled={!onClick}
-        onClick={() => onChange(value - 5)}
+        onClick={onClick}
       >
         <ChevronLeftIcon className="h-6 w-6" />
       </button>
@@ -127,30 +117,20 @@ function DownTip(prop: {
   )
 }
 
-function UpTip(prop: {
+function UpTip(props: { onClick?: () => void; value: number }) {
-  value: number
+  const { onClick, value } = props
-  onChange: (tip: number) => void
+  const IconKind = value >= 10 ? ChevronDoubleRightIcon : ChevronRightIcon
-  disabled?: boolean
-}) {
-  const { onChange, value, disabled } = prop
-
   return (
     <Tooltip
-      className="tooltip-bottom"
+      className="tooltip-bottom h-6 w-6"
-      text={!disabled && `Tip ${formatMoney(5)}`}
+      text={onClick && `Tip ${formatMoney(5)}`}
     >
       <button
-        className="hover:text-primary flex h-max items-center disabled:text-gray-300"
+        className="hover:text-primary disabled:text-gray-300"
-        disabled={disabled}
+        disabled={!onClick}
-        onClick={() => onChange(value + 5)}
+        onClick={onClick}
       >
-        {value >= 10 ? (
+        <IconKind className={clsx('h-6 w-6', value ? 'text-primary' : '')} />
-          <ChevronDoubleRightIcon className="text-primary mx-1 h-6 w-6" />
-        ) : value > 0 ? (
-          <ChevronRightIcon className="text-primary h-6 w-6" />
-        ) : (
-          <ChevronRightIcon className="h-6 w-6" />
-        )}
       </button>
     </Tooltip>
   )