Support league specific pages (#13536)

* select the correct league in the competition selector based on page id

* update page title to support competition pages

Author: marjisound

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

@@ -23,6 +23,7 @@ export const FootballCompetitionSelect = {
 	args: {
 		nations: regions,
 		kind: 'Result',
+		pageId: 'football/live',
 		onChange: fn(),
 	},
 	play: async ({ args, canvasElement }) => {

dotcom-rendering/src/components/FootballCompetitionSelect.tsx

@@ -5,6 +5,7 @@ import { palette } from '../palette';
 type Props = {
 	nations: Regions;
 	kind: FootballMatchKind;
+	pageId: string;
 	onChange: (competitionTag: string) => void;
 };
 
@@ -33,11 +34,13 @@ const getPagePath = (kind: FootballMatchKind) => {
 export const FootballCompetitionSelect = ({
 	nations,
 	kind,
+	pageId,
 	onChange,
 }: Props) => (
 	<Select
 		label="Choose league:"
 		onChange={(e) => onChange(e.target.value)}
+		value={pageId.startsWith('/') ? pageId : `/${pageId}`}
 		theme={{
 			textLabel: palette('--football-competition-select-text'),
 			textUserInput: palette('--football-competition-select-text'),

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

@@ -20,6 +20,7 @@ export const Results = {
 		edition: 'UK',
 		goToCompetitionSpecificPage: fn(),
 		renderAds: true,
+		pageId: 'football/results',
 	},
 } satisfies Story;
 

dotcom-rendering/src/components/FootballMatchesPage.tsx

@@ -22,6 +22,7 @@ type Props = {
 	goToCompetitionSpecificPage: (tag: string) => void;
 	getMoreDays?: () => Promise<Result<'failed', FootballMatches>>;
 	renderAds: boolean;
+	pageId: string;
 };
 
 const createTitle = (kind: FootballMatchKind, edition: EditionId) => {
@@ -48,6 +49,7 @@ export const FootballMatchesPage = ({
 	goToCompetitionSpecificPage,
 	getMoreDays,
 	renderAds,
+	pageId,
 }: Props) => (
 	<main id="maincontent" data-layout="FootballDataPageLayout">
 		<div
@@ -95,6 +97,7 @@ export const FootballMatchesPage = ({
 				<FootballCompetitionSelect
 					nations={nations}
 					kind={kind}
+					pageId={pageId}
 					onChange={goToCompetitionSpecificPage}
 				/>
 			</div>

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

@@ -8,7 +8,7 @@ import { FootballMatchesPage } from './FootballMatchesPage';
 
 const goToCompetitionSpecificPage =
 	(guardianBaseUrl: string) => (path: string) => {
-		const url = `${guardianBaseUrl}/${path}`;
+		const url = `${guardianBaseUrl}${path}`;
 		window.location.assign(url);
 	};
 
@@ -19,6 +19,7 @@ type Props = {
 	initialDays: FootballMatches;
 	edition: EditionId;
 	renderAds: boolean;
+	pageId: string;
 };
 
 export const FootballMatchesPageWrapper = ({
@@ -28,6 +29,7 @@ export const FootballMatchesPageWrapper = ({
 	initialDays,
 	edition,
 	renderAds,
+	pageId,
 }: Props) => (
 	<FootballMatchesPage
 		regions={nations}
@@ -39,5 +41,6 @@ export const FootballMatchesPageWrapper = ({
 			guardianBaseUrl,
 		)}
 		renderAds={renderAds}
+		pageId={pageId}
 	/>
 );

dotcom-rendering/src/layouts/FootballDataPageLayout.tsx

@@ -68,6 +68,7 @@ export const FootballDataPageLayout = ({ footballData }: Props) => {
 					initialDays={footballData.matchesList}
 					edition={footballData.editionId}
 					renderAds={renderAds}
+					pageId={footballData.config.pageId}
 				/>
 			</Island>
 

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

@@ -17,18 +17,16 @@ import { makePrefetchHeader } from './lib/header';
 import { recordTypeAndPlatform } from './lib/logging-store';
 import { renderFootballDataPage } from './render.footballDataPage.web';
 
-const decidePageKind = (
-	canonicalUrl: string | undefined,
-): FootballMatchKind => {
-	if (canonicalUrl?.includes('live')) {
+const decidePageKind = (pageId: string): FootballMatchKind => {
+	if (pageId?.includes('live')) {
 		return 'Live';
 	}
 
-	if (canonicalUrl?.includes('results')) {
+	if (pageId?.includes('results')) {
 		return 'Result';
 	}
 
-	if (canonicalUrl?.includes('fixtures')) {
+	if (pageId?.includes('fixtures')) {
 		return 'Fixture';
 	}
 
@@ -71,7 +69,7 @@ const parseFEFootballData = (data: FEFootballDataPage): DCRFootballDataPage => {
 
 	return {
 		matchesList: parsedMatchesList.value,
-		kind: decidePageKind(data.canonicalUrl),
+		kind: decidePageKind(data.config.pageId),
 		nextPage: data.nextPage,
 		previousPage: data.previousPage,
 		regions: parseFEFootballCompetitionRegions(data.filters),

dotcom-rendering/src/server/render.footballDataPage.web.tsx

@@ -4,6 +4,7 @@ import { FootballDataPage } from '../components/FootballDataPage';
 import type {
 	DCRFootballDataPage,
 	FootballMatchKind,
+	Regions,
 } from '../footballMatches';
 import {
 	ASSET_ORIGIN,
@@ -31,14 +32,31 @@ const decideDescription = (kind: FootballMatchKind) => {
 	}
 };
 
-const decideTitle = (kind: FootballMatchKind) => {
+const decideTitle = (
+	kind: FootballMatchKind,
+	pageId: string,
+	regions: Regions,
+) => {
+	const pagePath = pageId.startsWith('/') ? pageId.slice(1) : pageId;
+	const competitionName = regions
+		.flatMap((region) => region.competitions) // Flatten all competitions into a single array
+		.find((competition) => competition.url === `/${pagePath}`)?.name;
+
+	const footballTitle = '| Football | The Guardian';
+
 	switch (kind) {
 		case 'Live':
-			return 'Live matches | Football | The Guardian';
+			return `${
+				competitionName ? `Today's ${competitionName} ` : 'Live '
+			}matches ${footballTitle}`;
 		case 'Result':
-			return 'All results | Football | The Guardian';
+			return `${
+				competitionName ? `${competitionName} ` : 'All '
+			}results ${footballTitle}`;
 		case 'Fixture':
-			return 'All fixtures | Football | The Guardian';
+			return `${
+				competitionName ? `${competitionName} ` : 'All '
+			}fixtures ${footballTitle}`;
 	}
 };
 
@@ -90,7 +108,11 @@ export const renderFootballDataPage = (footballData: DCRFootballDataPage) => {
 		scriptTags,
 		css: extractedCss,
 		html,
-		title: decideTitle(footballData.kind),
+		title: decideTitle(
+			footballData.kind,
+			footballData.config.pageId,
+			footballData.regions,
+		),
 		description: decideDescription(footballData.kind),
 		canonicalUrl: footballData.canonicalUrl,
 		guardian: createGuardian({