confetti on degree completion 🎉

sogrim · Mar 22, 2022 · 30551a3 · 30551a3
1 parent 762e501
commit 30551a3
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/packages/sogrim-app/package.json b/packages/sogrim-app/package.json
@@ -28,6 +28,7 @@
     "prettier": "^2.5.1",
     "pretty-quick": "^3.1.3",
     "react": "^17.0.2",
+    "react-confetti": "^6.0.1",
     "react-csv": "^2.2.2",
     "react-device-detect": "^2.1.2",
     "react-dom": "^17.0.2",

diff --git a/packages/sogrim-app/src/components/Banner/BannerCards/DegreeMainStatus.tsx b/packages/sogrim-app/src/components/Banner/BannerCards/DegreeMainStatus.tsx
@@ -3,14 +3,17 @@ import { DegreeStatusBar } from "./DegreeStatusBar";
 import { useState, useEffect } from "react";
 import { useStore } from "../../../hooks/useStore";
 import { observer } from "mobx-react-lite";
+import Confetti from "react-confetti";
 
 const DegreeMainStatusComp: React.FC = () => {
   const {
-    dataStore: { userDetails },
+    dataStore: { userDetails, isDegreeComplete },
   } = useStore();
   const [totalCredit, setTotalCredit] = useState<number>(0);
   const [pointsDone, setPointsDone] = useState<number>(0);
   const [catalogName, setCatalogName] = useState<string>("");
+  const [confetti, setConfetti] = useState(false);
+  const [confettiRecycle, setConfettiRecycle] = useState(false);
 
   const [showMainStatus, setShowMainStatus] = useState<boolean>(false);
 
@@ -27,8 +30,20 @@ const DegreeMainStatusComp: React.FC = () => {
       setTotalCredit(totalCredit);
       setCatalogName(catalogName);
       setShowMainStatus(totalCredit * pointsDone > 0 && catalogName !== "");
+      if (isDegreeComplete()) {
+        setConfetti(true);
+        setConfettiRecycle(true);
+        setTimeout(() => {
+          setConfettiRecycle(false);
+        }, 3000);
+      }
     }
-  }, [pointsDone, userDetails, userDetails?.degree_status?.course_statuses]);
+  }, [
+    isDegreeComplete,
+    pointsDone,
+    userDetails,
+    userDetails?.degree_status?.course_statuses,
+  ]);
 
   const progress =
     pointsDone / totalCredit >= 1 ? 100 : (pointsDone / totalCredit) * 100;
@@ -46,6 +61,14 @@ const DegreeMainStatusComp: React.FC = () => {
         <Button sx={{ display: "flex", justifyContent: "center" }} size="small">
           {catalogName}
         </Button>
+        {confetti && (
+          <Confetti
+            width={2000}
+            numberOfPieces={500}
+            recycle={confettiRecycle}
+            onConfettiComplete={() => setConfetti(false)}
+          />
+        )}
       </CardContent>
     </Card>
   ) : null;

diff --git a/packages/sogrim-app/src/stores/DataStore.ts b/packages/sogrim-app/src/stores/DataStore.ts
@@ -23,6 +23,15 @@ export class DataStore {
     );
   }
 
+  isDegreeComplete = (): boolean => {
+    return (
+      !this.userDetails?.modified &&
+      this.userDetails?.degree_status?.course_bank_requirements.every(
+        (req) => req.completed
+      )
+    );
+  };
+
   getAllUserSemesters = (courseList: CourseStatus[]): string[] => {
     const allSemestersSet = new Set<string>();
     courseList.forEach((course) =>