Football Data Pages - Use ISO string instead of dates (#13547)

* update fixture

Author: andrewHEguardian

dotcom-rendering/fixtures/manual/footballData.ts

@@ -21,7 +21,7 @@ export const regions: Regions = [
 
 export const initialDays: FootballMatches = [
 	{
-		date: new Date('2022-01-01T00:00:00Z'),
+		dateISOString: new Date('2022-01-01T00:00:00Z').toISOString(),
 		competitions: [
 			{
 				id: '635',
@@ -31,7 +31,9 @@ export const initialDays: FootballMatches = [
 				matches: [
 					{
 						kind: 'Live',
-						dateTime: new Date('2022-01-01T11:11:00Z'),
+						dateTimeISOString: new Date(
+							'2022-01-01T11:11:00Z',
+						).toISOString(),
 						paId: '4482093',
 						homeTeam: {
 							name: 'Torino',
@@ -45,7 +47,9 @@ export const initialDays: FootballMatches = [
 					},
 					{
 						kind: 'Fixture',
-						dateTime: new Date('2022-01-01T19:45:00Z'),
+						dateTimeISOString: new Date(
+							'2022-01-01T19:45:00Z',
+						).toISOString(),
 						paId: '4482890',
 						homeTeam: 'Auxerre',
 						awayTeam: 'St Etienne',
@@ -60,7 +64,9 @@ export const initialDays: FootballMatches = [
 				matches: [
 					{
 						kind: 'Result',
-						dateTime: new Date('2022-01-01T20:00:00Z'),
+						dateTimeISOString: new Date(
+							'2022-01-01T20:00:00Z',
+						).toISOString(),
 						paId: '4482835',
 						homeTeam: {
 							name: 'Las Palmas',
@@ -82,7 +88,9 @@ export const initialDays: FootballMatches = [
 				matches: [
 					{
 						kind: 'Result',
-						dateTime: new Date('2022-01-01T20:00:00Z'),
+						dateTimeISOString: new Date(
+							'2022-01-01T20:00:00Z',
+						).toISOString(),
 						paId: '4482836',
 						homeTeam: {
 							name: 'Brighton & Hove Albion Women',
@@ -103,7 +111,7 @@ export const initialDays: FootballMatches = [
 
 export const moreDays: FootballMatches = [
 	{
-		date: new Date('2022-01-05T00:00:00Z'),
+		dateISOString: new Date('2022-01-05T00:00:00Z').toISOString(),
 		competitions: [
 			{
 				id: '635',
@@ -113,7 +121,9 @@ export const moreDays: FootballMatches = [
 				matches: [
 					{
 						kind: 'Fixture',
-						dateTime: new Date('2022-01-05T19:45:00Z'),
+						dateTimeISOString: new Date(
+							'2022-01-05T19:45:00Z',
+						).toISOString(),
 						paId: '4482890',
 						homeTeam: 'Juventus',
 						awayTeam: 'Roma',

dotcom-rendering/src/components/FootballMatchList.tsx

@@ -153,9 +153,9 @@ const MatchStatus = ({
 			return (
 				<time
 					css={matchStatusStyles}
-					dateTime={match.dateTime.toISOString()}
+					dateTime={match.dateTimeISOString}
 				>
-					{timeFormatter.format(match.dateTime)}
+					{timeFormatter.format(new Date(match.dateTimeISOString))}
 				</time>
 			);
 	}
@@ -194,7 +194,7 @@ const MatchWrapper = ({
 	now: Date;
 	children: ReactNode;
 }) => {
-	if (shouldRenderMatchLink(match.dateTime, now)) {
+	if (shouldRenderMatchLink(new Date(match.dateTimeISOString), now)) {
 		return (
 			<li css={matchListItemStyles}>
 				<a
@@ -388,9 +388,11 @@ export const FootballMatchList = ({
 							}
 						}
 					`}
-					key={day.date.toISOString()}
+					key={day.dateISOString}
 				>
-					<Day>{dateFormatter.format(day.date)}</Day>
+					<Day>
+						{dateFormatter.format(new Date(day.dateISOString))}
+					</Day>
 					{day.competitions.map((competition) => (
 						<Fragment key={competition.id}>
 							<CompetitionName>

dotcom-rendering/src/footballMatches.test.ts

@@ -36,7 +36,7 @@ describe('footballMatches', () => {
 		expect(result.length).toBe(1);
 
 		const day = result[0];
-		expect(day?.date.toISOString()).toBe('2025-03-03T00:00:00.000Z');
+		expect(day?.dateISOString).toBe('2025-03-03T00:00:00.000Z');
 		expect(day?.competitions.length).toBe(3);
 
 		const competition = day?.competitions[0];

dotcom-rendering/src/footballMatches.ts

@@ -21,7 +21,7 @@ type TeamScore = {
 
 type MatchData = {
 	paId: string;
-	dateTime: Date;
+	dateTimeISOString: string;
 };
 
 export type MatchResult = MatchData & {
@@ -57,7 +57,7 @@ type Competition = {
 };
 
 type FootballDay = {
-	date: Date;
+	dateISOString: string;
 	competitions: Competition[];
 };
 
@@ -162,14 +162,14 @@ const listParse =
 		return f(input, []);
 	};
 
-const parseDate = (a: string): Result<string, Date> => {
+const parseDate = (a: string): Result<string, string> => {
 	const d = new Date(a);
 
 	if (d.toString() === 'Invalid Date') {
 		return error(`${String(a)} isn't a valid Date`);
 	}
 
-	return ok(d);
+	return ok(d.toISOString());
 };
 
 const parseScore = (
@@ -188,7 +188,7 @@ const parseScore = (
 	return ok(team.score);
 };
 
-const parseMatchDate = (date: string): Result<string, Date> => {
+const parseMatchDate = (date: string): Result<string, string> => {
 	// Frontend appends a timezone in square brackets
 	const isoDate = date.split('[')[0];
 
@@ -224,7 +224,7 @@ const parseFixture = (
 		kind: 'Fixture',
 		homeTeam: cleanTeamName(feFixture.homeTeam.name),
 		awayTeam: cleanTeamName(feFixture.awayTeam.name),
-		dateTime: date.value,
+		dateTimeISOString: date.value,
 		paId: feFixture.id,
 	});
 };
@@ -267,7 +267,7 @@ export const parseMatchResult = (
 			name: cleanTeamName(feResult.awayTeam.name),
 			score: awayScore.value,
 		},
-		dateTime: date.value,
+		dateTimeISOString: date.value,
 		paId: feResult.id,
 		comment: feResult.comments,
 	});
@@ -311,7 +311,7 @@ const parseLiveMatch = (
 			name: cleanTeamName(feMatchDay.awayTeam.name),
 			score: awayScore.value,
 		},
-		dateTime: date.value,
+		dateTimeISOString: date.value,
 		paId: feMatchDay.id,
 		comment: feMatchDay.comments,
 		status: feMatchDay.matchStatus,
@@ -393,7 +393,7 @@ const parseFootballDay = (
 	}
 
 	return ok({
-		date: date.value,
+		dateISOString: date.value,
 		competitions: competitions.value,
 	});
 };