good

src/App.js

@@ -37,6 +37,10 @@ import {
   removeLocalStorage,
 } from "./helpers/localStorageHelpers";
 import { calculateTotals } from "./helpers/cartHelpers";
+import {
+  subscribeUser,
+  resetNotificationSubscription,
+} from "./helpers/subscribeHelpers.js";
 import Modal from "./components/Modal"; // Import your modal component
 
 function App() {
@@ -153,58 +157,28 @@ function App() {
   //   }
   // };
   useEffect(() => {
-    const getVapidKey = async () => {
-        const response = await fetch(`${API_BASE_URL}/vapid-key`);
-        const { publicVapidKey } = await response.json();
-        return publicVapidKey;
-    };
-
     const askNotificationPermission = async () => {
-        const permission = await Notification.requestPermission();
-        if (permission === 'granted') {
-            console.log('Notification permission granted.');
-            const publicVapidKey = await getVapidKey();
-            await subscribeUser(publicVapidKey);
-        } else {
-            console.error('Notification permission denied.');
-        }
+      let permission = Notification.permission;
+      if (permission === "default") {
+        setModal("req_notification");
+      }
+      if (permission === "granted") await resetNotificationSubscription();
+
+      permission = await Notification.requestPermission();
+      if (permission === "granted") {
+        await subscribeUser();
+      } else if (permission === "denied") {
+        setModal("blocked_notification");
+        console.error("Notification permission denied.");
+      }
     };
 
-// Utility function to convert base64 to Uint8Array
-function urlBase64ToUint8Array(base64String) {
-  const padding = '='.repeat((4 - base64String.length % 4) % 4);
-  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
-  const rawData = window.atob(base64);
-  return Uint8Array.from([...rawData].map(char => char.charCodeAt(0)));
-}
-    const subscribeUser = async (publicVapidKey) => {
-        try {
-            const registration = await navigator.serviceWorker.register('/service-worker.js');
-            console.log('Service Worker registered with scope:', registration.scope);
-
-            const subscription = await registration.pushManager.subscribe({
-                userVisibleOnly: true,
-                applicationServerKey: urlBase64ToUint8Array(publicVapidKey),
-            });
-
-            await fetch(`${API_BASE_URL}/subscribe`, {
-                method: 'POST',
-                body: JSON.stringify(subscription),
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            });
-        } catch (error) {
-            console.error('Subscription failed:', error);
-        }
-    };
-
-    if ('serviceWorker' in navigator) {
-        window.addEventListener('load', async () => {
-            await askNotificationPermission();
-        });
+    if ("serviceWorker" in navigator) {
+      window.addEventListener("load", async () => {
+        await askNotificationPermission();
+      });
     }
-}, []);
+  }, []);
 
   useEffect(() => {
     if (socket == null) return;
@@ -333,23 +307,22 @@ function urlBase64ToUint8Array(base64String) {
   const setModal = (content, params = {}) => {
     // Prepare query parameters
     const queryParams = new URLSearchParams(location.search);
-    
+
     // Update the modal and any additional params
     queryParams.set("modal", content);
     Object.entries(params).forEach(([key, value]) => {
       queryParams.set(key, value);
     });
-  
+
     // Update URL with new parameters
     navigate(`?${queryParams.toString()}`, { replace: true });
-  
+
     // Prevent scrolling when modal is open
     document.body.style.overflow = "hidden";
-  
+
     setIsModalOpen(true);
     setModalContent(content);
   };
-  
 
   // Function to close the modal
   const closeModal = () => {

src/config.js

@@ -1,5 +1,5 @@
 // src/config.js
 
-const API_BASE_URL = "https://p8hlyz-5000.csb.app"; // Replace with your actual backend URL
+const API_BASE_URL = "https://sswsts-5000.csb.app"; // Replace with your actual backend URL
 
 export default API_BASE_URL;

src/helpers/subscribeHelpers.js

@@ -0,0 +1,76 @@
+import API_BASE_URL from "../config.js";
+
+import { getLocalStorage } from "./localStorageHelpers";
+
+const urlBase64ToUint8Array = (base64String) => {
+  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
+  const rawData = window.atob(base64);
+  return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)));
+};
+
+const getVapidKey = async () => {
+  const response = await fetch(`${API_BASE_URL}/vapid-key`);
+  const { publicVapidKey } = await response.json();
+  return publicVapidKey;
+};
+
+const subscribeUser = async () => {
+  try {
+    const publicVapidKey = await getVapidKey();
+    const registration = await navigator.serviceWorker.register(
+      "/service-worker.js"
+    );
+    console.log("Service Worker registered with scope:", registration.scope);
+
+    const subscription = await registration.pushManager.subscribe({
+      userVisibleOnly: true,
+      applicationServerKey: urlBase64ToUint8Array(publicVapidKey),
+    });
+
+    await fetch(`${API_BASE_URL}/subscribe`, {
+      method: "POST",
+      body: JSON.stringify({
+        subscription,
+        token: getLocalStorage("auth"), // Ensure this function is defined elsewhere
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    return subscription; // Return subscription if needed
+  } catch (error) {
+    console.error("Subscription failed:", error);
+  }
+};
+
+const unsubscribeUser = async () => {
+  const registration = await navigator.serviceWorker.getRegistration();
+  if (registration) {
+    const subscription = await registration.pushManager.getSubscription();
+    if (subscription) {
+      await fetch(`${API_BASE_URL}/unsubscribe`, {
+        method: "POST",
+        body: JSON.stringify({
+          subscription,
+          token: getLocalStorage("auth"), // Ensure this function is defined elsewhere
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      await subscription.unsubscribe();
+      console.log("User unsubscribed from notifications.");
+    } else {
+      console.log("No subscription found.");
+    }
+  }
+};
+const resetNotificationSubscription = async () => {
+  await unsubscribeUser(); // First unsubscribe the user
+  await subscribeUser(); // Then subscribe the user again
+};
+
+export { subscribeUser, unsubscribeUser, resetNotificationSubscription };

src/pages/CafePage.js

@@ -1,7 +1,12 @@
 // src/CafePage.js
 
 import React, { useState, useEffect } from "react";
-import { useParams, useSearchParams, useNavigate, useLocation } from "react-router-dom";
+import {
+  useParams,
+  useSearchParams,
+  useNavigate,
+  useLocation,
+} from "react-router-dom";
 
 import "../App.css";
 import SearchInput from "../components/SearchInput";
@@ -18,6 +23,7 @@ import {
   getLocalStorage,
   updateLocalStorage,
 } from "../helpers/localStorageHelpers";
+import { unsubscribeUser } from "../helpers/subscribeHelpers.js";
 
 function CafePage({
   table,
@@ -54,12 +60,11 @@ function CafePage({
     if (user.cafeId != null && user.cafeId !== shopId) {
       // Preserve existing query parameters
       const currentParams = new URLSearchParams(location.search).toString();
-      
+
       // Navigate to the new cafeId while keeping existing params
       navigate(`/${user.cafeId}?${currentParams}`, { replace: true });
     }
   }, [user, shopId]);
-  
 
   useEffect(() => {
     if (token) {
@@ -73,6 +78,7 @@ function CafePage({
 
   const handleLogout = () => {
     updateLocalStorage("auth", "");
+    unsubscribeUser();
     navigate(0);
   };
 

src/pages/Dashboard.js

@@ -8,6 +8,7 @@ import { getAllCafeOwner, createCafeOwner } from "../helpers/userHelpers";
 import { getOwnedCafes, createCafe, updateCafe } from "../helpers/cafeHelpers";
 
 import { ThreeDots } from "react-loader-spinner";
+import { unsubscribeUser } from "../helpers/subscribeHelpers.js";
 
 const Dashboard = ({ user, setModal }) => {
   const navigate = useNavigate();
@@ -50,6 +51,7 @@ const Dashboard = ({ user, setModal }) => {
 
   const handleLogout = () => {
     updateLocalStorage("auth", "");
+    unsubscribeUser();
     navigate(0);
   };