102 lines
3.1 KiB
JavaScript
102 lines
3.1 KiB
JavaScript
"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;
|