#3628 Added confetti when moving tasks to done

Author: wilsnwei

package.json

@@ -67,6 +67,7 @@
   },
   "dependencies": {
     "@types/multer": "^1.4.12",
+    "canvas-confetti": "^1.9.3",
     "mitt": "^3.0.1",
     "react-hook-form-persist": "^3.0.0",
     "recharts": "^2.15.3",
@@ -77,6 +78,7 @@
     "@babel/plugin-transform-object-assign": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
+    "@types/canvas-confetti": "^1.9.0",
     "@types/jest": "^29.5.14",
     "@types/node": "20.0.0",
     "@typescript-eslint/eslint-plugin": "8.20.0",

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/v2/TaskListContent.tsx

@@ -6,6 +6,7 @@ import { getTasksByStatus, statuses, TasksByStatus } from '.';
 import { useSetTaskStatus } from '../../../../../hooks/tasks.hooks';
 import { useToast } from '../../../../../hooks/toasts.hooks';
 import { TaskColumn } from './TaskColumn';
+import confetti from 'canvas-confetti';
 
 interface TaskListProps {
   project: Project;
@@ -79,8 +80,17 @@ export const TaskListContent = ({ project }: TaskListProps) => {
     );
 
     //trigger the mutation to persist the changes
-    setTaskStatus({ taskId: sourcePost.taskId, status: destinationStatus }).catch((error) => {
-      toast.error(error.message);
+    try {
+      await setTaskStatus({ taskId: sourcePost.taskId, status: destinationStatus });
+      const confettiPositions = [0, 0.15, 0.3, 0.45, 0.6, 0.75, 0.9];
+      if (destinationStatus === 'DONE') {
+        confettiPositions.forEach((xPos: number) => {
+          confetti({ origin: { y: -0.5, x: xPos }, angle: 270, gravity: 1.5, startVelocity: 35, spread: 70, particleCount: 25 });
+        });
+      }
+    } catch (error) {
+      if (error instanceof Error) toast.error(error.message);
+      //revert optimistic updates
       setTasksByStatus(
         updateTaskStatusLocal(
           sourcePost,
@@ -89,7 +99,7 @@ export const TaskListContent = ({ project }: TaskListProps) => {
           tasksByStatus
         )
       );
-    });
+    }
   };
 
   return (

yarn.lock

@@ -4733,6 +4733,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/canvas-confetti@npm:^1.9.0":
+  version: 1.9.0
+  resolution: "@types/canvas-confetti@npm:1.9.0"
+  checksum: 56227a362cead21ab76b0870e07e0cc2d26c800f5bc0fc109e4a3eca1a4d4dd317e1292163246d389827b7f30ce9e6eca3915681f3c80ed1e46491018f48a266
+  languageName: node
+  linkType: hard
+
 "@types/chai@npm:^5.2.2":
   version: 5.2.2
   resolution: "@types/chai@npm:5.2.2"
@@ -7354,6 +7361,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"canvas-confetti@npm:^1.9.3":
+  version: 1.9.3
+  resolution: "canvas-confetti@npm:1.9.3"
+  checksum: db044a9c9ca0e58eafd115f7dfc2f9ecc377be34d8a5dd75901dae0dafd4fb0b75fbbf8edd48bbefad2468653c5838348f0e768b79727a924259a9ada343ea30
+  languageName: node
+  linkType: hard
+
 "canvas@npm:^3.0.0-rc2":
   version: 3.1.2
   resolution: "canvas@npm:3.1.2"
@@ -10738,11 +10752,13 @@ __metadata:
     "@babel/plugin-transform-object-assign": ^7.18.6
     "@babel/preset-react": ^7.18.6
     "@babel/preset-typescript": ^7.18.6
+    "@types/canvas-confetti": ^1.9.0
     "@types/jest": ^29.5.14
     "@types/multer": ^1.4.12
     "@types/node": 20.0.0
     "@typescript-eslint/eslint-plugin": 8.20.0
     "@typescript-eslint/parser": 8.20.0
+    canvas-confetti: ^1.9.3
     concurrently: ^9.1.0
     eslint: ^7.0.0
     eslint-config-prettier: ^10.0.1