Football tables data types (#13705)

Add FootballTablesPage route in dev server
Add frontend types for football tables and their relevant schema
Validate frontend tables json response
Add DCR type for football tables
Rename and create types in order to have a common type for both matches list and tables
Add parser for parsing frontend football tables into DCR tables
Add logic to decide to render football matches or tables within the football data layout



---------

Co-authored-by: Jamie B <[email protected]>
Co-authored-by: Andrew Howe-Ely <[email protected]>
Co-authored-by: Oliver Abrahams <[email protected]>

Author: 4 people

dotcom-rendering/fixtures/generated/football-live.ts

@@ -1,4 +1,5 @@
-import type { FootballMatches, Region } from '../../src/footballMatches';
+import type { Region } from '../../src/footballDataPage';
+import type { FootballMatches } from '../../src/footballMatches';
 
 export const regions: Region[] = [
 	{

dotcom-rendering/fixtures/manual/footballData.ts

@@ -4,7 +4,7 @@ import type {
 	FEMatchByDateAndCompetition,
 	FEMatchDay,
 	FEResult,
-} from '../../src/feFootballDataPage';
+} from '../../src/frontend/feFootballMatchListPage';
 
 const matchData = {
 	id: '1',
@@ -91,6 +91,7 @@ export const emptyMatches: FEMatchByDateAndCompetition[] = [
 					url: '/football/premierleague',
 					fullName: 'Premier League',
 					nation: 'English',
+					tableDividers: [],
 				},
 				matches: [],
 			},

dotcom-rendering/fixtures/manual/footballMatches.ts

@@ -15,7 +15,8 @@ const program = TJS.getProgramFromFiles(
 		path.resolve(`${root}/src/frontend/feTagPage.ts`),
 		path.resolve(`${root}/src/types/newslettersPage.ts`),
 		path.resolve(`${root}/src/types/editionsCrossword.ts`),
-		path.resolve(`${root}/src/feFootballDataPage.ts`),
+		path.resolve(`${root}/src/frontend/feFootballMatchListPage.ts`),
+		path.resolve(`${root}/src/frontend/feFootballTablesPage.ts`),
 	],
 	{
 		skipLibCheck: true,
@@ -59,8 +60,12 @@ const schemas = [
 		file: `${root}/src/model/editions-crossword-schema.json`,
 	},
 	{
-		typeName: 'FEFootballDataPage',
-		file: `${root}/src/model/fe-football-data-page-schema.json`,
+		typeName: 'FEFootballMatchListPage',
+		file: `${root}/src/frontend/schemas/feFootballMatchListPage.json`,
+	},
+	{
+		typeName: 'FEFootballTablesPage',
+		file: `${root}/src/frontend/schemas/feFootballTablesPage.json`,
 	},
 ];
 

dotcom-rendering/scripts/jsonSchema/schema.mjs

@@ -9,7 +9,7 @@ const { configOverrides } = require('../../fixtures/config-overrides');
 const { switchOverrides } = require('../../fixtures/switch-overrides');
 const {
 	validateAsFEArticle,
-	validateAsFootballDataPageType,
+	validateAsFootballMatchListPage,
 } = require('../../src/model/validate');
 
 const root = resolve(__dirname, '..', '..');
@@ -327,15 +327,16 @@ requests.push(
 			delete json.config.weatherapiurl;
 			delete json.config.isAdFree;
 			delete json.config.userBenefitsApiUrl;
+			delete json.config.frontendSentryDsn;
 
-			const footballDataPageData = validateAsFootballDataPageType(json);
+			const footballMatchListPage = validateAsFootballMatchListPage(json);
 
 			// Write the new frontend fixture data
 			const contents = `${HEADER}
-			import type { FEFootballDataPage } from '../../src/feFootballDataPage';
+			import type { FEFootballMatchListPage } from '../../src/frontend/feFootballMatchListPage';
 
-			export const footballData: FEFootballDataPage = ${JSON.stringify(
-				footballDataPageData,
+			export const footballData: FEFootballMatchListPage = ${JSON.stringify(
+				footballMatchListPage,
 				null,
 				4,
 			)}

dotcom-rendering/scripts/test-data/gen-fixtures.js

@@ -1,5 +1,6 @@
 import { Option, Select } from '@guardian/source/react-components';
-import type { FootballMatchKind, Region } from '../footballMatches';
+import type { Region } from '../footballDataPage';
+import type { FootballMatchKind } from '../footballMatches';
 import { palette } from '../palette';
 
 type FootballSelectKind = FootballMatchKind | 'Tables';

dotcom-rendering/src/components/FootballCompetitionSelect.tsx

@@ -1,6 +1,9 @@
 import { Global } from '@emotion/react';
 import { StrictMode } from 'react';
-import type { DCRFootballDataPage } from '../footballMatches';
+import type {
+	FootballMatchListPage,
+	FootballTablesPage,
+} from '../footballDataPage';
 import { FootballDataPageLayout } from '../layouts/FootballDataPageLayout';
 import { buildAdTargeting } from '../lib/ad-targeting';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
@@ -17,7 +20,7 @@ import { SetAdTargeting } from './SetAdTargeting.importable';
 import { SkipTo } from './SkipTo';
 
 type Props = {
-	footballData: DCRFootballDataPage;
+	footballData: FootballMatchListPage | FootballTablesPage;
 };
 
 /**

dotcom-rendering/src/components/FootballDataPage.tsx

@@ -436,6 +436,7 @@ export const FootballMatchList = ({
 
 	const [days, setDays] = useState(initialDays);
 	const [isError, setIsError] = useState<boolean>(false);
+
 	return (
 		<>
 			{days.map((day) => (

dotcom-rendering/src/components/FootballMatchList.tsx

@@ -5,11 +5,8 @@ import {
 	space,
 	until,
 } from '@guardian/source/foundations';
-import type {
-	FootballMatches,
-	FootballMatchKind,
-	Region,
-} from '../footballMatches';
+import type { Region } from '../footballDataPage';
+import type { FootballMatches, FootballMatchKind } from '../footballMatches';
 import { grid } from '../grid';
 import type { EditionId } from '../lib/edition';
 import type { Result } from '../lib/result';

dotcom-rendering/src/components/FootballMatchesPage.tsx

@@ -1,14 +1,14 @@
 import { isObject, isUndefined } from '@guardian/libs';
 import type { Dispatch, SetStateAction } from 'react';
 import { useState } from 'react';
-import type { FEFootballDataPage } from '../feFootballDataPage';
+import type { Region } from '../footballDataPage';
 import {
 	type FootballMatches,
 	type FootballMatchKind,
 	getParserErrorMessage,
 	parse,
-	type Region,
 } from '../footballMatches';
+import type { FEFootballMatchListPage } from '../frontend/feFootballMatchListPage';
 import type { EditionId } from '../lib/edition';
 import type { Result } from '../lib/result';
 import { error, ok } from '../lib/result';
@@ -27,7 +27,7 @@ export const getMoreDays =
 			const responseJson: unknown = await fetchResponse.json();
 
 			if (isObject(responseJson)) {
-				const feFootballData = responseJson as FEFootballDataPage;
+				const feFootballData = responseJson as FEFootballMatchListPage;
 				const parsedFootballMatches = parse(feFootballData.matchesList);
 
 				if (parsedFootballMatches.kind === 'error') {