Fix confetti not displaying on milestone completion (#1995)

* add confetti state * fix confetti bug
bcgov · Mar 18, 2024 · 759aa0d · 759aa0d
1 parent 58b1155
commit 759aa0d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git 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
@@ -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);
       });
   };