From 8a4b089dde9878a944800578d0f5538a1fc6a2fd Mon Sep 17 00:00:00 2001 From: Isabella Mitchell Date: Fri, 22 Mar 2024 10:01:20 +0000 Subject: [PATCH 1/2] WSTEAM1-705: Solution using post asset ID as hashparam --- .../utils/constructPageFetchUrl/index.ts | 5 +++ .../[service]/live/[id]/LivePageLayout.tsx | 34 ++++++++++++++++--- .../pages/[service]/live/[id]/Post/index.tsx | 4 ++- .../live/[id]/Stream/streamProvider.tsx | 22 ++++++++++++ .../live/[id]/[[...variant]].page.tsx | 6 ++++ 5 files changed, 65 insertions(+), 6 deletions(-) create mode 100644 ws-nextjs-app/pages/[service]/live/[id]/Stream/streamProvider.tsx diff --git a/src/app/routes/utils/constructPageFetchUrl/index.ts b/src/app/routes/utils/constructPageFetchUrl/index.ts index 99d888f7ba1..a22223b591e 100644 --- a/src/app/routes/utils/constructPageFetchUrl/index.ts +++ b/src/app/routes/utils/constructPageFetchUrl/index.ts @@ -30,6 +30,7 @@ interface UrlConstructParams { service: Services; variant?: Variants; page?: string; + post?: string; isAmp?: boolean; isCaf?: boolean; } @@ -106,6 +107,7 @@ const constructPageFetchUrl = ({ service, variant, page, + post, isAmp, isCaf, }: UrlConstructParams) => { @@ -128,6 +130,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) => { )}
- + + + +
{ post, ); + const postURN = pathOr('', ['urn'], post); + const isBreakingNews = pathOr(false, ['options', 'isBreakingNews'], post); const timestamp = post?.dates?.curated ?? ''; return ( -
+
{/* eslint-disable-next-line jsx-a11y/aria-role */} 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 747890f6402..b4cb12aeb48 100644 --- a/ws-nextjs-app/pages/[service]/live/[id]/[[...variant]].page.tsx +++ b/ws-nextjs-app/pages/[service]/live/[id]/[[...variant]].page.tsx @@ -33,6 +33,7 @@ interface PageDataParams extends ParsedUrlQuery { page?: string; service: Services; variant?: Variants; + post?: string; // eslint-disable-next-line camelcase renderer_env?: string; resolvedUrl: string; @@ -45,6 +46,7 @@ const getPageData = async ({ page, service, variant, + post, rendererEnv, resolvedUrl, }: PageDataParams) => { @@ -55,6 +57,7 @@ const getPageData = async ({ pathname, service, variant, + post, }); const env = getEnvironment(pathname); @@ -121,6 +124,7 @@ export const getServerSideProps: GetServerSideProps = async context => { variant, renderer_env: rendererEnv, page = '1', + post, } = context.query as PageDataParams; const { headers: reqHeaders } = context.req; @@ -165,6 +169,7 @@ export const getServerSideProps: GetServerSideProps = async context => { page, service, variant, + post, rendererEnv, resolvedUrl: context.resolvedUrl, }); @@ -190,6 +195,7 @@ export const getServerSideProps: GetServerSideProps = async context => { isAmp: false, isNextJs: true, page: page || null, + post: post || null, pageData: data?.pageData ? { ...data.pageData, From d17f715e050a7846dcbb9bd370cb8d8a45e02c4a Mon Sep 17 00:00:00 2001 From: Isabella Mitchell Date: Tue, 30 Apr 2024 17:21:20 +0100 Subject: [PATCH 2/2] WSTEAM1-705: Add makeLinkToPost function --- src/app/models/types/pageDataParams.ts | 1 + .../pages/[service]/live/[id]/Post/index.tsx | 11 +++++++++++ 2 files changed, 12 insertions(+) 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/ws-nextjs-app/pages/[service]/live/[id]/Post/index.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Post/index.tsx index a8c887f3ca6..5866385741d 100644 --- a/ws-nextjs-app/pages/[service]/live/[id]/Post/index.tsx +++ b/ws-nextjs-app/pages/[service]/live/[id]/Post/index.tsx @@ -12,6 +12,7 @@ import MediaLoader from '#app/components/MediaLoader'; import VisuallyHiddenText from '#app/components/VisuallyHiddenText'; import ImageWithCaption from '#app/components/ImageWithCaption'; import { ServiceContext } from '#app/contexts/ServiceContext'; +import { RequestContext } from '#app/contexts/RequestContext'; import isTenHoursAgo from '#app/lib/utilities/isTenHoursAgo'; import TimeStampContainer from '#app/legacy/psammead/psammead-timestamp-container/src'; import SocialEmbedContainer from '#app/legacy/containers/SocialEmbed'; @@ -23,6 +24,13 @@ import { ComponentToRenderProps, } from './types'; +const makeLinkToPost = (origin: string, pathname: string, postURN: string) => { + 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'], @@ -173,6 +182,7 @@ const Post = ({ post }: { post: PostType }) => { ); const postURN = pathOr('', ['urn'], post); + const linkToPost = makeLinkToPost(origin, pathname, postURN); const isBreakingNews = pathOr(false, ['options', 'isBreakingNews'], post); const timestamp = post?.dates?.curated ?? ''; @@ -193,6 +203,7 @@ const Post = ({ post }: { post: PostType }) => {
);