10080857034

Committed 24 Jul 2024 04:59PM UTC coverage: 31.853% (-0.1%) from 31.952%

Build # 10080857034

Build Type

Pull #9532

github

Committed by

web-flow

Commit Message

Merge 5552cebcc into 9ce0817c9

Pull Request Pull Request #9532: Merge master to lw-deploy 2024 07 22

Run Details

4930 of 40578 branches covered (12.15%)

Branch coverage included in aggregate %.

114 of 312 new or added lines in 47 files covered. (36.54%)

8 existing lines in 7 files now uncovered.

28876 of 65553 relevant lines covered (44.05%)

179.48 hits per line

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

37.93

/packages/lesswrong/components/quickTakes/QuickTakesListItem.tsx

import React, { useCallback, useState } from "react";
import { registerComponent, Components } from "../../lib/vulcan-lib";
import { useTracking } from "../../lib/analyticsEvents";
import { isFriendlyUI } from "../../themes/forumTheme";
import { isLWorAF } from "../../lib/instanceSettings";
import classNames from "classnames";
import DeferRender from "../common/DeferRender";

const styles = (_theme: ThemeType) => ({
  expandedRoot: {
    position: "relative",
    "& .comments-node-root": {
      marginBottom: 8,
      ...(isLWorAF ? {
        paddingTop: 0,
        // This is to cause the "scroll to parent" sidebar to be positioned with respect to the top-level comment node, rather than the entire section
        position: 'relative',
      } : {}),

    },
  },
  hidden: {
    display: 'none',
  },
});

const QuickTakesListItem = ({quickTake, classes}: {
  quickTake: ShortformComments,
  classes: ClassesType,
}) => {
  const {captureEvent} = useTracking();
  const [expanded, setExpanded] = useState(false);
  const wrappedSetExpanded = useCallback((value: boolean) => {
    setExpanded(value);
    captureEvent(value ? "shortformItemExpanded" : "shortformItemCollapsed");
  }, [captureEvent, setExpanded]);

  const {CommentsNode, QuickTakesCollapsedListItem, LWQuickTakesCollapsedListItem} = Components;

  const CollapsedListItem = isFriendlyUI ? QuickTakesCollapsedListItem : LWQuickTakesCollapsedListItem;

  // We're doing both a NoSSR + conditional `display: 'none'` to toggle between the collapsed & expanded quick take
  // This is to eliminate a loading spinner (for the child comments) when someone expands a quick take,
  // while avoiding the impact to the home page SSR speed for the large % of users who won't interact with quick takes at all
  const expandedComment = (
    <DeferRender ssr={false}>
      <div className={classNames(classes.expandedRoot, { [classes.hidden]: !expanded })}>
        <CommentsNode
          treeOptions={{
            post: quickTake.post ?? undefined,
            showCollapseButtons: isFriendlyUI,
            onToggleCollapsed: () => wrappedSetExpanded(!expanded),
          }}
          comment={quickTake}
          loadChildrenSeparately
          forceUnTruncated
          forceUnCollapsed
        />
      </div>
    </DeferRender>
  );

  const collapsedComment = (
    <div className={classNames({ [classes.hidden]: expanded })}>
      <CollapsedListItem quickTake={quickTake} setExpanded={wrappedSetExpanded} />
    </div>
  );

  return <>
    {expandedComment}
    {collapsedComment}
  </>;
}

const QuickTakesListItemComponent = registerComponent(
  "QuickTakesListItem",
  QuickTakesListItem,
  {styles},
);

declare global {
  interface ComponentTypes {
    QuickTakesListItem: typeof QuickTakesListItemComponent
  }
}

1	import React, { useCallback, useState } from "react";	1✔
2	import { registerComponent, Components } from "../../lib/vulcan-lib";	1✔
3	import { useTracking } from "../../lib/analyticsEvents";	1✔
4	import { isFriendlyUI } from "../../themes/forumTheme";	1✔
5	import { isLWorAF } from "../../lib/instanceSettings";	1✔
6	import classNames from "classnames";	1✔
7	import DeferRender from "../common/DeferRender";	1✔
8
9	const styles = (_theme: ThemeType) => ({	1✔
10	expandedRoot: {
11	position: "relative",
12	"& .comments-node-root": {
13	marginBottom: 8,
14	...(isLWorAF ? {	1!
15	paddingTop: 0,
16	// This is to cause the "scroll to parent" sidebar to be positioned with respect to the top-level comment node, rather than the entire section
17	position: 'relative',
18	} : {}),
19
20	},
21	},
22	hidden: {
23	display: 'none',
24	},
25	});
26
27	const QuickTakesListItem = ({quickTake, classes}: {	1✔
28	quickTake: ShortformComments,
29	classes: ClassesType,
30	}) => {
31	const {captureEvent} = useTracking();	×
32	const [expanded, setExpanded] = useState(false);	×
33	const wrappedSetExpanded = useCallback((value: boolean) => {	×
34	setExpanded(value);	×
35	captureEvent(value ? "shortformItemExpanded" : "shortformItemCollapsed");	×
36	}, [captureEvent, setExpanded]);
37
38	const {CommentsNode, QuickTakesCollapsedListItem, LWQuickTakesCollapsedListItem} = Components;	×
39
40	const CollapsedListItem = isFriendlyUI ? QuickTakesCollapsedListItem : LWQuickTakesCollapsedListItem;	×
41
42	// We're doing both a NoSSR + conditional `display: 'none'` to toggle between the collapsed & expanded quick take
43	// This is to eliminate a loading spinner (for the child comments) when someone expands a quick take,
44	// while avoiding the impact to the home page SSR speed for the large % of users who won't interact with quick takes at all
45	const expandedComment = (
NEW 46	<DeferRender ssr={false}>	×
47	<div className={classNames(classes.expandedRoot, { [classes.hidden]: !expanded })}>
48	<CommentsNode
49	treeOptions={{
50	post: quickTake.post ?? undefined,	×
51	showCollapseButtons: isFriendlyUI,
52	onToggleCollapsed: () => wrappedSetExpanded(!expanded),	×
53	}}
54	comment={quickTake}
55	loadChildrenSeparately
56	forceUnTruncated
57	forceUnCollapsed
58	/>
59	</div>
60	</DeferRender>
61	);
62
63	const collapsedComment = (
64	<div className={classNames({ [classes.hidden]: expanded })}>	×
65	<CollapsedListItem quickTake={quickTake} setExpanded={wrappedSetExpanded} />
66	</div>
67	);
68
69	return <>	×
70	{expandedComment}
71	{collapsedComment}
72	</>;
73	}
74
75	const QuickTakesListItemComponent = registerComponent(	1✔
76	"QuickTakesListItem",
77	QuickTakesListItem,
78	{styles},
79	);
80
81	declare global {
82	interface ComponentTypes {
83	QuickTakesListItem: typeof QuickTakesListItemComponent
84	}
85	}

ForumMagnum / ForumMagnum / 10080857034

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