Football Fixtures/Results Pages - Get More! (#13550)

* feat: implement getMoreDays football data functionality
* Add bottom padding to More button
* use ajaxURL from config for api
- add slash to "All" select value

Author: andrewHEguardian

dotcom-rendering/src/components/FootballCompetitionSelect.tsx

@@ -23,11 +23,11 @@ const allLabel = (kind: FootballMatchKind): string => {
 const getPagePath = (kind: FootballMatchKind) => {
 	switch (kind) {
 		case 'Fixture':
-			return 'football/fixtures';
+			return '/football/fixtures';
 		case 'Live':
-			return 'football/live';
+			return '/football/live';
 		case 'Result':
-			return 'football/results';
+			return '/football/results';
 	}
 };
 

dotcom-rendering/src/components/FootballMatchList.tsx

@@ -442,7 +442,9 @@ export const FootballMatchList = ({
 						css={css`
 							grid-column: centre-column-start / centre-column-end;
 
-							padding-top: ${space[10]}px;
+							${until.leftCol} {
+								padding-top: ${space[10]}px;
+							}
 						`}
 					>
 						<Button

dotcom-rendering/src/components/FootballMatchesPage.tsx

@@ -76,6 +76,8 @@ export const FootballMatchesPage = ({
 					right: 0;
 				}
 			}
+
+			padding-bottom: ${space[9]}px;
 		`}
 	>
 		<h1

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

@@ -1,11 +1,60 @@
-import type {
-	FootballMatches,
-	FootballMatchKind,
-	Regions,
+import { isObject, isUndefined } from '@guardian/libs';
+import type { Dispatch, SetStateAction } from 'react';
+import { useState } from 'react';
+import type { FEFootballDataPage } from '../feFootballDataPage';
+import {
+	type FootballMatches,
+	type FootballMatchKind,
+	getParserErrorMessage,
+	parse,
+	type Regions,
 } from '../footballMatches';
 import type { EditionId } from '../lib/edition';
+import type { Result } from '../lib/result';
+import { error, ok } from '../lib/result';
 import { FootballMatchesPage } from './FootballMatchesPage';
 
+export const getMoreDays =
+	(
+		ajaxUrl: string,
+		nextPage: string,
+		setNextPage: Dispatch<SetStateAction<string | undefined>>,
+	) =>
+	async (): Promise<Result<'failed', FootballMatches>> => {
+		try {
+			const fetchResponse = await fetch(`${ajaxUrl}${nextPage}.json?dcr`);
+
+			const responseJson: unknown = await fetchResponse.json();
+
+			if (isObject(responseJson)) {
+				const feFootballData = responseJson as FEFootballDataPage;
+				const parsedFootballMatches = parse(feFootballData.matchesList);
+
+				if (parsedFootballMatches.kind === 'error') {
+					throw new Error(
+						`Failed to parse matches: ${getParserErrorMessage(
+							parsedFootballMatches.error,
+						)}`,
+					);
+				}
+
+				setNextPage(feFootballData.nextPage);
+
+				return ok(parsedFootballMatches.value);
+			}
+			throw new Error('Failed to parse response JSON as an object');
+		} catch (e) {
+			if (e instanceof Error) {
+				window.guardian.modules.sentry.reportError(
+					e,
+					'get-more-football-matches-button',
+				);
+			}
+
+			return error('failed');
+		}
+	};
+
 const goToCompetitionSpecificPage =
 	(guardianBaseUrl: string) => (path: string) => {
 		const url = `${guardianBaseUrl}${path}`;
@@ -15,8 +64,10 @@ const goToCompetitionSpecificPage =
 type Props = {
 	nations: Regions;
 	guardianBaseUrl: string;
+	ajaxUrl: string;
 	kind: FootballMatchKind;
 	initialDays: FootballMatches;
+	secondPage?: string;
 	edition: EditionId;
 	renderAds: boolean;
 	pageId: string;
@@ -25,22 +76,33 @@ type Props = {
 export const FootballMatchesPageWrapper = ({
 	nations,
 	guardianBaseUrl,
+	ajaxUrl,
 	kind,
 	initialDays,
+	secondPage,
 	edition,
 	renderAds,
 	pageId,
-}: Props) => (
-	<FootballMatchesPage
-		regions={nations}
-		guardianBaseUrl={guardianBaseUrl}
-		kind={kind}
-		initialDays={initialDays}
-		edition={edition}
-		goToCompetitionSpecificPage={goToCompetitionSpecificPage(
-			guardianBaseUrl,
-		)}
-		renderAds={renderAds}
-		pageId={pageId}
-	/>
-);
+}: Props) => {
+	const [nextPage, setNextPage] = useState(secondPage);
+
+	return (
+		<FootballMatchesPage
+			regions={nations}
+			guardianBaseUrl={guardianBaseUrl}
+			kind={kind}
+			initialDays={initialDays}
+			edition={edition}
+			goToCompetitionSpecificPage={goToCompetitionSpecificPage(
+				guardianBaseUrl,
+			)}
+			getMoreDays={
+				isUndefined(nextPage)
+					? undefined
+					: getMoreDays(ajaxUrl, nextPage, setNextPage)
+			}
+			renderAds={renderAds}
+			pageId={pageId}
+		/>
+	);
+};

dotcom-rendering/src/footballMatches.ts

@@ -398,6 +398,17 @@ const parseFootballDay = (
 	});
 };
 
+export const getParserErrorMessage = (parserError: ParserError): string => {
+	switch (parserError.kind) {
+		case 'InvalidMatchDay':
+			return parserError.errors
+				.map((e) => getParserErrorMessage(e))
+				.join(', ');
+		default:
+			return `${parserError.kind}: ${parserError.message}`;
+	}
+};
+
 export const parse: (
 	frontendData: FEMatchByDateAndCompetition[],
 ) => Result<ParserError, FootballMatches> = listParse(parseFootballDay);

dotcom-rendering/src/layouts/FootballDataPageLayout.tsx

@@ -64,8 +64,10 @@ export const FootballDataPageLayout = ({ footballData }: Props) => {
 				<FootballMatchesPageWrapper
 					nations={footballData.regions}
 					guardianBaseUrl={footballData.guardianBaseURL}
+					ajaxUrl={footballData.config.ajaxUrl}
 					kind={footballData.kind}
 					initialDays={footballData.matchesList}
+					secondPage={footballData.nextPage}
 					edition={footballData.editionId}
 					renderAds={renderAds}
 					pageId={footballData.config.pageId}

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

@@ -6,10 +6,9 @@ import type {
 import type {
 	DCRFootballDataPage,
 	FootballMatchKind,
-	ParserError,
 	Regions,
 } from '../footballMatches';
-import { parse } from '../footballMatches';
+import { getParserErrorMessage, parse } from '../footballMatches';
 import { Pillar } from '../lib/articleFormat';
 import { extractNAV } from '../model/extract-nav';
 import { validateAsFootballDataPageType } from '../model/validate';
@@ -18,30 +17,21 @@ import { recordTypeAndPlatform } from './lib/logging-store';
 import { renderFootballDataPage } from './render.footballDataPage.web';
 
 const decidePageKind = (pageId: string): FootballMatchKind => {
-	if (pageId?.includes('live')) {
+	if (pageId.includes('live')) {
 		return 'Live';
 	}
 
-	if (pageId?.includes('results')) {
+	if (pageId.includes('results')) {
 		return 'Result';
 	}
 
-	if (pageId?.includes('fixtures')) {
+	if (pageId.includes('fixtures')) {
 		return 'Fixture';
 	}
 
 	throw new Error('Could not determine football page kind');
 };
 
-const getParserErrorMessage = (error: ParserError): string => {
-	switch (error.kind) {
-		case 'InvalidMatchDay':
-			return error.errors.map((e) => getParserErrorMessage(e)).join(', ');
-		default:
-			return `${error.kind}: ${error.message}`;
-	}
-};
-
 const parseFEFootballCompetitionRegions = (
 	competitionRegions: Record<string, FEFootballCompetition[]>,
 ): Regions => {