From a8cc6965a4db959746ff6fd4cd5cdaa89408d370 Mon Sep 17 00:00:00 2001 From: Elvinas Valenas Date: Wed, 21 Jan 2026 17:44:37 +0200 Subject: [PATCH 1/3] feat: offline - fetch most read articles --- .../pages/[service]/offline/OfflinePage.tsx | 11 +++++- .../pages/[service]/offline/index.page.tsx | 38 +++++++++++++++---- 2 files changed, 40 insertions(+), 9 deletions(-) diff --git a/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx b/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx index b87e4062f1b..db0eb2df884 100644 --- a/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx +++ b/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx @@ -3,8 +3,15 @@ import Helmet from 'react-helmet'; import { ServiceContext } from '#contexts/ServiceContext'; import ErrorMain from '#app/legacy/components/ErrorMain'; import { useOfflinePageFlag } from '#app/hooks/useOfflinePageFlag'; +import { MostReadData } from '#app/components/MostRead/types'; -const OfflinePage = () => { +export type Props = { + pageData: { + mostReadData: MostReadData; + }; +}; + +const OfflinePage = ({ pageData }: Props) => { const { service, dir, script } = use(ServiceContext); // Track offline page visit (sets flag in localStorage, PWA only) @@ -18,6 +25,8 @@ const OfflinePage = () => { 'Refresh the page when your connection is restored', ]; + console.log({ pageData }); + return ( <> diff --git a/ws-nextjs-app/pages/[service]/offline/index.page.tsx b/ws-nextjs-app/pages/[service]/offline/index.page.tsx index fd7d627394e..22a03f300d0 100644 --- a/ws-nextjs-app/pages/[service]/offline/index.page.tsx +++ b/ws-nextjs-app/pages/[service]/offline/index.page.tsx @@ -1,15 +1,19 @@ import dynamic from 'next/dynamic'; import { GetServerSideProps } from 'next'; -import { OFFLINE_PAGE } from '#app/routes/utils/pageTypes'; +import { OFFLINE_PAGE, MOST_READ_PAGE } from '#app/routes/utils/pageTypes'; import PageDataParams from '#app/models/types/pageDataParams'; import deriveVariant from '#nextjs/utilities/deriveVariant'; -import extractHeaders from '#server/utilities/extractHeaders'; import logResponseTime from '#server/utilities/logResponseTime'; +import getPageData from '#nextjs/utilities/pageRequests/getPageData'; const OfflinePage = dynamic(() => import('./OfflinePage')); export const getServerSideProps: GetServerSideProps = async context => { - const { service, variant: variantFromUrl } = context.query as PageDataParams; + const { + service, + variant: variantFromUrl, + renderer_env: rendererEnv, + } = context.query as PageDataParams; const variant = deriveVariant(variantFromUrl); logResponseTime({ path: context.resolvedUrl }, context.res, () => null); @@ -19,15 +23,33 @@ export const getServerSideProps: GetServerSideProps = async context => { 'public, max-age=300, stale-while-revalidate=600, stale-if-error=3600', ); + let mostReadData = null; + + try { + const { data } = await getPageData({ + pageType: MOST_READ_PAGE, + id: `/${service}/popular/read`, + resolvedUrl: `/${service}/popular/read`, + service, + variant: variant || undefined, + rendererEnv, + }); + + mostReadData = data?.pageData ?? null; + } catch (err) { + // eslint-disable-next-line no-console + console.error('Failed to fetch most read data:', err); + } + return { props: { - service, - variant, + pageData: { + mostReadData, + }, pageType: OFFLINE_PAGE, + service, status: 200, - timeOnServer: Date.now(), - pathname: `/${service}/offline`, - ...extractHeaders(context.req.headers), + variant: variant || null, }, }; }; From 715c1693b18f00339ccdd13386748e4f7a78aee5 Mon Sep 17 00:00:00 2001 From: Elvinas Valenas Date: Thu, 22 Jan 2026 10:38:43 +0200 Subject: [PATCH 2/3] feat: render most read on offline page --- .../pages/[service]/offline/OfflinePage.tsx | 60 +++++++++++++------ .../pages/[service]/offline/index.page.tsx | 2 +- 2 files changed, 43 insertions(+), 19 deletions(-) diff --git a/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx b/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx index db0eb2df884..ac839b52a16 100644 --- a/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx +++ b/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx @@ -3,18 +3,22 @@ import Helmet from 'react-helmet'; import { ServiceContext } from '#contexts/ServiceContext'; import ErrorMain from '#app/legacy/components/ErrorMain'; import { useOfflinePageFlag } from '#app/hooks/useOfflinePageFlag'; +import MostRead from '#app/components/MostRead/Canonical'; import { MostReadData } from '#app/components/MostRead/types'; +import Heading from '#app/components/Heading'; +import Paragraph from '#app/components/Paragraph'; -export type Props = { - pageData: { - mostReadData: MostReadData; - }; -}; +interface PageData { + mostReadData?: MostReadData | null; +} + +interface OfflinePageProps { + pageData?: PageData | null; +} -const OfflinePage = ({ pageData }: Props) => { +const OfflinePage = ({ pageData }: OfflinePageProps) => { const { service, dir, script } = use(ServiceContext); - // Track offline page visit (sets flag in localStorage, PWA only) useOfflinePageFlag(); const title = 'You are offline'; @@ -25,7 +29,7 @@ const OfflinePage = ({ pageData }: Props) => { 'Refresh the page when your connection is restored', ]; - console.log({ pageData }); + const mostReadData = pageData?.mostReadData; return ( <> @@ -33,16 +37,36 @@ const OfflinePage = ({ pageData }: Props) => { {title} - + + {mostReadData?.items?.length ? ( +
+ + {title} + + + {message} + + + Most read articles + + +
+ ) : ( + + )} ); }; diff --git a/ws-nextjs-app/pages/[service]/offline/index.page.tsx b/ws-nextjs-app/pages/[service]/offline/index.page.tsx index 22a03f300d0..9d98cf54fe5 100644 --- a/ws-nextjs-app/pages/[service]/offline/index.page.tsx +++ b/ws-nextjs-app/pages/[service]/offline/index.page.tsx @@ -32,7 +32,7 @@ export const getServerSideProps: GetServerSideProps = async context => { resolvedUrl: `/${service}/popular/read`, service, variant: variant || undefined, - rendererEnv, + rendererEnv: rendererEnv || 'live', }); mostReadData = data?.pageData ?? null; From 8612487471f1aaa11eb4ccce2666dce52885c03f Mon Sep 17 00:00:00 2001 From: Elvinas Valenas Date: Thu, 22 Jan 2026 10:56:49 +0200 Subject: [PATCH 3/3] chore: revert deleted attributes --- ws-nextjs-app/pages/[service]/offline/index.page.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ws-nextjs-app/pages/[service]/offline/index.page.tsx b/ws-nextjs-app/pages/[service]/offline/index.page.tsx index 9d98cf54fe5..ee154a523cb 100644 --- a/ws-nextjs-app/pages/[service]/offline/index.page.tsx +++ b/ws-nextjs-app/pages/[service]/offline/index.page.tsx @@ -5,6 +5,7 @@ import PageDataParams from '#app/models/types/pageDataParams'; import deriveVariant from '#nextjs/utilities/deriveVariant'; import logResponseTime from '#server/utilities/logResponseTime'; import getPageData from '#nextjs/utilities/pageRequests/getPageData'; +import extractHeaders from '#src/server/utilities/extractHeaders'; const OfflinePage = dynamic(() => import('./OfflinePage')); @@ -50,6 +51,9 @@ export const getServerSideProps: GetServerSideProps = async context => { service, status: 200, variant: variant || null, + timeOnServer: Date.now(), + pathname: `/${service}/offline`, + ...extractHeaders(context.req.headers), }, }; };