Parse discussion response for top comments (#10374)

* feat(discussion): validate top comments * fix(discussion): proper type for `topPicks` mock
guardian · Jan 29, 2024 · a1b4a69 · a1b4a69
1 parent 50d8c24
commit a1b4a69
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/dotcom-rendering/fixtures/manual/topPicks.ts b/dotcom-rendering/fixtures/manual/topPicks.ts
@@ -1,6 +1,8 @@
+import type { GetDiscussionSuccess } from '../../src/types/discussion';
+
 export const topPicks = {
 	status: 'ok',
-	page: 1,
+	currentPage: 1,
 	pages: 1,
 	pageSize: 50,
 	orderBy: 'oldest',
@@ -65,4 +67,4 @@ export const topPicks = {
 			},
 		],
 	},
-};
+} satisfies GetDiscussionSuccess;
diff --git a/dotcom-rendering/src/components/Discussion/Comments.tsx b/dotcom-rendering/src/components/Discussion/Comments.tsx
@@ -153,15 +153,14 @@ export const Comments = ({
 		} else return;
 	}, [expanded, comments.length]);
 
-	//todo: parse this properly
 	useEffect(() => {
-		const fetchPicks = async () => {
-			const json = await getPicks(shortUrl);
-			if (json !== undefined) {
-				setPicks(json);
+		void getPicks(shortUrl).then((result) => {
+			if (result.kind === 'error') {
+				console.error(result.error);
+				return;
 			}
-		};
-		void fetchPicks();
+			setPicks(result.value);
+		});
 	}, [shortUrl]);
 
 	/**

diff --git a/dotcom-rendering/src/lib/discussionApi.tsx b/dotcom-rendering/src/lib/discussionApi.tsx
@@ -231,24 +231,31 @@ export const reply =
 		return parseCommentResponse(jsonResult.value);
 	};
 
-//todo: come back and parse the response properly and set a proper return type for the error case
 export const getPicks = async (
 	shortUrl: string,
-): Promise<CommentType[] | undefined> => {
+): Promise<Result<GetDiscussionError, CommentType[]>> => {
 	const url =
 		joinUrl(options.baseUrl, 'discussion', shortUrl, 'topcomments') +
 		objAsParams(defaultParams);
 
-	const resp = await fetch(url, {
+	const jsonResult = await fetchJSON(url, {
 		headers: {
 			...options.headers,
 		},
 	});
 
-	const json = await resp.json();
+	if (jsonResult.kind === 'error') return jsonResult;
 
-	// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- YOLO
-	return json.discussion.comments;
+	const result = safeParse(discussionApiResponseSchema, jsonResult.value);
+
+	if (!result.success) {
+		return { kind: 'error', error: 'ParsingError' };
+	}
+	if (result.output.status === 'error') {
+		return { kind: 'error', error: 'ApiError' };
+	}
+
+	return { kind: 'ok', value: result.output.discussion.comments };
 };
 
 export const reportAbuse = async ({