[DO NOT MERGE] Combination of 3 PR's

public/firebase-messaging-sw.js

@@ -0,0 +1,82 @@
+/* eslint-disable */
+// firebase-messaging-sw.js
+importScripts(
+  "https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js",
+);
+importScripts(
+  "https://www.gstatic.com/firebasejs/10.7.1/firebase-messaging-compat.js",
+);
+
+const ENV = {
+  LOCAL: "http://localhost:3000",
+  DEV: "https://web-dev.common.io",
+  STAGE: "https://web-staging.common.io",
+  PRODUCTION: "https://common.io",
+};
+
+const FIREBASE_CONFIG_ENV = {
+  DEV: {
+    apiKey: "AIzaSyDbTFuksgOkIVWDiFe_HG7-BE8X6Dwsg-0",
+    authDomain: "common-dev-34b09.firebaseapp.com",
+    databaseURL: "https://common-dev-34b09.firebaseio.com",
+    projectId: "common-dev-34b09",
+    storageBucket: "common-dev-34b09.appspot.com",
+    messagingSenderId: "870639147922",
+    appId: "1:870639147922:web:9ee954bb1dd52e25cb7f4b",
+  },
+  STAGE: {
+    apiKey: "AIzaSyBASCWJMV64mZJObeFEitLmdUC1HqmtjJk",
+    authDomain: "common-staging-1d426.firebaseapp.com",
+    databaseURL: "https://common-staging-1d426.firebaseio.com",
+    projectId: "common-staging-1d426",
+    storageBucket: "common-staging-1d426.appspot.com",
+    messagingSenderId: "701579202562",
+    appId: "1:701579202562:web:5729d8a875f98f6709571b",
+  },
+  PRODUCTION: {
+    apiKey: "AIzaSyAlYrKLd6KNKVkhmNEMKfb0cWHSWicCBOY",
+    authDomain: "common-production-67641.firebaseapp.com",
+    databaseURL: "https://common-production-67641.firebaseio.com",
+    projectId: "common-production-67641",
+    storageBucket: "common-production-67641.appspot.com",
+    messagingSenderId: "461029494046",
+    appId: "1:461029494046:web:4e2e4afbbeb7b487b48d0f",
+  },
+};
+
+let firebaseConfig = {};
+
+switch (location.origin) {
+  case ENV.LOCAL:
+  case ENV.DEV: {
+    firebaseConfig = FIREBASE_CONFIG_ENV.DEV;
+    break;
+  }
+  case ENV.STAGE: {
+    firebaseConfig = FIREBASE_CONFIG_ENV.STAGE;
+    break;
+  }
+  case ENV.PRODUCTION: {
+    firebaseConfig = FIREBASE_CONFIG_ENV.PRODUCTION;
+    break;
+  }
+  default: {
+    firebaseConfig = FIREBASE_CONFIG_ENV.DEV;
+    break;
+  }
+}
+
+firebase.initializeApp(firebaseConfig);
+
+const messaging = firebase.messaging();
+
+messaging.onBackgroundMessage((payload) => {
+  const notificationTitle = payload.notification.title;
+  const notificationOptions = {
+    body: payload.notification.body,
+    data: payload.data,
+    icon: "/logo.png",
+  };
+
+  self.registration.showNotification(notificationTitle, notificationOptions);
+});

src/config.tsx

@@ -27,6 +27,8 @@ export const local: Configuration = {
   deadSeaCommonId: "958dca85-7bc1-4714-95bd-1fc6343f0654",
   parentsForClimateCommonId: "958dca85-7bc1-4714-95bd-1fc6343f0654",
   saadiaCommonId: "958dca85-7bc1-4714-95bd-1fc6343f0654",
+  vapidKey:
+    "BHVFyNetSC6oA2uFejnUFuDcSUYcas2R5lwW80z6gZc6zODp7rRdh2t8bht3LygJWjyI1toV165EYgdZqxCS_Y4",
 };
 
 const dev: Configuration = {
@@ -44,6 +46,8 @@ const dev: Configuration = {
   deadSeaCommonId: "958dca85-7bc1-4714-95bd-1fc6343f0654",
   parentsForClimateCommonId: "958dca85-7bc1-4714-95bd-1fc6343f0654",
   saadiaCommonId: "958dca85-7bc1-4714-95bd-1fc6343f0654",
+  vapidKey:
+    "BHVFyNetSC6oA2uFejnUFuDcSUYcas2R5lwW80z6gZc6zODp7rRdh2t8bht3LygJWjyI1toV165EYgdZqxCS_Y4",
 };
 
 const stage: Configuration = {
@@ -62,6 +66,8 @@ const stage: Configuration = {
   deadSeaCommonId: "a55a1e9b-104a-4866-9f4f-3e017bbae281",
   parentsForClimateCommonId: "a55a1e9b-104a-4866-9f4f-3e017bbae281",
   saadiaCommonId: "a55a1e9b-104a-4866-9f4f-3e017bbae281",
+  vapidKey:
+    "BBvr8z8QaPSJJfIRxmjBrq5Vs49BY95uZK_6QFyR7gKWgwrs5toDy-hvwWEtk-rbkVHBgOu9l2orK45u1n--9M0",
 };
 
 const production: Configuration = {
@@ -80,6 +86,8 @@ const production: Configuration = {
   deadSeaCommonId: "6cfbfae6-2e5c-4b3b-ba70-e8fd871f48e2",
   parentsForClimateCommonId: "04ac2ec2-5cb2-4ab9-ae3f-5f223f482768",
   saadiaCommonId: "7c8c8996-b678-44df-9a57-e291431eb00f",
+  vapidKey:
+    "BKJ324iR-B5SoDG42bMrC_Q_poAv7BO-Z3AuMh5Grrg6TxO1QnN6mgzt2KyFFax0JSuuUhUKP-OrcTUPfboVqns",
 };
 
 const config: ConfigurationObject = {

src/pages/App/App.tsx

@@ -13,6 +13,7 @@ import {
   ThemeHandler,
   UserNotificationsAmountHandler,
   WebViewLoginHandler,
+  NotificationsHandler,
 } from "./handlers";
 import { Router } from "./router";
 
@@ -34,6 +35,7 @@ const App = () => {
       <ThemeHandler />
       <UserNotificationsAmountHandler />
       <WebViewLoginHandler />
+      <NotificationsHandler />
       <LoginContainer />
       <Router />
     </ReactRouter>

src/pages/App/handlers/NotificationsHandler/NotificationsHandler.tsx

@@ -0,0 +1,48 @@
+import { FC, useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { selectUser } from "@/pages/Auth/store/selectors";
+import { NotificationService } from "@/services";
+
+const NotificationsHandler: FC = () => {
+  const user = useSelector(selectUser());
+  const userId = user?.uid;
+  const [isRegistered, setIsRegistered] = useState(false);
+
+  useEffect(() => {
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker
+        .register("/firebase-messaging-sw.js")
+        .then((registration) => {
+          setIsRegistered(true);
+          return registration;
+        })
+        .catch((err) => {
+          console.log("ServiceWorker registration failed: ", err);
+        });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!userId && !isRegistered) {
+      return;
+    }
+
+    let unsubscribeOnMessage;
+    (async () => {
+      const hasPermissions = await NotificationService.requestPermissions();
+      if (hasPermissions) {
+        await NotificationService.saveFCMToken();
+
+        unsubscribeOnMessage = NotificationService.onForegroundMessage();
+      }
+    })();
+
+    return () => {
+      unsubscribeOnMessage && unsubscribeOnMessage();
+    };
+  }, [userId, isRegistered]);
+
+  return null;
+};
+
+export default NotificationsHandler;

src/pages/App/handlers/NotificationsHandler/index.ts

@@ -0,0 +1 @@
+export { default as NotificationsHandler } from "./NotificationsHandler";

src/pages/App/handlers/index.ts

@@ -3,3 +3,4 @@ export * from "./TextDirectionHandler";
 export * from "./UserNotificationsAmountHandler";
 export * from "./WebViewLoginHandler";
 export * from "./ThemeHandler";
+export * from "./NotificationsHandler";

src/pages/OldCommon/hooks/useCommonMember.ts

@@ -141,6 +141,7 @@ export const useCommonMember = (options: Options = {}): Return => {
             loading: false,
             fetched: true,
             data: {
+              commonId,
               ...commonMember,
               ...generateCirclesDataForCommonMember(
                 governance.circles,
@@ -189,7 +190,7 @@ export const useCommonMember = (options: Options = {}): Return => {
         }
       }
     },
-    [state, userId],
+    [state, userId, commonId],
   );
 
   const setCommonMember = useCallback(

src/pages/OldCommon/hooks/useCommonMembers.ts

@@ -141,7 +141,7 @@ export const useCommonMembers = ({ commonId }: Options): Return => {
 
               const user = cachedUserStates[commonMember.userId]?.data;
 
-              return user ? [...acc, { ...commonMember, user }] : acc;
+              return user ? [...acc, { ...commonMember, user, commonId }] : acc;
             }, []);
 
             return {
@@ -178,7 +178,7 @@ export const useCommonMembers = ({ commonId }: Options): Return => {
               ({ uid }) => uid === commonMember.userId,
             );
 
-            return user ? [...acc, { ...commonMember, user }] : acc;
+            return user ? [...acc, { ...commonMember, user, commonId }] : acc;
           }, []);
 
           return {
@@ -198,7 +198,7 @@ export const useCommonMembers = ({ commonId }: Options): Return => {
         }));
       }
     })();
-  }, [commonMembersState.data]);
+  }, [commonMembersState.data, commonId]);
 
   return {
     ...state,

src/pages/common/components/ChatComponent/ChatComponent.tsx

@@ -206,10 +206,15 @@ export default function ChatComponent({
     chatChannelId: chatChannel?.id || "",
     participants: chatChannel?.participants,
   });
-  const users = chatChannel ? chatUsers : discussionUsers;
-  const discussionMessages = chatChannel
-    ? chatMessagesData.data
-    : discussionMessagesData.data || [];
+  const users = useMemo(
+    () => (chatChannel ? chatUsers : discussionUsers),
+    [chatUsers, discussionUsers, chatChannel],
+  );
+  const discussionMessages = useMemo(
+    () =>
+      chatChannel ? chatMessagesData.data : discussionMessagesData.data || [],
+    [chatChannel, chatMessagesData.data, discussionMessagesData.data],
+  );
   const isFetchedDiscussionMessages =
     discussionMessagesData.fetched || chatMessagesData.fetched;
   const areInitialMessagesLoading = isChatChannel