Replace serverTime prop with context

dotcom-rendering/src/client/discussion.ts

@@ -1,6 +1,7 @@
 import { doHydration } from './islands/doHydration';
 import { getEmotionCache } from './islands/emotion';
 import { getConfig } from './islands/getConfig';
+import { getDateTime } from './islands/getDateTime';
 import { getName } from './islands/getName';
 import { getProps } from './islands/getProps';
 
@@ -21,12 +22,20 @@ const forceHydration = async (): Promise<void> => {
 		// Read the props and config from where they have been serialised in the dom using an Island
 		const props = getProps(guElement);
 		const config = getConfig();
+		const dateTime = getDateTime(guElement);
 
 		// Now that we have the props as an object, tell Discussion we want it to expand itself
 		props.expanded = true;
 
 		// Force hydration
-		await doHydration(name, props, guElement, getEmotionCache(), config);
+		await doHydration(
+			name,
+			props,
+			guElement,
+			getEmotionCache(),
+			config,
+			dateTime,
+		);
 	} catch (err) {
 		// Do nothing
 	}

dotcom-rendering/src/client/islands/doHydration.tsx

@@ -5,6 +5,7 @@ import { isUndefined, log, startPerformanceMeasure } from '@guardian/libs';
 import { createElement } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { ConfigProvider } from '../../components/ConfigContext';
+import { DateTimeProvider } from '../../components/DateTimeContext';
 import { IslandProvider } from '../../components/IslandContext';
 import type { Config } from '../../types/configContext';
 
@@ -30,13 +31,15 @@ declare global {
  * @param element The location on the DOM where the component to hydrate exists
  * @param emotionCache An instance of an emotion cache to use for the island
  * @param config Application configuration to be passed to the config context for the hydrated component
+ * @param dateTime Datetime value to be passed to DateTime context for the hydrated component
  */
 export const doHydration = async (
 	name: string,
 	data: { [key: string]: unknown } | null,
 	element: HTMLElement,
 	emotionCache: EmotionCache,
 	config: Config,
+	dateTime?: number,
 ): Promise<void> => {
 	// If this function has already been run for an element then don't try to
 	// run it a second time
@@ -61,13 +64,15 @@ export const doHydration = async (
 			hydrateRoot(
 				element,
 				<ConfigProvider value={config}>
-					<CacheProvider value={emotionCache}>
-						{/* Child islands should not be hydrated separately */}
-						<IslandProvider value={{ isChild: true }}>
-							{/* The component to hydrate must be a single JSX Element */}
-							{createElement(module[name], data)}
-						</IslandProvider>
-					</CacheProvider>
+					<DateTimeProvider value={dateTime}>
+						<CacheProvider value={emotionCache}>
+							{/* Child islands should not be hydrated separately */}
+							<IslandProvider value={{ isChild: true }}>
+								{/* The component to hydrate must be a single JSX Element */}
+								{createElement(module[name], data)}
+							</IslandProvider>
+						</CacheProvider>
+					</DateTimeProvider>
 				</ConfigProvider>,
 			);
 

dotcom-rendering/src/client/islands/getDateTime.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns `datetime` attribute from given HTML element.
+ *
+ * We expect the element to always be a `gu-*` custom element
+ */
+export const getDateTime = (marker: HTMLElement): number | undefined => {
+	const dateTime = marker.getAttribute('datetime');
+	if (dateTime) return parseInt(dateTime);
+	return;
+};

dotcom-rendering/src/client/islands/initHydration.ts

@@ -3,6 +3,7 @@ import { isUndefined } from '@guardian/libs';
 import { schedule } from '../../lib/scheduler';
 import { doHydration } from './doHydration';
 import { getConfig } from './getConfig';
+import { getDateTime } from './getDateTime';
 import { getName } from './getName';
 import { getPriority } from './getPriority';
 import { getProps } from './getProps';
@@ -41,14 +42,23 @@ export const initHydration = async (
 	const props = getProps(element);
 	const config = getConfig();
 	const priority = getPriority(element);
+	const dateTime = getDateTime(element);
 
 	if (!name) return;
 	if (isUndefined(priority)) return;
 
 	const scheduleHydration = () =>
 		schedule(
 			name,
-			() => doHydration(name, props, element, emotionCache, config),
+			() =>
+				doHydration(
+					name,
+					props,
+					element,
+					emotionCache,
+					config,
+					dateTime,
+				),
 			{ priority },
 		);
 

dotcom-rendering/src/components/ArticleBody.tsx

@@ -54,7 +54,6 @@ type Props = {
 	lang?: string;
 	isRightToLeftLang?: boolean;
 	shouldHideAds: boolean;
-	serverTime?: number;
 	idApiUrl?: string;
 };
 
@@ -139,7 +138,6 @@ export const ArticleBody = ({
 	isRightToLeftLang = false,
 	editionId,
 	shouldHideAds,
-	serverTime,
 	idApiUrl,
 }: Props) => {
 	const isInteractiveContent =
@@ -209,7 +207,6 @@ export const ArticleBody = ({
 					keywordIds={keywordIds}
 					editionId={editionId}
 					shouldHideAds={shouldHideAds}
-					serverTime={serverTime}
 					idApiUrl={idApiUrl}
 				/>
 			</div>

dotcom-rendering/src/components/ArticleMeta.web.test.tsx

@@ -3,6 +3,7 @@ import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStylin
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { ArticleMeta, shouldShowContributor } from './ArticleMeta.web';
 import { ConfigProvider } from './ConfigContext';
+import { DateTimeProvider } from './DateTimeContext';
 
 jest.mock('../lib/bridgetApi', () => jest.fn());
 jest.mock('../lib/useMatchMedia', () => ({
@@ -25,24 +26,26 @@ describe('ArticleMeta', () => {
 					editionId: 'UK',
 				}}
 			>
-				<ArticleMeta
-					format={format}
-					pageId="1234"
-					webTitle="A title"
-					byline="Observer writers"
-					tags={[
-						{
-							id: 'lifeandstyle/series/observer-design',
-							type: 'Series',
-							title: 'Observer Design',
-						},
-					]}
-					primaryDateline="primary date line"
-					secondaryDateline="secondary date line"
-					isCommentable={false}
-					discussionApiUrl=""
-					shortUrlId=""
-				/>
+				<DateTimeProvider value={Date.now()}>
+					<ArticleMeta
+						format={format}
+						pageId="1234"
+						webTitle="A title"
+						byline="Observer writers"
+						tags={[
+							{
+								id: 'lifeandstyle/series/observer-design',
+								type: 'Series',
+								title: 'Observer Design',
+							},
+						]}
+						primaryDateline="primary date line"
+						secondaryDateline="secondary date line"
+						isCommentable={false}
+						discussionApiUrl=""
+						shortUrlId=""
+					/>
+				</DateTimeProvider>
 			</ConfigProvider>,
 		);
 
@@ -72,24 +75,26 @@ describe('ArticleMeta', () => {
 					editionId: 'UK',
 				}}
 			>
-				<ArticleMeta
-					format={format}
-					pageId="1234"
-					webTitle="A title"
-					byline="Observer writers"
-					tags={[
-						{
-							id: 'lifeandstyle/series/observer-design',
-							type: 'Series',
-							title: 'Observer Design',
-						},
-					]}
-					primaryDateline="primary date line"
-					secondaryDateline="secondary date line"
-					isCommentable={false}
-					discussionApiUrl=""
-					shortUrlId=""
-				/>
+				<DateTimeProvider value={Date.now()}>
+					<ArticleMeta
+						format={format}
+						pageId="1234"
+						webTitle="A title"
+						byline="Observer writers"
+						tags={[
+							{
+								id: 'lifeandstyle/series/observer-design',
+								type: 'Series',
+								title: 'Observer Design',
+							},
+						]}
+						primaryDateline="primary date line"
+						secondaryDateline="secondary date line"
+						isCommentable={false}
+						discussionApiUrl=""
+						shortUrlId=""
+					/>
+				</DateTimeProvider>
 			</ConfigProvider>,
 		);
 

dotcom-rendering/src/components/Card/Card.tsx

@@ -76,7 +76,6 @@ export type Props = {
 	format: ArticleFormat;
 	/** The format of the article holding the card */
 	contextFormat?: ArticleFormat;
-	serverTime?: number;
 	headlineText: string;
 	headlineSizes?: ResponsiveFontSize;
 	showQuotedHeadline?: boolean;
@@ -383,7 +382,6 @@ export const Card = ({
 	liveUpdatesPosition = 'inner',
 	onwardsSource,
 	showVideo = true,
-	serverTime,
 	isTagPage = false,
 	aspectRatio,
 	index = 0,
@@ -444,7 +442,6 @@ export const Card = ({
 					isWithinTwelveHours: withinTwelveHours,
 				}}
 				showClock={showClock}
-				serverTime={serverTime}
 				isTagPage={isTagPage}
 			/>
 		);
@@ -1244,7 +1241,6 @@ export const Card = ({
 													: supportingContentAlignment
 											}
 											containerPalette={containerPalette}
-											serverTime={serverTime}
 											displayHeader={isFlexibleContainer}
 											directionOnMobile={
 												isFlexibleContainer
@@ -1303,7 +1299,6 @@ export const Card = ({
 									: supportingContentAlignment
 							}
 							containerPalette={containerPalette}
-							serverTime={serverTime}
 							displayHeader={isFlexibleContainer}
 							directionOnMobile={'horizontal'}
 						></LatestLinks>

dotcom-rendering/src/components/Card/components/CardAge.tsx

@@ -22,7 +22,6 @@ const ageStyles = (colour: string) => {
 };
 
 type Props = {
-	serverTime?: number;
 	webPublication: {
 		date: string;
 		isWithinTwelveHours: boolean;
@@ -34,7 +33,6 @@ type Props = {
 };
 
 export const CardAge = ({
-	serverTime,
 	webPublication,
 	isTagPage,
 	showClock,
@@ -60,7 +58,6 @@ export const CardAge = ({
 				<DateTime
 					date={new Date(webPublication.date)}
 					display={'relative'}
-					serverTime={serverTime}
 					showWeekday={false}
 					showDate={true}
 					showTime={false}

dotcom-rendering/src/components/Carousel.importable.tsx

@@ -43,7 +43,6 @@ type Props = {
 	onwardsSource: OnwardsSource;
 	leftColSize: LeftColSize;
 	discussionApiUrl: string;
-	serverTime?: number;
 	renderingTarget: RenderingTarget;
 };
 
@@ -449,7 +448,6 @@ type CarouselCardProps = {
 	linkTo: string;
 	headlineText: string;
 	webPublicationDate: string;
-	serverTime?: number;
 	imageLoading: Loading;
 	kickerText?: string;
 	image?: DCRFrontImage;
@@ -483,7 +481,6 @@ const CarouselCard = ({
 	imageLoading,
 	discussionApiUrl,
 	isOnwardContent,
-	serverTime,
 	starRating,
 	index,
 }: CarouselCardProps) => {
@@ -527,7 +524,6 @@ const CarouselCard = ({
 				isOnwardContent={isOnwardContent}
 				mediaPositionOnDesktop={cardImagePosition}
 				mediaPositionOnMobile={cardImagePosition}
-				serverTime={serverTime}
 				starRating={starRating}
 				index={index}
 				showTopBarDesktop={!isOnwardContent}
@@ -751,7 +747,6 @@ export const Carousel = ({
 	leftColSize,
 	discussionApiUrl,
 	isOnwardContent = true,
-	serverTime,
 	renderingTarget,
 	...props
 }: ArticleProps | FrontProps) => {
@@ -973,7 +968,6 @@ export const Carousel = ({
 									linkTo={linkTo}
 									headlineText={headlineText}
 									webPublicationDate={webPublicationDate}
-									serverTime={serverTime}
 									image={image}
 									kickerText={kickerText}
 									dataLinkName={`carousel-small-card-position-${i}`}