ok

src/App.js

@@ -315,63 +315,74 @@ function App() {
       navigate({ search: queryParams.toString() }, { replace: true });
     }
   };
-
+  // useEffect(() => {
+  //   const askNotificationPermission = async () => {
+  //     let permission = Notification.permission;
+  
+  //     // Check current permission
+  //     if (permission === "default") {
+  //       setModal("req_notification");
+  
+  //       // Request permission and wait for the result
+  //       permission = await Notification.requestPermission();
+  //     }
+  
+  //     // Handle permission results
+  //     if (permission === "granted") {
+  //       await resetNotificationSubscription();
+  //       closeModal(["req_notification", "denied_notification"]);
+  //     } else if (permission === "denied") {
+  //       setModal("blocked_notification");
+  //       console.error("Notification permission denied.");
+  //     }
+  //   };
+  
+  //   const handleTransactionConfirmed = async (data) => {
+  //     console.log("transaction notification", data);
+  //     await askNotificationPermission();
+  //     setModal("transaction_success", data);
+  //   };
+  
+  //   // Add socket listener for transaction confirmations
+  //   socket.on("transaction_success", handleTransactionConfirmed);
+  
+  //   // Cleanup the socket listener on component unmount
+  //   return () => {
+  //     socket.off("transaction_success", handleTransactionConfirmed);
+  //   };
+  // }, [user]);
+  
   useEffect(() => {
-    const askNotificationPermission = async () => {
-      let permission = Notification.permission;
+    const startPermissionPolling = async () => {
+      const checkInterval = 5000; // Check every 5 seconds
 
-      // Check current permission
-      if (permission === "default") {
-        setModal("req_notification");
+      const intervalId = setInterval(async () => {
+        const permission = Notification.permission;
 
-        // Request permission and wait for the result
-        permission = await Notification.requestPermission();
-      }
-
-      // If permission is already granted, reset subscriptions
-      if (permission === "granted") {
-        await resetNotificationSubscription();
-        closeModal(["req_notification", "denied_notification"]);
-      } else if (permission === "denied") {
-        setModal("blocked_notification");
-        console.error("Notification permission denied.");
-      }
-
-      // Continuously check until permission is granted
-      while (permission !== "granted") {
-        await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait for 1 second
-        const permissionn = Notification.permission;
-
-        if (permissionn === "granted") {
-          closeModal(["req_notification", "denied_notification"]);
+        if (permission === "granted") {
           await resetNotificationSubscription();
-          break;
-        } else if (permissionn === "denied") {
-          setModal("blocked_notification");
+          clearInterval(intervalId); // Stop checking once subscribed
+        } else if (permission === "denied") {
           console.error("Notification permission denied.");
-          break;
         }
-      }
+      }, checkInterval);
     };
-    const handleLoad = async () => {
-      const ses = sessionStorage.getItem("notifAsk");
 
-      if (!ses && user != null && (user.roleId < 3 || user.roleId > 2)) {
-        await askNotificationPermission();
-        sessionStorage.setItem("notifAsk", true);
-      }
-    };
-    handleLoad();
+    startPermissionPolling();
+  }, []);
+  
+  useEffect(() => {
     if ("serviceWorker" in navigator) {
-      window.addEventListener("load", handleLoad);
-
-      // Cleanup the event listener on component unmount
-      return () => {
-        window.removeEventListener("load", handleLoad);
-      };
+      navigator.serviceWorker.register("/service-worker.js")
+        .then(registration => {
+          console.log("Service Worker registered with scope:", registration.scope);
+        })
+        .catch(error => {
+          console.error("Service Worker registration failed:", error);
+        });
     }
-  }, [user]);
-
+  }, []);
+  
   return (
     <div className="App">
       <header className="App-header" id="header">
@@ -524,6 +535,7 @@ function App() {
         isOpen={isModalOpen}
         modalContent={modalContent}
         onClose={closeModal}
+        setModal={setModal}
       />
     </div>
   );