Hide Match Tab when no data

guardian · Nov 19, 2024 · 1b0ef5c · 1b0ef5c
1 parent 0ea529a
commit 1b0ef5c
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 4 deletions.
diff --git a/dotcom-rendering/src/components/GetMatchNav.importable.tsx b/dotcom-rendering/src/components/GetMatchNav.importable.tsx
@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { isObject } from '@guardian/libs';
 import { from } from '@guardian/source/foundations';
 import type { SWRConfiguration } from 'swr';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
@@ -36,6 +37,36 @@ const fallbackData = {
 	awayTeam: fallbackTeam,
 } satisfies MatchData;
 
+const validateMatchData = (data: unknown): data is MatchData => {
+	if (!isObject(data)) {
+		return false;
+	}
+
+	const homeTeam = data.homeTeam;
+	if (
+		!isObject(homeTeam) ||
+		typeof homeTeam.name !== 'string' ||
+		homeTeam.name.length === 0 ||
+		typeof homeTeam.score !== 'number' ||
+		isNaN(homeTeam.score)
+	) {
+		return false;
+	}
+
+	const awayTeam = data.awayTeam;
+	if (
+		!isObject(awayTeam) ||
+		typeof awayTeam.name !== 'string' ||
+		awayTeam.name.length === 0 ||
+		typeof awayTeam.score !== 'number' ||
+		isNaN(awayTeam.score)
+	) {
+		return false;
+	}
+
+	return true;
+};
+
 /**
  * Wrapper around `MatchNav` with loading and fallback.
  *
@@ -97,7 +128,14 @@ export const GetMatchNav = ({
 			);
 		}
 	}
-	if (data) {
+
+	if (!data) {
+		// this should never happen because we pass fallback data to SWR
+		return null;
+	}
+
+	const isDataValid = validateMatchData(data);
+	if (isDataValid) {
 		return (
 			<MatchNav
 				homeTeam={data.homeTeam}
@@ -107,6 +145,6 @@ export const GetMatchNav = ({
 		);
 	}
 
-	// this should never happen because we pass fallback data to SWR
+	// Invalid data indicates that we do not have the data for this fixture, likely because the match is old.
 	return null;
 };
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -109,7 +109,7 @@ const StandardGrid = ({
 								grid-template-areas:
 									'title  border  matchNav   . right-column'
 									'title  border  matchtabs  . right-column'
-									'.      border  headline   . right-column'
+									'title  border  headline   . right-column'
 									'.      border  standfirst . right-column'
 									'meta   border  media      . right-column'
 									'meta   border  body       . right-column'
@@ -152,7 +152,7 @@ const StandardGrid = ({
 							grid-template-areas:
 								'title  border  matchNav     right-column'
 								'title  border  matchtabs    right-column'
-								'.      border  headline     right-column'
+								'title  border  headline     right-column'
 								'.      border  standfirst   right-column'
 								'meta   border  media        right-column'
 								'meta   border  body         right-column'