Fix downzaps (#1236)

* Add optimistic update for downzaps

* Add optimistic update for zaps via dropdown

* Also use lightning strike for downzaps

components/comment.js

@@ -25,7 +25,7 @@ import Skull from '@/svgs/death-skull.svg'
 import { commentSubTreeRootId } from '@/lib/item'
 import Pin from '@/svgs/pushpin-fill.svg'
 import LinkToContext from './link-to-context'
-import { ItemContextProvider } from './item'
+import { ItemContextProvider, useItemContext } from './item'
 
 function Parent ({ item, rootText }) {
   const root = useRoot()
@@ -144,11 +144,7 @@ export default function Comment ({
         onTouchStart={() => ref.current.classList.add('outline-new-comment-unset')}
       >
         <div className={`${itemStyles.item} ${styles.item}`}>
-          {item.outlawed && !me?.privates?.wildWestMode
-            ? <Skull className={styles.dontLike} width={24} height={24} />
-            : item.meDontLikeSats > item.meSats
-              ? <DownZap width={24} height={24} className={styles.dontLike} item={item} />
-              : pin ? <Pin width={22} height={22} className={styles.pin} /> : <UpVote item={item} className={styles.upvote} />}
+          <ZapIcon item={item} pin={pin} me={me} />
           <div className={`${itemStyles.hunk} ${styles.hunk}`}>
             <div className='d-flex align-items-center'>
               {item.user?.meMute && !includeParent && collapse === 'yep'
@@ -250,6 +246,20 @@ export default function Comment ({
   )
 }
 
+function ZapIcon ({ item, pin }) {
+  const me = useMe()
+  const { pendingSats, pendingDownSats } = useItemContext()
+
+  const meSats = item.meSats + pendingSats
+  const downSats = item.meDontLikeSats + pendingDownSats
+
+  return item.outlawed && !me?.privates?.wildWestMode
+    ? <Skull className={styles.dontLike} width={24} height={24} />
+    : downSats > meSats
+      ? <DownZap width={24} height={24} className={styles.dontLike} item={item} />
+      : pin ? <Pin width={22} height={22} className={styles.pin} /> : <UpVote item={item} className={styles.upvote} />
+}
+
 export function CommentSkeleton ({ skeletonChildren }) {
   return (
     <div className={styles.comment}>

components/dont-link-this.js

@@ -4,18 +4,24 @@ import { useToast } from './toast'
 import ItemAct from './item-act'
 import AccordianItem from './accordian-item'
 import Flag from '@/svgs/flag-fill.svg'
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import getColor from '@/lib/rainbow'
 import { gql, useMutation } from '@apollo/client'
+import { useItemContext } from './item'
+import { useLightning } from './lightning'
 
 export function DownZap ({ item, ...props }) {
+  const { pendingDownSats } = useItemContext()
   const { meDontLikeSats } = item
-  const style = useMemo(() => (meDontLikeSats
+
+  const downSats = meDontLikeSats + pendingDownSats
+
+  const style = useMemo(() => (downSats
     ? {
-        fill: getColor(meDontLikeSats),
-        filter: `drop-shadow(0 0 6px ${getColor(meDontLikeSats)}90)`
+        fill: getColor(downSats),
+        filter: `drop-shadow(0 0 6px ${getColor(downSats)}90)`
       }
-    : undefined), [meDontLikeSats])
+    : undefined), [downSats])
   return (
     <DownZapper item={item} As={({ ...oprops }) => <Flag {...props} {...oprops} style={style} />} />
   )
@@ -24,6 +30,17 @@ export function DownZap ({ item, ...props }) {
 function DownZapper ({ item, As, children }) {
   const toaster = useToast()
   const showModal = useShowModal()
+  const strike = useLightning()
+  const { setPendingDownSats } = useItemContext()
+
+  const optimisticUpdate = useCallback((sats, { onClose } = {}) => {
+    setPendingDownSats(pendingSats => pendingSats + sats)
+    strike()
+    onClose?.()
+    return () => {
+      setPendingDownSats(pendingSats => pendingSats - sats)
+    }
+  }, [])
 
   return (
     <As
@@ -31,7 +48,7 @@ function DownZapper ({ item, As, children }) {
         try {
           showModal(onClose =>
             <ItemAct
-              onClose={onClose} item={item} down
+              onClose={onClose} item={item} down optimisticUpdate={optimisticUpdate}
             >
               <AccordianItem
                 header='what is a downzap?' body={

components/item-info.js

@@ -37,7 +37,7 @@ export default function ItemInfo ({
   const [hasNewComments, setHasNewComments] = useState(false)
   const [meTotalSats, setMeTotalSats] = useState(0)
   const root = useRoot()
-  const { pendingSats, pendingCommentSats } = useItemContext()
+  const { pendingSats, pendingCommentSats, pendingDownSats } = useItemContext()
   const sub = item?.sub || root?.sub
 
   useEffect(() => {
@@ -58,6 +58,8 @@ export default function ItemInfo ({
   const rootReply = item.path.split('.').length === 2
   const canPin = (isPost && mySub) || (myPost && rootReply)
 
+  const downSats = item.meDontLikeSats + pendingDownSats
+
   return (
     <div className={className || `${styles.other}`}>
       {!(item.position && (pinnable || !item.subName)) && !(!item.parentId && Number(item.user?.id) === USER_ID.ad) &&
@@ -68,8 +70,8 @@ export default function ItemInfo ({
             unitPlural: 'stackers'
           })} ${item.mine
             ? `\\ ${numWithUnits(item.meSats, { abbreviate: false })} to post`
-            : `(${numWithUnits(meTotalSats, { abbreviate: false })}${item.meDontLikeSats
-              ? ` & ${numWithUnits(item.meDontLikeSats, { abbreviate: false, unitSingular: 'downsat', unitPlural: 'downsats' })}`
+            : `(${numWithUnits(meTotalSats, { abbreviate: false })}${downSats
+              ? ` & ${numWithUnits(downSats, { abbreviate: false, unitSingular: 'downsat', unitPlural: 'downsats' })}`
               : ''} from me)`} `}
           >
             {numWithUnits(item.sats + pendingSats)}
@@ -179,7 +181,7 @@ export default function ItemInfo ({
               <CrosspostDropdownItem item={item} />}
             {me && !item.position &&
             !item.mine && !item.deletedAt &&
-            (item.meDontLikeSats > meTotalSats
+            (downSats > meTotalSats
               ? <DropdownItemUpVote item={item} />
               : <DontLikeThisDropdownItem item={item} />)}
             {me && sub && !item.mine && !item.outlawed && Number(me.id) === Number(sub.userId) && sub.moderated &&

components/item.js

@@ -49,7 +49,9 @@ const ItemContext = createContext({
   pendingSats: 0,
   setPendingSats: undefined,
   pendingVote: undefined,
-  setPendingVote: undefined
+  setPendingVote: undefined,
+  pendingDownSats: 0,
+  setPendingDownSats: undefined
 })
 
 export const ItemContextProvider = ({ children }) => {
@@ -57,6 +59,7 @@ export const ItemContextProvider = ({ children }) => {
   const [pendingSats, innerSetPendingSats] = useState(0)
   const [pendingCommentSats, innerSetPendingCommentSats] = useState(0)
   const [pendingVote, setPendingVote] = useState()
+  const [pendingDownSats, setPendingDownSats] = useState(0)
 
   // cascade comment sats up to root context
   const setPendingSats = useCallback((sats) => {
@@ -76,9 +79,11 @@ export const ItemContextProvider = ({ children }) => {
       pendingCommentSats,
       setPendingCommentSats,
       pendingVote,
-      setPendingVote
+      setPendingVote,
+      pendingDownSats,
+      setPendingDownSats
     }),
-  [pendingSats, setPendingSats, pendingCommentSats, setPendingCommentSats, pendingVote, setPendingVote])
+  [pendingSats, setPendingSats, pendingCommentSats, setPendingCommentSats, pendingVote, setPendingVote, pendingDownSats, setPendingDownSats])
   return <ItemContext.Provider value={value}>{children}</ItemContext.Provider>
 }
 
@@ -101,13 +106,7 @@ export default function Item ({ item, rank, belowTitle, right, full, children, s
           </div>)
         : <div />}
       <div className={`${styles.item} ${siblingComments ? 'pt-3' : ''}`}>
-        {item.position && (pinnable || !item.subName)
-          ? <Pin width={24} height={24} className={styles.pin} />
-          : item.meDontLikeSats > item.meSats
-            ? <DownZap width={24} height={24} className={styles.dontLike} item={item} />
-            : Number(item.user?.id) === USER_ID.ad
-              ? <AdIcon width={24} height={24} className={styles.ad} />
-              : <UpVote item={item} className={styles.upvote} />}
+        <ZapIcon item={item} pinnable={pinnable} />
         <div className={styles.hunk}>
           <div className={`${styles.main} flex-wrap`}>
             <Link
@@ -229,6 +228,21 @@ export function ItemSkeleton ({ rank, children, showUpvote = true }) {
   )
 }
 
+function ZapIcon ({ item, pinnable }) {
+  const { pendingSats, pendingDownSats } = useItemContext()
+
+  const meSats = item.meSats + pendingSats
+  const downSats = item.meDontLikeSats + pendingDownSats
+
+  return item.position && (pinnable || !item.subName)
+    ? <Pin width={24} height={24} className={styles.pin} />
+    : downSats > meSats
+      ? <DownZap width={24} height={24} className={styles.dontLike} item={item} />
+      : Number(item.user?.id) === USER_ID.ad
+        ? <AdIcon width={24} height={24} className={styles.ad} />
+        : <UpVote item={item} className={styles.upvote} />
+}
+
 function PollIndicator ({ item }) {
   const hasExpiration = !!item.pollExpiresAt
   const timeRemaining = timeLeft(new Date(item.pollExpiresAt))

components/upvote.js

@@ -56,12 +56,23 @@ const TipPopover = ({ target, show, handleClose }) => (
 
 export function DropdownItemUpVote ({ item }) {
   const showModal = useShowModal()
+  const { setPendingSats } = useItemContext()
+  const strike = useLightning()
+
+  const optimisticUpdate = useCallback((sats, { onClose } = {}) => {
+    setPendingSats(pendingSats => pendingSats + sats)
+    strike()
+    onClose?.()
+    return () => {
+      setPendingSats(pendingSats => pendingSats - sats)
+    }
+  }, [])
 
   return (
     <Dropdown.Item
       onClick={async () => {
         showModal(onClose =>
-          <ItemAct onClose={onClose} item={item} />)
+          <ItemAct onClose={onClose} item={item} optimisticUpdate={optimisticUpdate} />)
       }}
     >
       <span className='text-success'>zap</span>