From e13e3bccf66ac0bfc30ca6228541dc0ec2155d18 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Sun, 9 Jul 2023 01:11:45 +0200
Subject: [PATCH] fix: only trigger confetti when watching live

---
 src/element/goal.tsx          |  6 +++++-
 src/hooks/usePreviousValue.ts | 20 ++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/usePreviousValue.ts

diff --git a/src/element/goal.tsx b/src/element/goal.tsx
index ac6fd22..b33b380 100644
--- a/src/element/goal.tsx
+++ b/src/element/goal.tsx
@@ -6,6 +6,7 @@ import { NostrLink, ParsedZap, NostrEvent } from "@snort/system";
 import { Icon } from "./icon";
 import { findTag } from "utils";
 import { formatSats } from "number";
+import usePreviousValue from "hooks/usePreviousValue";
 
 export function Goal({
   link,
@@ -33,6 +34,7 @@ export function Goal({
 
   const progress = (soFar / goalAmount) * 100;
   const isFinished = progress >= 100;
+  const previousValue = usePreviousValue(isFinished);
 
   return (
     <div className="goal">
@@ -56,7 +58,9 @@ export function Goal({
           />
         </div>
       </div>
-      {isFinished && <Confetti numberOfPieces={2100} recycle={false} />}
+      {isFinished && previousValue === false && (
+        <Confetti numberOfPieces={2100} recycle={false} />
+      )}
     </div>
   );
 }
diff --git a/src/hooks/usePreviousValue.ts b/src/hooks/usePreviousValue.ts
new file mode 100644
index 0000000..72af581
--- /dev/null
+++ b/src/hooks/usePreviousValue.ts
@@ -0,0 +1,20 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * On each render returns the previous value of the given variable/constant.
+ */
+const usePreviousValue = <TValue>(value?: TValue): TValue | undefined => {
+  const prevValue = useRef<TValue>();
+
+  useEffect(() => {
+    prevValue.current = value;
+
+    return () => {
+      prevValue.current = undefined;
+    };
+  });
+
+  return prevValue.current;
+};
+
+export default usePreviousValue;