Newswires UI: Update pagination logic

guardian · Jan 24, 2025 · 2aec945 · 2aec945
1 parent 9512277
commit 2aec945
Show file tree

Hide file tree

Showing 5 changed files with 297 additions and 343 deletions.
diff --git a/newswires/client/src/Feed.tsx b/newswires/client/src/Feed.tsx
@@ -25,9 +25,7 @@ export const Feed = () => {
 						titleSize="s"
 					/>
 				)}
-			{(status == 'success' ||
-				status == 'offline' ||
-				status == 'loading-more') &&
+			{(status == 'success' || status == 'offline') &&
 				queryData.results.length > 0 && (
 					<WireItemTable wires={queryData.results} />
 				)}

diff --git a/newswires/client/src/WireItemTable.tsx b/newswires/client/src/WireItemTable.tsx
@@ -14,6 +14,7 @@ import {
 	useEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
+import { useState } from 'react';
 import sanitizeHtml from 'sanitize-html';
 import { useSearch } from './context/SearchContext.tsx';
 import { formatTimestamp } from './formatTimestamp';
@@ -32,15 +33,24 @@ const fadeOutBackground = css`
 `;
 
 export const WireItemTable = ({ wires }: { wires: WireData[] }) => {
-	const {
-		config,
-		handleSelectItem,
-		state: { status },
-		loadMoreResults,
-	} = useSearch();
+	const { config, handleSelectItem, loadMoreResults } = useSearch();
+
+	const [isLoading, setIsLoading] = useState<boolean>(false);
 
 	const selectedWireId = config.itemId;
 
+	const handleLoadMoreResults = () => {
+		if (wires.length > 0) {
+			setIsLoading(true);
+
+			const beforeId = Math.min(...wires.map((wire) => wire.id)).toString();
+
+			void loadMoreResults(beforeId).finally(() => {
+				setIsLoading(false);
+			});
+		}
+	};
+
 	return (
 		<>
 			<EuiTable
@@ -71,13 +81,13 @@ export const WireItemTable = ({ wires }: { wires: WireData[] }) => {
 				</EuiTableBody>
 			</EuiTable>
 			<EuiButton
-				isLoading={status === 'loading-more'}
+				isLoading={isLoading}
 				css={css`
 					margin-top: 12px;
 				`}
-				onClick={loadMoreResults}
+				onClick={handleLoadMoreResults}
 			>
-				{status === 'loading-more' ? 'Loading' : 'Load more'}
+				{isLoading ? 'Loading' : 'Load more'}
 			</EuiButton>
 		</>
 	);
@@ -118,6 +128,7 @@ const WireDataRow = ({
 					background-color: ${primaryBgColor};
 					border-left: 4px solid ${theme.euiTheme.colors.accent};
 				}
+
 				border-left: 4px solid
 					${selected ? theme.euiTheme.colors.primary : 'transparent'};
 				${isFromRefresh ? fadeOutBackground : ''}