implemented sessionStorage; ensuring that the popUpNotif shows once p…

…er session :))
UoaWDCC · Oct 15, 2024 · 362b66d · 362b66d
1 parent eb37247
commit 362b66d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/web/src/components/PopUpNotif.tsx b/web/src/components/PopUpNotif.tsx
@@ -36,6 +36,7 @@ export default function PopUpNotif({ events }: PopUpNotifProps) {
 
     const closePopup = () => {
         setIsOpen(false);
+        sessionStorage.setItem("sameSession", "true"); //setting item in session storage, so that I can check for this in the passport page and display notification accordingly
     };
 
     return (
@@ -63,7 +64,7 @@ export default function PopUpNotif({ events }: PopUpNotifProps) {
                             {/* Event Name and Description */}
                             <div>
                                 <p className="text-white text-center text-2xl">The next event:</p>
-                                <p className="text-white text-center text-5xl font-semibold ">
+                                <p className="text-white text-center text-4xl font-semibold ">
                                     {nextEvent?.eventName || "Stay Tuned!"}
                                 </p>
                                 <p className="text-white text-center text-lg italic mt-3" style={{ color: "#FED066" }}>

diff --git a/web/src/pages/Passport.tsx b/web/src/pages/Passport.tsx
@@ -14,13 +14,13 @@ type PageComponent = React.ComponentType<any> | (() => ReactElement);
 
 export default function Passport() {
     const userData = GetLeaderboardStats();
-    
+
     // initialise index and loading state
     const [currentIndex, setCurrentIndex] = useState(0);
     const [events, setEvents] = useState([])
     const [userStamps, setUserStamps] = useState<any[]>([])
     const [loading, setLoading] = useState(true); // Add loading state
-
+    const [isPopUpVisible, setIsPopUpVisible] = useState(true);
     const [isMobile, setIsMobile] = useState(true);
 
 
@@ -51,6 +51,12 @@ export default function Passport() {
         };
 
         fetchEvents();
+
+        //tracking session - showing popUpNotif once a session :)
+        if (sessionStorage.getItem("sameSession")) {
+            setIsPopUpVisible(false);
+        }
+
     }, []);
 
     //getting all stamps that user has collected
@@ -108,13 +114,13 @@ export default function Passport() {
     if (loading) {
         return (
             <div
-            className="background flex flex-col h-screen justify-center items-center"
-            style={{ backgroundColor: "#e1ebff" }}
-        ></div>
+                className="background flex flex-col h-screen justify-center items-center"
+                style={{ backgroundColor: "#e1ebff" }}
+            ></div>
         );
     }
 
-    if(!isMobile) {
+    if (!isMobile) {
         return <ErrorPage />;
     }
 
@@ -141,7 +147,7 @@ export default function Passport() {
                     </div>
                     <div className="border-b-4 welcome-line w-88 mb-4 mt-1"></div>
                 </div>
-                <PopUpNotif events={events} />
+                {isPopUpVisible && <PopUpNotif events={events} />}
                 {typeof CurrentView === "function" ? <CurrentView /> : CurrentView}
                 <p>Page {currentIndex + 1}</p>
             </div>