WS-203 - Most Read pages on Next.js

src/app/routes/utils/constructPageFetchUrl/index.test.ts

@@ -150,6 +150,8 @@ describe('constructPageFetchUrl', () => {
     ${LIVE_TV_PAGE}    | ${'dari'}       | ${null}    | ${'local'}  | ${'/dari/watch/bbc_afghan_tv/live'}                            | ${'http://localhost/api/local/dari/watch/bbc_afghan_tv/live'}
     ${LIVE_TV_PAGE}    | ${'dari'}       | ${null}    | ${'test'}   | ${'/dari/watch/bbc_afghan_tv/live'}                            | ${'https://mock-bff-path/?id=bbc_afghan_tv&service=dari&pageType=liveTV&serviceEnv=test'}
     ${LIVE_TV_PAGE}    | ${'dari'}       | ${null}    | ${'live'}   | ${'/dari/watch/bbc_afghan_tv/live'}                            | ${'https://mock-bff-path/?id=bbc_afghan_tv&service=dari&pageType=liveTV&serviceEnv=live'}
+    ${TOPIC_PAGE}      | ${'pidgin'}     | ${null}    | ${'test'}   | ${'mostReadTopic'}                                             | ${'https://mock-bff-path/?id=mostReadTopic&service=pidgin&pageType=topic&serviceEnv=test'}
+    ${TOPIC_PAGE}      | ${'pidgin'}     | ${null}    | ${'live'}   | ${'mostReadTopic'}                                             | ${'https://mock-bff-path/?id=mostReadTopic&service=pidgin&pageType=topic&serviceEnv=live'}
   `(
     `on $environment environment, should return $expected when path is $pathname, pageType is $pageType, service is $serviceOverride and variant is $variant`,
     ({

src/app/routes/utils/constructPageFetchUrl/index.ts

@@ -98,6 +98,11 @@ const getId = ({ pageType, service, variant }: GetIdProps) => {
 
     case TOPIC_PAGE:
       getIdFunction = (path: string) => {
+        const normalizedPath = removeLeadingSlash(path);
+
+        // Special case for Most Read pages which are actually Topic pages
+        if (normalizedPath === 'mostReadTopic') return normalizedPath;
+
         return getTipoId(path);
       };
       break;

ws-nextjs-app/next.config.js

@@ -55,6 +55,12 @@ module.exports = {
         source: '/:service/og/:id',
         destination: '/api/:service/og/:id',
       },
+      // TODO: This can be removed once we redirect variant paths to have variant at the end of the path,
+      //  e.g. /serbian/cyr/popular/read -> /serbian/popular/read/cyr
+      {
+        source: '/:service/:variant/popular/read',
+        destination: '/:service/popular/read/:variant',
+      },
     ];
   },
   assetPrefix,

ws-nextjs-app/pages/[service]/popular/[read]/[[...variant]].page.test.tsx

@@ -0,0 +1,104 @@
+import { GetServerSidePropsContext } from 'next';
+import { MOST_READ_PAGE } from '#app/routes/utils/pageTypes';
+import pidginMostReadTopicFixture from '#data/pidgin/topics/mostReadTopic.json';
+import * as getPageDataModule from '../../../../utilities/pageRequests/getPageData';
+import { getServerSideProps as handleMostReadRoute } from './[[...variant]].page';
+
+jest.mock('../../../../utilities/pageRequests/getPageData');
+
+describe('handleMostReadRoute', () => {
+  const mockSetHeader = jest.fn();
+  const mockGetServerSidePropsContext = {
+    req: {
+      headers: {},
+    } as unknown as GetServerSidePropsContext['req'],
+    res: {
+      setHeader: mockSetHeader,
+      removeHeader: jest.fn(),
+      on: jest.fn(),
+    } as unknown as GetServerSidePropsContext['res'],
+    resolvedUrl: '/pidgin/popular/read',
+    query: { service: 'pidgin' },
+  } satisfies GetServerSidePropsContext;
+
+  beforeEach(() => {
+    jest.restoreAllMocks();
+    jest.clearAllMocks();
+    jest.spyOn(getPageDataModule, 'default').mockResolvedValue({
+      data: {
+        pageData: pidginMostReadTopicFixture.data,
+        status: 200,
+      },
+    });
+  });
+
+  it('returns expected props if data fetch succeeds', async () => {
+    jest.spyOn(Date, 'now').mockImplementation(() => 1234567890000);
+
+    const result = await handleMostReadRoute(mockGetServerSidePropsContext);
+
+    expect(result.props.status).toEqual(200);
+    expect(result.props.pageType).toEqual(MOST_READ_PAGE);
+  });
+
+  it('returns error props if data fetch returns 500', async () => {
+    jest.spyOn(getPageDataModule, 'default').mockResolvedValue({
+      data: {
+        pageData: pidginMostReadTopicFixture.data,
+        status: 500,
+      },
+    });
+
+    jest.spyOn(Date, 'now').mockImplementation(() => 1234567890000);
+
+    const result = await handleMostReadRoute(mockGetServerSidePropsContext);
+
+    expect(result).toEqual({
+      props: expect.objectContaining({
+        status: 500,
+        pageType: MOST_READ_PAGE,
+        pathname: '/pidgin/popular/read',
+      }),
+    });
+  });
+
+  it('returns error props if data fetch returns 404', async () => {
+    jest.spyOn(getPageDataModule, 'default').mockResolvedValue({
+      data: {
+        pageData: pidginMostReadTopicFixture.data,
+        status: 404,
+      },
+    });
+
+    jest.spyOn(Date, 'now').mockImplementation(() => 1234567890000);
+
+    const result = await handleMostReadRoute(mockGetServerSidePropsContext);
+
+    expect(result).toEqual({
+      props: expect.objectContaining({
+        status: 404,
+        pageType: MOST_READ_PAGE,
+        pathname: '/pidgin/popular/read',
+      }),
+    });
+  });
+
+  it('throws if pageData is missing', async () => {
+    jest.spyOn(getPageDataModule, 'default').mockResolvedValue({
+      data: { pageData: null, status: 200 },
+    });
+
+    await expect(
+      handleMostReadRoute(mockGetServerSidePropsContext),
+    ).rejects.toThrow('MostReadPage data is malformed');
+  });
+
+  it('sets correct cache-control header', async () => {
+    await handleMostReadRoute(mockGetServerSidePropsContext);
+
+    expect(mockSetHeader).toHaveBeenCalledWith(
+      'Cache-Control',
+      expect.stringContaining('max-age=30'),
+    );
+  });
+});

ws-nextjs-app/pages/[service]/popular/[read]/[[...variant]].page.tsx

@@ -0,0 +1,117 @@
+import { GetServerSidePropsContext } from 'next';
+import dynamic from 'next/dynamic';
+import { TOPIC_PAGE, MOST_READ_PAGE } from '#app/routes/utils/pageTypes';
+import nodeLogger from '#lib/logger.node';
+import logResponseTime from '#server/utilities/logResponseTime';
+import { ROUTING_INFORMATION } from '#app/lib/logger.const';
+import { OK } from '#app/lib/statusCodes.const';
+import PageDataParams from '#app/models/types/pageDataParams';
+import deriveVariant from '#nextjs/utilities/deriveVariant';
+import isTest from '#app/lib/utilities/isTest';
+import handleError from '#app/routes/utils/handleError';
+import getPageData from '#nextjs/utilities/pageRequests/getPageData';
+
+const MostReadAsTopicPage = dynamic(
+  () => import('#app/pages/TopicPage/TopicPage'),
+);
+
+const logger = nodeLogger(__filename);
+
+export const getServerSideProps = async (
+  context: GetServerSidePropsContext,
+) => {
+  const { resolvedUrl } = context;
+
+  logResponseTime({ path: resolvedUrl }, context.res, () => null);
+
+  const {
+    service,
+    variant: variantFromUrl,
+    renderer_env: rendererEnvFromQuery,
+    page,
+  } = context.query as PageDataParams;
+
+  const variant = deriveVariant(variantFromUrl);
+
+  const rendererEnv =
+    isTest() && !rendererEnvFromQuery ? 'live' : rendererEnvFromQuery;
+
+  const resolvedUrlWithoutQuery = resolvedUrl.split('?')?.[0];
+
+  const id = 'mostReadTopic';
+
+  const { data } = await getPageData({
+    id,
+    page,
+    service,
+    variant,
+    rendererEnv,
+    resolvedUrl: resolvedUrlWithoutQuery,
+    pageType: TOPIC_PAGE,
+  });
+
+  const { status } = data;
+
+  context.res.statusCode = status;
+
+  let routingInfoLogger = logger.debug;
+
+  if (status !== OK) {
+    routingInfoLogger = logger.error;
+
+    routingInfoLogger(ROUTING_INFORMATION, {
+      url: resolvedUrlWithoutQuery,
+      status,
+      pageType: MOST_READ_PAGE,
+    });
+
+    return {
+      props: {
+        service,
+        status,
+        timeOnServer: Date.now(),
+        variant,
+        pageType: MOST_READ_PAGE,
+        pathname: resolvedUrlWithoutQuery,
+      },
+    };
+  }
+
+  if (!data?.pageData) {
+    throw handleError('MostReadPage data is malformed', 500);
+  }
+
+  context.res.setHeader(
+    'Cache-Control',
+    'public, stale-if-error=300, stale-while-revalidate=120, max-age=30',
+  );
+
+  routingInfoLogger(ROUTING_INFORMATION, {
+    url: resolvedUrlWithoutQuery,
+    status: data.status,
+    pageType: MOST_READ_PAGE,
+  });
+
+  return {
+    props: {
+      error: data?.error || null,
+      id,
+      page: page || null,
+      pageData: {
+        ...data.pageData,
+        metadata: {
+          ...data.pageData.metadata,
+          type: MOST_READ_PAGE,
+        },
+      },
+      pageType: MOST_READ_PAGE,
+      pathname: resolvedUrlWithoutQuery,
+      service,
+      status: data.status,
+      timeOnServer: Date.now(),
+      variant,
+    },
+  };
+};
+
+export default MostReadAsTopicPage;

ws-nextjs-app/utilities/derivePageType/index.test.ts

@@ -9,6 +9,7 @@ import {
   TOPIC_PAGE,
   AUDIO_PAGE,
   TV_PAGE,
+  MOST_READ_PAGE,
 } from '#app/routes/utils/pageTypes';
 import derivePageType from '.';
 
@@ -91,15 +92,21 @@ describe('derivePageType', () => {
     expect(result).toEqual(TV_PAGE);
   });
 
-  it('should return Unknown if pathname does not include live or send', () => {
-    const pathname = '/pidgin/xxxxxxxxx';
-    const result = derivePageType(pathname);
-    expect(result).toEqual(UNKNOWN_PAGE);
-  });
-
   it("should return TOPIC_PAGE if pathname includes 'topic'", () => {
     const pathname = '/pidgin/topics/c95y35941vrt';
     const result = derivePageType(pathname);
     expect(result).toEqual(TOPIC_PAGE);
   });
+
+  it('should return MOST_READ_PAGE if pathname includes popular/read', () => {
+    const pathname = '/pidgin/popular/read';
+    const result = derivePageType(pathname);
+    expect(result).toEqual(MOST_READ_PAGE);
+  });
+
+  it('should return Unknown if pathname does not include live or send', () => {
+    const pathname = '/pidgin/xxxxxxxxx';
+    const result = derivePageType(pathname);
+    expect(result).toEqual(UNKNOWN_PAGE);
+  });
 });

ws-nextjs-app/utilities/derivePageType/index.ts

@@ -10,6 +10,7 @@ import {
   TOPIC_PAGE,
   AUDIO_PAGE,
   TV_PAGE,
+  MOST_READ_PAGE,
 } from '#app/routes/utils/pageTypes';
 import {
   isOptimoIdCheck,
@@ -60,6 +61,7 @@ export default function derivePageType(pathname: string): PageTypes {
   if (sanitisedPathname.includes('av-embeds')) return AV_EMBEDS;
   if (sanitisedPathname.includes('downloads')) return DOWNLOADS_PAGE;
   if (sanitisedPathname.includes('topics')) return TOPIC_PAGE;
+  if (sanitisedPathname.includes('popular/read')) return MOST_READ_PAGE;
   if (isOnDemandAudioPath(sanitisedPathname)) return AUDIO_PAGE;
   if (isOnDemandTvPath(sanitisedPathname)) return TV_PAGE;
   if (isOptimoIdCheck(sanitisedPathname)) return ARTICLE_PAGE;