Function CommentFeed

packages/shared/src/components/CommentFeed.tsx:30–121

({
  feedQueryKey,
  query,
  logOrigin,
  variables,
  emptyScreen,
  commentClassName,
  isMainFeed,
}: CommentFeedProps<T>)

}

export default function CommentFeed<T>({
  feedQueryKey,
  query,
  logOrigin,
  variables,
  emptyScreen,
  commentClassName,
  isMainFeed,
}: CommentFeedProps<T>): ReactElement {
  const { openShareComment } = useShareComment(logOrigin);
  const { onShowUpvoted } = useUpvoteQuery();
  const { deleteComment } = useDeleteComment();
  const isLaptop = useViewSize(ViewSize.Laptop);

  const queryResult = useInfiniteQuery<CommentFeedData>({
    queryKey: feedQueryKey,
    queryFn: ({ pageParam }) =>
      gqlClient.request(query, {
        ...variables,
        first: 20,
        after: pageParam,
      }),
    initialPageParam: '',
    getNextPageParam: ({ page }) => getNextPageParam(page?.pageInfo),
  });
  const length = queryResult?.data?.pages?.length;
  const showEmptyScreen =
    length > 0 && queryResult.data.pages[0].page.edges.length === 0;

  if (queryResult.isPending) {
    return (
      <PlaceholderCommentList
        placeholderAmount={5}
        className={classNames(
          '!mt-0 border-border-subtlest-tertiary p-4',
          commentClassName?.container,
        )}
        showContextHeader
      />
    );
  }

  if (showEmptyScreen && emptyScreen) {
    return <>{emptyScreen}</>;
  }

  return (
    <>
      <InfiniteScrolling
        isFetchingNextPage={queryResult.isFetchingNextPage}
        canFetchMore={checkFetchMore(queryResult)}
        fetchNextPage={queryResult.fetchNextPage}
        className="w-full"
      >
        {queryResult.data.pages.flatMap((page) =>
          page.page.edges.map(({ node }, index) => (
            <MainComment
              key={node.id}