From be2c60d3f3a518909f3eef93af6f31f9e408e4ce Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Sun, 25 Sep 2022 16:43:53 -0700
Subject: [PATCH] Fix some rendering issues on contract page (#933)

* Memoize calculating sale amount on your bets list

* Don't re-render more than necessary with `useIsMobile` hook

* Use `useIsMobile` hook in `AmountInput`
---
 web/components/amount-input.tsx |  5 ++---
 web/components/bets-list.tsx    | 22 ++++++++++++++--------
 web/hooks/use-is-mobile.ts      | 16 +++++++++++-----
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx
index 2ad745a8..76581d9e 100644
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@@ -5,7 +5,7 @@ import { formatMoney } from 'common/util/format'
 import { Col } from './layout/col'
 import { SiteLink } from './site-link'
 import { ENV_CONFIG } from 'common/envs/constants'
-import { useWindowSize } from 'web/hooks/use-window-size'
+import { useIsMobile } from 'web/hooks/use-is-mobile'
 
 export function AmountInput(props: {
   amount: number | undefined
@@ -34,8 +34,7 @@ export function AmountInput(props: {
     const isInvalid = !str || isNaN(amount)
     onChange(isInvalid ? undefined : amount)
   }
-  const { width } = useWindowSize()
-  const isMobile = (width ?? 0) < 768
+  const isMobile = useIsMobile(768)
   return (
     <Col className={className}>
       <label className="input-group mb-4">
diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx
index 97d11758..74480de5 100644
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@@ -610,18 +610,24 @@ function BetRow(props: {
   const isNumeric = outcomeType === 'NUMERIC'
   const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
 
-  const saleAmount = saleBet?.sale?.amount
+  // calculateSaleAmount is very slow right now so that's why we memoized this
+  const payout = useMemo(() => {
+    const saleBetAmount = saleBet?.sale?.amount
+    if (saleBetAmount) {
+      return saleBetAmount
+    } else if (contract.isResolved) {
+      return resolvedPayout(contract, bet)
+    } else {
+      return calculateSaleAmount(contract, bet, unfilledBets)
+    }
+  }, [contract, bet, saleBet, unfilledBets])
 
   const saleDisplay = isAnte ? (
     'ANTE'
-  ) : saleAmount !== undefined ? (
-    <>{formatMoney(saleAmount)} (sold)</>
+  ) : saleBet ? (
+    <>{formatMoney(payout)} (sold)</>
   ) : (
-    formatMoney(
-      isResolved
-        ? resolvedPayout(contract, bet)
-        : calculateSaleAmount(contract, bet, unfilledBets)
-    )
+    formatMoney(payout)
   )
 
   const payoutIfChosenDisplay =
diff --git a/web/hooks/use-is-mobile.ts b/web/hooks/use-is-mobile.ts
index 9ce0133c..7e99a97d 100644
--- a/web/hooks/use-is-mobile.ts
+++ b/web/hooks/use-is-mobile.ts
@@ -1,7 +1,13 @@
-import { useWindowSize } from 'web/hooks/use-window-size'
+import { useEffect, useState } from 'react'
 
-// matches talwind sm breakpoint
-export function useIsMobile() {
-  const { width } = useWindowSize()
-  return (width ?? 0) < 640
+export function useIsMobile(threshold?: number) {
+  const [isMobile, setIsMobile] = useState<boolean>()
+  useEffect(() => {
+    // 640 matches tailwind sm breakpoint
+    const onResize = () => setIsMobile(window.innerWidth < (threshold ?? 640))
+    onResize()
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [threshold])
+  return isMobile
 }