diff --git a/src/app/models/types/pageDataParams.ts b/src/app/models/types/pageDataParams.ts index c2bcd04e6c4..cf438eab58e 100644 --- a/src/app/models/types/pageDataParams.ts +++ b/src/app/models/types/pageDataParams.ts @@ -4,6 +4,7 @@ import { Services, Variants } from './global'; export default interface PageDataParams extends ParsedUrlQuery { id: string; page?: string; + post?: string; service: Services; variant?: Variants; // eslint-disable-next-line camelcase diff --git a/src/app/routes/utils/constructPageFetchUrl/index.ts b/src/app/routes/utils/constructPageFetchUrl/index.ts index f86af909855..261d389624d 100644 --- a/src/app/routes/utils/constructPageFetchUrl/index.ts +++ b/src/app/routes/utils/constructPageFetchUrl/index.ts @@ -31,6 +31,7 @@ export interface UrlConstructParams { service: Services; variant?: Variants; page?: string; + post?: string; isAmp?: boolean; } @@ -124,6 +125,7 @@ const constructPageFetchUrl = ({ service, variant, page, + post, isAmp, }: UrlConstructParams) => { const env = getEnvironment(pathname); @@ -145,6 +147,9 @@ const constructPageFetchUrl = ({ ...(page && { page, }), + ...(post && { + post, + }), ...(isAmp && { isAmp, }), diff --git a/ws-nextjs-app/pages/[service]/live/[id]/LivePageLayout.tsx b/ws-nextjs-app/pages/[service]/live/[id]/LivePageLayout.tsx index 0ca22592bf5..4568bb5aea0 100644 --- a/ws-nextjs-app/pages/[service]/live/[id]/LivePageLayout.tsx +++ b/ws-nextjs-app/pages/[service]/live/[id]/LivePageLayout.tsx @@ -12,6 +12,7 @@ import MetadataContainer from '#app/components/Metadata'; import LinkedDataContainer from '#app/components/LinkedData'; import getLiveBlogPostingSchema from '#app/lib/seoUtils/getLiveBlogPostingSchema'; import Stream from './Stream'; +import { StreamProvider } from './Stream/streamProvider'; import Header from './Header'; import KeyPoints from './KeyPoints'; @@ -54,9 +55,29 @@ type ComponentProps = { endDateTime?: string; atiAnalytics: ATIData; }; + post: string | null; }; -const LivePage = ({ pageData }: ComponentProps) => { +const FakeKeyPointLinks = () => { + return ( + <> +

Links to Posts (Server Side Rendering)

+ + Link for post 39 (Page 1) + +
+ + Link for post 32 (Page 2) + +
+ + Link for post 12 (Page 3) + + + ); +}; + +const LivePage = ({ pageData, post }: ComponentProps) => { const { lang, translations, defaultImage, brandName } = useContext(ServiceContext); const { canonicalNonUkLink } = useContext(RequestContext); @@ -159,10 +180,13 @@ const LivePage = ({ pageData }: ComponentProps) => { )}
- + + + +
{ + if (!origin || !pathname || !postURN) return ''; + // origin returns host on 7080, so hard coding 7081 + const linkToPost = `http://localhost:7081${pathname}#${postURN}`; + return linkToPost; +}; + const PostBreakingNewsLabel = ({ isBreakingNews, breakingNewsLabelText, @@ -160,6 +168,7 @@ const PostContent = ({ contentBlocks }: { contentBlocks: OptimoBlock[] }) => { }; const Post = ({ post }: { post: PostType }) => { + const { origin, pathname } = useContext(RequestContext); const headerBlocks = pathOr( [], ['header', 'model', 'blocks'], @@ -172,11 +181,14 @@ const Post = ({ post }: { post: PostType }) => { post, ); + const postURN = pathOr('', ['urn'], post); + const linkToPost = makeLinkToPost(origin, pathname, postURN); + const isBreakingNews = pathOr(false, ['options', 'isBreakingNews'], post); const timestamp = post?.dates?.curated ?? ''; return ( -
+
{/* eslint-disable-next-line jsx-a11y/aria-role */} @@ -191,6 +203,7 @@ const Post = ({ post }: { post: PostType }) => {
); diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Stream/streamProvider.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Stream/streamProvider.tsx new file mode 100644 index 00000000000..56f0994cf61 --- /dev/null +++ b/ws-nextjs-app/pages/[service]/live/[id]/Stream/streamProvider.tsx @@ -0,0 +1,22 @@ +import React, { PropsWithChildren } from 'react'; + +export type StreamContextProps = { + post: string | null; // e.g. asset:fd4643b5-191b-4794-a7ac-59b18c322c35 +}; + +export const StreamContext = React.createContext( + {} as StreamContextProps, +); + +export const StreamProvider = ({ + post, + children, +}: PropsWithChildren) => { + const value = { + post, + }; + + return ( + {children} + ); +}; diff --git a/ws-nextjs-app/pages/[service]/live/[id]/[[...variant]].page.tsx b/ws-nextjs-app/pages/[service]/live/[id]/[[...variant]].page.tsx index cf118a19a35..b3d1f968b4c 100644 --- a/ws-nextjs-app/pages/[service]/live/[id]/[[...variant]].page.tsx +++ b/ws-nextjs-app/pages/[service]/live/[id]/[[...variant]].page.tsx @@ -30,6 +30,7 @@ const getPageData = async ({ page, service, variant, + post, rendererEnv, resolvedUrl, }: PageDataParams) => { @@ -40,6 +41,7 @@ const getPageData = async ({ pathname, service, variant, + post, }); const env = getEnvironment(pathname); @@ -106,6 +108,7 @@ export const getServerSideProps: GetServerSideProps = async context => { variant, renderer_env: rendererEnv, page = '1', + post, } = context.query as PageDataParams; const { headers: reqHeaders } = context.req; @@ -143,6 +146,7 @@ export const getServerSideProps: GetServerSideProps = async context => { page, service, variant, + post, rendererEnv, resolvedUrl: context.resolvedUrl, }); @@ -169,6 +173,7 @@ export const getServerSideProps: GetServerSideProps = async context => { isAmp: false, isNextJs: true, page: page || null, + post: post || null, pageData: data?.pageData ? { ...data.pageData,