ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix rapid voting ui race condition (#213)

This commit is contained in:
keyan 2023-07-09 11:15:46 -05:00
parent 0c67808e44
commit f33534dd36
4 changed files with 58 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/comment.js
View File

@ -97,6 +97,7 @@ export default function Comment ({
const ref = useRef(null)
const router = useRouter()
const root = useRoot()
const [pendingSats, setPendingSats] = useState(0)
useEffect(() => {
setCollapse(localStorage.getItem(`commentCollapse:${item.id}`) || collapse)
@ -124,11 +125,12 @@ export default function Comment ({
<div className={`${itemStyles.item} ${styles.item}`}>
{item.meDontLike
? <Flag width={24} height={24} className={`${styles.dontLike}`} />
: <UpVote item={item} className={styles.upvote} />}
: <UpVote item={item} className={styles.upvote} pendingSats={pendingSats} setPendingSats={setPendingSats} />}
<div className={`${itemStyles.hunk} ${styles.hunk}`}>
<div className='d-flex align-items-center'>
<ItemInfo
item={item}
pendingSats={pendingSats}
commentsText='replies'
className={`${itemStyles.other} ${styles.other}`}
embellishUser={op && <span className='text-boost font-weight-bold ml-1'>OP</span>}

4
components/item-info.js
View File

@ -16,7 +16,7 @@ import BookmarkDropdownItem from './bookmark'
import SubscribeDropdownItem from './subscribe'
import { CopyLinkDropdownItem } from './share'
export default function ItemInfo ({ item, full, commentsText, className, embellishUser, extraInfo, onEdit, editText }) {
export default function ItemInfo ({ item, pendingSats, full, commentsText, className, embellishUser, extraInfo, onEdit, editText }) {
const editThreshold = new Date(item.createdAt).getTime() + 10 * 60000
const me = useMe()
const router = useRouter()
@ -33,7 +33,7 @@ export default function ItemInfo ({ item, full, commentsText, className, embelli
<div className={className || `${styles.other}`}>
{!item.position &&
<>
<span title={`from ${item.upvotes} users ${item.mine ? `\\ ${item.meSats} sats to post` : `(${item.meSats} sats from me)`} `}>{abbrNum(item.sats)} sats</span>
<span title={`from ${item.upvotes} users ${item.mine ? `\\ ${item.meSats} sats to post` : `(${item.meSats + pendingSats} sats from me)`} `}>{abbrNum(item.sats + pendingSats)} sats</span>
<span> \ </span>
</>}
{item.boost > 0 &&

7
components/item.js
View File

@ -1,7 +1,7 @@
import Link from 'next/link'
import styles from './item.module.css'
import UpVote from './upvote'
import { useRef } from 'react'
import { useRef, useState } from 'react'
import { NOFOLLOW_LIMIT } from '../lib/constants'
import Pin from '../svgs/pushpin-fill.svg'
import reactStringReplace from 'react-string-replace'
@ -20,6 +20,7 @@ export function SearchTitle ({ title }) {
export default function Item ({ item, rank, belowTitle, right, full, children }) {
const titleRef = useRef()
const [pendingSats, setPendingSats] = useState(0)
return (
<>
@ -32,7 +33,7 @@ export default function Item ({ item, rank, belowTitle, right, full, children })
<div className={styles.item}>
{item.position
? <Pin width={24} height={24} className={styles.pin} />
: item.meDontLike ? <Flag width={24} height={24} className={`${styles.dontLike}`} /> : <UpVote item={item} className={styles.upvote} />}
: item.meDontLike ? <Flag width={24} height={24} className={`${styles.dontLike}`} /> : <UpVote item={item} className={styles.upvote} pendingSats={pendingSats} setPendingSats={setPendingSats} />}
<div className={styles.hunk}>
<div className={`${styles.main} flex-wrap`}>
<Link href={`/items/${item.id}`} passHref>
@ -58,7 +59,7 @@ export default function Item ({ item, rank, belowTitle, right, full, children })
</a>
</>}
</div>
<ItemInfo full={full} item={item} />
<ItemInfo full={full} item={item} pendingSats={pendingSats} />
{belowTitle}
</div>
{right}

83
components/upvote.js
View File

@ -6,7 +6,7 @@ import ActionTooltip from './action-tooltip'
import ItemAct from './item-act'
import { useMe } from './me'
import Rainbow from '../lib/rainbow'
import { useRef, useState } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import LongPressable from 'react-longpressable'
import { Overlay, Popover } from 'react-bootstrap'
import { useShowModal } from './modal'
@ -63,12 +63,13 @@ const TipPopover = ({ target, show, handleClose }) => (
</Overlay>
)
export default function UpVote ({ item, className }) {
export default function UpVote ({ item, className, pendingSats, setPendingSats }) {
const showModal = useShowModal()
const router = useRouter()
const [voteShow, _setVoteShow] = useState(false)
const [tipShow, _setTipShow] = useState(false)
const ref = useRef()
const timerRef = useRef(null)
const me = useMe()
const [setWalkthrough] = useMutation(
gql`
@ -112,11 +113,12 @@ export default function UpVote ({ item, className }) {
gql`
mutation act($id: ID!, $sats: Int!) {
act(id: $id, sats: $sats) {
vote,
sats
}
}`, {
update (cache, { data: { act: { vote, sats } } }) {
update (cache, { data: { act: { sats } } }) {
setPendingSats(0)
cache.modify({
id: `Item:${item.id}`,
fields: {
@ -133,9 +135,6 @@ export default function UpVote ({ item, className }) {
}
return existingSats + sats
},
upvotes (existingUpvotes = 0) {
return existingUpvotes + vote
}
}
})
@ -156,15 +155,50 @@ export default function UpVote ({ item, className }) {
}
)
// prevent updating pendingSats after unmount
useEffect(() => {
return () => { timerRef.current = null }
}, [])
// if we want to use optimistic response, we need to buffer the votes
// because if someone votes in quick succession, responses come back out of order
// so we wait a bit to see if there are more votes coming in
// this effectively performs our own debounced optimistic response
const bufferVotes = useCallback((sats) => {
if (timerRef.current) {
clearTimeout(timerRef.current)
}
timerRef.current = setTimeout(async (pendingSats, sats) => {
try {
await act({
variables: { id: item.id, sats: pendingSats + sats }
})
} catch (error) {
if (error.toString().includes('insufficient funds')) {
showModal(onClose => {
return <FundError onClose={onClose} />
})
return
}
throw new Error({ message: error.toString() })
}
}, 1000, pendingSats, sats)
timerRef.current && setPendingSats(pendingSats + sats)
}, [item, pendingSats, act, setPendingSats, showModal])
const meSats = (item?.meSats || 0) + pendingSats
// what should our next tip be?
let sats = me?.tipDefault || 1
if (me?.turboTipping && item?.meSats) {
if (me?.turboTipping && me) {
let raiseTip = sats
while (item?.meSats >= raiseTip) {
while (meSats >= raiseTip) {
raiseTip *= 10
}
sats = raiseTip - item.meSats
sats = raiseTip - meSats
}
const overlayText = () => {
@ -173,7 +207,7 @@ export default function UpVote ({ item, className }) {
const disabled = item?.mine || fwd2me || item?.deletedAt
const color = getColor(item?.meSats)
const color = getColor(meSats)
return (
<LightningConsumer>
{({ strike }) =>
@ -203,32 +237,13 @@ export default function UpVote ({ item, className }) {
return
}
if (item?.meSats) {
if (meSats) {
setVoteShow(false)
}
strike()
try {
await act({
variables: { id: item.id, sats },
optimisticResponse: {
act: {
id: `Item:${item.id}`,
sats,
vote: 0
}
}
})
} catch (error) {
if (error.toString().includes('insufficient funds')) {
showModal(onClose => {
return <FundError onClose={onClose} />
})
return
}
throw new Error({ message: error.toString() })
}
bufferVotes(sats)
}
: async () => await router.push({
pathname: '/signup',
@ -248,9 +263,9 @@ export default function UpVote ({ item, className }) {
`${styles.upvote}
${className || ''}
${disabled ? styles.noSelfTips : ''}
${item?.meSats ? styles.voted : ''}`
${meSats ? styles.voted : ''}`
}
style={item?.meSats
style={meSats
? {
fill: color,
filter: `drop-shadow(0 0 6px ${color}90)`