Merge pull request #14660 from guardian/jm/server-time

Get server time in enhance methods and prop drill to `DateTime`

Author: ioannakok

dotcom-rendering/src/components/ArticleBody.tsx

@@ -54,6 +54,7 @@ type Props = {
 	lang?: string;
 	isRightToLeftLang?: boolean;
 	shouldHideAds: boolean;
+	serverTime?: number;
 };
 
 const globalOlStyles = () => css`
@@ -137,6 +138,7 @@ export const ArticleBody = ({
 	isRightToLeftLang = false,
 	editionId,
 	shouldHideAds,
+	serverTime,
 }: Props) => {
 	const isInteractiveContent =
 		format.design === ArticleDesign.Interactive ||
@@ -205,6 +207,7 @@ export const ArticleBody = ({
 					keywordIds={keywordIds}
 					editionId={editionId}
 					shouldHideAds={shouldHideAds}
+					serverTime={serverTime}
 				/>
 			</div>
 		);

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

@@ -47,7 +47,6 @@ const basicCardProps: CardProps = {
 	imageLoading: 'eager',
 	discussionApiUrl: 'https://discussion.theguardian.com/discussion-api/',
 	showVideo: true,
-	absoluteServerTimes: true,
 	headlinePosition: 'inner',
 };
 

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

@@ -79,7 +79,7 @@ export type Position = 'inner' | 'outer' | 'none';
 export type Props = {
 	linkTo: string;
 	format: ArticleFormat;
-	absoluteServerTimes: boolean;
+	serverTime?: number;
 	headlineText: string;
 	headlineSizes?: ResponsiveFontSize;
 	showQuotedHeadline?: boolean;
@@ -388,7 +388,7 @@ export const Card = ({
 	liveUpdatesPosition = 'inner',
 	onwardsSource,
 	showVideo = true,
-	absoluteServerTimes,
+	serverTime,
 	isTagPage = false,
 	aspectRatio,
 	index = 0,
@@ -450,7 +450,7 @@ export const Card = ({
 					isWithinTwelveHours: withinTwelveHours,
 				}}
 				showClock={showClock}
-				absoluteServerTimes={absoluteServerTimes}
+				serverTime={serverTime}
 				isTagPage={isTagPage}
 			/>
 		);
@@ -1261,9 +1261,7 @@ export const Card = ({
 												: supportingContentAlignment
 										}
 										containerPalette={containerPalette}
-										absoluteServerTimes={
-											absoluteServerTimes
-										}
+										serverTime={serverTime}
 										displayHeader={isFlexibleContainer}
 										directionOnMobile={
 											isFlexibleContainer
@@ -1318,7 +1316,7 @@ export const Card = ({
 									: supportingContentAlignment
 							}
 							containerPalette={containerPalette}
-							absoluteServerTimes={absoluteServerTimes}
+							serverTime={serverTime}
 							displayHeader={isFlexibleContainer}
 							directionOnMobile={'horizontal'}
 						></LatestLinks>

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

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

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

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

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

@@ -269,7 +269,6 @@ export const Headlines: StoryObj = ({ format }: StoryProps) => {
 				format={format}
 				leftColSize="compact"
 				discussionApiUrl={discussionApiUrl}
-				absoluteServerTimes={true}
 				renderingTarget="Web"
 			/>
 		</Section>
@@ -295,7 +294,6 @@ export const SingleItemCarousel = () => {
 				format={defaultFormat}
 				leftColSize="compact"
 				discussionApiUrl={discussionApiUrl}
-				absoluteServerTimes={true}
 				renderingTarget="Web"
 			/>
 		</Section>
@@ -350,7 +348,6 @@ export const SingleOpinionCarousel = () => {
 				}}
 				leftColSize="compact"
 				discussionApiUrl={discussionApiUrl}
-				absoluteServerTimes={true}
 				renderingTarget="Web"
 			/>
 		</Section>
@@ -381,7 +378,6 @@ export const Immersive = () => {
 					}}
 					leftColSize="compact"
 					discussionApiUrl={discussionApiUrl}
-					absoluteServerTimes={true}
 					renderingTarget="Web"
 				/>
 			</Section>
@@ -427,7 +423,6 @@ export const SpecialReportAlt = () => {
 				format={specialReportAltFormat}
 				leftColSize="compact"
 				discussionApiUrl={discussionApiUrl}
-				absoluteServerTimes={true}
 				renderingTarget="Web"
 			/>
 		</Section>
@@ -643,7 +638,6 @@ export const AllCards = () => {
 				leftColSize="compact"
 				discussionApiUrl={discussionApiUrl}
 				format={defaultFormat}
-				absoluteServerTimes={true}
 				renderingTarget="Web"
 			/>
 		</Section>

dotcom-rendering/src/components/DateTime.tsx

@@ -1,4 +1,4 @@
-import { isString } from '@guardian/libs';
+import { isString, isUndefined } from '@guardian/libs';
 import { getEditionFromId } from '../lib/edition';
 import { useConfig } from './ConfigContext';
 import { Island } from './Island';
@@ -14,11 +14,11 @@ type Props = {
 type DisplayProps =
 	| {
 			display?: 'absolute';
-			absoluteServerTimes?: never;
+			serverTime?: never;
 	  }
 	| {
 			display: 'relative';
-			absoluteServerTimes: boolean;
+			serverTime?: number;
 	  };
 
 const formatWeekday = (date: Date, locale: string, timeZone: string) =>
@@ -49,31 +49,35 @@ const formatTime = (date: Date, locale: string, timeZone: string) =>
 		.replace(':', '.');
 
 const ONE_MINUTE = 60_000;
-/** https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#the_epoch_timestamps_and_invalid_date */
 const MAX_DATE = 8.64e15;
-/** Rounded down to the previous minute, to ensure relative times rarely go backwards */
-const getServerTime = () => Math.floor(Date.now() / ONE_MINUTE) * ONE_MINUTE;
 
 export const DateTime = ({
 	date,
 	showWeekday,
 	showDate,
 	showTime,
 	display = 'absolute',
-	absoluteServerTimes = true,
+	serverTime,
 }: Props & DisplayProps) => {
 	const { editionId } = useConfig();
 	const { dateLocale, timeZone } = getEditionFromId(editionId);
 
+	/**
+	 * Server time (if set) is rounded down to the previous minute to ensure
+	 * relative times rarely go backwards. If unset we use the maximum value
+	 * that can be represented by a `Date` object [1] to force display as an
+	 * absolute date due to `then` being far in the past.
+	 *
+	 * [1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#the_epoch_timestamps_and_invalid_date
+	 */
+	const now = isUndefined(serverTime)
+		? MAX_DATE
+		: Math.floor(serverTime / ONE_MINUTE) * ONE_MINUTE;
 	const then = date.getTime();
 
 	return display === 'relative' ? (
 		<Island priority="enhancement" defer={{ until: 'visible' }}>
-			<RelativeTime
-				then={then}
-				now={absoluteServerTimes ? MAX_DATE : getServerTime()}
-				editionId={editionId}
-			/>
+			<RelativeTime then={then} now={now} editionId={editionId} />
 		</Island>
 	) : (
 		<time