@quintype/framework 7.8.0 → 7.9.0-custom-inifinite-scroller.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/framework",
-  "version": "7.8.0",
+  "version": "7.9.0-custom-inifinite-scroller.0",
   "description": "Libraries to help build Quintype Node.js apps",
   "main": "index.js",
   "engines": {
@@ -31,8 +31,8 @@
   "homepage": "https://github.com/quintype/quintype-node-framework#readme",
   "dependencies": {
     "@ampproject/toolbox-optimizer": "2.8.3",
-    "@quintype/amp": "^2.5.0",
-    "@quintype/backend": "^2.3.1",
+    "@quintype/amp": "2.6.0-custom-infinite-scroll.0",
+    "@quintype/backend": "2.3.2-related-stories-inf-scroll.3",
     "@quintype/components": "^3.0.0",
     "@quintype/prerender-node": "^3.2.26",
     "@quintype/seo": "^1.39.0",

package/server/amp/handlers/infinite-scroll.js

@@ -12,7 +12,7 @@ async function storyPageInfiniteScrollHandler(req, res, next, { client, config }
     client,
     queryParams: req.query,
   });
-  const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 5 }); // itemsTaken has to match with itemsToTake in ampStoryPageHandler
+  const jsonResponse = await infiniteScrollAmp.getResponse();
   if (jsonResponse instanceof Error) return next(jsonResponse);
   res.set("Content-Type", "application/json; charset=utf-8");
   setCorsHeaders({ req, res, next, publisherConfig: config });

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

@@ -86,15 +86,29 @@ async function ampStoryPageHandler(
     const seoTags =
       seoInstance && seoInstance.getMetaTags(config, "story-page-amp", { data: { story, timezone }, config }, { url });
 
-    const infiniteScrollAmp = new InfiniteScrollAmp({
-      ampConfig,
-      publisherConfig: config,
-      client,
-    });
-    const infiniteScrollInlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: story["story-content-id"],
-    });
+    const infiniteScrollConfig = get(opts, ["featureConfig", "infiniteScroll"], "");
+    const infiniteScrollSource = get(infiniteScrollConfig, ["source"], "collection");
+    const inlineConfig = get(infiniteScrollConfig, ["inlineConfig"], "");
+    const remoteConfigEndpoint = get(infiniteScrollConfig, ["remoteConfigEndpoint"], "");
+
+    let infiniteScrollInlineConfig = [];
+
+    if (infiniteScrollSource === "custom") {
+      if (!inlineConfig || !remoteConfigEndpoint)
+        throw new Error("Required params of 'custom' source (inlineConfig /remoteConfigEndpoint) is missing!!");
+      infiniteScrollInlineConfig = await inlineConfig();
+    } else {
+      const infiniteScrollAmp = new InfiniteScrollAmp({
+        story,
+        ampConfig,
+        publisherConfig: config,
+        client,
+        infiniteScrollSource,
+      });
+      infiniteScrollInlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
+        storyId: story["story-content-id"],
+      });
+    }
     if (infiniteScrollInlineConfig instanceof Error) return next(infiniteScrollInlineConfig);
     if (infiniteScrollInlineConfig) {
       set(

package/server/amp/helpers/infinite-scroll.js

@@ -1,9 +1,10 @@
 class InfiniteScrollAmp {
-  constructor({ ampConfig, client, publisherConfig, queryParams }) {
+  constructor({ story, ampConfig, client, publisherConfig, queryParams, infiniteScrollSource }) {
+    this.story = story;
     this.client = client;
     this.publisherConfig = publisherConfig;
     this.queryParams = queryParams;
-    this.collSlug = "amp-infinite-scroll"; // this is hardcoded to "amp-infinite-scroll" temporarily. Ideally it should come from ampConfig from platform
+    this.infiniteScrollSource = infiniteScrollSource;
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -17,6 +18,14 @@ class InfiniteScrollAmp {
     );
   }
 
+  getFilteredApiItems(relatedStories) {
+    return relatedStories.filter(
+      (story) =>
+        story.access !== "subscription" &&
+        story["story-template"] !== "visual-story"
+    );
+  }
+
   formatData({ itemsArr, type }) {
     // formats configuration as per need of amp infinite scroll
     const arr = itemsArr.map((item) => ({
@@ -41,34 +50,42 @@ class InfiniteScrollAmp {
     return `${hostWithProtocol}/${s3Key}?format=webp&w=250`;
   }
 
-  async getResponse({ itemsTaken }) {
+  async getInfiniteScrollList(storyId, offset, limit) {
+    let filteredItems = [];
+    const params = { offset, limit };
+    if (this.infiniteScrollSource === "relatedStoriesApi") {
+      const relatedStoriesList = await this.story.getRelatedStories(this.client, params);
+      if (!relatedStoriesList)
+        return new Error();
+      return filteredItems = this.getFilteredApiItems(relatedStoriesList);
+    } else {
+      const collection = await this.client.getCollectionBySlug("amp-infinite-scroll");
+      if (!collection || (collection.items && !collection.items.length) || collection.error || collection === null)
+        return new Error();
+      return filteredItems = this.getFilteredCollItems(collection, storyId);
+    }
+  }
+
+  async getResponse() {
     const { "story-id": storyId } = this.queryParams;
     if (!storyId) return new Error(`Query param "story-id" missing`);
-
-    const collection = await this.client.getCollectionBySlug(this.collSlug);
-    if (!collection || collection.error)
-      return new Error(`Infinite scroll collection ${this.collSlug} returned falsy value`);
-    const filteredItems = this.getFilteredCollItems(collection, storyId);
-    const slicedItems = filteredItems.slice(itemsTaken);
+    const filteredItems = await this.getInfiniteScrollList(storyId, 5);
+    if (filteredItems instanceof Error) return new Error(`Infinite scroll collection amp-infinite-scroll returned falsy value`);
+    const slicedItems = filteredItems.slice(5);
     const formattedData = this.formatData({ itemsArr: slicedItems });
-
     return JSON.stringify(formattedData);
   }
 
-  async getInitialInlineConfig({ itemsToTake, storyId }) {
-    if (!itemsToTake || !storyId) return new Error("Required params for getInitialInlineConfig missing");
-
-    const collection = await this.client.getCollectionBySlug(this.collSlug);
-    if (!collection || (collection.items && !collection.items.length) || collection.error) return null;
-    const filteredItems = this.getFilteredCollItems(collection, storyId);
-    const slicedItems = filteredItems.slice(0, itemsToTake);
-    const formattedData = this.formatData({
+  async getInitialInlineConfig(storyId) {
+    if (!storyId) return new Error("Required params for getInitialInlineConfig missing");
+    const filteredItems = await this.getInfiniteScrollList(storyId, 0, 5);
+    if (filteredItems instanceof Error) return null;
+    const slicedItems = filteredItems.slice(0, 5);
+    const formattedData = slicedItems.length > 0 && this.formatData({
       itemsArr: slicedItems,
       type: "inline",
     });
-
     return JSON.stringify(formattedData);
   }
 }
-
 module.exports = InfiniteScrollAmp;

package/test/unit/amp/infinite-scroll-helper.js

@@ -3,8 +3,17 @@
 
 const assert = require("assert");
 const InfiniteScrollAmp = require("../../../server/amp/helpers/infinite-scroll");
+const { getTextStory } = require("../../data/amp-test-data");
 
 function getClientStub({
+  getStoryById = (id) =>
+    new Promise((resolve) => {
+      if (id === "4444")
+        resolve({
+          story: getTextStory({ "story-content-id": "7f3d5bdb-ec52-4047-ac0d-df4036ec974b" }),
+        });
+      resolve(null);
+    }),
   getCollectionBySlug = (slug) =>
     new Promise((resolve) => {
       if (slug === "amp-infinite-scroll")
@@ -19,6 +28,7 @@ function getClientStub({
                 "story-content-id": 1111,
                 slug: "sports/aa",
                 "hero-image-s3-key": "aa/a.jpg",
+                access: "public",
               },
             },
             {
@@ -30,6 +40,7 @@ function getClientStub({
                 "story-content-id": 2222,
                 slug: "sports/bb",
                 "hero-image-s3-key": "bb/b.jpg",
+                access: "public",
               },
             },
             {
@@ -41,6 +52,7 @@ function getClientStub({
                 "story-content-id": 3333,
                 slug: "sports/cc",
                 "hero-image-s3-key": "cc/c.jpg",
+                access: "public",
               },
             },
             {
@@ -52,6 +64,7 @@ function getClientStub({
                 "story-content-id": 4444,
                 slug: "sports/dd",
                 "hero-image-s3-key": "dd/d.jpg",
+                access: "public",
               },
             },
             {
@@ -63,6 +76,7 @@ function getClientStub({
                 "story-content-id": 5555,
                 slug: "sports/ee",
                 "hero-image-s3-key": "ee/e.jpg",
+                access: "public",
               },
             },
             {
@@ -74,6 +88,31 @@ function getClientStub({
                 "story-content-id": 6666,
                 slug: "sports/ff",
                 "hero-image-s3-key": "ff/f.jpg",
+                access: "public",
+              },
+            },
+            {
+              type: "story",
+              id: 7777,
+              story: {
+                "story-template": "text",
+                headline: "ggg",
+                "story-content-id": 7777,
+                slug: "sports/gg",
+                "hero-image-s3-key": "gg/g.jpg",
+                access: "public",
+              },
+            },
+            {
+              type: "story",
+              id: 8888,
+              story: {
+                "story-template": "text",
+                headline: "hhh",
+                "story-content-id": 8888,
+                slug: "sports/hh",
+                "hero-image-s3-key": "hh/h.jpg",
+                access: "public",
               },
             },
           ],
@@ -83,6 +122,7 @@ function getClientStub({
 } = {}) {
   return {
     getCollectionBySlug,
+    getStoryById
   };
 }
 const dummyPublisherConfig = {
@@ -96,9 +136,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       client: getClientStub(),
       publisherConfig: dummyPublisherConfig,
     });
-    const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-    });
+    const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig();
     assert.strictEqual(inlineConfig instanceof Error, true);
     assert.throws(() => {
       throw new Error("Required params for getInitialInlineConfig missing");
@@ -117,8 +155,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       publisherConfig: dummyPublisherConfig,
     });
     const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: 2222,
+      storyId: 1111,
     });
     assert.strictEqual(inlineConfig, null);
   });
@@ -137,8 +174,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       publisherConfig: dummyPublisherConfig,
     });
     const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: 2222,
+      storyId: 1111,
     });
     assert.strictEqual(inlineConfig, null);
   });
@@ -150,8 +186,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       publisherConfig: dummyPublisherConfig,
     });
     const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: 2222,
+      storyId: 1111,
     });
     assert.strictEqual(false, /sports\/bb/.test(inlineConfig));
     assert.strictEqual(false, /bb\/b.jpg/.test(inlineConfig));
@@ -164,8 +199,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       publisherConfig: dummyPublisherConfig,
     });
     const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: 3333,
+      storyId: 1111,
     });
     assert.strictEqual(false, /sports\/bb/.test(inlineConfig));
     assert.strictEqual(false, /bb\/b.jpg/.test(inlineConfig));
@@ -179,8 +213,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       publisherConfig: dummyPublisherConfig,
     });
     const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: 2222,
+      storyId: 1111,
     });
     function isInlineConfigStructureValid(jsonStr) {
       const stories = JSON.parse(jsonStr);
@@ -207,7 +240,7 @@ describe("getResponse method of InfiniteScrollAmp helper function", function ()
       publisherConfig: dummyPublisherConfig,
       queryParams: { foo: "bar" },
     });
-    const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 2 });
+    const jsonResponse = await infiniteScrollAmp.getResponse();
     assert.strictEqual(jsonResponse instanceof Error, true);
     assert.throws(() => {
       throw new Error(`Query param "story-id" missing`);
@@ -226,7 +259,7 @@ describe("getResponse method of InfiniteScrollAmp helper function", function ()
       publisherConfig: dummyPublisherConfig,
       queryParams: { "story-id": 2222 },
     });
-    const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 2 });
+    const jsonResponse = await infiniteScrollAmp.getResponse();
     assert.strictEqual(jsonResponse instanceof Error, true);
   });
   it("should remove current story from response", async function () {
@@ -237,7 +270,7 @@ describe("getResponse method of InfiniteScrollAmp helper function", function ()
       publisherConfig: dummyPublisherConfig,
       queryParams: { "story-id": 4444 },
     });
-    const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 2 });
+    const jsonResponse = await infiniteScrollAmp.getResponse();
     assert.strictEqual(false, /sports\/dd/.test(jsonResponse));
     assert.strictEqual(false, /dd\/d.jpg/.test(jsonResponse));
   });
@@ -249,7 +282,7 @@ describe("getResponse method of InfiniteScrollAmp helper function", function ()
       publisherConfig: dummyPublisherConfig,
       queryParams: { "story-id": 4444 },
     });
-    const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 2 });
+    const jsonResponse = await infiniteScrollAmp.getResponse();
     assert.strictEqual(false, /sports\/bb/.test(jsonResponse));
     assert.strictEqual(false, /bb\/b.jpg/.test(jsonResponse));
   });
@@ -262,7 +295,8 @@ describe("getResponse method of InfiniteScrollAmp helper function", function ()
       publisherConfig: dummyPublisherConfig,
       queryParams: { "story-id": 4444 },
     });
-    const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 2 });
+    const jsonResponse = await infiniteScrollAmp.getResponse();
+
     function isJsonConfigStructureValid(jsonStr) {
       const parsed = JSON.parse(jsonStr);
       const stories = parsed.pages;