Fix Pagination thread count in Discussion

dotcom-rendering/fixtures/manual/discussionWithTwoComments.ts

@@ -3,15 +3,15 @@ import type { GetDiscussionSuccess } from '../../src/types/discussion';
 export const discussionWithTwoComments = {
 	status: 'ok',
 	currentPage: 1,
-	pages: 0,
+	pages: 1,
 	pageSize: 100,
 	orderBy: 'oldest',
 	discussion: {
 		key: '/p/39f5x',
 		webUrl: 'https://www.theguardian.com/science/grrlscientist/2012/aug/07/3',
 		apiUrl: 'https://discussion.guardianapis.com/discussion-api/discussion//p/39f5x',
-		commentCount: 0,
-		topLevelCommentCount: 0,
+		commentCount: 2,
+		topLevelCommentCount: 2,
 		isClosedForComments: false,
 		isClosedForRecommendation: false,
 		isThreaded: true,

dotcom-rendering/fixtures/manual/short-discussion.ts

@@ -8,13 +8,13 @@ export const shortDiscussion = {
 	orderBy: 'oldest',
 	discussion: {
 		apiUrl: 'https://discussion.guardianapis.com/discussion-api/discussion//p/4v8kk',
-		commentCount: 7,
+		commentCount: 2,
 		isClosedForComments: true,
 		isClosedForRecommendation: true,
 		isThreaded: true,
 		key: '/p/4v8kk',
 		title: 'Stevie Nicks to release double album of songs from her past',
-		topLevelCommentCount: 6,
+		topLevelCommentCount: 2,
 		webUrl: 'https://www.theguardian.com/music/2014/jul/25/stevie-nicks-ro-release-double-album-of-songs-from-her-past',
 		comments: [
 			{

dotcom-rendering/src/components/Discussion.tsx

@@ -9,7 +9,6 @@ import {
 	getCommentContext,
 	initFiltersFromLocalStorage,
 } from '../lib/getCommentContext';
-import { useCommentCount } from '../lib/useCommentCount';
 import { palette as themePalette } from '../palette';
 import type {
 	CommentForm,
@@ -96,9 +95,10 @@ type State = {
 	isClosedForComments: boolean;
 	isExpanded: boolean;
 	commentPage: number;
+	commentCount: number | undefined;
+	topLevelCommentCount: number;
 	filters: FilterOptions;
 	hashCommentId: number | undefined;
-	totalPages: number;
 	loading: boolean;
 	topForm: CommentForm;
 	replyForm: CommentForm;
@@ -115,9 +115,10 @@ const initialState: State = {
 	isClosedForComments: false,
 	isExpanded: false,
 	commentPage: 1,
+	commentCount: undefined,
+	topLevelCommentCount: 0,
 	filters: initFiltersFromLocalStorage(),
 	hashCommentId: undefined,
-	totalPages: 0,
 	loading: true,
 	topForm: initialCommentFormState,
 	replyForm: initialCommentFormState,
@@ -129,7 +130,8 @@ type Action =
 			type: 'commentsLoaded';
 			comments: CommentType[];
 			isClosedForComments: boolean;
-			totalPages: number;
+			commentCount: number;
+			topLevelCommentCount: number;
 	  }
 	| { type: 'expandComments' }
 	| { type: 'addComment'; comment: CommentType }
@@ -151,7 +153,8 @@ const reducer = (state: State, action: Action): State => {
 				...state,
 				comments: action.comments,
 				isClosedForComments: action.isClosedForComments,
-				totalPages: action.totalPages,
+				commentCount: action.commentCount,
+				topLevelCommentCount: action.topLevelCommentCount,
 				loading: false,
 			};
 		case 'addComment':
@@ -261,17 +264,16 @@ export const Discussion = ({
 			commentPage,
 			filters,
 			hashCommentId,
-			totalPages,
 			loading,
 			topForm,
 			replyForm,
 			bottomForm,
+			topLevelCommentCount,
+			commentCount,
 		},
 		dispatch,
 	] = useReducer(reducer, initialState);
 
-	const commentCount = useCommentCount(discussionApiUrl, shortUrlId);
-
 	useEffect(() => {
 		const newHashCommentId = commentIdFromUrl();
 		if (newHashCommentId !== undefined) {
@@ -291,13 +293,14 @@ export const Discussion = ({
 					return;
 				}
 
-				const { pages, discussion } = result.value;
+				const { discussion } = result.value;
 
 				dispatch({
 					type: 'commentsLoaded',
 					comments: discussion.comments,
 					isClosedForComments: discussion.isClosedForComments,
-					totalPages: pages,
+					topLevelCommentCount: discussion.topLevelCommentCount,
+					commentCount: discussion.commentCount,
 				});
 			})
 			.catch(() => {
@@ -351,6 +354,7 @@ export const Discussion = ({
 	}, []);
 
 	useEffect(() => {
+		console.log({ commentCount });
 		// There's no point showing the view more button if there isn't much more to view
 		if (commentCount === 0 || commentCount === 1 || commentCount === 2) {
 			dispatch({ type: 'expandComments' });
@@ -400,9 +404,8 @@ export const Discussion = ({
 						});
 					}}
 					filters={validFilters}
-					commentCount={commentCount ?? 0}
+					topLevelCommentCount={topLevelCommentCount}
 					loading={loading}
-					totalPages={totalPages}
 					comments={comments}
 					setComment={(comment: CommentType) => {
 						dispatch({ type: 'addComment', comment });

dotcom-rendering/src/components/Discussion/Comments.stories.tsx

@@ -73,9 +73,10 @@ export const LoggedOutHiddenPicks = () => (
 			page={3}
 			setPage={() => {}}
 			filters={filters}
-			commentCount={discussionMock.discussion.commentCount}
+			topLevelCommentCount={
+				discussionMock.discussion.topLevelCommentCount
+			}
 			loading={false}
-			totalPages={discussionMock.pages}
 			comments={discussionMock.discussion.comments}
 			setComment={() => {}}
 			handleFilterChange={() => {}}
@@ -123,9 +124,10 @@ export const InitialPage = () => (
 			page={1}
 			setPage={() => {}}
 			filters={filters}
-			commentCount={discussionMock.discussion.commentCount}
+			topLevelCommentCount={
+				discussionMock.discussion.topLevelCommentCount
+			}
 			loading={false}
-			totalPages={discussionMock.pages}
 			comments={discussionMock.discussion.comments}
 			setComment={() => {}}
 			handleFilterChange={() => {}}
@@ -177,9 +179,10 @@ export const LoggedInHiddenNoPicks = () => {
 				page={3}
 				setPage={() => {}}
 				filters={filters}
-				commentCount={discussionMock.discussion.commentCount}
+				topLevelCommentCount={
+					discussionMock.discussion.topLevelCommentCount
+				}
 				loading={false}
-				totalPages={discussionMock.pages}
 				comments={discussionMock.discussion.comments}
 				setComment={() => {}}
 				handleFilterChange={() => {}}
@@ -227,9 +230,10 @@ export const LoggedIn = () => {
 				page={3}
 				setPage={() => {}}
 				filters={filters}
-				commentCount={discussionMock.discussion.commentCount}
+				topLevelCommentCount={
+					discussionMock.discussion.topLevelCommentCount
+				}
 				loading={false}
-				totalPages={discussionMock.pages}
 				comments={discussionMock.discussion.comments}
 				setComment={() => {}}
 				handleFilterChange={() => {}}
@@ -282,9 +286,10 @@ export const LoggedInShortDiscussion = () => {
 				page={3}
 				setPage={() => {}}
 				filters={filters}
-				commentCount={discussionWithTwoComments.discussion.commentCount}
+				topLevelCommentCount={
+					discussionWithTwoComments.discussion.topLevelCommentCount
+				}
 				loading={false}
-				totalPages={discussionWithTwoComments.pages}
 				comments={discussionWithTwoComments.discussion.comments}
 				setComment={() => {}}
 				handleFilterChange={() => {}}
@@ -328,9 +333,10 @@ export const LoggedOutHiddenNoPicks = () => (
 			page={3}
 			setPage={() => {}}
 			filters={filters}
-			commentCount={discussionMock.discussion.commentCount}
+			topLevelCommentCount={
+				discussionMock.discussion.topLevelCommentCount
+			}
 			loading={false}
-			totalPages={0}
 			comments={discussionMock.discussion.comments}
 			setComment={() => {}}
 			handleFilterChange={() => {}}
@@ -380,9 +386,10 @@ export const Closed = () => (
 			page={3}
 			setPage={() => {}}
 			filters={filters}
-			commentCount={discussionMock.discussion.commentCount}
+			topLevelCommentCount={
+				discussionMock.discussion.topLevelCommentCount
+			}
 			loading={false}
-			totalPages={discussionMock.pages}
 			comments={discussionMock.discussion.comments}
 			setComment={() => {}}
 			handleFilterChange={() => {}}
@@ -430,9 +437,8 @@ export const NoComments = () => (
 			page={3}
 			setPage={() => {}}
 			filters={filters}
-			commentCount={0}
+			topLevelCommentCount={0}
 			loading={false}
-			totalPages={0}
 			comments={[]}
 			setComment={() => {}}
 			handleFilterChange={() => {}}
@@ -477,14 +483,13 @@ export const LegacyDiscussion = () => (
 			onPermalinkClick={() => {}}
 			apiKey=""
 			idApiUrl="https://idapi.theguardian.com"
-			page={3}
+			page={2}
 			setPage={() => {}}
 			filters={filters}
-			commentCount={
+			topLevelCommentCount={
 				legacyDiscussionWithoutThreading.discussion.commentCount
 			}
 			loading={false}
-			totalPages={legacyDiscussionWithoutThreading.pages}
 			comments={legacyDiscussionWithoutThreading.discussion.comments}
 			setComment={() => {}}
 			handleFilterChange={() => {}}

dotcom-rendering/src/components/Discussion/Comments.tsx

@@ -38,9 +38,8 @@ type Props = {
 	page: number;
 	setPage: (page: number, shouldExpand: boolean) => void;
 	filters: FilterOptions;
-	commentCount: number;
+	topLevelCommentCount: number;
 	loading: boolean;
-	totalPages: number;
 	comments: CommentType[];
 	setComment: (comment: CommentType) => void;
 	handleFilterChange: (newFilters: FilterOptions, page?: number) => void;
@@ -121,9 +120,8 @@ export const Comments = ({
 	page,
 	setPage,
 	filters,
-	commentCount,
+	topLevelCommentCount,
 	loading,
-	totalPages,
 	comments,
 	setComment,
 	handleFilterChange,
@@ -197,7 +195,7 @@ export const Comments = ({
 		 */
 
 		const maxPagePossible = Math.ceil(
-			commentCount / newFilterObject.pageSize,
+			topLevelCommentCount / newFilterObject.pageSize,
 		);
 
 		if (page > maxPagePossible) {
@@ -236,7 +234,7 @@ export const Comments = ({
 
 	initialiseApi({ additionalHeaders, baseUrl, apiKey, idApiUrl });
 
-	const showPagination = totalPages > 1;
+	const showPagination = topLevelCommentCount > filters.pageSize;
 
 	if (!expanded && loading) {
 		return <span data-testid="loading-comments"></span>;
@@ -258,14 +256,13 @@ export const Comments = ({
 						<Filters
 							filters={filters}
 							onFilterChange={onFilterChange}
-							commentCount={commentCount}
+							topLevelCommentCount={topLevelCommentCount}
 						/>
 						{showPagination && (
 							<Pagination
-								totalPages={totalPages}
 								currentPage={page}
 								setCurrentPage={onPageChange}
-								commentCount={commentCount}
+								topLevelCommentCount={topLevelCommentCount}
 								filters={filters}
 							/>
 						)}
@@ -351,14 +348,13 @@ export const Comments = ({
 			<Filters
 				filters={filters}
 				onFilterChange={onFilterChange}
-				commentCount={commentCount}
+				topLevelCommentCount={topLevelCommentCount}
 			/>
 			{showPagination && (
 				<Pagination
-					totalPages={totalPages}
 					currentPage={page}
 					setCurrentPage={onPageChange}
-					commentCount={commentCount}
+					topLevelCommentCount={topLevelCommentCount}
 					filters={filters}
 				/>
 			)}
@@ -407,10 +403,9 @@ export const Comments = ({
 			{showPagination && (
 				<footer css={footerStyles}>
 					<Pagination
-						totalPages={totalPages}
 						currentPage={page}
 						setCurrentPage={onPageChange}
-						commentCount={commentCount}
+						topLevelCommentCount={topLevelCommentCount}
 						filters={filters}
 					/>
 				</footer>

dotcom-rendering/src/components/Discussion/Filters.stories.tsx

@@ -16,7 +16,7 @@ export const Default = () => {
 		<Filters
 			filters={filters}
 			onFilterChange={setFilters}
-			commentCount={74}
+			topLevelCommentCount={74}
 		/>
 	);
 };