classify web

components/Layout/PushNotificationLayout.jsx

@@ -0,0 +1,101 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import "firebase/messaging";
+import FirebaseData from "../../utils/Firebase";
+import { useDispatch, useSelector } from "react-redux";
+import { setNotification } from "@/redux/reducer/globalStateSlice";
+import { useNavigate } from "../Common/useNavigate";
+import { getIsLoggedIn } from "@/redux/reducer/authSlice";
+
+const PushNotificationLayout = ({ children }) => {
+  const dispatch = useDispatch();
+  const [fcmToken, setFcmToken] = useState("");
+  const { fetchToken, onMessageListener } = FirebaseData();
+  const { navigate } = useNavigate();
+  const isLoggedIn = useSelector(getIsLoggedIn);
+  const unsubscribeRef = useRef(null);
+
+  const handleFetchToken = async () => {
+    await fetchToken(setFcmToken);
+  };
+
+  // Fetch token when user logs in
+  useEffect(() => {
+    handleFetchToken();
+  }, []);
+
+  // Set up message listener when logged in, clean up when logged out
+  useEffect(() => {
+    if (!isLoggedIn) {
+      // Clean up listener when user logs out
+      if (unsubscribeRef.current) {
+        unsubscribeRef.current();
+        unsubscribeRef.current = null;
+      }
+      return;
+    }
+
+    // Set up listener when user logs in
+    const setupListener = async () => {
+      try {
+        unsubscribeRef.current = await onMessageListener((payload) => {
+          if (payload && payload.data) {
+            dispatch(setNotification(payload.data));
+            if (Notification.permission === "granted") {
+              const notif = new Notification(payload.notification.title, {
+                body: payload.notification.body,
+              });
+              const tab =
+                payload.data?.user_type === "Seller" ? "buying" : "selling";
+
+              notif.onclick = () => {
+                if (
+                  payload.data.type === "chat" ||
+                  payload.data.type === "offer"
+                ) {
+                  navigate(
+                    `/chat?activeTab=${tab}&chatid=${payload.data?.item_offer_id}`
+                  );
+                }
+              };
+            }
+          }
+        });
+      } catch (err) {
+        console.error("Error handling foreground notification:", err);
+      }
+    };
+
+    setupListener();
+
+    // Cleanup on unmount or logout
+    return () => {
+      if (unsubscribeRef.current) {
+        unsubscribeRef.current();
+        unsubscribeRef.current = null;
+      }
+    };
+  }, [isLoggedIn, dispatch, navigate, onMessageListener]);
+
+  useEffect(() => {
+    if (fcmToken) {
+      if ("serviceWorker" in navigator) {
+        navigator.serviceWorker
+          .register("/firebase-messaging-sw.js")
+          .then((registration) => {
+            console.log(
+              "Service Worker registration successful with scope: ",
+              registration.scope
+            );
+          })
+          .catch((err) => {
+            console.log("Service Worker registration failed: ", err);
+          });
+      }
+    }
+  }, [fcmToken]);
+
+  return children;
+};
+
+export default PushNotificationLayout;