11249757151

Committed 09 Oct 2024 06:52AM UTC coverage: 31.669% (+0.02%) from 31.651%

Build # 11249757151

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9855 from ForumMagnum/wh-debate-week-reply-form-bug-2024-10

[EA] Some debate week bug fixes

Run Details

5063 of 41798 branches covered (12.11%)

Branch coverage included in aggregate %.

5 of 26 new or added lines in 2 files covered. (19.23%)

1 existing line in 1 file now uncovered.

29587 of 67615 relevant lines covered (43.76%)

181.01 hits per line

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

25.0

/packages/lesswrong/components/forumEvents/ForumEventResultIcon.tsx

import React, { useCallback, useState } from 'react';
import { registerComponent, Components } from '../../lib/vulcan-lib';
import classNames from 'classnames';
import { useHover } from '../common/withHover';
import { formatRole } from '../users/EAUserTooltipContent';
import { Link } from '@/lib/reactRouterWrapper';
import { commentGetPageUrlFromIds } from '@/lib/collections/comments/helpers';
import { userGetProfileUrl } from '@/lib/collections/users/helpers';
import { useIsAboveScreenWidth } from '../hooks/useScreenWidth';
import { AnalyticsContext, useTracking } from '@/lib/analyticsEvents';
import { useCurrentForumEvent } from '../hooks/useCurrentForumEvent';
import { POLL_MAX_WIDTH } from './ForumEventPoll';

const styles = (theme: ThemeType) => ({
  voteCircle: {
    position: "relative",
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-end",
    width: "100%",
    marginTop: -5,
    zIndex: 1,
    [theme.breakpoints.down('md')]: {
      marginTop: -3,
    },
    [theme.breakpoints.down('sm')]: {
      marginTop: -1,
    },
  },
  voteTooltipBody: {
    fontSize: 14,
    fontWeight: 500,
    lineHeight: '140%',
  },
  userResultsImage: {
    outline: `2px solid ${theme.palette.text.alwaysWhite}`,
    width: "100% !important",
    height: "unset !important",
  },
  popperContent: {
    margin: "0 12px",
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontSize: 13,
    fontWeight: 500,
    lineHeight: '140%',
    padding: 16,
    width: 380,
    maxHeight: 1000,
    color: theme.palette.grey[600],
    backgroundColor: theme.palette.background.paper,
    borderRadius: theme.borderRadius.default,
    boxShadow: theme.palette.boxShadow.eaCard,
    display: 'flex',
    flexDirection: 'column',
    gap: "10px",
  },
  pinIcon: {
    width: 12,
    height: 12,
    transform: "rotate(90deg)",
    color: theme.palette.grey[600],
    cursor: "pointer",
    marginBottom: 6,
    "&:hover": {
      opacity: 0.7
    }
  },
  pinIconPinned: {
    transform: "rotate(45deg)",
    color: theme.palette.grey[1000],
  },
  commentBody: {
    display: "-webkit-box",
    "-webkit-box-orient": "vertical",
    "-webkit-line-clamp": 25,
  },
  // User profile header, some of these styles are borrowed from EAUserTooltipContent
  userInfo: {
    display: "flex",
    maxWidth: "100%",
  },
  displayNameRow: {
    display: "flex",
    justifyContent: "space-between",
    gap: "8px"
  },
  displayName: {
    fontSize: "1.3rem",
    fontWeight: 600,
    color: theme.palette.grey["A400"],
  },
  headerInfo: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    overflow: "hidden",
    width: "100%",
    "& *": {
      whiteSpace: "nowrap",
      textOverflow: "ellipsis",
      overflow: "hidden",
    },
  },
  profileImage: {
    marginRight: 12,
  },
  replyButtonRow: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center"
  },
  replyButton: {
    fontSize: 14,
    fontWeight: 600,
    cursor: "pointer",
    '&:hover': {
      opacity: 0.7
    }
  },
  replyForm: {
    border: theme.palette.border.normal,
    borderRadius: theme.borderRadius.default
  }
});

export type ForumEventVoteDisplay = {
  x: number,
  user: UsersMinimumInfo,
  comment: ShortformComments | null
}

const ForumEventResultPopper = ({
  anchorEl,
  user,
  comment,
  captureEvent,
  setIsPinned,
  isPinned,
  newRepliesCount,
  setNewRepliesCount,
  classes,
}: {
  anchorEl: any,
  user: UsersMinimumInfo;
  comment: ShortformComments;
  captureEvent: Function;
  setIsPinned: React.Dispatch<React.SetStateAction<boolean>>;
  isPinned: boolean;
  newRepliesCount: number;
  setNewRepliesCount: React.Dispatch<React.SetStateAction<number>>;
  classes: ClassesType<typeof styles>;
}) => {
  const {
    LWPopper,
    LWClickAwayListener,
    ForumIcon,
    CommentBody,
    CommentsNewForm,
    UsersProfileImage
  } = Components;

  const [replyFormOpen, setReplyFormOpen] = useState(false);

  const replySuccessCallback = useCallback(() => {
    captureEvent("replyFromBanner")
    // We only need to show the count, so just track comments the user submits rather than refetching
    setNewRepliesCount((prev) => prev + 1);
    setReplyFormOpen(false);
  }, [captureEvent, setNewRepliesCount])

  const repliesCount = (comment?.descendentCount ?? 0) + newRepliesCount;

  const replyString = repliesCount
    ? `(${repliesCount} ${repliesCount === 1 ? "reply" : "replies"})`
    : "";

  const role = formatRole(user.jobTitle, user.organization);

  return (
    <LWPopper
      open={true}
      anchorEl={anchorEl}
      clickable={true}
      allowOverflow={false}
      placement={"right-start"}
    >
      <LWClickAwayListener onClickAway={() => setIsPinned(false)}>
        <div className={classes.popperContent}>
          <div className={classes.userInfo}>
            <UsersProfileImage user={user} size={40} className={classes.profileImage} />
            <div className={classes.headerInfo}>
              <div className={classes.displayNameRow}>
                <Link
                  className={classes.displayName}
                  to={userGetProfileUrl(user)}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {user.displayName}
                </Link>
                <ForumIcon
                  icon="Pin"
                  onClick={() => setIsPinned(!isPinned)}
                  className={classNames(classes.pinIcon, { [classes.pinIconPinned]: isPinned })}
                />
              </div>
              <div>{role}</div>
            </div>
          </div>
          <CommentBody comment={comment} className={classes.commentBody} />
          <div className={classes.replyButtonRow}>
            <div
              className={classes.replyButton}
              onClick={() => {
                setReplyFormOpen(true);
                // Pin even after the comment is submitted so they can see the result
                setIsPinned(true);
              }}
            >
              Reply
            </div>
            <Link
              to={commentGetPageUrlFromIds({ postId: comment.postId, commentId: comment._id })}
              target="_blank"
              rel="noopener noreferrer"
            >
              Go to thread {replyString}
            </Link>
          </div>
          {replyFormOpen && (
            <CommentsNewForm
              type="reply"
              post={comment.post ?? undefined}
              parentComment={comment}
              cancelCallback={() => setReplyFormOpen(false)}
              successCallback={replySuccessCallback}
              className={classes.replyForm}
            />
          )}
        </div>
      </LWClickAwayListener>
    </LWPopper>
  );
};

const ForumEventResultIcon = ({
  vote,
  tooltipDisabled,
  classes,
}: {
  vote: ForumEventVoteDisplay;
  tooltipDisabled: boolean;
  classes: ClassesType<typeof styles>;
}) => {
  const { LWTooltip, UsersProfileImage } = Components;

  const isDesktop = useIsAboveScreenWidth(POLL_MAX_WIDTH);

  const { captureEvent } = useTracking();
  const { currentForumEvent } = useCurrentForumEvent();

  const { user, comment } = vote;

  const { eventHandlers, hover, anchorEl } = useHover();

  const [isPinned, setIsPinned] = useState(false);
  const [newRepliesCount, setNewRepliesCount] = useState(0);

  const popperOpen = hover || isPinned;

  if (!isDesktop) return null;

  return (
    <AnalyticsContext
      pageElementContext="forumEventResultIcon"
      forumEventId={currentForumEvent?._id}
      userIdDisplayed={vote.user._id}
    >
      <div key={vote.user._id} className={classes.voteCircle} {...eventHandlers}>
        <LWTooltip
          title={<div className={classes.voteTooltipBody}>{vote.user.displayName}</div>}
          disabled={!!vote.comment}
        >
          <UsersProfileImage
            user={vote.user}
            // The actual size gets overridden by the styles above. This
            // is still needed to get the right resolution from Cloudinary
            size={34}
            className={classes.userResultsImage}
          />
        </LWTooltip>
        {/*
          * Controlling whether the popper is open is done outside the component so that it fully
          * unmounts and clears all the state when closed
          */}
        {!tooltipDisabled && comment && popperOpen && (
          <ForumEventResultPopper
            anchorEl={anchorEl}
            user={user}
            comment={comment}
            classes={classes}
            captureEvent={captureEvent}
            setIsPinned={setIsPinned}
            isPinned={isPinned}
            newRepliesCount={newRepliesCount}
            setNewRepliesCount={setNewRepliesCount}
          />
        )}
      </div>
    </AnalyticsContext>
  );
};

const ForumEventResultIconComponent = registerComponent(
  'ForumEventResultIcon',
  ForumEventResultIcon,
  { styles }
);

declare global {
  interface ComponentTypes {
    ForumEventResultIcon: typeof ForumEventResultIconComponent;
  }
}

1	import React, { useCallback, useState } from 'react';	2✔
2	import { registerComponent, Components } from '../../lib/vulcan-lib';	1✔
3	import classNames from 'classnames';	1✔
4	import { useHover } from '../common/withHover';	1✔
5	import { formatRole } from '../users/EAUserTooltipContent';	1✔
6	import { Link } from '@/lib/reactRouterWrapper';	1✔
7	import { commentGetPageUrlFromIds } from '@/lib/collections/comments/helpers';	1✔
8	import { userGetProfileUrl } from '@/lib/collections/users/helpers';	1✔
9	import { useIsAboveScreenWidth } from '../hooks/useScreenWidth';	1✔
10	import { AnalyticsContext, useTracking } from '@/lib/analyticsEvents';	1✔
11	import { useCurrentForumEvent } from '../hooks/useCurrentForumEvent';	1✔
12	import { POLL_MAX_WIDTH } from './ForumEventPoll';	1✔
13
14	const styles = (theme: ThemeType) => ({	1✔
15	voteCircle: {
16	position: "relative",
17	display: "flex",
18	flexDirection: "column",
19	justifyContent: "flex-end",
20	width: "100%",
21	marginTop: -5,
22	zIndex: 1,
23	[theme.breakpoints.down('md')]: {
24	marginTop: -3,
25	},
26	[theme.breakpoints.down('sm')]: {
27	marginTop: -1,
28	},
29	},
30	voteTooltipBody: {
31	fontSize: 14,
32	fontWeight: 500,
33	lineHeight: '140%',
34	},
35	userResultsImage: {
36	outline: `2px solid ${theme.palette.text.alwaysWhite}`,
37	width: "100% !important",
38	height: "unset !important",
39	},
40	popperContent: {
41	margin: "0 12px",
42	fontFamily: theme.palette.fonts.sansSerifStack,
43	fontSize: 13,
44	fontWeight: 500,
45	lineHeight: '140%',
46	padding: 16,
47	width: 380,
48	maxHeight: 1000,
49	color: theme.palette.grey[600],
50	backgroundColor: theme.palette.background.paper,
51	borderRadius: theme.borderRadius.default,
52	boxShadow: theme.palette.boxShadow.eaCard,
53	display: 'flex',
54	flexDirection: 'column',
55	gap: "10px",
56	},
57	pinIcon: {
58	width: 12,
59	height: 12,
60	transform: "rotate(90deg)",
61	color: theme.palette.grey[600],
62	cursor: "pointer",
63	marginBottom: 6,
64	"&:hover": {
65	opacity: 0.7
66	}
67	},
68	pinIconPinned: {
69	transform: "rotate(45deg)",
70	color: theme.palette.grey[1000],
71	},
72	commentBody: {
73	display: "-webkit-box",
74	"-webkit-box-orient": "vertical",
75	"-webkit-line-clamp": 25,
76	},
77	// User profile header, some of these styles are borrowed from EAUserTooltipContent
78	userInfo: {
79	display: "flex",
80	maxWidth: "100%",
81	},
82	displayNameRow: {
83	display: "flex",
84	justifyContent: "space-between",
85	gap: "8px"
86	},
87	displayName: {
88	fontSize: "1.3rem",
89	fontWeight: 600,
90	color: theme.palette.grey["A400"],
91	},
92	headerInfo: {
93	display: "flex",
94	flexDirection: "column",
95	justifyContent: "space-between",
96	overflow: "hidden",
97	width: "100%",
98	"& *": {
99	whiteSpace: "nowrap",
100	textOverflow: "ellipsis",
101	overflow: "hidden",
102	},
103	},
104	profileImage: {
105	marginRight: 12,
106	},
107	replyButtonRow: {
108	display: "flex",
109	justifyContent: "space-between",
110	alignItems: "center"
111	},
112	replyButton: {
113	fontSize: 14,
114	fontWeight: 600,
115	cursor: "pointer",
116	'&:hover': {
117	opacity: 0.7
118	}
119	},
120	replyForm: {
121	border: theme.palette.border.normal,
122	borderRadius: theme.borderRadius.default
123	}
124	});
125
126	export type ForumEventVoteDisplay = {
127	x: number,
128	user: UsersMinimumInfo,
129	comment: ShortformComments \| null
130	}
131
132	const ForumEventResultPopper = ({	1✔
133	anchorEl,
134	user,
135	comment,
136	captureEvent,
137	setIsPinned,
138	isPinned,
139	newRepliesCount,
140	setNewRepliesCount,
141	classes,
142	}: {
143	anchorEl: any,
144	user: UsersMinimumInfo;
145	comment: ShortformComments;
146	captureEvent: Function;
147	setIsPinned: React.Dispatch<React.SetStateAction<boolean>>;
148	isPinned: boolean;
149	newRepliesCount: number;
150	setNewRepliesCount: React.Dispatch<React.SetStateAction<number>>;
151	classes: ClassesType<typeof styles>;
152	}) => {
153	const {
154	LWPopper,
155	LWClickAwayListener,
156	ForumIcon,
157	CommentBody,
158	CommentsNewForm,
159	UsersProfileImage
NEW 160	} = Components;	×
161
NEW 162	const [replyFormOpen, setReplyFormOpen] = useState(false);	×
163
NEW 164	const replySuccessCallback = useCallback(() => {	×
NEW 165	captureEvent("replyFromBanner")	×
166	// We only need to show the count, so just track comments the user submits rather than refetching
NEW 167	setNewRepliesCount((prev) => prev + 1);	×
NEW 168	setReplyFormOpen(false);	×
169	}, [captureEvent, setNewRepliesCount])
170
NEW 171	const repliesCount = (comment?.descendentCount ?? 0) + newRepliesCount;	×
172
NEW 173	const replyString = repliesCount	×
174	? `(${repliesCount} ${repliesCount === 1 ? "reply" : "replies"})`	×
175	: "";
176
NEW 177	const role = formatRole(user.jobTitle, user.organization);	×
178
NEW 179	return (	×
180	<LWPopper
181	open={true}
182	anchorEl={anchorEl}
183	clickable={true}
184	allowOverflow={false}
185	placement={"right-start"}
186	>
NEW 187	<LWClickAwayListener onClickAway={() => setIsPinned(false)}>	×
188	<div className={classes.popperContent}>
189	<div className={classes.userInfo}>
190	<UsersProfileImage user={user} size={40} className={classes.profileImage} />
191	<div className={classes.headerInfo}>
192	<div className={classes.displayNameRow}>
193	<Link
194	className={classes.displayName}
195	to={userGetProfileUrl(user)}
196	target="_blank"
197	rel="noopener noreferrer"
198	>
199	{user.displayName}
200	</Link>
201	<ForumIcon
202	icon="Pin"
NEW 203	onClick={() => setIsPinned(!isPinned)}	×
204	className={classNames(classes.pinIcon, { [classes.pinIconPinned]: isPinned })}
205	/>
206	</div>
207	<div>{role}</div>
208	</div>
209	</div>
210	<CommentBody comment={comment} className={classes.commentBody} />
211	<div className={classes.replyButtonRow}>
212	<div
213	className={classes.replyButton}
214	onClick={() => {
NEW 215	setReplyFormOpen(true);	×
216	// Pin even after the comment is submitted so they can see the result
NEW 217	setIsPinned(true);	×
218	}}
219	>
220	Reply
221	</div>
222	<Link
223	to={commentGetPageUrlFromIds({ postId: comment.postId, commentId: comment._id })}
224	target="_blank"
225	rel="noopener noreferrer"
226	>
227	Go to thread {replyString}
228	</Link>
229	</div>
230	{replyFormOpen && (	×
231	<CommentsNewForm
232	type="reply"
233	post={comment.post ?? undefined}	×
234	parentComment={comment}
NEW 235	cancelCallback={() => setReplyFormOpen(false)}	×
236	successCallback={replySuccessCallback}
237	className={classes.replyForm}
238	/>
239	)}
240	</div>
241	</LWClickAwayListener>
242	</LWPopper>
243	);
244	};
245
246	const ForumEventResultIcon = ({	1✔
247	vote,
248	tooltipDisabled,
249	classes,
250	}: {
251	vote: ForumEventVoteDisplay;
252	tooltipDisabled: boolean;
253	classes: ClassesType<typeof styles>;
254	}) => {
NEW 255	const { LWTooltip, UsersProfileImage } = Components;	×
256
NEW 257	const isDesktop = useIsAboveScreenWidth(POLL_MAX_WIDTH);	×
258
259	const { captureEvent } = useTracking();	×
260	const { currentForumEvent } = useCurrentForumEvent();	×
261
262	const { user, comment } = vote;	×
263
NEW 264	const { eventHandlers, hover, anchorEl } = useHover();	×
265
NEW 266	const [isPinned, setIsPinned] = useState(false);	×
UNCOV 267	const [newRepliesCount, setNewRepliesCount] = useState(0);	×
268
NEW 269	const popperOpen = hover \|\| isPinned;	×
270
271	if (!isDesktop) return null;	×
272
273	return (	×
274	<AnalyticsContext
275	pageElementContext="forumEventResultIcon"
276	forumEventId={currentForumEvent?._id}	×
277	userIdDisplayed={vote.user._id}
278	>
279	<div key={vote.user._id} className={classes.voteCircle} {...eventHandlers}>
280	<LWTooltip
281	title={<div className={classes.voteTooltipBody}>{vote.user.displayName}</div>}
282	disabled={!!vote.comment}
283	>
284	<UsersProfileImage
285	user={vote.user}
286	// The actual size gets overridden by the styles above. This
287	// is still needed to get the right resolution from Cloudinary
288	size={34}
289	className={classes.userResultsImage}
290	/>
291	</LWTooltip>
292	{/*
293	* Controlling whether the popper is open is done outside the component so that it fully
294	* unmounts and clears all the state when closed
295	*/}
296	{!tooltipDisabled && comment && popperOpen && (	×
297	<ForumEventResultPopper
298	anchorEl={anchorEl}
299	user={user}
300	comment={comment}
301	classes={classes}
302	captureEvent={captureEvent}
303	setIsPinned={setIsPinned}
304	isPinned={isPinned}
305	newRepliesCount={newRepliesCount}
306	setNewRepliesCount={setNewRepliesCount}
307	/>
308	)}
309	</div>
310	</AnalyticsContext>
311	);
312	};
313
314	const ForumEventResultIconComponent = registerComponent(	1✔
315	'ForumEventResultIcon',
316	ForumEventResultIcon,
317	{ styles }
318	);
319
320	declare global {
321	interface ComponentTypes {
322	ForumEventResultIcon: typeof ForumEventResultIconComponent;
323	}
324	}

ForumMagnum / ForumMagnum / 11249757151

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