@quintype/framework 7.4.0-react-18.0 → 7.4.0-update-build.0

package/README.md

@@ -145,23 +145,30 @@ startApp(renderApplication, CUSTOM_REDUCERS, {
 
 Steps to Integrate FCM in your project
 
-1. While executing startApp in your project set enableFCM to true.
+1. app/client/app.js While executing startApp in your project send the firebaseConfig via opts. `firebaseConfig` can either be an object or a function that returns the firebase config object
 
-An Example
+Example:
 
-```
+```js
 startApp(renderApplication,
   CUSTOM_REDUCERS,
   {
   enableServiceWorker: process.env.NODE_ENV === "production",
-  fcmMessagingSenderId: (page) => <MessageSenderId> || fcmMessagingSenderId: <MessageSenderId> {(function|string)}
+  firebaseConfig: {
+    messagingSenderId: --YOUR KEY-- ,
+    projectId: --YOUR KEY--,
+    apiKey: --YOUR KEY--,
+    storageBucket: --YOUR KEY--,
+    authDomain: --YOUR KEY--,
+    appId: --YOUR KEY--,
+  }
   ...
 })
 ```
 
 2. app/server/app.js should have the fcm configuration as below:
 
-```
+```js
 isomorphicRoutes(app, {
   ...
   fcmServerKey: (config) => <ServerKey> || fcmServerKey: <ServerKey> {(function|string)}
@@ -174,28 +181,45 @@ isomorphicRoutes(app, {
 
    Example of the script:
 
-   ```
-       importScripts("https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js");
-       importScripts("https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js");
-       firebase.initializeApp({
-         messagingSenderId: <your message sender Id>
-       });
-       const messaging = firebase.messaging();
-       function messageHandler(payload) {
-         const data = payload["data"];
-
-         var notificationTitle = data.title;
-         var notificationOptions = {
-           body: data.body,
-           icon: data["hero_image_s3_url"],
-           image: data["hero_image_s3_url"],
-           data: data
-         };
-
-         return self.registration.showNotification(notificationTitle,
-           notificationOptions);
-       }
-       messaging.setBackgroundMessageHandler(messageHandler);
+   ```js
+    importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js");
+    importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js");
+
+    firebase.initializeApp({
+      messagingSenderId: --YOUR KEY-- ,
+      projectId: --YOUR KEY--,
+      apiKey: --YOUR KEY--,
+      storageBucket: --YOUR KEY--,
+      authDomain: --YOUR KEY--,
+      appId: --YOUR KEY--,
+    });
+    self.addEventListener('notificationclick', (event) => {
+
+      const url = event.notification.data.url;
+      if(url) {
+        clients.openWindow(url);
+      }
+      clients.openWindow(-- YOUR Sketches Host --);
+    }, false);
+
+    const messaging = firebase.messaging();
+
+    messaging.onBackgroundMessage(function(payload) {
+      const data = payload["data"];
+      const notificationTitle = data.title || ""
+      const notificationOptions = {
+        body: data.body,
+        icon: data["hero_image_s3_url"],
+        image: data["hero_image_s3_url"],
+        data: {
+          url: data["click_action"],
+        }
+      };
+
+      self.registration.showNotification(notificationTitle,
+        notificationOptions);
+    });
+
    ```
 
 4. Make sure that the page data should have config with key fcmMessageSenderId refer doStartApp function in app/client/start.js.

package/client/impl/fcm.js

@@ -1,39 +1,26 @@
-export function initializeFCM(messageSenderId) {
-  if (!messageSenderId) {
-    console.log("messageSenderId is required");
-    return false;
-  }
+export function initializeFCM(firebaseConfig) {
   Promise.all([
     import(/* webpackChunkName: "firebase-app" */ "firebase/app"),
     import(/* webpackChunkName: "firebase-messaging" */ "firebase/messaging"),
-  ]).then(([firebase, m]) => {
-    try {
-      firebase.initializeApp({
-        messagingSenderId: messageSenderId.toString(),
+  ])
+    .then(([firebase, m]) => {
+      const app = firebase.initializeApp({
+        messagingSenderId: firebaseConfig.messagingSenderId.toString(),
+        projectId: firebaseConfig.projectId,
+        apiKey: firebaseConfig.apiKey,
+        storageBucket: firebaseConfig.storageBucket,
+        authDomain: firebaseConfig.authDomain,
+        appId: firebaseConfig.appId,
       });
-      const messaging = firebase.messaging();
-      messaging.requestPermission().then(() => {
-        updateToken(firebase)
-          .then(() => {
-            messaging.onTokenRefresh(() => updateToken(firebase));
-          })
-          .catch(console.error);
-      });
-    } catch (error) {
-      console.error(error);
-    }
-  });
-}
-
-function updateToken(firebaseInstance) {
-  return firebaseInstance
-    .messaging()
-    .getToken()
+      const messaging = m.getMessaging(app);
+      return m.getToken(messaging);
+      // No need to refresh token https://github.com/firebase/firebase-js-sdk/issues/4132
+    })
     .then((token) => {
       return registerFCMTopic(token);
     })
     .catch((err) => {
-      throw new Error(err);
+      console.error(err);
     });
 }
 

package/client/start.js

@@ -11,7 +11,7 @@ import { BreakingNews, CLIENT_SIDE_RENDERED, NAVIGATE_TO_PAGE, PAGE_LOADING } fr
 import { createBrowserHistory } from "history";
 import get from "lodash/get";
 import React from "react";
-import { createRoot, hydrateRoot } from "react-dom/client";
+import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { IsomorphicComponent } from "../isomorphic/component";
 import { makePickComponentSync } from "../isomorphic/impl/make-pick-component-sync";
@@ -181,21 +181,10 @@ export function maybeSetUrl(path, title) {
 export function renderComponent(clazz, container, store, props = {}, callback) {
   const component = React.createElement(Provider, { store }, React.createElement(clazz, props || {}));
 
-  function AppWithCallbackAfterRender() {
-    useEffect(() => {
-      callback();
-    });
-
-    return component;
-  }
-
-  let root = createRoot(document.getElementById(container));
-
   if (props.hydrate) {
-    root = hydrateRoot(document.getElementById(container));
+    return ReactDOM.hydrate(component, document.getElementById(container), callback);
   }
-
-  return root.render(<AppWithCallbackAfterRender />);
+  return ReactDOM.render(component, document.getElementById(container), callback);
 }
 
 /**
@@ -293,10 +282,14 @@ export function startApp(renderApplication, reducers, opts) {
 
     store.dispatch({ type: NAVIGATE_TO_PAGE, page, currentPath: path });
 
-    if (opts.fcmMessagingSenderId) {
-      const mssgSenderId =
-        typeof opts.fcmMessagingSenderId === "function" ? opts.fcmMessagingSenderId(page) : opts.fcmMessagingSenderId;
-      mssgSenderId && initializeFCM(mssgSenderId);
+    if (opts.firebaseConfig) {
+      const fcm = typeof opts.firebaseConfig === "function" ? opts.firebaseConfig(page) : opts.firebaseConfig;
+      if (fcm) {
+        const mssgSenderId = fcm.messagingSenderId;
+        const projectId = fcm.projectId;
+        const apiKey = fcm.apiKey;
+        if (mssgSenderId && projectId && apiKey) initializeFCM(fcm);
+      }
     }
 
     const { config: { "theme-attributes": pageThemeAttributes = {} } = {} } = page;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/framework",
-  "version": "7.4.0-react-18.0",
+  "version": "7.4.0-update-build.0",
   "description": "Libraries to help build Quintype Node.js apps",
   "main": "index.js",
   "scripts": {
@@ -27,18 +27,19 @@
   "homepage": "https://github.com/quintype/quintype-node-framework#readme",
   "dependencies": {
     "@ampproject/toolbox-optimizer": "2.8.3",
-    "@quintype/amp": "^2.4.19",
+    "@quintype/amp": "^2.4.20",
     "@quintype/backend": "^2.3.1",
     "@quintype/components": "^3.0.0",
     "@quintype/prerender-node": "^3.2.24",
-    "@quintype/seo": "^1.38.1",
+    "@quintype/seo": "^1.39.0",
     "atob": "^2.1.2",
+    "babel-plugin-react-css-modules": "^5.2.6",
     "chalk": "^4.1.2",
     "cluster": "^0.7.7",
     "compression": "^1.7.4",
     "ejs": "^3.1.6",
     "express": "^4.17.1",
-    "firebase": "^6.0.2",
+    "firebase": "^9.6.10",
     "get-youtube-id": "^1.0.1",
     "grpc": "^1.21.1",
     "http-proxy": "^1.18.1",
@@ -46,9 +47,9 @@
     "lodash": "^4.17.21",
     "mocha-snapshots": "^4.2.0",
     "morgan": "^1.10.0",
-    "path-to-regexp": "^6.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "path-to-regexp": "^6.2.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-redux": "^7.2.5",
     "react-router": "^5.2.1",
     "redux": "^4.1.1",
@@ -60,9 +61,8 @@
     "@babel/eslint-parser": "^7.15.7",
     "@loadable/component": "^5.15.0",
     "@loadable/server": "^5.15.1",
-    "@quintype/build": "^3.13.1",
+    "@quintype/build": "^4.0.0",
     "babel-plugin-quintype-assets": "^1.1.1",
-    "babel-plugin-react-css-modules": "^5.2.6",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",