open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cache your shares in local storage so sell banner doesn't flicker.

Browse Source
This commit is contained in:
James Grugett 2022-03-28 11:56:04 -05:00
parent ac9fef7a7e
commit a0ed63070f
1 changed files with 43 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
web/components/bet-panel.tsx
View File

@ -45,19 +45,13 @@ export function BetPanel(props: {
const { mechanism } = contract
const user = useUser()
const userBets = useUserContractBets(user?.id, contract.id) ?? []
const userBets = useUserContractBets(user?.id, contract.id)
const [tradeType, setTradeType] = useState<'BUY' | 'SELL'>('BUY')
const [yesBets, noBets] = _.partition(
userBets,
(bet) => bet.outcome === 'YES'
)
const [yesShares, noShares] = [
_.sumBy(yesBets, (bet) => bet.shares),
_.sumBy(noBets, (bet) => bet.shares),
]
const { yesShares, noShares } = useSaveShares(contract, userBets)
const shares = yesShares || noShares
const sharesOutcome = yesShares ? 'YES' : noShares ? 'NO' : undefined
useEffect(() => {
@ -73,7 +67,7 @@ export function BetPanel(props: {
<Col className="rounded-t-md bg-gray-100 px-6 py-6">
<Row className="items-center justify-between gap-2">
<div>
You have {formatWithCommas(Math.floor(yesShares || noShares))}{' '}
You have {formatWithCommas(Math.floor(shares))}{' '}
<OutcomeLabel outcome={sharesOutcome} /> shares
</div>
@ -115,7 +109,7 @@ export function BetPanel(props: {
shares={yesShares || noShares}
sharesOutcome={sharesOutcome}
user={user}
userBets={userBets}
userBets={userBets ?? []}
onSellSuccess={onBetSuccess}
/>
)}
@ -124,7 +118,7 @@ export function BetPanel(props: {
<BuyPanel
contract={contract}
user={user}
userBets={userBets}
userBets={userBets ?? []}
selected={selected}
onBuySuccess={onBetSuccess}
/>
@ -417,3 +411,40 @@ function SellPanel(props: {
</>
)
}
const useSaveShares = (
contract: FullContract<CPMM | DPM, Binary>,
userBets: Bet[] | undefined
) => {
const [savedShares, setSavedShares] = useState<
{ yesShares: number; noShares: number } | undefined
>()
const [yesBets, noBets] = _.partition(
userBets ?? [],
(bet) => bet.outcome === 'YES'
)
const [yesShares, noShares] = [
_.sumBy(yesBets, (bet) => bet.shares),
_.sumBy(noBets, (bet) => bet.shares),
]
useEffect(() => {
// Save yes and no shares to local storage.
const savedShares = localStorage.getItem(`${contract.id}-shares`)
if (!userBets && savedShares) {
setSavedShares(JSON.parse(savedShares))
}
if (userBets) {
const updatedShares = { yesShares, noShares }
localStorage.setItem(
`${contract.id}-shares`,
JSON.stringify(updatedShares)
)
}
}, [contract.id, userBets, noShares, yesShares])
if (userBets) return { yesShares, noShares }
return savedShares ?? { yesShares: 0, noShares: 0 }
}