From 4383b48cee0467d1a8e401b1c58fba0b18ebadfe Mon Sep 17 00:00:00 2001
From: Pete F <pete.faulconbridge@theguardian.com>
Date: Tue, 24 Sep 2024 20:20:04 +0100
Subject: [PATCH] Basic list of keyword links on homepage

---
 newswires/client/src/App.tsx        |  1 -
 newswires/client/src/Home.tsx       | 77 ++++++++++++++++++++++++-----
 newswires/client/src/sharedTypes.ts |  9 ++++
 3 files changed, 75 insertions(+), 12 deletions(-)

diff --git a/newswires/client/src/App.tsx b/newswires/client/src/App.tsx
index 14ee4f4..10e437a 100644
--- a/newswires/client/src/App.tsx
+++ b/newswires/client/src/App.tsx
@@ -1,5 +1,4 @@
 import {
-	EuiEmptyPrompt,
 	EuiHeader,
 	EuiHeaderSectionItem,
 	EuiPageTemplate,
diff --git a/newswires/client/src/Home.tsx b/newswires/client/src/Home.tsx
index 3b3a762..416704c 100644
--- a/newswires/client/src/Home.tsx
+++ b/newswires/client/src/Home.tsx
@@ -1,5 +1,15 @@
-import { EuiEmptyPrompt } from '@elastic/eui';
+import {
+	EuiBadge,
+	EuiButton,
+	EuiEmptyPrompt,
+	EuiFlexGroup,
+	EuiFlexItem,
+	EuiListGroup,
+} from '@elastic/eui';
+import { Fragment, useEffect, useMemo, useState } from 'react';
 import { SearchBox } from './SearchBox';
+import type { KeywordCounts } from './sharedTypes';
+import { KeywordCountsSchema } from './sharedTypes';
 import { useHistory } from './urlState';
 
 export function Home({
@@ -8,15 +18,60 @@ export function Home({
 	updateQuery: (newQuery: string) => void;
 }) {
 	const { currentState } = useHistory();
-	return (
-		<EuiEmptyPrompt
-			title={<h2>Search wires</h2>}
-			body={
-				<SearchBox
-					initialQuery={currentState.params?.q ?? ''}
-					update={updateQuery}
-				/>
-			}
-		/>
+	const [keywords, setKeywords] = useState<KeywordCounts>([]);
+
+	useEffect(() => {
+		fetch('api/keywords?limit=5')
+			.then((response) => {
+				if (response.ok) {
+					return response.json();
+				}
+			})
+			.then((data) => {
+				const maybeKeywords = KeywordCountsSchema.safeParse(data);
+				if (maybeKeywords.success) {
+					setKeywords(maybeKeywords.data);
+				} else {
+					console.error('Error parsing keywords:', maybeKeywords.error);
+				}
+			})
+			.catch((error) => {
+				console.error('Error fetching keywords:', error);
+			});
+	});
+
+	const body = (
+		<EuiFlexGroup direction="column" justifyContent="center">
+			<SearchBox
+				initialQuery={currentState.params?.q ?? ''}
+				update={updateQuery}
+			/>
+			{keywords.length > 0 && <KeywordsList keywords={keywords} />}
+		</EuiFlexGroup>
 	);
+
+	return <EuiEmptyPrompt title={<h2>Search wires</h2>} body={body} />;
 }
+
+const KeywordsList = ({ keywords }: { keywords: KeywordCounts }) => {
+	const sortedKeywords = useMemo(() => {
+		return keywords.sort((a, b) => b.count - a.count);
+	}, [keywords]);
+
+	return (
+		<EuiFlexGroup>
+			<EuiListGroup flush={true}>
+				{sortedKeywords.map(({ keyword, count }) => (
+					// TODO: fix query when keyword support added to search:
+					//     - specify as keyword rather than 'q'
+					//     - make sure keyword text is properly encoded
+					//     - handle quote marks if still present in response
+					<EuiButton key={keyword} color="text" href={`/feed?q=${keyword}`}>
+						{keyword.replaceAll('"', '')}{' '}
+						<EuiBadge color={'subdued'}>{count}</EuiBadge>
+					</EuiButton>
+				))}
+			</EuiListGroup>
+		</EuiFlexGroup>
+	);
+};
diff --git a/newswires/client/src/sharedTypes.ts b/newswires/client/src/sharedTypes.ts
index 8f2928a..a960807 100644
--- a/newswires/client/src/sharedTypes.ts
+++ b/newswires/client/src/sharedTypes.ts
@@ -24,3 +24,12 @@ export const WireDataSchema = z.object({
 });
 
 export type WireData = z.infer<typeof WireDataSchema>;
+
+const KeywordCountSchema = z.object({
+	keyword: z.string(),
+	count: z.number(),
+});
+
+export const KeywordCountsSchema = z.array(KeywordCountSchema);
+
+export type KeywordCounts = z.infer<typeof KeywordCountsSchema>;