WS-1943-Create route in Simorgh to render Topic pages in Next.js app

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

@@ -248,8 +248,15 @@ const constructPageFetchUrl = ({
         fetchUrl = Url(getMostReadEndpoint({ service, variant }).split('.')[0]);
         break;
       case TOPIC_PAGE: {
-        const variantPath = variant ? `/${variant}` : '';
-        fetchUrl = Url(`/${service}/topics/${id}${variantPath}`);
+        if (process.env?.NEXTJS) {
+          fetchUrl = Url(
+            `${host}${port}/api/local/${service}/topics/${id}${variant ? `/${variant}` : ''}`,
+          );
+        } else {
+          fetchUrl = Url(
+            `/${service}/topics/${id}${variant ? `/${variant}` : ''}`,
+          );
+        }
         break;
       }
       case LIVE_PAGE: {

ws-nextjs-app/pages/[service]/topics/[id]/[[...variant]].page.test.tsx

@@ -0,0 +1,109 @@
+import { GetServerSidePropsContext } from 'next';
+import pidginTopicFixtureData from '#data/pidgin/topics/c95y35941vrt.json';
+import * as shouldRender from '../../../../utilities/shouldRender';
+import * as getPageDataModule from '../../../../utilities/pageRequests/getPageData';
+import { getServerSideProps as handleTopicRoute } from './[[...variant]].page';
+
+jest.mock('../../../../utilities/pageRequests/getPageData');
+jest.mock('../../../../utilities/shouldRender', () => {
+  const originalModule = jest.requireActual(
+    '../../../../utilities/shouldRender',
+  );
+  return {
+    __esModule: true,
+    ...originalModule,
+  };
+});
+
+describe('handleTopicRoute', () => {
+  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/topics/c95y35941vrt',
+    query: { service: 'pidgin', id: 'c95y35941vrt' },
+  } satisfies GetServerSidePropsContext;
+
+  beforeEach(() => {
+    jest.restoreAllMocks();
+    jest.clearAllMocks();
+    jest.spyOn(getPageDataModule, 'default').mockResolvedValue({
+      data: {
+        pageData: pidginTopicFixtureData.data,
+        status: 200,
+      },
+    });
+  });
+
+  it('returns expected props if shouldRender succeeds', async () => {
+    jest.spyOn(Date, 'now').mockImplementation(() => 1234567890000);
+
+    const result = await handleTopicRoute(mockGetServerSidePropsContext);
+
+    expect(result.props.status).toEqual(200);
+    expect(result.props.pageType).toEqual('topic');
+  });
+
+  it('returns error props if shouldRender fails - 500', async () => {
+    jest.spyOn(shouldRender, 'default').mockReturnValue({
+      hasRequestSucceeded: false,
+      status: 500,
+    });
+
+    jest.spyOn(Date, 'now').mockImplementation(() => 1234567890000);
+
+    const result = await handleTopicRoute(mockGetServerSidePropsContext);
+
+    expect(result).toEqual({
+      props: expect.objectContaining({
+        status: 500,
+        pageType: 'topic',
+        pathname: '/pidgin/topics/c95y35941vrt',
+      }),
+    });
+  });
+
+  it('returns error props if shouldRender fails - 404', async () => {
+    jest.spyOn(shouldRender, 'default').mockReturnValue({
+      hasRequestSucceeded: false,
+      status: 404,
+    });
+
+    jest.spyOn(Date, 'now').mockImplementation(() => 1234567890000);
+
+    const result = await handleTopicRoute(mockGetServerSidePropsContext);
+
+    expect(result).toEqual({
+      props: expect.objectContaining({
+        status: 404,
+        pageType: 'topic',
+        pathname: '/pidgin/topics/c95y35941vrt',
+      }),
+    });
+  });
+
+  it('throws if pageData is missing', async () => {
+    jest.spyOn(getPageDataModule, 'default').mockResolvedValue({
+      data: { pageData: null, status: 200 },
+    });
+
+    await expect(
+      handleTopicRoute(mockGetServerSidePropsContext),
+    ).rejects.toThrow('TopicPage data is malformed');
+  });
+
+  it('sets correct cache-control header', async () => {
+    await handleTopicRoute(mockGetServerSidePropsContext);
+
+    expect(mockSetHeader).toHaveBeenCalledWith(
+      'Cache-Control',
+      expect.stringContaining('max-age=240'),
+    );
+  });
+});

ws-nextjs-app/pages/[service]/topics/[id]/[[...variant]].page.tsx

@@ -0,0 +1,108 @@
+import { GetServerSideProps } from 'next';
+import dynamic from 'next/dynamic';
+import { TOPIC_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 shouldRender from '#nextjs/utilities/shouldRender';
+import handleError from '#app/routes/utils/handleError';
+import getPageData from '../../../../utilities/pageRequests/getPageData';
+
+const TopicPage = dynamic(() => import('#app/pages/TopicPage/TopicPage'));
+
+const logger = nodeLogger(__filename);
+
+export const getServerSideProps: GetServerSideProps = async context => {
+  logResponseTime({ path: context.resolvedUrl }, context.res, () => null);
+
+  const {
+    id,
+    service,
+    variant: variantFromUrl,
+    renderer_env: rendererEnvFromQuery,
+    page,
+  } = context.query as PageDataParams;
+
+  const variant = deriveVariant(variantFromUrl);
+
+  const rendererEnv =
+    isTest() && !rendererEnvFromQuery ? 'live' : rendererEnvFromQuery;
+
+  const { data } = await getPageData({
+    id,
+    page,
+    service,
+    variant,
+    rendererEnv,
+    resolvedUrl: context.resolvedUrl,
+    pageType: TOPIC_PAGE,
+  });
+
+  const { status } = data;
+
+  context.res.statusCode = status;
+
+  let routingInfoLogger = logger.debug;
+
+  const { hasRequestSucceeded, status: renderStatus } = shouldRender(
+    { pageData: data.pageData, status: data.status },
+    service,
+  );
+
+  if (!hasRequestSucceeded && renderStatus !== OK) {
+    routingInfoLogger = logger.error;
+
+    return {
+      props: {
+        service,
+        status: renderStatus,
+        timeOnServer: Date.now(),
+        variant,
+        pageType: TOPIC_PAGE,
+        pathname: context.resolvedUrl,
+      },
+    };
+  }
+
+  if (!data?.pageData) {
+    throw handleError('TopicPage data is malformed', 500);
+  }
+
+  context.res.setHeader(
+    'Cache-Control',
+    'public, stale-if-error=2400, stale-while-revalidate=960, max-age=240',
+  );
+
+  routingInfoLogger(ROUTING_INFORMATION, {
+    url: context.resolvedUrl,
+    status: data.status,
+    pageType: TOPIC_PAGE,
+  });
+
+  return {
+    props: {
+      error: data?.error || null,
+      id,
+      page: page || null,
+      pageData: {
+        ...data.pageData,
+        metadata: {
+          ...data.pageData.metadata,
+          type: TOPIC_PAGE,
+        },
+      },
+      pageType: TOPIC_PAGE,
+      pathname: context.resolvedUrl,
+      service,
+      status: data.status,
+      timeOnServer: Date.now(),
+      variant,
+    },
+  };
+};
+
+export default TopicPage;

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

@@ -6,6 +6,7 @@ import {
   ARTICLE_PAGE,
   HOME_PAGE,
   UNKNOWN_PAGE,
+  TOPIC_PAGE,
 } from '#app/routes/utils/pageTypes';
 import derivePageType from '.';
 
@@ -69,4 +70,10 @@ describe('derivePageType', () => {
     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);
+  });
 });

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

@@ -7,6 +7,7 @@ import {
   UGC_PAGE,
   HOME_PAGE,
   UNKNOWN_PAGE,
+  TOPIC_PAGE,
 } from '#app/routes/utils/pageTypes';
 import {
   isOptimoIdCheck,
@@ -50,6 +51,7 @@ export default function derivePageType(pathname: string): PageTypes {
   if (sanitisedPathname.includes('send')) return UGC_PAGE;
   if (sanitisedPathname.includes('av-embeds')) return AV_EMBEDS;
   if (sanitisedPathname.includes('downloads')) return DOWNLOADS_PAGE;
+  if (sanitisedPathname.includes('topics')) return TOPIC_PAGE;
   if (isOptimoIdCheck(sanitisedPathname)) return ARTICLE_PAGE;
   if (isCpsIdCheck(sanitisedPathname)) return ARTICLE_PAGE;