10205310279

Committed 01 Aug 2024 08:28PM UTC coverage: 32.037% (-0.005%) from 32.042%

Build # 10205310279

Build Type

push

github

Committed by

jimrandomh

Commit Message

Refactor column sizing

Run Details

4936 of 40138 branches covered (12.3%)

Branch coverage included in aggregate %.

8 of 11 new or added lines in 3 files covered. (72.73%)

35 existing lines in 3 files now uncovered.

28749 of 65006 relevant lines covered (44.23%)

180.69 hits per line

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

18.0

/packages/lesswrong/components/comments/SideCommentIcon.tsx

import React, { useRef, useState, useEffect, useContext } from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { useHover } from "../common/withHover";
import { useSingle } from '../../lib/crud/withSingle';
import { useTheme } from '../themes/useTheme';
import { SidebarsContext } from '../common/SidebarsWrapper';
import type { ClickAwayEvent } from '../../lib/vendor/react-click-away-listener';
import CommentIcon from '@material-ui/icons/ModeComment';
import classNames from 'classnames';
import Badge from '@material-ui/core/Badge';
import some from 'lodash/some';

const styles = (theme: ThemeType) => ({
  sideCommentIconWrapper: {
    background: theme.palette.panelBackground.darken03,
    borderRadius: 8,
    color: theme.palette.icon.dim6,
    
    [theme.breakpoints.down('xs')]: {
      display: "none",
    },
    
    "@media print": {
      display: "none",
    },
  },
  sideCommentIcon: {
    cursor: "pointer",
    paddingTop: 4,
    whiteSpace: "nowrap",
    "& svg": {
      height: 17,
    },
    '&:hover': {
      color: theme.palette.icon.dim5,
    }
  },
  clickToPinMessage: {
    position: "absolute",
    display: "inline-block",
    top: -2, left: 28,
    fontSize: 13,
    color: theme.palette.text.dim45,
    fontFamily: theme.palette.fonts.sansSerifStack,
  },
  extendHoverTarget: {
    position: "absolute",
    top: 0, left: 0,
    width: 350,
    height: 30,
    display: "inline-block",
  },
  pinned: {
    color: theme.palette.icon.dim,
  },
  popper: {
    width: 350,
    zIndex: theme.zIndexes.sideCommentBox,
  },
  sideCommentHover: {
  },
  seeInContext: {
    color: theme.palette.link.dim,
    paddingBottom:8,
    paddingTop: 4,
  },
  badge: {
    fontSize: 12,
    color: theme.palette.text.dim45,
  },
});

const BadgeWrapper = ({commentCount, classes, children}: {
  commentCount: number,
  classes: ClassesType,
  children: React.ReactNode
}) => {
  if (commentCount>1) {
    return <Badge
      classes={{ badge: classes.badge }}
      badgeContent={commentCount}
    >{children}</Badge>
  } else {
    return <>{children}</>
  }
}

const SideCommentIcon = ({commentIds, post, classes}: {
  commentIds: string[]
  post: PostsList
  classes: ClassesType<typeof styles>
}) => {
  const {LWPopper, LWClickAwayListener, SideCommentHover, SideItem} = Components;
  const {eventHandlers, hover, anchorEl} = useHover();
  const {sideCommentsActive, setSideCommentsActive} = useContext(SidebarsContext)!;
  
  // Three-state pinning: open, closed, or auto ("auto" means visible
  // if the mouse is over the icon.) This is so that if you click on the
  // icon again when it's pinned open, it closes, and stays closed until
  // you move the mouse away and re-hover the same elmeent.
  const [pinned, setPinned] = useState<"open"|"closed"|"auto">("auto")
  
  const onClick = () => {
    if (pinned==="open") {
      setPinned("closed");
    } else {
      setPinned("open");
      //setSideCommentsActive(true);
    }
  }
  const onMouseLeave = () => {
    if (pinned==="closed")
      setPinned("auto");
  }
  const onClickAway = (ev: ClickAwayEvent) => {
    const isClickOnIcon = some(
      ev.composedPath(),
      (element: Element) => element.classList.contains(classes.sideCommentIcon)
    );
    if (!isClickOnIcon) {
      setPinned("auto");
    }
  }
  
  const isOpen = (pinned==="open" || (pinned==="auto" && hover));
  
  return <SideItem options={{
    format: "icon"
  }}>
    <span className={classes.sideCommentIconWrapper} onMouseLeave={onMouseLeave}>
      <span {...eventHandlers}
        onClick={onClick}
        className={classes.sideCommentIcon}
      >
        <BadgeWrapper commentCount={commentIds.length} classes={classes}>
          <CommentIcon className={classNames({[classes.pinned]: (pinned==="open")})} />
        </BadgeWrapper>
        {isOpen && <span className={classes.clickToPinMessage}>
          Click to {pinned==="open" ? "close" : "pin"}
        </span>}
        {isOpen && <span className={classes.extendHoverTarget}/>}
      </span>
      <LWPopper
        open={isOpen} anchorEl={anchorEl}
        className={classes.popper}
        clickable={true}
        allowOverflow={true}
        placement={"bottom-start"}
      >
        <LWClickAwayListener onClickAway={onClickAway}>
          <SideCommentHover post={post} commentIds={commentIds}/>
        </LWClickAwayListener>
      </LWPopper>
    </span>
  </SideItem>
}

const SideCommentHover = ({commentIds, post, classes}: {
  commentIds: string[],
  post: PostsList
  classes: ClassesType<typeof styles>,
}) => {
  const { SideCommentSingle } = Components;
  
  // If there's only one comment (not counting replies to that comment), don't
  // truncate it with a read more.
  const dontTruncateRoot = (commentIds.length === 1); 
  
  return <div className={classes.sideCommentHover}>
    {commentIds.map(commentId =>
      <SideCommentSingle
        key={commentId}
        commentId={commentId}
        post={post}
        dontTruncateRoot={dontTruncateRoot}
      />
    )}
  </div>
}

const SideCommentSingle = ({commentId, post, dontTruncateRoot=false, classes}: {
  commentId: string,
  post: PostsList,
  classes: ClassesType<typeof styles>,
  dontTruncateRoot?: boolean,
}) => {
  const theme = useTheme();
  const hoverColor = theme.palette.blockquoteHighlight.commentHovered;
  
  const { CommentWithReplies, Loading } = Components;
  const { document: comment, data, loading, error } = useSingle({
    documentId: commentId,
    collectionName: "Comments",
    fragmentName: 'CommentWithRepliesFragment',
  });
  const [hoveredBlockquoteId,setHoveredBlockquoteId] = useState<string|null>(null);
  const rootDivRef = useRef<HTMLDivElement|null>(null);
  
  useEffect(() => {
    const rootDiv = rootDivRef.current;
    if (!rootDiv) return;
    
    const listener = (ev: MouseEvent) => {
      let newBlockquoteId: string|null = null;
      const hoveredElementPath = ev.composedPath();
      
      for (let pos of hoveredElementPath) {
        if ((pos as HTMLElement).tagName === 'BLOCKQUOTE') {
          // TODO: this isn't distinguishing between the comment and its children, and isn't distinguishing between blockquotes within that comment
          newBlockquoteId = `blockquote_${commentId}_1`;
          break;
        }
      }
      
      if (newBlockquoteId !== hoveredBlockquoteId) {
        setHoveredBlockquoteId(newBlockquoteId);
      }
    };
    
    rootDiv.addEventListener('mousemove', listener);
    return () => {
      rootDiv!.removeEventListener('mousemove', listener);
    }
  // Ignoring exhaustive-deps warning because it incorrectly thinks that
  // `rootDivRef.current` shouldn't be a dependency (but taking it out
  // as a dependency does in fact break the functionality.)
  //   eslint-disable-next-line react-hooks/exhaustive-deps
  }, [commentId, hoveredBlockquoteId, rootDivRef.current]);
  
  if (loading) return <Loading/>
  if (!comment) return null;
  
  return <div ref={rootDivRef}>
    {hoverColor && <style>
      {`.blockquote_${commentId}_1 {
          background: ${hoverColor};
          ${theme.palette.blockquoteHighlight.addedBlockquoteHighlightStyles}
      }`}
    </style>}
    <CommentWithReplies
      comment={comment} post={post}
      commentNodeProps={{
        treeOptions: {
          showPostTitle: false,
          showCollapseButtons: true,
          replaceReplyButtonsWith: (comment) =>
            <a href={"#"+comment._id} className={classes.seeInContext}>See in context</a>,
          hideActionsMenu: true,
          isSideComment: true,
        },
        ...(dontTruncateRoot ? {forceUnTruncated: true} : {}),
      }}
    />
  </div>
}

const SideCommentIconComponent = registerComponent('SideCommentIcon', SideCommentIcon, {styles});
const SideCommentHoverComponent = registerComponent('SideCommentHover', SideCommentHover, {styles});
const SideCommentSingleComponent = registerComponent('SideCommentSingle', SideCommentSingle, {styles});

declare global {
  interface ComponentTypes {
    SideCommentIcon: typeof SideCommentIconComponent
    SideCommentHover: typeof SideCommentHoverComponent
    SideCommentSingle: typeof SideCommentSingleComponent
  }
}

1	import React, { useRef, useState, useEffect, useContext } from 'react';	1✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
3	import { useHover } from "../common/withHover";	1✔
4	import { useSingle } from '../../lib/crud/withSingle';	1✔
5	import { useTheme } from '../themes/useTheme';	1✔
6	import { SidebarsContext } from '../common/SidebarsWrapper';	1✔
7	import type { ClickAwayEvent } from '../../lib/vendor/react-click-away-listener';
8	import CommentIcon from '@material-ui/icons/ModeComment';	1✔
9	import classNames from 'classnames';	1✔
10	import Badge from '@material-ui/core/Badge';	1✔
11	import some from 'lodash/some';	1✔
12
13	const styles = (theme: ThemeType) => ({	3✔
14	sideCommentIconWrapper: {
15	background: theme.palette.panelBackground.darken03,
16	borderRadius: 8,
17	color: theme.palette.icon.dim6,
18
19	[theme.breakpoints.down('xs')]: {
20	display: "none",
21	},
22
23	"@media print": {
24	display: "none",
25	},
26	},
27	sideCommentIcon: {
28	cursor: "pointer",
29	paddingTop: 4,
30	whiteSpace: "nowrap",
31	"& svg": {
32	height: 17,
33	},
34	'&:hover': {
35	color: theme.palette.icon.dim5,
36	}
37	},
38	clickToPinMessage: {
39	position: "absolute",
40	display: "inline-block",
41	top: -2, left: 28,
42	fontSize: 13,
43	color: theme.palette.text.dim45,
44	fontFamily: theme.palette.fonts.sansSerifStack,
45	},
46	extendHoverTarget: {
47	position: "absolute",
48	top: 0, left: 0,
49	width: 350,
50	height: 30,
51	display: "inline-block",
52	},
53	pinned: {
54	color: theme.palette.icon.dim,
55	},
56	popper: {
57	width: 350,
58	zIndex: theme.zIndexes.sideCommentBox,
59	},
60	sideCommentHover: {
61	},
62	seeInContext: {
63	color: theme.palette.link.dim,
64	paddingBottom:8,
65	paddingTop: 4,
66	},
67	badge: {
68	fontSize: 12,
69	color: theme.palette.text.dim45,
70	},
71	});
72
73	const BadgeWrapper = ({commentCount, classes, children}: {	1✔
74	commentCount: number,
75	classes: ClassesType,
76	children: React.ReactNode
77	}) => {
UNCOV 78	if (commentCount>1) {	×
UNCOV 79	return <Badge	×
80	classes={{ badge: classes.badge }}
81	badgeContent={commentCount}
82	>{children}</Badge>
83	} else {
84	return <>{children}</>	×
85	}
86	}
87
88	const SideCommentIcon = ({commentIds, post, classes}: {	1✔
89	commentIds: string[]
90	post: PostsList
91	classes: ClassesType<typeof styles>
92	}) => {
UNCOV 93	const {LWPopper, LWClickAwayListener, SideCommentHover, SideItem} = Components;	×
UNCOV 94	const {eventHandlers, hover, anchorEl} = useHover();	×
UNCOV 95	const {sideCommentsActive, setSideCommentsActive} = useContext(SidebarsContext)!;	×
96
97	// Three-state pinning: open, closed, or auto ("auto" means visible
98	// if the mouse is over the icon.) This is so that if you click on the
99	// icon again when it's pinned open, it closes, and stays closed until
100	// you move the mouse away and re-hover the same elmeent.
UNCOV 101	const [pinned, setPinned] = useState<"open"\|"closed"\|"auto">("auto")	×
102
UNCOV 103	const onClick = () => {	×
UNCOV 104	if (pinned==="open") {	×
UNCOV 105	setPinned("closed");	×
106	} else {
UNCOV 107	setPinned("open");	×
108	//setSideCommentsActive(true);
109	}
110	}
UNCOV 111	const onMouseLeave = () => {	×
112	if (pinned==="closed")	×
UNCOV 113	setPinned("auto");	×
114	}
UNCOV 115	const onClickAway = (ev: ClickAwayEvent) => {	×
116	const isClickOnIcon = some(	×
117	ev.composedPath(),
118	(element: Element) => element.classList.contains(classes.sideCommentIcon)	×
119	);
120	if (!isClickOnIcon) {	×
121	setPinned("auto");	×
122	}
123	}
124
125	const isOpen = (pinned==="open" \|\| (pinned==="auto" && hover));	×
126
UNCOV 127	return <SideItem options={{	×
128	format: "icon"
129	}}>
130	<span className={classes.sideCommentIconWrapper} onMouseLeave={onMouseLeave}>
131	<span {...eventHandlers}
132	onClick={onClick}
133	className={classes.sideCommentIcon}
134	>
135	<BadgeWrapper commentCount={commentIds.length} classes={classes}>
136	<CommentIcon className={classNames({[classes.pinned]: (pinned==="open")})} />
137	</BadgeWrapper>
138	{isOpen && <span className={classes.clickToPinMessage}>	×
139	Click to {pinned==="open" ? "close" : "pin"}	×
140	</span>}
141	{isOpen && <span className={classes.extendHoverTarget}/>}	×
142	</span>
143	<LWPopper
144	open={isOpen} anchorEl={anchorEl}
145	className={classes.popper}
146	clickable={true}
147	allowOverflow={true}
148	placement={"bottom-start"}
149	>
150	<LWClickAwayListener onClickAway={onClickAway}>
151	<SideCommentHover post={post} commentIds={commentIds}/>
152	</LWClickAwayListener>
153	</LWPopper>
154	</span>
155	</SideItem>
156	}
157
158	const SideCommentHover = ({commentIds, post, classes}: {	1✔
159	commentIds: string[],
160	post: PostsList
161	classes: ClassesType<typeof styles>,
162	}) => {
UNCOV 163	const { SideCommentSingle } = Components;	×
164
165	// If there's only one comment (not counting replies to that comment), don't
166	// truncate it with a read more.
UNCOV 167	const dontTruncateRoot = (commentIds.length === 1);	×
168
UNCOV 169	return <div className={classes.sideCommentHover}>	×
170	{commentIds.map(commentId =>
UNCOV 171	<SideCommentSingle	×
172	key={commentId}
173	commentId={commentId}
174	post={post}
175	dontTruncateRoot={dontTruncateRoot}
176	/>
177	)}
178	</div>
179	}
180
181	const SideCommentSingle = ({commentId, post, dontTruncateRoot=false, classes}: {	1!
182	commentId: string,
183	post: PostsList,
184	classes: ClassesType<typeof styles>,
185	dontTruncateRoot?: boolean,
186	}) => {
UNCOV 187	const theme = useTheme();	×
UNCOV 188	const hoverColor = theme.palette.blockquoteHighlight.commentHovered;	×
189
UNCOV 190	const { CommentWithReplies, Loading } = Components;	×
UNCOV 191	const { document: comment, data, loading, error } = useSingle({	×
192	documentId: commentId,
193	collectionName: "Comments",
194	fragmentName: 'CommentWithRepliesFragment',
195	});
196	const [hoveredBlockquoteId,setHoveredBlockquoteId] = useState<string\|null>(null);	×
UNCOV 197	const rootDivRef = useRef<HTMLDivElement\|null>(null);	×
198
UNCOV 199	useEffect(() => {	×
UNCOV 200	const rootDiv = rootDivRef.current;	×
201	if (!rootDiv) return;	×
202
UNCOV 203	const listener = (ev: MouseEvent) => {	×
204	let newBlockquoteId: string\|null = null;	×
205	const hoveredElementPath = ev.composedPath();	×
206
UNCOV 207	for (let pos of hoveredElementPath) {	×
208	if ((pos as HTMLElement).tagName === 'BLOCKQUOTE') {	×
209	// TODO: this isn't distinguishing between the comment and its children, and isn't distinguishing between blockquotes within that comment
210	newBlockquoteId = `blockquote_${commentId}_1`;	×
UNCOV 211	break;	×
212	}
213	}
214
215	if (newBlockquoteId !== hoveredBlockquoteId) {	×
216	setHoveredBlockquoteId(newBlockquoteId);	×
217	}
218	};
219
220	rootDiv.addEventListener('mousemove', listener);	×
221	return () => {	×
UNCOV 222	rootDiv!.removeEventListener('mousemove', listener);	×
223	}
224	// Ignoring exhaustive-deps warning because it incorrectly thinks that
225	// `rootDivRef.current` shouldn't be a dependency (but taking it out
226	// as a dependency does in fact break the functionality.)
227	// eslint-disable-next-line react-hooks/exhaustive-deps
228	}, [commentId, hoveredBlockquoteId, rootDivRef.current]);
229
UNCOV 230	if (loading) return <Loading/>	×
UNCOV 231	if (!comment) return null;	×
232
UNCOV 233	return <div ref={rootDivRef}>	×
234	{hoverColor && <style>	×
235	{`.blockquote_${commentId}_1 {
236	background: ${hoverColor};
237	${theme.palette.blockquoteHighlight.addedBlockquoteHighlightStyles}
238	}`}
239	</style>}
240	<CommentWithReplies
241	comment={comment} post={post}
242	commentNodeProps={{
243	treeOptions: {
244	showPostTitle: false,
245	showCollapseButtons: true,
246	replaceReplyButtonsWith: (comment) =>
UNCOV 247	<a href={"#"+comment._id} className={classes.seeInContext}>See in context</a>,	×
248	hideActionsMenu: true,
249	isSideComment: true,
250	},
251	...(dontTruncateRoot ? {forceUnTruncated: true} : {}),	×
252	}}
253	/>
254	</div>
255	}
256
257	const SideCommentIconComponent = registerComponent('SideCommentIcon', SideCommentIcon, {styles});	1✔
258	const SideCommentHoverComponent = registerComponent('SideCommentHover', SideCommentHover, {styles});	1✔
259	const SideCommentSingleComponent = registerComponent('SideCommentSingle', SideCommentSingle, {styles});	1✔
260
261	declare global {
262	interface ComponentTypes {
263	SideCommentIcon: typeof SideCommentIconComponent
264	SideCommentHover: typeof SideCommentHoverComponent
265	SideCommentSingle: typeof SideCommentSingleComponent
266	}
267	}

ForumMagnum / ForumMagnum / 10205310279

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