From 759aa0d1c2b7c3e857c2303809071dcc8f3e2506 Mon Sep 17 00:00:00 2001
From: djnunez-aot <103138766+djnunez-aot@users.noreply.github.com>
Date: Mon, 18 Mar 2024 12:19:28 -0400
Subject: [PATCH] Fix confetti not displaying on milestone completion (#1995)

* add confetti state

* fix confetti bug
---
 .../src/components/confetti/Confetti.tsx      | 12 ++++++++---
 .../components/workPlan/event/EventList.tsx   | 21 +++++++++----------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/epictrack-web/src/components/confetti/Confetti.tsx b/epictrack-web/src/components/confetti/Confetti.tsx
index f5543ed4b..a1ebff33f 100644
--- a/epictrack-web/src/components/confetti/Confetti.tsx
+++ b/epictrack-web/src/components/confetti/Confetti.tsx
@@ -14,7 +14,7 @@ const Confetti = ({ displayType = "confetti" }: ConfettiProps) => {
       const animationEnd = Date.now() + duration;
       const defaults = {
         startVelocity: 30,
-        spread: displayType === "fireworks" ? 120 : 360, // narrower spread for fireworks
+        spread: displayType === "fireworks" ? 180 : 360, // wider spread
         ticks: 60,
         zIndex: 0,
       };
@@ -27,10 +27,17 @@ const Confetti = ({ displayType = "confetti" }: ConfettiProps) => {
       }
 
       const particleCount = 50 * (timeLeft / duration);
+      // First point of explosion
       confetti({
         ...defaults,
         particleCount,
-        origin: { x: 0.5, y: 0.5 }, // center of the screen
+        origin: { x: 0.3, y: 0.5 }, // left of the screen
+      });
+      // Second point of explosion
+      confetti({
+        ...defaults,
+        particleCount,
+        origin: { x: 0.7, y: 0.5 }, // right of the screen
       });
 
       timeout = setTimeout(animateConfetti, 250);
@@ -47,5 +54,4 @@ const Confetti = ({ displayType = "confetti" }: ConfettiProps) => {
 
   return null;
 };
-
 export default Confetti;
diff --git a/epictrack-web/src/components/workPlan/event/EventList.tsx b/epictrack-web/src/components/workPlan/event/EventList.tsx
index 1abef6722..d87610481 100644
--- a/epictrack-web/src/components/workPlan/event/EventList.tsx
+++ b/epictrack-web/src/components/workPlan/event/EventList.tsx
@@ -50,7 +50,6 @@ import {
 } from "../../../constants/application-constant";
 import { Restricted } from "components/shared/restricted";
 import { IButton } from "components/shared";
-import Confetti from "components/confetti/Confetti";
 import { showConfetti } from "styles/uiStateSlice";
 
 const ImportFileIcon: React.FC<IconProps> = Icons["ImportFileIcon"];
@@ -78,7 +77,7 @@ const EventList = () => {
     () => ctx.team.some((member) => member.staff.email === email),
     [ctx.team, email]
   );
-
+  const isConfettiShown = useAppSelector((state) => state.uiState.showConfetti);
   const { handleHighlightRows } = useContext(EventContext);
   const [rowSelection, setRowSelection] = React.useState<MRT_RowSelectionState>(
     {}
@@ -116,6 +115,11 @@ const EventList = () => {
   }, [milestoneEvent]);
 
   React.useEffect(() => setEvents([]), [ctx.selectedWorkPhase?.work_phase.id]);
+  React.useEffect(() => {
+    setTimeout(() => {
+      dispatch(showConfetti(false));
+    }, 5000);
+  }, [isConfettiShown]);
   React.useEffect(() => {
     getCombinedEvents();
   }, [ctx.work?.id, ctx.selectedWorkPhase?.work_phase.id]);
@@ -319,24 +323,19 @@ const EventList = () => {
     setShowMilestoneForm(false);
     getCombinedEvents();
     getWorkPhases();
-    setTaskEvent(undefined);
-    setMilestoneEvent(undefined);
     getTemplateUploadStatus()
       .then(() => {
         return getWorkById();
       })
       .then(() => {
         if (
-          milestoneEvent &&
-          milestoneEvent.event_configuration.event_position ===
-            EventPosition.END &&
-          milestoneEvent.actual_date
+          milestoneEvent?.event_configuration.event_position ===
+          EventPosition.END
         ) {
           dispatch(showConfetti(true));
-          setTimeout(() => {
-            dispatch(showConfetti(false));
-          }, 5000);
         }
+        setTaskEvent(undefined);
+        setMilestoneEvent(undefined);
       });
   };