fix: duplicated notification

src/common/component/FirebaseNotification.js

@@ -1,51 +0,0 @@
-import { useEffect } from "react";
-import { getMessaging, getToken } from "firebase/messaging";
-
-// // Import the functions you need from the SDKs you need
-// import { initializeApp } from "firebase/app";
-// import { getAnalytics } from "firebase/analytics";
-// // TODO: Add SDKs for Firebase products that you want to use
-// // https://firebase.google.com/docs/web/setup#available-libraries
-
-// // Your web app's Firebase configuration
-// // For Firebase JS SDK v7.20.0 and later, measurementId is optional
-// const firebaseConfig = {
-//   apiKey: "AIzaSyDyJ6B1Ouenoha_gdGkBwIkBNStlwhlbO0",
-//   authDomain: "rustchat-develop.firebaseapp.com",
-//   projectId: "rustchat-develop",
-//   storageBucket: "rustchat-develop.appspot.com",
-//   messagingSenderId: "418687074928",
-//   appId: "1:418687074928:web:7ad57a83f756285cf9eab5",
-//   measurementId: "G-61T6TLQ27T"
-// };
-
-// // Initialize Firebase
-// const app = initializeApp(firebaseConfig);
-// const analytics = getAnalytics(app);
-
-export default function Notification() {
-  useEffect(() => {
-    // Get registration token. Initially this makes a network call, once retrieved
-    // subsequent calls to getToken will return from cache.
-    const messaging = getMessaging();
-    getToken(messaging, { vapidKey: "<YOUR_PUBLIC_VAPID_KEY_HERE>" })
-      .then((currentToken) => {
-        if (currentToken) {
-          // Send the token to your server and update the UI if necessary
-          // ...
-        } else {
-          // Show permission request UI
-          console.log(
-            "No registration token available. Request permission to generate one."
-          );
-          // ...
-        }
-      })
-      .catch((err) => {
-        console.log("An error occurred while retrieving token. ", err);
-        // ...
-      });
-  }, []);
-
-  return <div>Notification</div>;
-}

src/common/component/Notification/firebase.js

@@ -1,54 +0,0 @@
-// Firebase Cloud Messaging Configuration File.
-// Read more at https://firebase.google.com/docs/cloud-messaging/js/client && https://firebase.google.com/docs/cloud-messaging/js/receive
-import { useState } from "react";
-import { initializeApp } from "firebase/app";
-import { getMessaging, getToken, onMessage } from "firebase/messaging";
-const firebaseConfig = {
-  apiKey: "AIzaSyDyJ6B1Ouenoha_gdGkBwIkBNStlwhlbO0",
-  authDomain: "rustchat-develop.firebaseapp.com",
-  projectId: "rustchat-develop",
-  storageBucket: "rustchat-develop.appspot.com",
-  messagingSenderId: "418687074928",
-  appId: "1:418687074928:web:753286adbf239f5af9eab5",
-  measurementId: "G-XV476KEC8P",
-};
-
-initializeApp(firebaseConfig);
-
-const messaging = getMessaging();
-
-export const useDeviceToken = (vapidKey) => {
-  const [token, setToken] = useState(null);
-
-  getToken(messaging, {
-    vapidKey,
-  })
-    .then((currentToken) => {
-      if (currentToken) {
-        console.log("current token for client: ", currentToken);
-        setToken(currentToken);
-        // updateDeviceToken(currentToken)
-        // Perform any other neccessary action with the token
-      } else {
-        // Show permission request UI
-        console.log(
-          "No registration token available. Request permission to generate one."
-        );
-      }
-    })
-    .catch((err) => {
-      console.log("An error occurred while retrieving token. ", err);
-    });
-  return token;
-};
-
-// Handle incoming messages. Called when:
-// - a message is received while the app has focus
-// - the user clicks on an app notification created by a service worker `messaging.onBackgroundMessage` handler.
-export const onMessageListener = () =>
-  new Promise((resolve) => {
-    onMessage(messaging, (payload) => {
-      console.log("notification payload", payload);
-      resolve(payload);
-    });
-  });

src/common/component/Notification/index.js

@@ -1,25 +1,14 @@
-import { useState, useEffect } from "react";
+import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 // import toast, { Toaster } from 'react-hot-toast';
-import { useDeviceToken, onMessageListener } from "./firebase";
+import useDeviceToken from "./useDeviceToken";
+import { vapidKey } from "../../../app/config";
 import { useUpdateDeviceTokenMutation } from "../../../app/services/auth";
 
 const Notification = () => {
   const navigateTo = useNavigate();
-  const token = useDeviceToken(
-    `BGXCn-5YRXSFw38Q9lUKJ5bibL212-yIQn1pCvthGhp6_KwA29FO1Ax_d_7if1vfC2a5wTSVO8AcZrc-Hm1aS0Y`
-  );
+  const token = useDeviceToken(vapidKey);
   const [updateDeviceToken] = useUpdateDeviceTokenMutation();
-  const [notification, setNotification] = useState({ title: "", body: "" });
-  //   const notify = () =>  toast(<ToastDisplay/>);
-  //   function ToastDisplay() {
-  //     return (
-  //       <div>
-  //         <p><b>{notification?.title}</b></p>
-  //         <p>{notification?.body}</p>
-  //       </div>
-  //     );
-  //   };
   useEffect(() => {
     if (token) {
       updateDeviceToken(token);
@@ -41,17 +30,7 @@ const Notification = () => {
         handleServiceworkerMessage
       );
     };
-  }, [notification]);
-
-  onMessageListener()
-    .then((payload) => {
-      console.log("foreground notification", payload);
-      setNotification({
-        title: payload?.notification?.title,
-        body: payload?.notification?.body,
-      });
-    })
-    .catch((err) => console.log("failed: ", err));
+  }, []);
 
   return null;
 };

src/common/component/Notification/useDeviceToken.js

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { initializeApp } from "firebase/app";
+import { getToken, getMessaging } from "firebase/messaging";
+import { firebaseConfig } from "../../../app/config";
+const messaging = getMessaging(initializeApp(firebaseConfig));
+const useDeviceToken = (vapidKey) => {
+  const [token, setToken] = useState(null);
+
+  getToken(messaging, {
+    vapidKey,
+  })
+    .then((currentToken) => {
+      if (currentToken) {
+        console.log("current token for client: ", currentToken);
+        setToken(currentToken);
+        // updateDeviceToken(currentToken)
+        // Perform any other neccessary action with the token
+      } else {
+        // Show permission request UI
+        console.log(
+          "No registration token available. Request permission to generate one."
+        );
+      }
+    })
+    .catch((err) => {
+      console.log("An error occurred while retrieving token. ", err);
+    });
+  return token;
+};
+export default useDeviceToken;