11116945825

Committed 01 Oct 2024 01:29AM UTC coverage: 31.751% (-0.06%) from 31.809%

Build # 11116945825

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9824 from ForumMagnum/master

Deploy (Sep 30, 2024)

Run Details

5076 of 41658 branches covered (12.18%)

Branch coverage included in aggregate %.

34 of 162 new or added lines in 17 files covered. (20.99%)

10 existing lines in 8 files now uncovered.

29571 of 67462 relevant lines covered (43.83%)

183.35 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

5.91

/packages/lesswrong/components/comments/CommentsNode.tsx

import React, { useState, useRef, useEffect, useCallback } from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import withErrorBoundary from '../common/withErrorBoundary';
import { useCurrentUser } from '../common/withUser';
import { AnalyticsContext, useTracking } from "../../lib/analyticsEvents"
import { CommentTreeNode, commentTreesEqual, flattenCommentBranch } from '../../lib/utils/unflatten';
import type { CommentTreeOptions } from './commentTree';
import { HIGHLIGHT_DURATION } from './CommentFrame';
import { scrollFocusOnElement } from '@/lib/scrollUtils';
import { commentPermalinkStyleSetting } from '@/lib/publicSettings';
import { useCommentLinkState } from './CommentsItem/useCommentLink';

const KARMA_COLLAPSE_THRESHOLD = -4;

const styles = (theme: ThemeType): JssStyles => ({
  parentScroll: {
    position: "absolute",
    top:0,
    left:0,
    width:8,
    height:"100%",
    cursor:"pointer",
    '&:hover': {
      backgroundColor: theme.palette.commentParentScrollerHover,
    }
  },
  children: {
    position: "relative"
  },
  gapIndicator: {
    border: theme.palette.border.commentBorder,
    backgroundColor: theme.palette.grey[100],
    marginLeft: theme.spacing.unit,
    paddingTop: theme.spacing.unit,
  },
})

export interface CommentsNodeProps {
  treeOptions: CommentTreeOptions,
  comment: CommentsList & {gapIndicator?: boolean},
  startThreadTruncated?: boolean,
  truncated?: boolean,
  shortform?: any,
  nestingLevel?: number,
  expandAllThreads?: boolean,
  /**
   * Determines whether this specific comment is expanded, without passing that
   * expanded state to child comments
   */
  forceUnTruncated?: boolean,
  forceUnCollapsed?: boolean,
  expandNewComments?: boolean,
  isChild?: boolean,
  parentAnswerId?: string|null,
  parentCommentId?: string,
  showExtraChildrenButton?: any,
  hoverPreview?: boolean,
  childComments?: Array<CommentTreeNode<CommentsList>>,
  loadChildrenSeparately?: boolean,
  loadDirectReplies?: boolean,
  showPinnedOnProfile?: boolean,
  enableGuidelines?: boolean,
  /**
   * Determines the karma threshold used to decide whether to collapse a comment.
   * 
   * Currently only overriden in the comment moderation tab.
   */
  karmaCollapseThreshold?: number,
  /**
   * Determines whether to expand this comment's parent comment (if it exists) by default.
   * 
   * Default: false.  Currently only used in the comment moderation tab.
   */
  showParentDefault?: boolean,
  noAutoScroll?: boolean,
  displayTagIcon?: boolean,
  className?: string,
  classes: ClassesType,
}
/**
 * CommentsNode: A node in a comment tree, passes through to CommentsItems to handle rendering a specific comment,
 * recurses to handle reply comments in the tree
 *
 * Before adding more props to this, consider whether you should instead be adding a field to the CommentTreeOptions interface.
 */
const CommentsNode = ({
  treeOptions,
  comment,
  startThreadTruncated,
  truncated,
  shortform,
  nestingLevel=1,
  expandAllThreads,
  forceUnTruncated,
  forceUnCollapsed,
  expandNewComments=true,
  isChild,
  parentAnswerId,
  parentCommentId,
  showExtraChildrenButton,
  hoverPreview,
  childComments,
  loadChildrenSeparately,
  loadDirectReplies=false,
  showPinnedOnProfile=false,
  enableGuidelines=true,
  karmaCollapseThreshold=KARMA_COLLAPSE_THRESHOLD,
  showParentDefault=false,
  noAutoScroll=false,
  displayTagIcon=false,
  className,
  classes,
}: CommentsNodeProps) => {
  const currentUser = useCurrentUser();
  const { captureEvent } = useTracking()
  const scrollTargetRef = useRef<HTMLDivElement|null>(null);

  const hasInContextLinks = commentPermalinkStyleSetting.get() === 'in-context';

  const { linkedCommentId, scrollToCommentId } = useCommentLinkState();

  const { lastCommentId, condensed, postPage, post, highlightDate, scrollOnExpand, forceSingleLine, forceNotSingleLine, expandOnlyCommentIds, noDOMId, onToggleCollapsed } = treeOptions;

  const shouldUncollapseForAutoScroll = useCallback(() => {
    const commentAndChildren = [
      comment,
      ...(childComments ? childComments.flatMap((c) => flattenCommentBranch(c)) : []),
    ];
    return commentAndChildren.some(child => child._id === scrollToCommentId)
  }, [childComments, comment, scrollToCommentId])

  const shouldExpandAndScrollTo = !noDOMId && !noAutoScroll && comment && scrollToCommentId === comment._id

  const beginCollapsed = useCallback(() => {
    return !shouldUncollapseForAutoScroll() && !forceUnCollapsed && (comment.deleted || comment.baseScore < karmaCollapseThreshold)
  }, [comment.baseScore, comment.deleted, forceUnCollapsed, karmaCollapseThreshold, shouldUncollapseForAutoScroll])

  const beginSingleLine = useCallback((): boolean => {
    // TODO: Before hookification, this got nestingLevel without the default value applied, which may have changed its behavior?
    const mostRecent = lastCommentId === comment._id
    const lowKarmaOrCondensed = (comment.baseScore < 10 || !!condensed)
    const shortformAndTop = (nestingLevel === 1) && shortform
    const postPageAndTop = (nestingLevel === 1) && postPage

    if (expandOnlyCommentIds)
      return !expandOnlyCommentIds.has(comment._id);
    if (forceSingleLine)
      return true;
    if (treeOptions.isSideComment && nestingLevel>1)
      return true;

    return (
      !shouldExpandAndScrollTo &&
      !expandAllThreads &&
      !!(truncated || startThreadTruncated) &&
      lowKarmaOrCondensed &&
      !(mostRecent && condensed) &&
      !shortformAndTop &&
      !postPageAndTop &&
      !forceNotSingleLine
    )
  }, [comment._id, comment.baseScore, condensed, expandAllThreads, expandOnlyCommentIds, forceNotSingleLine, forceSingleLine, lastCommentId, nestingLevel, postPage, shortform, shouldExpandAndScrollTo, startThreadTruncated, treeOptions.isSideComment, truncated]);

  const beginTruncated = useCallback(() => {
    return !shouldExpandAndScrollTo && !!startThreadTruncated
  }, [shouldExpandAndScrollTo, startThreadTruncated])

  // Whether the comment is completely hidden (with the toggle arrow closed)
  const [collapsed, setCollapsed] = useState<boolean>(beginCollapsed);
  
  const [singleLine, setSingleLine] = useState(beginSingleLine());
  const [truncatedState, setTruncated] = useState(beginTruncated);
  const [truncatedStateSet, setTruncatedStateSet] = useState(false);

  const [highlighted, setHighlighted] = useState(false);

  const isInViewport = (): boolean => {
    if (!scrollTargetRef) return false;
    const top = scrollTargetRef.current?.getBoundingClientRect().top;
    if (top === undefined) return false;
    return (top >= 0) && (top <= window.innerHeight);
  }

  const scrollIntoView = useCallback((behavior: "auto"|"smooth"="smooth") => {
    if (!isInViewport() || hasInContextLinks) {
      scrollFocusOnElement({ id: comment._id, options: { behavior } });
    }
    setHighlighted(true);
    setTimeout(() => { //setTimeout make sure we execute this after the element has properly rendered
      setHighlighted(false);
    }, HIGHLIGHT_DURATION*1000);
  }, [comment._id, hasInContextLinks]);

  const handleExpand = ({
    event,
    scroll = false,
    scrollBehaviour = "smooth",
  }: {
    event?: React.MouseEvent;
    scroll?: boolean;
    scrollBehaviour?: "auto" | "smooth";
  }) => {
    event?.stopPropagation();
    if (isTruncated || isSingleLine) {
      captureEvent("commentExpanded", { postId: comment.postId, commentId: comment._id });
      setTruncated(false);
      setSingleLine(false);
      setTruncatedStateSet(true);
      if (scroll) {
        scrollIntoView(scrollBehaviour);
      }
    }
  };

  // If not using in-context comments, scroll to top when the `commentId` query changes
  useEffect(() => {
    if (!hasInContextLinks && !noAutoScroll && comment && linkedCommentId === comment._id) {
      window.scrollTo({top: 0})
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [linkedCommentId]);

  useEffect(() => {
    // The comment hash isn't sent to the server, so `shouldUncollapseForAutoScroll` may be different from the first render pass
    if (collapsed && shouldUncollapseForAutoScroll()) {
      setCollapsed(false);
    }

    if (shouldExpandAndScrollTo) {
      handleExpand({scroll: true})
    }
    //eslint-disable-next-line react-hooks/exhaustive-deps
  }, [scrollToCommentId]);

  const toggleCollapse = useCallback(
    () => {
      onToggleCollapsed?.();
      setCollapsed(!collapsed)
    },
    [collapsed, onToggleCollapsed]
  );

  const isTruncated = ((): boolean => {
    if (expandAllThreads) return false;
    if (truncatedState) return true;
    if (truncatedStateSet) return false;
    return truncated || !!startThreadTruncated
  })();

  const isNewComment = !!(highlightDate && (new Date(comment.postedAt).getTime() > new Date(highlightDate).getTime()))

  const isSingleLine = ((): boolean => {
    if (!singleLine || currentUser?.noSingleLineComments) return false;
    if (forceSingleLine) return true;
    if (forceNotSingleLine) return false

    return isTruncated && !(expandNewComments && isNewComment);
  })();

  const { CommentFrame, SingleLineComment, CommentsItem, RepliesToCommentList, AnalyticsTracker } = Components

  const updatedNestingLevel = nestingLevel + (!!comment.gapIndicator ? 1 : 0)

  const passedThroughItemProps = { comment, collapsed, showPinnedOnProfile, enableGuidelines, showParentDefault }

  
  const childrenSection = !collapsed && childComments && childComments.length > 0 && <div className={classes.children}>
    <div className={classes.parentScroll} onClick={() => scrollIntoView("smooth")} />
    {showExtraChildrenButton}
    {childComments.map(child => <Components.CommentsNode
      isChild={true}
      treeOptions={treeOptions}
      comment={child.item}
      parentCommentId={comment._id}
      parentAnswerId={parentAnswerId || (comment.answer && comment._id) || null}
      nestingLevel={updatedNestingLevel + 1}
      truncated={isTruncated}
      childComments={child.children}
      key={child.item._id}
      expandNewComments={expandNewComments}
      enableGuidelines={enableGuidelines} />)}
  </div>;

  return <div className={comment.gapIndicator ? classes.gapIndicator : undefined}>
    <CommentFrame
      comment={comment}
      treeOptions={treeOptions}
      onClick={(event) => handleExpand({ event, scroll: scrollOnExpand })}
      id={!noDOMId ? comment._id : undefined}
      nestingLevel={updatedNestingLevel}
      hasChildren={childComments && childComments.length>0}
      highlighted={highlighted}
      isSingleLine={isSingleLine}
      isChild={isChild}
      isNewComment={isNewComment}
      isReplyToAnswer={!!parentAnswerId}
      hoverPreview={hoverPreview}
      shortform={shortform}
      showPinnedOnProfile={showPinnedOnProfile}
      className={className}
    >
      {comment._id && <div ref={scrollTargetRef}>
        {isSingleLine
          ? <AnalyticsContext singleLineComment commentId={comment._id}>
              <AnalyticsTracker eventType="singeLineComment">
                <SingleLineComment
                  treeOptions={treeOptions}
                  comment={comment}
                  nestingLevel={updatedNestingLevel}
                  parentCommentId={parentCommentId}
                  hideKarma={post?.hideCommentKarma}
                  showDescendentCount={loadChildrenSeparately}
                  displayTagIcon={displayTagIcon}
                />
              </AnalyticsTracker>
            </AnalyticsContext>
          : <CommentsItem
              treeOptions={treeOptions}
              truncated={isTruncated && !forceUnTruncated} // forceUnTruncated checked separately here, so isTruncated can also be passed to child nodes
              nestingLevel={updatedNestingLevel}
              parentCommentId={parentCommentId}
              parentAnswerId={parentAnswerId || (comment.answer && comment._id) || undefined}
              toggleCollapse={toggleCollapse}
              key={comment._id}
              scrollIntoView={scrollIntoView}
              setSingleLine={setSingleLine}
              displayTagIcon={displayTagIcon}
              { ...passedThroughItemProps}
            />
        }
      </div>}

      {childrenSection}

      {!isSingleLine && loadChildrenSeparately &&
        <div className="comments-children">
          <div className={classes.parentScroll} onClick={() => scrollIntoView("smooth")}/>
          <RepliesToCommentList
            parentCommentId={comment._id}
            post={post as PostsBase}
            directReplies={loadDirectReplies}
          />
        </div>
      }
    </CommentFrame>
  </div>
}

const CommentsNodeComponent = registerComponent('CommentsNode', CommentsNode, {
  styles,
  areEqual: {
    treeOptions: "shallow",
    childComments: (oldValue: Array<CommentTreeNode<CommentsList>>, newValue: Array<CommentTreeNode<CommentsList>>) => commentTreesEqual(oldValue, newValue)
  },
  hocs: [withErrorBoundary]
});

declare global {
  interface ComponentTypes {
    CommentsNode: typeof CommentsNodeComponent,
  }
}

1	import React, { useState, useRef, useEffect, useCallback } from 'react';	2✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
3	import withErrorBoundary from '../common/withErrorBoundary';	1✔
4	import { useCurrentUser } from '../common/withUser';	1✔
5	import { AnalyticsContext, useTracking } from "../../lib/analyticsEvents"	1✔
6	import { CommentTreeNode, commentTreesEqual, flattenCommentBranch } from '../../lib/utils/unflatten';	1✔
7	import type { CommentTreeOptions } from './commentTree';
8	import { HIGHLIGHT_DURATION } from './CommentFrame';	1✔
9	import { scrollFocusOnElement } from '@/lib/scrollUtils';	1✔
10	import { commentPermalinkStyleSetting } from '@/lib/publicSettings';	1✔
11	import { useCommentLinkState } from './CommentsItem/useCommentLink';	1✔
12
13	const KARMA_COLLAPSE_THRESHOLD = -4;	1✔
14
15	const styles = (theme: ThemeType): JssStyles => ({	1✔
16	parentScroll: {
17	position: "absolute",
18	top:0,
19	left:0,
20	width:8,
21	height:"100%",
22	cursor:"pointer",
23	'&:hover': {
24	backgroundColor: theme.palette.commentParentScrollerHover,
25	}
26	},
27	children: {
28	position: "relative"
29	},
30	gapIndicator: {
31	border: theme.palette.border.commentBorder,
32	backgroundColor: theme.palette.grey[100],
33	marginLeft: theme.spacing.unit,
34	paddingTop: theme.spacing.unit,
35	},
36	})
37
38	export interface CommentsNodeProps {
39	treeOptions: CommentTreeOptions,
40	comment: CommentsList & {gapIndicator?: boolean},
41	startThreadTruncated?: boolean,
42	truncated?: boolean,
43	shortform?: any,
44	nestingLevel?: number,
45	expandAllThreads?: boolean,
46	/**
47	* Determines whether this specific comment is expanded, without passing that
48	* expanded state to child comments
49	*/
50	forceUnTruncated?: boolean,
51	forceUnCollapsed?: boolean,
52	expandNewComments?: boolean,
53	isChild?: boolean,
54	parentAnswerId?: string\|null,
55	parentCommentId?: string,
56	showExtraChildrenButton?: any,
57	hoverPreview?: boolean,
58	childComments?: Array<CommentTreeNode<CommentsList>>,
59	loadChildrenSeparately?: boolean,
60	loadDirectReplies?: boolean,
61	showPinnedOnProfile?: boolean,
62	enableGuidelines?: boolean,
63	/**
64	* Determines the karma threshold used to decide whether to collapse a comment.
65	*
66	* Currently only overriden in the comment moderation tab.
67	*/
68	karmaCollapseThreshold?: number,
69	/**
70	* Determines whether to expand this comment's parent comment (if it exists) by default.
71	*
72	* Default: false. Currently only used in the comment moderation tab.
73	*/
74	showParentDefault?: boolean,
75	noAutoScroll?: boolean,
76	displayTagIcon?: boolean,
77	className?: string,
78	classes: ClassesType,
79	}
80	/**
81	* CommentsNode: A node in a comment tree, passes through to CommentsItems to handle rendering a specific comment,
82	* recurses to handle reply comments in the tree
83	*
84	* Before adding more props to this, consider whether you should instead be adding a field to the CommentTreeOptions interface.
85	*/
86	const CommentsNode = ({	1✔
87	treeOptions,
88	comment,
89	startThreadTruncated,
90	truncated,
91	shortform,
92	nestingLevel=1,	×
93	expandAllThreads,
94	forceUnTruncated,
95	forceUnCollapsed,
96	expandNewComments=true,	×
97	isChild,
98	parentAnswerId,
99	parentCommentId,
100	showExtraChildrenButton,
101	hoverPreview,
102	childComments,
103	loadChildrenSeparately,
104	loadDirectReplies=false,	×
105	showPinnedOnProfile=false,	×
106	enableGuidelines=true,	×
107	karmaCollapseThreshold=KARMA_COLLAPSE_THRESHOLD,	×
108	showParentDefault=false,	×
109	noAutoScroll=false,	×
110	displayTagIcon=false,	×
111	className,
112	classes,
113	}: CommentsNodeProps) => {
114	const currentUser = useCurrentUser();	×
115	const { captureEvent } = useTracking()	×
116	const scrollTargetRef = useRef<HTMLDivElement\|null>(null);	×
117
NEW 118	const hasInContextLinks = commentPermalinkStyleSetting.get() === 'in-context';	×
119
NEW 120	const { linkedCommentId, scrollToCommentId } = useCommentLinkState();	×
121
NEW 122	const { lastCommentId, condensed, postPage, post, highlightDate, scrollOnExpand, forceSingleLine, forceNotSingleLine, expandOnlyCommentIds, noDOMId, onToggleCollapsed } = treeOptions;	×
123
NEW 124	const shouldUncollapseForAutoScroll = useCallback(() => {	×
UNCOV 125	const commentAndChildren = [	×
126	comment,
127	...(childComments ? childComments.flatMap((c) => flattenCommentBranch(c)) : []),	×
128	];
NEW 129	return commentAndChildren.some(child => child._id === scrollToCommentId)	×
130	}, [childComments, comment, scrollToCommentId])
131
NEW 132	const shouldExpandAndScrollTo = !noDOMId && !noAutoScroll && comment && scrollToCommentId === comment._id	×
133
NEW 134	const beginCollapsed = useCallback(() => {	×
NEW 135	return !shouldUncollapseForAutoScroll() && !forceUnCollapsed && (comment.deleted \|\| comment.baseScore < karmaCollapseThreshold)	×
136	}, [comment.baseScore, comment.deleted, forceUnCollapsed, karmaCollapseThreshold, shouldUncollapseForAutoScroll])
137
NEW 138	const beginSingleLine = useCallback((): boolean => {	×
139	// TODO: Before hookification, this got nestingLevel without the default value applied, which may have changed its behavior?
140	const mostRecent = lastCommentId === comment._id	×
141	const lowKarmaOrCondensed = (comment.baseScore < 10 \|\| !!condensed)	×
142	const shortformAndTop = (nestingLevel === 1) && shortform	×
143	const postPageAndTop = (nestingLevel === 1) && postPage	×
144
145	if (expandOnlyCommentIds)	×
146	return !expandOnlyCommentIds.has(comment._id);	×
147	if (forceSingleLine)	×
148	return true;	×
149	if (treeOptions.isSideComment && nestingLevel>1)	×
150	return true;	×
151
152	return (	×
153	!shouldExpandAndScrollTo &&	×
154	!expandAllThreads &&
155	!!(truncated \|\| startThreadTruncated) &&	×
156	lowKarmaOrCondensed &&
157	!(mostRecent && condensed) &&	×
158	!shortformAndTop &&
159	!postPageAndTop &&
160	!forceNotSingleLine
161	)
162	}, [comment._id, comment.baseScore, condensed, expandAllThreads, expandOnlyCommentIds, forceNotSingleLine, forceSingleLine, lastCommentId, nestingLevel, postPage, shortform, shouldExpandAndScrollTo, startThreadTruncated, treeOptions.isSideComment, truncated]);
163
NEW 164	const beginTruncated = useCallback(() => {	×
NEW 165	return !shouldExpandAndScrollTo && !!startThreadTruncated	×
166	}, [shouldExpandAndScrollTo, startThreadTruncated])
167
168	// Whether the comment is completely hidden (with the toggle arrow closed)
NEW 169	const [collapsed, setCollapsed] = useState<boolean>(beginCollapsed);	×
170
171	const [singleLine, setSingleLine] = useState(beginSingleLine());	×
NEW 172	const [truncatedState, setTruncated] = useState(beginTruncated);	×
173	const [truncatedStateSet, setTruncatedStateSet] = useState(false);	×
174
UNCOV 175	const [highlighted, setHighlighted] = useState(false);	×
176
177	const isInViewport = (): boolean => {	×
178	if (!scrollTargetRef) return false;	×
179	const top = scrollTargetRef.current?.getBoundingClientRect().top;	×
180	if (top === undefined) return false;	×
181	return (top >= 0) && (top <= window.innerHeight);	×
182	}
183
184	const scrollIntoView = useCallback((behavior: "auto"\|"smooth"="smooth") => {	×
NEW 185	if (!isInViewport() \|\| hasInContextLinks) {	×
NEW 186	scrollFocusOnElement({ id: comment._id, options: { behavior } });	×
187	}
188	setHighlighted(true);	×
189	setTimeout(() => { //setTimeout make sure we execute this after the element has properly rendered	×
190	setHighlighted(false);	×
191	}, HIGHLIGHT_DURATION*1000);
192	}, [comment._id, hasInContextLinks]);
193
NEW 194	const handleExpand = ({	×
195	event,
196	scroll = false,	×
197	scrollBehaviour = "smooth",	×
198	}: {
199	event?: React.MouseEvent;
200	scroll?: boolean;
201	scrollBehaviour?: "auto" \| "smooth";
202	}) => {
NEW 203	event?.stopPropagation();	×
204	if (isTruncated \|\| isSingleLine) {	×
NEW 205	captureEvent("commentExpanded", { postId: comment.postId, commentId: comment._id });	×
206	setTruncated(false);	×
207	setSingleLine(false);	×
208	setTruncatedStateSet(true);	×
NEW 209	if (scroll) {	×
NEW 210	scrollIntoView(scrollBehaviour);	×
211	}
212	}
213	};
214
215	// If not using in-context comments, scroll to top when the `commentId` query changes
216	useEffect(() => {	×
NEW 217	if (!hasInContextLinks && !noAutoScroll && comment && linkedCommentId === comment._id) {	×
NEW 218	window.scrollTo({top: 0})	×
219	}
220	// eslint-disable-next-line react-hooks/exhaustive-deps
221	}, [linkedCommentId]);
222
NEW 223	useEffect(() => {	×
224	// The comment hash isn't sent to the server, so `shouldUncollapseForAutoScroll` may be different from the first render pass
NEW 225	if (collapsed && shouldUncollapseForAutoScroll()) {	×
NEW 226	setCollapsed(false);	×
227	}
228
NEW 229	if (shouldExpandAndScrollTo) {	×
NEW 230	handleExpand({scroll: true})	×
231	}
232	//eslint-disable-next-line react-hooks/exhaustive-deps
233	}, [scrollToCommentId]);
234
235	const toggleCollapse = useCallback(	×
236	() => {
237	onToggleCollapsed?.();	×
238	setCollapsed(!collapsed)	×
239	},
240	[collapsed, onToggleCollapsed]
241	);
242
243	const isTruncated = ((): boolean => {	×
244	if (expandAllThreads) return false;	×
245	if (truncatedState) return true;	×
246	if (truncatedStateSet) return false;	×
247	return truncated \|\| !!startThreadTruncated	×
248	})();
249
250	const isNewComment = !!(highlightDate && (new Date(comment.postedAt).getTime() > new Date(highlightDate).getTime()))	×
251
252	const isSingleLine = ((): boolean => {	×
253	if (!singleLine \|\| currentUser?.noSingleLineComments) return false;	×
254	if (forceSingleLine) return true;	×
255	if (forceNotSingleLine) return false	×
256
257	return isTruncated && !(expandNewComments && isNewComment);	×
258	})();
259
260	const { CommentFrame, SingleLineComment, CommentsItem, RepliesToCommentList, AnalyticsTracker } = Components	×
261
262	const updatedNestingLevel = nestingLevel + (!!comment.gapIndicator ? 1 : 0)	×
263
264	const passedThroughItemProps = { comment, collapsed, showPinnedOnProfile, enableGuidelines, showParentDefault }	×
265
266
267	const childrenSection = !collapsed && childComments && childComments.length > 0 && <div className={classes.children}>	×
268	<div className={classes.parentScroll} onClick={() => scrollIntoView("smooth")} />	×
269	{showExtraChildrenButton}
270	{childComments.map(child => <Components.CommentsNode	×
271	isChild={true}
272	treeOptions={treeOptions}
273	comment={child.item}
274	parentCommentId={comment._id}
275	parentAnswerId={parentAnswerId \|\| (comment.answer && comment._id) \|\| null}	×
276	nestingLevel={updatedNestingLevel + 1}
277	truncated={isTruncated}
278	childComments={child.children}
279	key={child.item._id}
280	expandNewComments={expandNewComments}
281	enableGuidelines={enableGuidelines} />)}
282	</div>;
283
284	return <div className={comment.gapIndicator ? classes.gapIndicator : undefined}>	×
285	<CommentFrame
286	comment={comment}
287	treeOptions={treeOptions}
NEW 288	onClick={(event) => handleExpand({ event, scroll: scrollOnExpand })}	×
289	id={!noDOMId ? comment._id : undefined}	×
290	nestingLevel={updatedNestingLevel}
291	hasChildren={childComments && childComments.length>0}	×
292	highlighted={highlighted}
293	isSingleLine={isSingleLine}
294	isChild={isChild}
295	isNewComment={isNewComment}
296	isReplyToAnswer={!!parentAnswerId}
297	hoverPreview={hoverPreview}
298	shortform={shortform}
299	showPinnedOnProfile={showPinnedOnProfile}
300	className={className}
301	>
302	{comment._id && <div ref={scrollTargetRef}>	×
303	{isSingleLine
304	? <AnalyticsContext singleLineComment commentId={comment._id}>	×
305	<AnalyticsTracker eventType="singeLineComment">
306	<SingleLineComment
307	treeOptions={treeOptions}
308	comment={comment}
309	nestingLevel={updatedNestingLevel}
310	parentCommentId={parentCommentId}
311	hideKarma={post?.hideCommentKarma}	×
312	showDescendentCount={loadChildrenSeparately}
313	displayTagIcon={displayTagIcon}
314	/>
315	</AnalyticsTracker>
316	</AnalyticsContext>
317	: <CommentsItem
318	treeOptions={treeOptions}
319	truncated={isTruncated && !forceUnTruncated} // forceUnTruncated checked separately here, so isTruncated can also be passed to child nodes	×
320	nestingLevel={updatedNestingLevel}
321	parentCommentId={parentCommentId}
322	parentAnswerId={parentAnswerId \|\| (comment.answer && comment._id) \|\| undefined}	×
323	toggleCollapse={toggleCollapse}
324	key={comment._id}
325	scrollIntoView={scrollIntoView}
326	setSingleLine={setSingleLine}
327	displayTagIcon={displayTagIcon}
328	{ ...passedThroughItemProps}
329	/>
330	}
331	</div>}
332
333	{childrenSection}
334
335	{!isSingleLine && loadChildrenSeparately &&	×
336	<div className="comments-children">
337	<div className={classes.parentScroll} onClick={() => scrollIntoView("smooth")}/>	×
338	<RepliesToCommentList
339	parentCommentId={comment._id}
340	post={post as PostsBase}
341	directReplies={loadDirectReplies}
342	/>
343	</div>
344	}
345	</CommentFrame>
346	</div>
347	}
348
349	const CommentsNodeComponent = registerComponent('CommentsNode', CommentsNode, {	1✔
350	styles,
351	areEqual: {
352	treeOptions: "shallow",
353	childComments: (oldValue: Array<CommentTreeNode<CommentsList>>, newValue: Array<CommentTreeNode<CommentsList>>) => commentTreesEqual(oldValue, newValue)	×
354	},
355	hocs: [withErrorBoundary]
356	});
357
358	declare global {
359	interface ComponentTypes {
360	CommentsNode: typeof CommentsNodeComponent,
361	}
362	}

ForumMagnum / ForumMagnum / 11116945825

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous