From 4e8b94a28c2d54157da26ffe658ba003395cfa2c Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Thu, 11 Aug 2022 12:55:25 -0700
Subject: [PATCH] Componentize confetti to isolate re-renders due to window
 size (#740)

* Componentize confetti to isolate re-renders due to window size

* Clean up debug logging
---
 web/components/fullscreen-confetti.tsx  |  7 +++++++
 web/components/user-page.tsx            | 11 ++---------
 web/pages/[username]/[contractSlug].tsx | 12 ++----------
 3 files changed, 11 insertions(+), 19 deletions(-)
 create mode 100644 web/components/fullscreen-confetti.tsx

diff --git a/web/components/fullscreen-confetti.tsx b/web/components/fullscreen-confetti.tsx
new file mode 100644
index 00000000..390b3a9b
--- /dev/null
+++ b/web/components/fullscreen-confetti.tsx
@@ -0,0 +1,7 @@
+import Confetti, { Props as ConfettiProps } from 'react-confetti'
+import { useWindowSize } from 'web/hooks/use-window-size'
+
+export function FullscreenConfetti(props: ConfettiProps) {
+  const { width, height } = useWindowSize()
+  return <Confetti {...props} width={width} height={height} />
+}
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index 1adf9f2d..322ddb96 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { LinkIcon } from '@heroicons/react/solid'
 import { PencilIcon } from '@heroicons/react/outline'
-import Confetti from 'react-confetti'
 
 import { getPortfolioHistory, User } from 'web/lib/firebase/users'
 import { CreatorContractsList } from './contract/contracts-grid'
@@ -19,11 +18,11 @@ import { Row } from './layout/row'
 import { genHash } from 'common/util/random'
 import { QueryUncontrolledTabs } from './layout/tabs'
 import { UserCommentsList } from './comments-list'
-import { useWindowSize } from 'web/hooks/use-window-size'
 import { Comment, getUsersComments } from 'web/lib/firebase/comments'
 import { Contract } from 'common/contract'
 import { getContractFromId, listContracts } from 'web/lib/firebase/contracts'
 import { LoadingIndicator } from './loading-indicator'
+import { FullscreenConfetti } from 'web/components/fullscreen-confetti'
 import { BetsList } from './bets-list'
 import { FollowersButton, FollowingButton } from './following-button'
 import { UserFollowButton } from './follow-button'
@@ -82,7 +81,6 @@ export function UserPage(props: { user: User; currentUser?: User }) {
     Dictionary<Contract> | undefined
   >()
   const [showConfetti, setShowConfetti] = useState(false)
-  const { width, height } = useWindowSize()
 
   useEffect(() => {
     const claimedMana = router.query['claimed-mana'] === 'yes'
@@ -124,12 +122,7 @@ export function UserPage(props: { user: User; currentUser?: User }) {
         url={`/${user.username}`}
       />
       {showConfetti && (
-        <Confetti
-          width={width ? width : 500}
-          height={height ? height : 500}
-          recycle={false}
-          numberOfPieces={300}
-        />
+        <FullscreenConfetti recycle={false} numberOfPieces={300} />
       )}
       {/* Banner image up top, with an circle avatar overlaid */}
       <div
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index e122db04..94773b6d 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -25,8 +25,7 @@ import { Leaderboard } from 'web/components/leaderboard'
 import { resolvedPayout } from 'common/calculate'
 import { formatMoney } from 'common/util/format'
 import { ContractTabs } from 'web/components/contract/contract-tabs'
-import { useWindowSize } from 'web/hooks/use-window-size'
-import Confetti from 'react-confetti'
+import { FullscreenConfetti } from 'web/components/fullscreen-confetti'
 import { NumericBetPanel } from 'web/components/numeric-bet-panel'
 import { NumericResolutionPanel } from 'web/components/numeric-resolution-panel'
 import { useIsIframe } from 'web/hooks/use-is-iframe'
@@ -166,8 +165,6 @@ export function ContractPageContent(
 
   const tips = useTipTxns({ contractId: contract.id })
 
-  const { width, height } = useWindowSize()
-
   const [showConfetti, setShowConfetti] = useState(false)
 
   useEffect(() => {
@@ -194,12 +191,7 @@ export function ContractPageContent(
   return (
     <Page rightSidebar={rightSidebar}>
       {showConfetti && (
-        <Confetti
-          width={width ? width : 500}
-          height={height ? height : 500}
-          recycle={false}
-          numberOfPieces={300}
-        />
+        <FullscreenConfetti recycle={false} numberOfPieces={300} />
       )}
 
       {ogCardProps && (