Function MainComment

packages/shared/src/components/comments/MainComment.tsx:63–288

({
  className,
  comment,
  appendTooltipTo,
  permissionNotificationCommentId,
  joinNotificationCommentId,
  onCommented,
  lazy = false,
  logImpression,
  logClick,
  isModalThread = false,
  ...props
}: MainCommentProps)

      false));

export default function MainComment({
  className,
  comment,
  appendTooltipTo,
  permissionNotificationCommentId,
  joinNotificationCommentId,
  onCommented,
  lazy = false,
  logImpression,
  logClick,
  isModalThread = false,
  ...props
}: MainCommentProps): ReactElement {
  const { user } = useContext(AuthContext);
  const { logEvent } = useLogContext();
  const showNotificationPermissionBanner = useMemo(
    () => shouldShowBannerOnComment(permissionNotificationCommentId, comment),
    [permissionNotificationCommentId, comment],
  );
  const [isJoinSquadBannerDismissed] = usePersistentContext(
    SQUAD_COMMENT_JOIN_BANNER_KEY,
    false,
  );
  const showJoinSquadBanner =
    useMemo(
      () => shouldShowBannerOnComment(joinNotificationCommentId, comment),
      [joinNotificationCommentId, comment],
    ) &&
    !props.post.source?.currentMember &&
    !isJoinSquadBannerDismissed;

  const {
    commentId,
    inputProps: replyProps,
    onReplyTo,
  } = useComments(props.post);
  const { inputProps: editProps, onEdit } = useEditCommentProps();
  const commentChildren = comment.children?.edges ?? [];
  const replyCount = commentChildren.length;

  const initialInView = !lazy;
  const { ref: inViewRef, inView } = useInView({
    triggerOnce: true,
    initialInView,
  });

  const [areRepliesExpanded, setAreRepliesExpanded] = useState(true);
  const showThreadRepliesToggle = isModalThread && replyCount > 0;

  const onClick = () => {
    if (!logClick && !props.linkToComment) {
      return;
    }

    logEvent({
      event_name: LogEvent.Click,
      target_type: TargetType.Comment,
      target_id: comment.id,