refactor(RelativeTime): folded into DateTime

guardian · Jan 17, 2024 · 8e9393a · 8e9393a
1 parent e76b83b
commit 8e9393a
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 34 deletions.
diff --git a/dotcom-rendering/src/components/Card/components/CardAge.tsx b/dotcom-rendering/src/components/Card/components/CardAge.tsx
@@ -4,8 +4,7 @@ import { textSans, until } from '@guardian/source-foundations';
 import { palette } from '../../../palette';
 import ClockIcon from '../../../static/icons/clock.svg';
 import type { DCRContainerPalette } from '../../../types/front';
-import { Island } from '../../Island';
-import { RelativeTime } from '../../RelativeTime.importable';
+import { DateTime } from '../../DateTime';
 
 type Props = {
 	format: ArticleFormat;
@@ -77,9 +76,12 @@ export const CardAge = ({
 			css={ageStyles(format, containerPalette, isDynamo, isOnwardContent)}
 		>
 			{showClock && <ClockIcon />}
-			<Island priority="enhancement" defer={{ until: 'visible' }}>
-				<RelativeTime then={new Date(webPublicationDate).getTime()} />
-			</Island>
+			<DateTime
+				date={new Date(webPublicationDate)}
+				display="relative"
+				editionId="UK"
+				show="date"
+			/>
 		</span>
 	);
 };
diff --git a/dotcom-rendering/src/components/DateTime.tsx b/dotcom-rendering/src/components/DateTime.tsx
@@ -1,9 +1,13 @@
+import { isString, timeAgo } from '@guardian/libs';
 import { type EditionId, getEditionFromId } from '../lib/edition';
+import { Island } from './Island';
+import { RelativeTime } from './RelativeTime.importable';
 
 type Props = {
 	date: Date;
 	editionId: EditionId;
 	show?: 'date & time' | 'date' | 'time';
+	display?: 'absolute' | 'relative';
 };
 
 const formatDate = (date: Date, locale: string, timeZone: string) =>
@@ -28,9 +32,23 @@ const formatTime = (date: Date, locale: string, timeZone: string) =>
 		})
 		.replace(':', '.');
 
-export const DateTime = ({ date, editionId, show = 'date & time' }: Props) => {
+export const DateTime = ({
+	date,
+	editionId,
+	show = 'date & time',
+	display = 'absolute',
+}: Props) => {
 	const { locale, timeZone } = getEditionFromId(editionId);
-	return (
+
+	const epoch = date.getTime();
+	const relativeTime = display === 'relative' && timeAgo(epoch);
+	const isRecent = isString(relativeTime) && relativeTime.endsWith(' ago');
+
+	return isRecent ? (
+		<Island priority="enhancement" defer={{ until: 'visible' }}>
+			<RelativeTime then={epoch} />
+		</Island>
+	) : (
 		<time
 			dateTime={date.toISOString()}
 			data-locale={locale}

diff --git a/dotcom-rendering/src/components/FirstPublished.tsx b/dotcom-rendering/src/components/FirstPublished.tsx
@@ -3,8 +3,7 @@ import { joinUrl } from '@guardian/libs';
 import { palette, space, textSans } from '@guardian/source-foundations';
 import { SvgPinned } from '@guardian/source-react-components';
 import { palette as themePalette } from '../palette';
-import { Island } from './Island';
-import { RelativeTime } from './RelativeTime.importable';
+import { DateTime } from './DateTime';
 
 const fallbackDate = (date: Date) =>
 	[date.getHours(), date.getMinutes()]
@@ -62,12 +61,12 @@ const FirstPublished = ({
 							margin-right: ${space[2]}px;
 						`}
 					>
-						<Island
-							priority="enhancement"
-							defer={{ until: 'visible' }}
-						>
-							<RelativeTime then={firstPublished}></RelativeTime>
-						</Island>
+						<DateTime
+							date={new Date(firstPublished)}
+							display="relative"
+							editionId="UK"
+							show="date"
+						/>
 					</span>
 				)}
 				<span

diff --git a/dotcom-rendering/src/components/KeyEventCard.tsx b/dotcom-rendering/src/components/KeyEventCard.tsx
@@ -2,8 +2,7 @@ import { css } from '@emotion/react';
 import { from, space, textSans } from '@guardian/source-foundations';
 import { Link } from '@guardian/source-react-components';
 import { palette } from '../palette';
-import { Island } from './Island';
-import { RelativeTime } from './RelativeTime.importable';
+import { DateTime } from './DateTime';
 
 interface Props {
 	id: string;
@@ -120,9 +119,11 @@ export const KeyEventCard = ({
 				data-link-name={`key event card | ${cardPosition}`}
 			>
 				<div css={timeStyles}>
-					<Island priority="enhancement" defer={{ until: 'visible' }}>
-						<RelativeTime then={blockFirstPublished} />
-					</Island>
+					<DateTime
+						date={new Date(blockFirstPublished)}
+						display="relative"
+						editionId="UK"
+					/>
 				</div>
 				<div css={textStyles}>{title}</div>
 			</Link>

diff --git a/dotcom-rendering/src/components/LatestLinks.importable.tsx b/dotcom-rendering/src/components/LatestLinks.importable.tsx
@@ -12,7 +12,7 @@ import { palette as themePalette } from '../palette';
 import type { DCRContainerPalette } from '../types/front';
 import { WithLink } from './CardHeadline';
 import { ContainerOverrides } from './ContainerOverrides';
-import { RelativeTime } from './RelativeTime.importable';
+import { DateTime } from './DateTime';
 
 type Props = {
 	id: string;
@@ -163,8 +163,14 @@ export const LatestLinks = ({
 											),
 										}}
 									>
-										<RelativeTime
-											then={block.publishedDateTime}
+										<DateTime
+											date={
+												new Date(
+													block.publishedDateTime,
+												)
+											}
+											display="relative"
+											editionId="UK"
 										/>
 									</div>
 									<span className="show-underline">

diff --git a/dotcom-rendering/src/components/PinnedPost.tsx b/dotcom-rendering/src/components/PinnedPost.tsx
@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { isUndefined } from '@guardian/libs';
 import {
 	focusHalo,
 	from,
@@ -16,8 +17,7 @@ import {
 } from '@guardian/source-react-components';
 import { decidePalette } from '../lib/decidePalette';
 import type { Palette } from '../types/palette';
-import { Island } from './Island';
-import { RelativeTime } from './RelativeTime.importable';
+import { DateTime } from './DateTime';
 
 const pinnedPostContainer = (palette: Palette) => css`
 	border: 3px solid ${palette.border.pinnedPost};
@@ -164,17 +164,14 @@ export const PinnedPost = ({ pinnedPost, children, format }: Props) => {
 			/>
 			<div css={rowStyles(palette)}>
 				<SvgPinned />
-				{pinnedPost.blockFirstPublished !== undefined && (
+				{!isUndefined(pinnedPost.blockFirstPublished) && (
 					<div css={timeAgoStyles}>
 						From{' '}
-						<Island
-							priority="enhancement"
-							defer={{ until: 'visible' }}
-						>
-							<RelativeTime
-								then={pinnedPost.blockFirstPublished}
-							/>
-						</Island>
+						<DateTime
+							date={new Date(pinnedPost.blockFirstPublished)}
+							display="relative"
+							editionId="UK"
+						/>
 					</div>
 				)}
 			</div>