74 lines
2.4 KiB
JavaScript
74 lines
2.4 KiB
JavaScript
import { useApolloClient } from "@apollo/client/react";
|
|
import { getToken } from "@firebase/messaging";
|
|
import axios from "axios";
|
|
import { useEffect } from "react";
|
|
import { messaging, requestForToken } from "../../firebase/firebase.utils";
|
|
import ChatPopupComponent from "../chat-popup/chat-popup.component";
|
|
import "./chat-affix.styles.scss";
|
|
import { registerMessagingHandlers, unregisterMessagingHandlers } from "./registerMessagingSocketHandlers";
|
|
import { useSocket } from "../../contexts/SocketIO/useSocket.js";
|
|
|
|
export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
|
|
const client = useApolloClient();
|
|
const { socket } = useSocket();
|
|
|
|
// 1) FCM subscription (independent of socket handler registration)
|
|
useEffect(() => {
|
|
if (!bodyshop?.messagingservicesid) return;
|
|
|
|
async function subscribeToTopicForFCMNotification() {
|
|
try {
|
|
await requestForToken();
|
|
await axios.post("/notifications/subscribe", {
|
|
fcm_tokens: await getToken(messaging, {
|
|
vapidKey: import.meta.env.VITE_APP_FIREBASE_PUBLIC_VAPID_KEY
|
|
}),
|
|
type: "messaging",
|
|
imexshopid: bodyshop.imexshopid
|
|
});
|
|
} catch (error) {
|
|
console.log("Error attempting to subscribe to messaging topic: ", error);
|
|
}
|
|
}
|
|
|
|
subscribeToTopicForFCMNotification();
|
|
}, [bodyshop?.messagingservicesid, bodyshop?.imexshopid]);
|
|
|
|
// 2) Register socket handlers as soon as socket is connected (regardless of chatVisible)
|
|
useEffect(() => {
|
|
if (!socket) return;
|
|
if (!bodyshop?.messagingservicesid) return;
|
|
if (!bodyshop?.id) return;
|
|
|
|
// If socket isn't connected yet, ensure no stale handlers remain.
|
|
if (!socket.connected) {
|
|
unregisterMessagingHandlers({ socket });
|
|
return;
|
|
}
|
|
|
|
// Prevent duplicate listeners if this effect runs more than once.
|
|
unregisterMessagingHandlers({ socket });
|
|
|
|
registerMessagingHandlers({
|
|
socket,
|
|
client,
|
|
currentUser,
|
|
bodyshop
|
|
});
|
|
|
|
return () => {
|
|
unregisterMessagingHandlers({ socket });
|
|
};
|
|
}, [socket, socket?.connected, bodyshop?.id, bodyshop?.messagingservicesid, client, currentUser?.email]);
|
|
|
|
if (!bodyshop?.messagingservicesid) return <></>;
|
|
|
|
return (
|
|
<div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
|
|
{bodyshop?.messagingservicesid ? <ChatPopupComponent /> : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ChatAffixContainer;
|