Repository: cisagov/RedEye
File: applications/client/src/views/Campaign/Explore/Panels/Comment/Comments.tsx (TypeScript)

Code before:
			store.router.params.currentItem,
			store.router.params.currentItemId,
		],
		async () => {
			if (store.campaign.commentsList.commandGroupIds.length) {
				const index = Math.trunc(state.visibleRange.endIndex / pageSize);
				const start = index * pageSize;
				const ids = store.campaign.commentsList.commandGroupIds.slice(start, start + pageSize);
				// query commands as temp solution
				const commandGroupsQuery = await store.graphqlStore.queryCommandGroups(
					{
						campaignId: store.campaign?.id!,
						commandGroupIds: ids,
						hidden: store.settings.showHidden,
					},
					commandGroupCommentsQuery // command cache issue?
				);

				// query commands as temp solution
				const commandIds = commandGroupsQuery?.commandGroups.flatMap((cg) => cg.commandIds).filter<string>(isDefined);
				return store.graphqlStore.queryCommands(
					{
						campaignId: store.campaign?.id!,
						commandIds,
						hidden: store.settings.showHidden,
					},
					commandQuery
				);
				// query commands as temp solution
			}
		},
		{
			enabled: !!store.campaign.commentsList.commandGroupIds.length,
		}
	);

	useEffect(() => {
		if (store.router.params.currentItem === 'comments_list' && store.router.params.currentItemId) {
			const filteredData = commentsData?.presentationItems.find(
				(item) => item.id === store.router.params.currentItemId
			);
			store.campaign?.setCommentsList({
				commandGroupIds: Array.from(filteredData?.commandGroupIds || []),
			});
		}
	}, [store.campaign.commentsList.commandGroupIds, store.router.params.currentItem, store.router.params.currentItemId]);

	useEffect(() => {
		if (store.campaign?.commentStore.scrollToComment) {
			state.update(
				'scrollToIndex',

Review comment (suggestion):
Because we have to go through three queries to get all data, and commandGroupIdData is the first one. I would think we should have the commented out isLoading on Line 99 back to determine if we should render ProgressBar, but render ProgressBar after "No Comments" check. As below order:
1. commandGroupIdData.length===0 =>  No comments
2. isLoading (meaning commandGroupIdData.length>0 and we are still fetching their commandGroups and commands) -> ProgressBar
3. All three queried data ready => Final CommentGroup

Code after:
					(commandGroupId) => commandGroupId === store.campaign?.commentStore.scrollToComment
				)
			);
			if (state.scrollToIndex !== -1) {
				setTimeout(() => {
					listRef?.current?.scrollToIndex({
						index: state.scrollToIndex!,
						align: 'start',
						behavior: 'smooth',
					});
					setTimeout(() => {
						state.update('scrollToIndex', undefined);
						store.campaign.commentStore.setScrollToComment(undefined);
					}, 1000);
				}, 250);
			}
		}
	}, [commandGroupIdData]);

	return (
		<VirtualizedList
			rangeChanged={(visibleRange) => state.update('visibleRange', visibleRange)}
			listRef={listRef}
			cy-test="comments-view"
		>
			{!commandGroupIdData?.commandGroupIds ? (
				<ProgressBar intent={Intent.PRIMARY} />
			) : commandGroupIdData?.commandGroupIds?.length === 0 ? (
				<MessageRow>No comments</MessageRow>
			) : (
				commandGroupIdData?.commandGroupIds?.map((commandGroupId) => (
					<CommentGroup
						cy-test="comment-group"
						key={commandGroupId}
						commandGroupId={commandGroupId}
						toggleNewComment={state.toggleNewComment}
						newComment={state.newComment}
						expandedCommandIDs={state.expandedCommandIDs}
						removeExpandedCommandID={state.removeExpandedCommandID}
					/>
				))
			)}
		</VirtualizedList>
	);
});

type CommandGroupIdData = { commandGroupIds: UUID[] };