Football tables - pass the current date through components (#13674)

* Passes the server rendering iso time to the football match list component through the tree as it needs it to decide if it is going to render a link or not. Moves it from inside the component.

Author: oliverabrahams

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

@@ -34,6 +34,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default = {
 	args: {
+		now: '2025-03-24T15:53:12.604Z',
 		edition: 'UK',
 		guardianBaseUrl: 'https://www.theguardian.com',
 		initialDays,

dotcom-rendering/src/components/FootballMatchList.tsx

@@ -32,6 +32,7 @@ type Props = {
 	edition: EditionId;
 	guardianBaseUrl: string;
 	getMoreDays?: () => Promise<Result<'failed', FootballMatches>>;
+	now: string;
 };
 
 const REMOVE_TRAILING_DOTS_REGEX = /\.+$/;
@@ -221,10 +222,12 @@ const MatchWrapper = ({
 	children,
 }: {
 	match: FootballMatch;
-	now: Date;
+	now: string;
 	children: ReactNode;
 }) => {
-	if (shouldRenderMatchLink(new Date(match.dateTimeISOString), now)) {
+	if (
+		shouldRenderMatchLink(new Date(match.dateTimeISOString), new Date(now))
+	) {
 		return (
 			<li css={matchListItemStyles}>
 				<a
@@ -260,7 +263,7 @@ const Match = ({
 }: {
 	match: FootballMatch;
 	timeFormatter: Intl.DateTimeFormat;
-	now: Date;
+	now: string;
 }) => (
 	<MatchWrapper match={match} now={now}>
 		<MatchStatus match={match} timeFormatter={timeFormatter} />
@@ -387,14 +390,13 @@ export const FootballMatchList = ({
 	guardianBaseUrl,
 	initialDays,
 	getMoreDays,
+	now,
 }: Props) => {
 	const dateFormatter = getDateFormatter(edition);
 	const timeFormatter = getTimeFormatter(edition);
 
 	const [days, setDays] = useState(initialDays);
 	const [isError, setIsError] = useState<boolean>(false);
-	const now = new Date();
-
 	return (
 		<>
 			{days.map((day) => (

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

@@ -13,6 +13,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Results = {
 	args: {
+		now: '2025-03-24T15:53:12.604Z',
 		regions,
 		guardianBaseUrl: 'https://www.theguardian.com',
 		kind: 'Result',

dotcom-rendering/src/components/FootballMatchesPage.tsx

@@ -28,6 +28,7 @@ type Props = {
 	getMoreDays?: () => Promise<Result<'failed', FootballMatches>>;
 	renderAds: boolean;
 	pageId: string;
+	now: string;
 };
 
 const createTitle = (kind: FootballMatchKind, edition: EditionId) => {
@@ -47,6 +48,7 @@ const createTitle = (kind: FootballMatchKind, edition: EditionId) => {
 
 export const FootballMatchesPage = ({
 	regions,
+	now,
 	guardianBaseUrl,
 	kind,
 	initialDays,
@@ -121,6 +123,7 @@ export const FootballMatchesPage = ({
 			`}
 		>
 			<FootballMatchList
+				now={now}
 				initialDays={initialDays}
 				edition={edition}
 				getMoreDays={getMoreDays}

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

@@ -63,6 +63,7 @@ const goToCompetitionSpecificPage =
 
 type Props = {
 	regions: Region[];
+	now: string;
 	guardianBaseUrl: string;
 	ajaxUrl: string;
 	kind: FootballMatchKind;
@@ -75,6 +76,7 @@ type Props = {
 
 export const FootballMatchesPageWrapper = ({
 	regions,
+	now,
 	guardianBaseUrl,
 	ajaxUrl,
 	kind,
@@ -92,6 +94,7 @@ export const FootballMatchesPageWrapper = ({
 			guardianBaseUrl={guardianBaseUrl}
 			kind={kind}
 			initialDays={initialDays}
+			now={now}
 			edition={edition}
 			goToCompetitionSpecificPage={goToCompetitionSpecificPage(
 				guardianBaseUrl,

dotcom-rendering/src/footballMatches.ts

@@ -379,6 +379,7 @@ export type Region = {
 
 export type DCRFootballDataPage = {
 	matchesList: FootballMatches;
+	now: string;
 	kind: FootballMatchKind;
 	nextPage?: string;
 	previousPage?: string;

dotcom-rendering/src/layouts/FootballDataPageLayout.stories.tsx

@@ -15,6 +15,7 @@ type Story = StoryObj<typeof meta>;
 export const Results = {
 	args: {
 		footballData: {
+			now: '2025-03-24T15:53:12.604Z',
 			matchesList: initialDays,
 			regions,
 			kind: 'Result',

dotcom-rendering/src/layouts/FootballDataPageLayout.tsx

@@ -63,6 +63,7 @@ export const FootballDataPageLayout = ({ footballData }: Props) => {
 			<Island priority="feature" defer={{ until: 'visible' }}>
 				<FootballMatchesPageWrapper
 					regions={footballData.regions}
+					now={footballData.now}
 					guardianBaseUrl={footballData.guardianBaseURL}
 					ajaxUrl={footballData.config.ajaxUrl}
 					kind={footballData.kind}

dotcom-rendering/src/server/handler.footballDataPage.web.ts

@@ -73,6 +73,7 @@ const parseFEFootballData = (data: FEFootballDataPage): DCRFootballDataPage => {
 
 	return {
 		matchesList: parsedMatchesList.value,
+		now: new Date().toISOString(),
 		kind: decidePageKind(data.config.pageId),
 		nextPage: data.nextPage,
 		previousPage: data.previousPage,