9524108987

Committed 15 Jun 2024 12:46AM UTC coverage: 31.84% (+0.003%) from 31.837%

Build # 9524108987

Build Type

push

github

Committed by

b0b3rt

Commit Message

ContentItemBody no longer spuriously rerenders when replacedSubstrings change

Co-authored-by: jimrandomh <jim@jimrandomh.org>

Run Details

4823 of 39524 branches covered (12.2%)

Branch coverage included in aggregate %.

8 of 20 new or added lines in 7 files covered. (40.0%)

4 existing lines in 4 files now uncovered.

28071 of 63786 relevant lines covered (44.01%)

179.54 hits per line

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

20.0

/packages/lesswrong/components/posts/PostsPage/PostBody.tsx

import React, { useRef } from 'react';
import { Components, registerComponent } from '../../../lib/vulcan-lib';
import { nofollowKarmaThreshold } from '../../../lib/publicSettings';
import { useSingle } from '../../../lib/crud/withSingle';
import mapValues from 'lodash/mapValues';
import type { SideCommentMode } from '../../dropdowns/posts/SetSideCommentVisibility';
import { getVotingSystemByName } from '../../../lib/voting/votingSystems';
import type { ContentItemBody, ContentReplacedSubstringComponentInfo } from '../../common/ContentItemBody';
import { hasSideComments, inlineReactsHoverEnabled } from '../../../lib/betas';
import { VotingProps } from '@/components/votes/votingProps';

const enableInlineReactsOnPosts = inlineReactsHoverEnabled;

const PostBody = ({post, html, sideCommentMode, voteProps}: {
  post: PostsWithNavigation|PostsWithNavigationAndRevision|PostsListWithVotes,
  html: string,
  sideCommentMode?: SideCommentMode,
  voteProps: VotingProps<PostsWithNavigation|PostsWithNavigationAndRevision|PostsListWithVotes>
}) => {
  const includeSideComments =
    hasSideComments &&
    sideCommentMode &&
    sideCommentMode !== "hidden";

  const { document } = useSingle({
    documentId: post._id,
    collectionName: "Posts",
    fragmentName: 'PostSideComments',
    skip: !includeSideComments,
  });
  
  const votingSystemName = post.votingSystem || "default";
  const votingSystem = getVotingSystemByName(votingSystemName);
  
  const { ContentItemBody, SideCommentIcon, InlineReactSelectionWrapper } = Components;
  const nofollow = (post.user?.karma || 0) < nofollowKarmaThreshold.get();
  const contentRef = useRef<ContentItemBody>(null);
  let content: React.ReactNode
  
  let highlights: Record<string,ContentReplacedSubstringComponentInfo>|undefined = undefined;
  if (votingSystem.getPostHighlights) {
    highlights = votingSystem.getPostHighlights({post, voteProps});
  }

  if (includeSideComments && document?.sideComments) {
    const htmlWithIDs = document.sideComments.html;
    const sideComments = sideCommentMode==="highKarma"
      ? document.sideComments.highKarmaCommentsByBlock
      : document.sideComments.commentsByBlock;
    const sideCommentsMap = mapValues(sideComments, commentIds => <SideCommentIcon post={post} commentIds={commentIds}/>)

    content = <ContentItemBody
      dangerouslySetInnerHTML={{__html: htmlWithIDs}}
      ref={contentRef}
      key={`${post._id}_${sideCommentMode}`}
      description={`post ${post._id}`}
      nofollow={nofollow}
      replacedSubstrings={highlights}
      idInsertions={sideCommentsMap}
    />
  } else {
    content = <ContentItemBody
      dangerouslySetInnerHTML={{__html: html}}
      ref={contentRef}
      description={`post ${post._id}`}
      nofollow={nofollow}
      replacedSubstrings={highlights}
    />
  }
  
  if (enableInlineReactsOnPosts) {
    return <InlineReactSelectionWrapper
      commentBodyRef={contentRef}
      voteProps={voteProps}
      styling="post"
    >
      {content}
    </InlineReactSelectionWrapper>
  } else {
    return <>{content}</>;
  }
}

const PostBodyComponent = registerComponent('PostBody', PostBody);

declare global {
  interface ComponentTypes {
    PostBody: typeof PostBodyComponent
  }
}

1	import React, { useRef } from 'react';	1✔
2	import { Components, registerComponent } from '../../../lib/vulcan-lib';	1✔
3	import { nofollowKarmaThreshold } from '../../../lib/publicSettings';	1✔
4	import { useSingle } from '../../../lib/crud/withSingle';	1✔
5	import mapValues from 'lodash/mapValues';	1✔
6	import type { SideCommentMode } from '../../dropdowns/posts/SetSideCommentVisibility';
7	import { getVotingSystemByName } from '../../../lib/voting/votingSystems';	1✔
8	import type { ContentItemBody, ContentReplacedSubstringComponentInfo } from '../../common/ContentItemBody';
9	import { hasSideComments, inlineReactsHoverEnabled } from '../../../lib/betas';	1✔
10	import { VotingProps } from '@/components/votes/votingProps';
11
12	const enableInlineReactsOnPosts = inlineReactsHoverEnabled;	1✔
13
14	const PostBody = ({post, html, sideCommentMode, voteProps}: {	1✔
15	post: PostsWithNavigation\|PostsWithNavigationAndRevision\|PostsListWithVotes,
16	html: string,
17	sideCommentMode?: SideCommentMode,
18	voteProps: VotingProps<PostsWithNavigation\|PostsWithNavigationAndRevision\|PostsListWithVotes>
19	}) => {
20	const includeSideComments =
21	hasSideComments &&	×
22	sideCommentMode &&
23	sideCommentMode !== "hidden";
24
25	const { document } = useSingle({	×
26	documentId: post._id,
27	collectionName: "Posts",
28	fragmentName: 'PostSideComments',
29	skip: !includeSideComments,
30	});
31
32	const votingSystemName = post.votingSystem \|\| "default";	×
33	const votingSystem = getVotingSystemByName(votingSystemName);	×
34
UNCOV 35	const { ContentItemBody, SideCommentIcon, InlineReactSelectionWrapper } = Components;	×
36	const nofollow = (post.user?.karma \|\| 0) < nofollowKarmaThreshold.get();	×
37	const contentRef = useRef<ContentItemBody>(null);	×
38	let content: React.ReactNode
39
NEW 40	let highlights: Record<string,ContentReplacedSubstringComponentInfo>\|undefined = undefined;	×
41	if (votingSystem.getPostHighlights) {	×
42	highlights = votingSystem.getPostHighlights({post, voteProps});	×
43	}
44
45	if (includeSideComments && document?.sideComments) {	×
46	const htmlWithIDs = document.sideComments.html;	×
47	const sideComments = sideCommentMode==="highKarma"	×
48	? document.sideComments.highKarmaCommentsByBlock	×
49	: document.sideComments.commentsByBlock;
50	const sideCommentsMap = mapValues(sideComments, commentIds => <SideCommentIcon post={post} commentIds={commentIds}/>)	×
51
52	content = <ContentItemBody	×
53	dangerouslySetInnerHTML={{__html: htmlWithIDs}}
54	ref={contentRef}
55	key={`${post._id}_${sideCommentMode}`}
56	description={`post ${post._id}`}
57	nofollow={nofollow}
58	replacedSubstrings={highlights}
59	idInsertions={sideCommentsMap}
60	/>
61	} else {
62	content = <ContentItemBody	×
63	dangerouslySetInnerHTML={{__html: html}}
64	ref={contentRef}
65	description={`post ${post._id}`}
66	nofollow={nofollow}
67	replacedSubstrings={highlights}
68	/>
69	}
70
71	if (enableInlineReactsOnPosts) {	×
72	return <InlineReactSelectionWrapper	×
73	commentBodyRef={contentRef}
74	voteProps={voteProps}
75	styling="post"
76	>
77	{content}
78	</InlineReactSelectionWrapper>
79	} else {
80	return <>{content}</>;	×
81	}
82	}
83
84	const PostBodyComponent = registerComponent('PostBody', PostBody);	1✔
85
86	declare global {
87	interface ComponentTypes {
88	PostBody: typeof PostBodyComponent
89	}
90	}

ForumMagnum / ForumMagnum / 9524108987

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