24:I[307436,["/_next/static/immutable/chunks/1gchium7nww9r.js","/_next/static/immutable/chunks/2d7gr10yud7ll.js","/_next/static/immutable/chunks/2kyb8oum4hifz.js","/_next/static/immutable/chunks/17bc5e9cm9a-q.js","/_next/static/immutable/chunks/42sqmxmk3cnps.js","/_next/static/immutable/chunks/2-g5j69xga-j-.js","/_next/static/immutable/chunks/1vqnea-qk-oh0.js","/_next/static/immutable/chunks/0457ji1bpobon.js","/_next/static/immutable/chunks/2kc7ecqs15k_7.js","/_next/static/immutable/chunks/0a937jsg96ehe.js","/_next/static/immutable/chunks/1x71wnz52c5-i.js","/_next/static/immutable/chunks/3bmj1ccyv_bzu.js","/_next/static/immutable/chunks/3zyborr59s_3k.js","/_next/static/immutable/chunks/2iprwyxekay_3.js"],"Copy"] 25:T7da,/** One vote, sent. The score moves with the press, before the answer; a refused * vote puts back what the server last said, unless a newer press has spoken * since. */ function useVote(start: { vote: VoteValue; score: number }, refuse: boolean) { const [vote, setVote] = React.useState(start.vote) const [score, setScore] = React.useState(start.score) const [said, setSaid] = React.useState("") const confirmed = React.useRef(start) const latest = React.useRef(0) const change = (next: VoteValue) => { const turn = ++latest.current setScore(score - vote + next) setVote(next) setSaid("sending") send(next, refuse).then( () => { confirmed.current = { vote: next, score: score - vote + next } if (turn === latest.current) setSaid("saved") }, () => { if (turn !== latest.current) return setVote(confirmed.current.vote) setScore(confirmed.current.score) setSaid("refused, put back") }, ) } return { vote, score, change, said } } /** A stand-in server: answers after a moment, or refuses. */ const send = (_vote: VoteValue, refuse: boolean) => new Promise((done, fail) => setTimeout(() => (refuse ? fail(new Error("refused")) : done()), 700), ) function Post({ refuse = false }: { refuse?: boolean }) { const v = useVote({ vote: 0, score: 41 }, refuse) return (

{refuse ? "a server that refuses" : "a server that agrees"} {v.said || "press an arrow, then the same one again"}

) }

26:T5626,

/** One vote, sent. The score moves with the press, before the answer; a refused
 *  vote puts back what the server last said, unless a newer press has spoken
 *  since. */
function useVote(start: { vote: VoteValue; score: number }, refuse: boolean) {
  const [vote, setVote] = React.useState(start.vote)
  const [score, setScore] = React.useState(start.score)
  const [said, setSaid] = React.useState("")
  const confirmed = React.useRef(start)
  const latest = React.useRef(0)
  const change = (next: VoteValue) => {
    const turn = ++latest.current
    setScore(score - vote + next)
    setVote(next)
    setSaid("sending")
    send(next, refuse).then(
      () => {
        confirmed.current = { vote: next, score: score - vote + next }
        if (turn === latest.current) setSaid("saved")
      },
      () => {
        if (turn !== latest.current) return
        setVote(confirmed.current.vote)
        setScore(confirmed.current.score)
        setSaid("refused, put back")
      },
    )
  }
  return { vote, score, change, said }
}

/** A stand-in server: answers after a moment, or refuses. */
const send = (_vote: VoteValue, refuse: boolean) =>
  new Promise<void>((done, fail) =>
    setTimeout(() => (refuse ? fail(new Error("refused")) : done()), 700),
  )

function Post({ refuse = false }: { refuse?: boolean }) {
  const v = useVote({ vote: 0, score: 41 }, refuse)
  return (
    <div className="flex items-start gap-3">
      <Vote
        aria-label="vote on this post"
        value={v.vote}
        score={v.score}
        onValueChange={v.change}
      />
      <div className="flex flex-col gap-1 pt-1">
        <span className="font-medium text-sm">
          {refuse ? "a server that refuses" : "a server that agrees"}
        </span>
        <span className="font-mono text-[11px] text-current/55">
          {v.said || "press an arrow, then the same one again"}
        </span>
      </div>
    </div>
  )
}

<div className="flex flex-col gap-5">
  <Post />
  <Post refuse />
</div>

20:["$","div","optimistic",{"data-slot":"code","data-material":"plain","data-compact":"$undefined","className":"ag-code","children":[["$","div",null,{"className":"ag-code-bar","children":[["$","span",null,{"className":"ag-code-name","children":"tsx"}],["$","$L24",null,{"value":"$25","label":true}]]}],["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$26"}}],false]}]