@quintype/framework 7.4.0-upgrade-react.1 → 7.4.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [7.4.0](https://github.com/quintype/quintype-node-framework/compare/v7.2.0...v7.4.0) (2022-05-23)
+
+
+### Features
+
+* **request:** Implement request fallback for external calls ([#296](https://github.com/quintype/quintype-node-framework/issues/296)) ([44e1f7e](https://github.com/quintype/quintype-node-framework/commit/44e1f7eea9825225c0c300fb57a8178bd22c0630))
+
+### [7.3.4](https://github.com/quintype/quintype-node-framework/compare/v7.3.3...v7.3.4) (2022-05-20)
+
+### [7.3.3](https://github.com/quintype/quintype-node-framework/compare/v7.3.2...v7.3.3) (2022-05-20)
+
 ### [7.3.2](https://github.com/quintype/quintype-node-framework/compare/v7.3.1...v7.3.2) (2022-04-18)
 
 ### [7.3.1](https://github.com/quintype/quintype-node-framework/compare/v7.3.0...v7.3.1) (2022-03-03)

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

@@ -282,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,8 +1,12 @@
 {
   "name": "@quintype/framework",
-  "version": "7.4.0-upgrade-react.1",
+  "version": "7.4.0",
   "description": "Libraries to help build Quintype Node.js apps",
   "main": "index.js",
+  "engines": {
+    "node": "^16.0.0",
+    "npm": "^8.5.0"
+  },
   "scripts": {
     "prepublishOnly": "npm test && ./bin-dev-scripts/standard-version-release.sh",
     "test": "NODE_ENV=test npx mocha --recursive --require ./test/babel",
@@ -27,18 +31,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.21",
     "@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",
@@ -47,8 +52,8 @@
     "mocha-snapshots": "^4.2.0",
     "morgan": "^1.10.0",
     "path-to-regexp": "^6.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "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 +65,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",

package/server/amp/handlers/story-page.js

@@ -7,6 +7,7 @@ const { Story, AmpConfig } = require("../../impl/api-client-impl");
 const { optimize, getDomainSpecificOpts } = require("../helpers");
 const { storyToCacheKey } = require("../../caching");
 const { addCacheHeadersToResult } = require("../../handlers/cdn-caching");
+const { getRedirectUrl } = require("../../../server/redirect-url-helper");
 
 /**
  * ampStoryPageHandler gets all the things needed and calls "ampifyStory" function (which comes from ampLib)
@@ -37,6 +38,20 @@ async function ampStoryPageHandler(
 ) {
   try {
     const opts = cloneDeep(rest);
+
+    const redirectUrls = opts && opts.redirectUrls;
+    const getEnableAmp = get(opts, ["enableAmp"], true);
+
+    const enableAmp = typeof getEnableAmp === "function" ? opts.enableAmp(config) : getEnableAmp;
+
+    if (typeof redirectUrls === "function" || (redirectUrls && Object.keys(redirectUrls).length > 0)) {
+      await getRedirectUrl(req, res, next, { redirectUrls, config });
+    }
+
+    if (!enableAmp) {
+      return res.redirect(301, `/${req.params[0]}`);
+    }
+
     const domainSpecificOpts = getDomainSpecificOpts(opts, domainSlug);
     const url = urlLib.parse(req.url, true);
     const { ampifyStory, unsupportedStoryElementsPresent } = ampLibrary;

package/server/routes.js

@@ -232,12 +232,13 @@ function wrapLoadDataWithMultiDomain(publisherConfig, f, configPos) {
  * @param {Object} opts Options that will be passed to the handler. These options will be merged with a *config* and *client*
  */
 function getWithConfig(app, route, handler, opts = {}) {
+  const configWrapper = opts.configWrapper;
   const {
     getClient = require("./api-client").getClient,
     publisherConfig = require("./publisher-config"),
     logError = require("./logger").error,
   } = opts;
-  const withConfig = withConfigPartial(getClient, logError, publisherConfig);
+  const withConfig = withConfigPartial(getClient, logError, publisherConfig, configWrapper);
   app.get(route, withConfig(handler, opts));
 }
 
@@ -608,6 +609,8 @@ exports.mountQuintypeAt = function (app, mountAt) {
  * @param {Object} opts.templates An object that's used to pass custom templates. Each key corresponds to the template name and corresponding value is the template
  * @param {Object} opts.slots An object used to pass slot data.
  * @param {SEO} opts.seo An SEO object that will generate html tags for each page. See [@quintype/seo](https://developers.quintype.com/malibu/isomorphic-rendering/server-side-architecture#quintypeseo)
+ * @param {boolean|function} opts.enableAmp  'amp/story/:slug' should redirect to non-amp page if enableAmp is false
+ * @param {object|function} opts.redirectUrls list of urls  which is used to redirect URL(sourceUrl) to a different URL(destinationUrl). Eg:  redirectUrls: { "/amp/story/sports/ipl-2021": {destinationUrl: "/amp/story/sports/cricket-2022", statusCode: 302,},}
  * @param {function} opts.headerCardRender Render prop for story headerCard. If passed, the headerCard in default stories will be replaced with this
  * @param {function} opts.relatedStoriesRender Render prop for relatedStories in a story page. If passed, this will replace the related stories
  *

package/test/babel.js

@@ -2,7 +2,11 @@ const ROOT_PATH = require("path").resolve(__dirname, "..");
 
 require("babel-register")({
   presets: ["react"],
-  plugins: ["transform-es2015-modules-commonjs", "transform-object-rest-spread", "quintype-assets"],
+  plugins: [
+    "transform-es2015-modules-commonjs",
+    "transform-object-rest-spread",
+    "quintype-assets",
+  ],
   ignore(file) {
     return file.startsWith(ROOT_PATH + "/node_modules");
   },

package/test/integration/amp-handler-test.js

@@ -70,16 +70,14 @@ function getClientStub({
             "story-elements": [
               {
                 description: "",
-                "page-url":
-                  "/story/7f3d5bdb-ec52-4047-ac0d-df4036ec974b/element/9eb8f5cc-6ebe-4fb0-88b8-eca79efde210",
+                "page-url": "/story/7f3d5bdb-ec52-4047-ac0d-df4036ec974b/element/9eb8f5cc-6ebe-4fb0-88b8-eca79efde210",
                 type: "text",
                 "family-id": "e9e12f9f-8b9f-4b93-a8c8-83c7b278000f",
                 title: "",
                 id: "9eb8f5cc-6ebe-4fb0-88b8-eca79efde210",
                 metadata: {},
                 subtype: null,
-                text:
-                  "<p>In India today, the legal profession is growing in lockstep with one of the world’s most dynamic economies. It’s no surprise then— that in terms of absolute numbers— India’s legal profession is the world’s second largest, with over 1.4 million enrolled lawyers in legal practices nationwide.</p>",
+                text: "<p>In India today, the legal profession is growing in lockstep with one of the world’s most dynamic economies. It’s no surprise then— that in terms of absolute numbers— India’s legal profession is the world’s second largest, with over 1.4 million enrolled lawyers in legal practices nationwide.</p>",
               },
             ],
             "card-updated-at": 1581327522163,
@@ -195,20 +193,18 @@ const dummyAmpLib = {
 
 const getClientStubWithRelatedStories = (relatedStories) => () =>
   Object.assign({}, getClientStub(), {
-    getRelatedStories: () =>
-      Promise.resolve({ "related-stories": relatedStories }),
+    getRelatedStories: () => Promise.resolve({ "related-stories": relatedStories }),
   });
 
-function createApp({
-  clientStub = getClientStub,
-  ampLibrary = dummyAmpLib,
-} = {}) {
+function createApp({ clientStub = getClientStub, ampLibrary = dummyAmpLib, enableAmp = true, redirectUrls = {} } = {}) {
   const app = express();
   ampRoutes(app, {
     getClient: clientStub,
     publisherConfig: {},
     ampLibrary,
     additionalConfig: {},
+    enableAmp,
+    redirectUrls,
   });
   return app;
 }
@@ -240,6 +236,38 @@ describe("ampStoryPageHandler integration tests", () => {
         return done();
       });
   });
+  it("should redirect to non-amp page if enableAmp is false", (done) => {
+    const app = createApp({
+      enableAmp: false,
+    });
+    supertest(app)
+      .get("/amp/story/cricket/ipl-2021")
+      .expect(301)
+      .expect("Location", "/cricket/ipl-2021")
+      .end((err) => {
+        if (err) return done(err);
+        return done();
+      });
+  });
+  it("Redirects the urls with status code to 302 if redirectUrls is present ", (done) => {
+    const app = createApp({
+      enableAmp: true,
+      redirectUrls: {
+        "/amp/story/sports/ipl-2021": {
+          destinationUrl: "/amp/story/sports/cricket-2022",
+          statusCode: 302,
+        },
+      },
+    });
+    supertest(app)
+      .get("/amp/story/sports/ipl-2021")
+      .expect(302)
+      .expect("Location", "/amp/story/sports/cricket-2022")
+      .end((err) => {
+        if (err) return done(err);
+        return done();
+      });
+  });
   it("should redirect to non-amp page if story contains unsuported elements and invalid-elements-strategy in /api/v1/amp/config is set to redirect-to-web-version", (done) => {
     const app = createApp({
       ampLibrary: {