Football data pages - league selector ordering (#13608)

* rename nations to regions throughout
* add sorting

Author: andrewHEguardian

dotcom-rendering/fixtures/manual/footballData.ts

@@ -1,6 +1,6 @@
-import type { FootballMatches, Regions } from '../../src/footballMatches';
+import type { FootballMatches, Region } from '../../src/footballMatches';
 
-export const regions: Regions = [
+export const regions: Region[] = [
 	{
 		name: 'England',
 		competitions: [

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

@@ -21,7 +21,7 @@ type Story = StoryObj<typeof meta>;
 
 export const FootballCompetitionSelect = {
 	args: {
-		nations: regions,
+		regions,
 		kind: 'Result',
 		pageId: 'football/live',
 		onChange: fn(),

dotcom-rendering/src/components/FootballCompetitionSelect.tsx

@@ -1,9 +1,9 @@
 import { Option, Select } from '@guardian/source/react-components';
-import type { FootballMatchKind, Regions } from '../footballMatches';
+import type { FootballMatchKind, Region } from '../footballMatches';
 import { palette } from '../palette';
 
 type Props = {
-	nations: Regions;
+	regions: Region[];
 	kind: FootballMatchKind;
 	pageId: string;
 	onChange: (competitionTag: string) => void;
@@ -32,7 +32,7 @@ const getPagePath = (kind: FootballMatchKind) => {
 };
 
 export const FootballCompetitionSelect = ({
-	nations,
+	regions,
 	kind,
 	pageId,
 	onChange,
@@ -48,9 +48,9 @@ export const FootballCompetitionSelect = ({
 		}}
 	>
 		<Option value={getPagePath(kind)}>{allLabel(kind)}</Option>
-		{nations.map((nation) => (
-			<optgroup label={nation.name} key={nation.name}>
-				{nation.competitions.map((competition) => (
+		{regions.map((region) => (
+			<optgroup label={region.name} key={region.name}>
+				{region.competitions.map((competition) => (
 					<Option key={competition.name} value={competition.url}>
 						{competition.name}
 					</Option>

dotcom-rendering/src/components/FootballMatchesPage.tsx

@@ -8,7 +8,7 @@ import {
 import type {
 	FootballMatches,
 	FootballMatchKind,
-	Regions,
+	Region,
 } from '../footballMatches';
 import { grid } from '../grid';
 import type { EditionId } from '../lib/edition';
@@ -19,7 +19,7 @@ import { FootballCompetitionSelect } from './FootballCompetitionSelect';
 import { FootballMatchList } from './FootballMatchList';
 
 type Props = {
-	regions: Regions;
+	regions: Region[];
 	guardianBaseUrl: string;
 	kind: FootballMatchKind;
 	initialDays: FootballMatches;
@@ -46,7 +46,7 @@ const createTitle = (kind: FootballMatchKind, edition: EditionId) => {
 };
 
 export const FootballMatchesPage = ({
-	regions: nations,
+	regions,
 	guardianBaseUrl,
 	kind,
 	initialDays,
@@ -103,7 +103,7 @@ export const FootballMatchesPage = ({
 			`}
 		>
 			<FootballCompetitionSelect
-				nations={nations}
+				regions={regions}
 				kind={kind}
 				pageId={pageId}
 				onChange={goToCompetitionSpecificPage}

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

@@ -7,7 +7,7 @@ import {
 	type FootballMatchKind,
 	getParserErrorMessage,
 	parse,
-	type Regions,
+	type Region,
 } from '../footballMatches';
 import type { EditionId } from '../lib/edition';
 import type { Result } from '../lib/result';
@@ -62,7 +62,7 @@ const goToCompetitionSpecificPage =
 	};
 
 type Props = {
-	nations: Regions;
+	regions: Region[];
 	guardianBaseUrl: string;
 	ajaxUrl: string;
 	kind: FootballMatchKind;
@@ -74,7 +74,7 @@ type Props = {
 };
 
 export const FootballMatchesPageWrapper = ({
-	nations,
+	regions,
 	guardianBaseUrl,
 	ajaxUrl,
 	kind,
@@ -88,7 +88,7 @@ export const FootballMatchesPageWrapper = ({
 
 	return (
 		<FootballMatchesPage
-			regions={nations}
+			regions={regions}
 			guardianBaseUrl={guardianBaseUrl}
 			kind={kind}
 			initialDays={initialDays}

dotcom-rendering/src/footballMatches.ts

@@ -413,17 +413,17 @@ export const parse: (
 	frontendData: FEMatchByDateAndCompetition[],
 ) => Result<ParserError, FootballMatches> = listParse(parseFootballDay);
 
-export type Regions = Array<{
+export type Region = {
 	name: string;
 	competitions: Array<{ url: string; name: string }>;
-}>;
+};
 
 export type DCRFootballDataPage = {
 	matchesList: FootballMatches;
 	kind: FootballMatchKind;
 	nextPage?: string;
 	previousPage?: string;
-	regions: Regions;
+	regions: Region[];
 	nav: NavType;
 	editionId: EditionId;
 	guardianBaseURL: string;

dotcom-rendering/src/layouts/FootballDataPageLayout.tsx

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

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

@@ -0,0 +1,27 @@
+import { sortRegionsFunction } from './handler.footballDataPage.web';
+
+describe('sortRegionsFunction', () => {
+	it('should return Regions in expected order', () => {
+		const regions = [
+			{
+				name: 'English',
+				competitions: [],
+			},
+			{
+				name: 'Internationals',
+				competitions: [],
+			},
+			{
+				name: 'Unknown',
+				competitions: [],
+			},
+		];
+
+		const expectedNameOrder = ['Unknown', 'Internationals', 'English'];
+
+		const sortedRegions = regions.sort(sortRegionsFunction);
+		expect(sortedRegions.map((region) => region.name)).toEqual(
+			expectedNameOrder,
+		);
+	});
+});

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

@@ -6,7 +6,7 @@ import type {
 import type {
 	DCRFootballDataPage,
 	FootballMatchKind,
-	Regions,
+	Region,
 } from '../footballMatches';
 import { getParserErrorMessage, parse } from '../footballMatches';
 import { Pillar } from '../lib/articleFormat';
@@ -32,18 +32,32 @@ const decidePageKind = (pageId: string): FootballMatchKind => {
 	throw new Error('Could not determine football page kind');
 };
 
+const regionsPriority = [
+	'Internationals',
+	'English',
+	'European',
+	'Scottish',
+	'Rest of world',
+];
+
+export const sortRegionsFunction = (a: Region, b: Region): number => {
+	return regionsPriority.indexOf(a.name) - regionsPriority.indexOf(b.name);
+};
+
 const parseFEFootballCompetitionRegions = (
 	competitionRegions: Record<string, FEFootballCompetition[]>,
-): Regions => {
-	return Object.entries(competitionRegions).map(([key, competition]) => {
-		return {
-			name: key,
-			competitions: competition.map((comp) => ({
-				url: comp.url,
-				name: comp.name,
-			})),
-		};
-	});
+): Region[] => {
+	return Object.entries(competitionRegions)
+		.map(([key, competition]) => {
+			return {
+				name: key,
+				competitions: competition.map((comp) => ({
+					url: comp.url,
+					name: comp.name,
+				})),
+			};
+		})
+		.sort(sortRegionsFunction);
 };
 
 const parseFEFootballData = (data: FEFootballDataPage): DCRFootballDataPage => {

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

@@ -4,7 +4,7 @@ import { FootballDataPage } from '../components/FootballDataPage';
 import type {
 	DCRFootballDataPage,
 	FootballMatchKind,
-	Regions,
+	Region,
 } from '../footballMatches';
 import {
 	ASSET_ORIGIN,
@@ -35,7 +35,7 @@ const decideDescription = (kind: FootballMatchKind) => {
 const decideTitle = (
 	kind: FootballMatchKind,
 	pageId: string,
-	regions: Regions,
+	regions: Region[],
 ) => {
 	const pagePath = pageId.startsWith('/') ? pageId.slice(1) : pageId;
 	const competitionName = regions