From cc5862ff4a0e9479a8c82c8097fef37ebab7e288 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Thu, 28 Apr 2022 15:22:05 -0600
Subject: [PATCH] Check for confetti with interval

---
 web/pages/[username]/[contractSlug].tsx | 38 ++++++++++++++++++-------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index 176debb0..8b98fae5 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -35,7 +35,7 @@ import { DPM, FreeResponse, FullContract } from '../../../common/contract'
 import { contractTextDetails } from '../../components/contract/contract-details'
 import { useWindowSize } from '../../hooks/use-window-size'
 import Confetti from 'react-confetti'
-import dayjs from 'dayjs'
+
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
   params: { username: string; contractSlug: string }
@@ -92,6 +92,24 @@ export function ContractPageContent(props: FirstArgument<typeof ContractPage>) {
 
   const contract = useContractWithPreload(props.contract)
   const { bets, comments } = props
+  const [showConfetti, setShowConfetti] = useState(false)
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const shouldSeeConfetti = !!(
+        user &&
+        contract &&
+        contract.creatorId === user.id &&
+        Date.now() - contract.createdTime < 10 * 1000
+      )
+      setShowConfetti(shouldSeeConfetti)
+      // Don't erase confetti mid-animation
+      if (shouldSeeConfetti) clearInterval(timer)
+    }, 1000)
+    return () => {
+      clearInterval(timer)
+    }
+  }, [contract, user])
 
   // Sort for now to see if bug is fixed.
   comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
@@ -122,16 +140,14 @@ export function ContractPageContent(props: FirstArgument<typeof ContractPage>) {
 
   return (
     <Page rightSidebar={rightSidebar}>
-      {user &&
-        contract.creatorId === user.id &&
-        Date.now() - contract.createdTime < 10 * 1000 && (
-          <Confetti
-            width={width ? width : 500}
-            height={height ? height : 500}
-            recycle={false}
-            numberOfPieces={300}
-          />
-        )}
+      {showConfetti && (
+        <Confetti
+          width={width ? width : 500}
+          height={height ? height : 500}
+          recycle={false}
+          numberOfPieces={300}
+        />
+      )}
 
       {ogCardProps && (
         <SEO