Merge pull request #2745 from daostack/staging

Staging

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);
+});

public/index.html

@@ -46,9 +46,10 @@
       }
 
       .loader-wrapper {
-        position: relative;
+        position: absolute;
         left: 50%;
-        transform: translateX(-50%);
+        top: 50%;
+        transform: translate(-50%, -50%);
         height: 75px;
         width: 75px;
         background-image: url(/icons/loader-pink.svg);

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/index.tsx

@@ -1,8 +1,11 @@
 import "./projectSetupImports";
 import React from "react";
 import ReactDOM from "react-dom";
+import { enableMapSet } from "immer";
 import { App, AppWrapper } from "@/pages/App";
 
+enableMapSet();
+
 ReactDOM.render(
   <AppWrapper>
     <App />

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,71 @@
+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);
+
+  function initServiceWorker() {
+    navigator.serviceWorker
+      .register("/firebase-messaging-sw.js")
+      .then((registration) => {
+        setIsRegistered(true);
+        return registration;
+      })
+      .catch((err) => {
+        console.log("ServiceWorker registration failed: ", err);
+      });
+  }
+
+  // Check if the service worker is already registered or register a new one
+  useEffect(() => {
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker
+        .getRegistration("/firebase-messaging-sw.js")
+        .then((existingRegistration) => {
+          if (existingRegistration) {
+            setIsRegistered(true);
+          } else {
+            initServiceWorker();
+          }
+
+          return;
+        })
+        .catch((err) => {
+          console.log("Error checking service worker registration: ", err);
+        });
+    }
+  }, []);
+
+  // Handle notification permissions and foreground message listener
+  useEffect(() => {
+    if (!userId || !isRegistered) {
+      return;
+    }
+
+    let unsubscribeOnMessage;
+    (async () => {
+      const hasPermissions = await NotificationService.requestPermissions();
+      if (!hasPermissions) {
+        console.log("Notification permissions denied");
+        return;
+      }
+
+      await NotificationService.saveFCMToken();
+      unsubscribeOnMessage = NotificationService.onForegroundMessage();
+    })();
+
+    return () => {
+      if (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/App/router/Router.tsx

@@ -6,7 +6,7 @@ import { ROUTES } from "./configuration";
 const Router: FC = () => (
   <Switch>
     {ROUTES.map((layoutConfiguration, index) => (
-      <Layout key={index} {...layoutConfiguration} />
+        <Layout key={index} {...layoutConfiguration} />
     ))}
     <Redirect />
   </Switch>

src/pages/App/router/components/Layout/Layout.tsx

@@ -1,19 +1,20 @@
-import React, { FC } from "react";
+import React, { FC, Suspense } from "react";
 import { Route, Switch } from "react-router-dom";
 import { LayoutConfigurationWithRouteProps } from "../../types";
 import { LayoutRoute } from "../LayoutRoute";
+import { SuspenseLoader } from "@/shared/ui-kit";
 
 const Layout: FC<LayoutConfigurationWithRouteProps> = (props) => {
   const { component: LayoutComponent, routes, ...restProps } = props;
 
   return (
     <LayoutRoute routeConfigurations={routes} {...restProps}>
       <LayoutComponent>
+      <Suspense fallback={SuspenseLoader}>
         <Switch>
-          {routes.map((route) => (
-            <Route key={route.path} {...route} />
-          ))}
+          {routes.map((route) => <Route key={route.path} {...route} />)}
         </Switch>
+        </Suspense>
       </LayoutComponent>
     </LayoutRoute>
   );

src/pages/App/router/components/LayoutRoute/LayoutRoute.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from "react";
+import React, { FC, Suspense, useMemo } from "react";
 import { useSelector } from "react-redux";
 import { Route, RouteProps } from "react-router-dom";
 import { Route as RouteConfiguration } from "@/pages/App/router/types";
@@ -9,6 +9,7 @@ import {
 import { matchRoute } from "@/shared/utils";
 import { LayoutRouteContext, LayoutRouteContextValue } from "./context";
 import { renderRouteContent } from "./helpers";
+import { SuspenseLoader } from "@/shared/ui-kit";
 
 interface PrivateRouteProps extends RouteProps {
   routeConfigurations: RouteConfiguration[];
@@ -36,19 +37,21 @@ const LayoutRoute: FC<PrivateRouteProps> = (props) => {
 
   return (
     <LayoutRouteContext.Provider value={contextValue}>
-      <Route
-        {...restProps}
-        render={(routeProps) =>
-          renderRouteContent({
-            ...routeProps,
-            component,
-            children,
-            configuration: routeConfiguration,
-            userRoles: userRoles || [],
-            authenticated,
-          })
-        }
-      />
+          <Suspense fallback={SuspenseLoader}>
+        <Route
+          {...restProps}
+          render={(routeProps) =>
+            renderRouteContent({
+              ...routeProps,
+              component,
+              children,
+              configuration: routeConfiguration,
+              userRoles: userRoles || [],
+              authenticated,
+            })
+          }
+        />
+      </Suspense>
     </LayoutRouteContext.Provider>
   );
 };