10428606389

Committed 17 Aug 2024 01:56AM UTC coverage: 32.168% (-0.001%) from 32.169%

Build # 10428606389

Build Type

push

github

Committed by

Raemon

Commit Message

vote button WIP

Run Details

5026 of 40414 branches covered (12.44%)

Branch coverage included in aggregate %.

1 of 4 new or added lines in 1 file covered. (25.0%)

1 existing line in 1 file now uncovered.

28972 of 65275 relevant lines covered (44.38%)

190.49 hits per line

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

13.27

/packages/lesswrong/components/votes/OverallVoteAxis.tsx

import { Components, registerComponent } from '../../lib/vulcan-lib/components';
import React from 'react';
import { userIsAdmin } from '../../lib/vulcan-users/permissions';
import moment from '../../lib/moment-timezone';
import { useCurrentUser } from '../common/withUser';
import { isAF } from '../../lib/instanceSettings';
import { voteButtonsDisabledForUser } from '../../lib/collections/users/helpers';
import type { VotingProps } from './votingProps';
import type { OverallVoteButtonProps } from './OverallVoteButton';
import classNames from 'classnames';
import { isBookUI, isFriendlyUI } from '../../themes/forumTheme';

const styles = (theme: ThemeType): JssStyles => ({
  overallSection: {
    display: 'inline-block',
    height: 24,
    paddingTop: 2
  },
  overallSectionBox: {
    marginLeft: 8,
    outline: isFriendlyUI ? theme.palette.border.commentBorder : 'none',
    borderRadius: isFriendlyUI ? theme.borderRadius.small : 2,
    textAlign: 'center',
    minWidth: 60
  },
  vote: {
    fontSize: 30,
    lineHeight: 0.6,
    whiteSpace: "nowrap",
    display: "inline-block"
  },
  voteScore: {
    fontSize: '1.1rem',
    marginLeft: 4,
    marginRight: 4,
    lineHeight: 1,
  },
  secondarySymbol: {
    fontFamily: theme.typography.body1.fontFamily,
  },
  secondaryScore: {
    fontSize: '1.1rem',
    marginLeft: 2,
    marginRight: 14
  },
  secondaryScoreNumber: {
    marginLeft: 3,
  },
  tooltipHelp: {
    fontSize: '1rem',
    fontStyle: "italic"
  },
  tooltip: {
    transform: isFriendlyUI ? "translateY(-10px)" : undefined,
  },
  verticalArrows: {
    "& .LWTooltip-root": {
      transform: "translateY(1px)",
    },
    "& $voteScore": {
      transform: "translateY(-2px)",
      display: "block",
    },
  },
})

const OverallVoteAxis = ({
  document,
  hideKarma=false,
  voteProps,
  classes,
  showBox=false,
  className,
}: {
  document: VoteableTypeClient,
  hideKarma?: boolean,
  voteProps: VotingProps<VoteableTypeClient>,
  classes: ClassesType,
  showBox?: boolean
  className?: string,
}) => {
  const currentUser = useCurrentUser();

  if (!document) return null;

  const { OverallVoteButton, LWTooltip } = Components

  const collectionName = voteProps.collectionName;
  const extendedScore = voteProps.document?.extendedScore
  const voteCount = extendedScore && ("approvalVoteCount" in extendedScore)
    ? extendedScore.approvalVoteCount
    : (voteProps.voteCount || 0);
  const karma = voteProps.baseScore;
  const {fail, reason: whyYouCantVote} = voteButtonsDisabledForUser(currentUser);
  const canVote = !fail;

  let moveToAlignnmentUserId = ""
  let documentTypeName = "comment";
  if (collectionName === "Comments") {
    const comment = document as CommentsList
    moveToAlignnmentUserId = comment.moveToAlignmentUserId
  }
  if (collectionName === "Posts") {
    documentTypeName = "post";
  }
  if (collectionName === "Revisions") {
    documentTypeName = "revision";
  }

  const af = (document as any).af;
  const afDate = (document as any).afDate;
  const afBaseScore = (document as any).afBaseScore;

  const moveToAfInfo = userIsAdmin(currentUser) && !!moveToAlignnmentUserId && (
    <div className={classes.tooltipHelp}>
      <span>Moved to AF by <Components.UsersName documentId={moveToAlignnmentUserId }/> on { afDate && moment(new Date(afDate)).format('YYYY-MM-DD') }</span>
    </div>
  )

  const karmaTooltipTitle = hideKarma
    ? 'This post has disabled karma visibility'
    : <div>This {documentTypeName} has {karma} <b>overall</b> karma ({voteCount} {voteCount === 1 ? "Vote" : "Votes"})</div>

  const TooltipIfDisabled = (canVote
    ? ({children}: {children: React.ReactNode}) => <>{children}</>
    : ({children}: {children: React.ReactNode}) => <LWTooltip
      placement="top"
      popperClassName={classes.tooltip}
      title={<>
        <div>{whyYouCantVote}</div>
        <div>{karmaTooltipTitle}</div>
      </>}
    >
      {children}
    </LWTooltip>
  )
  const TooltipIfEnabled = (canVote
    ? ({children, ...props}: React.ComponentProps<typeof LWTooltip>) =>
      <LWTooltip {...props} popperClassName={classes.tooltip}>
        {children}
      </LWTooltip>
    : ({children}: {children: React.ReactNode}) => <>{children}</>
  );

  const tooltipPlacement = isFriendlyUI ? "top" : "bottom";

  const buttonProps: Partial<OverallVoteButtonProps<VoteableTypeClient>> = {};
  // TODO: In the fullness of time
  const verticalArrows = isBookUI;
  if (verticalArrows) {
    buttonProps.solidArrow = true;
  }

  const upvoteButton = <TooltipIfEnabled
    title={<div><b>Overall Karma: Upvote</b><br />How much do you like this overall?<br /><em>For strong upvote, click-and-hold<br />(Click twice on mobile)</em></div>}
    placement={tooltipPlacement}
  >
    <OverallVoteButton
      orientation={verticalArrows ? "up" : "right"}
      color="secondary"
      upOrDown="Upvote"
      enabled={canVote}
      {...voteProps}
      {...buttonProps}
    />
  </TooltipIfEnabled>

  const downvoteButton = <TooltipIfEnabled
    title={<div><b>Overall Karma: Downvote</b><br />How much do you like this overall?<br /><em>For strong downvote, click-and-hold<br />(Click twice on mobile)</em></div>}
    placement={tooltipPlacement}
  >
    <OverallVoteButton
      orientation={verticalArrows ? "down" : "left"}
      color="error"
      upOrDown="Downvote"
      enabled={canVote}
      {...voteProps}
      {...buttonProps}
    />
  </TooltipIfEnabled>

  return <TooltipIfDisabled>
    <span className={classes.vote}>
      {!!af && !isAF &&
        <LWTooltip
          placement={tooltipPlacement}
          popperClassName={classes.tooltip}
          title={
            <div>
              <p>AI Alignment Forum Karma</p>
              { moveToAfInfo }
            </div>
          }
        >
          <span className={classes.secondaryScore}>
            <span className={classes.secondarySymbol}>Ω</span>
            <span className={classes.secondaryScoreNumber}>{afBaseScore || 0}</span>
          </span>
        </LWTooltip>
      }
      {!af && isAF &&
        <LWTooltip
          title="LessWrong Karma"
          placement={tooltipPlacement}
          className={classes.tooltip}
        >
          <span className={classes.secondaryScore}>
            <span className={classes.secondarySymbol}>LW</span>
            <span className={classes.secondaryScoreNumber}>{document.baseScore || 0}</span>
          </span>
        </LWTooltip>
      }
      {(!isAF || !!af) &&
        <span className={classNames(classes.overallSection, className, {
          [classes.overallSectionBox]: showBox,
          [classes.verticalArrows]: verticalArrows,
        })}>
          {isBookUI ? upvoteButton : downvoteButton}
          <TooltipIfEnabled title={karmaTooltipTitle} placement={tooltipPlacement}>
            {hideKarma
              ? <span>{' '}</span>
              : <span className={classes.voteScore}>
                  {karma}
                </span>
            }
          </TooltipIfEnabled>
          {isBookUI ? downvoteButton : upvoteButton}
        </span>
      }
    </span>
  </TooltipIfDisabled>
}

const OverallVoteAxisComponent = registerComponent('OverallVoteAxis', OverallVoteAxis, {styles});

declare global {
  interface ComponentTypes {
    OverallVoteAxis: typeof OverallVoteAxisComponent
  }
}

1	import { Components, registerComponent } from '../../lib/vulcan-lib/components';	1✔
2	import React from 'react';	1✔
3	import { userIsAdmin } from '../../lib/vulcan-users/permissions';	1✔
4	import moment from '../../lib/moment-timezone';	1✔
5	import { useCurrentUser } from '../common/withUser';	1✔
6	import { isAF } from '../../lib/instanceSettings';	1✔
7	import { voteButtonsDisabledForUser } from '../../lib/collections/users/helpers';	1✔
8	import type { VotingProps } from './votingProps';
9	import type { OverallVoteButtonProps } from './OverallVoteButton';
10	import classNames from 'classnames';	1✔
11	import { isBookUI, isFriendlyUI } from '../../themes/forumTheme';	1✔
12
13	const styles = (theme: ThemeType): JssStyles => ({	1✔
14	overallSection: {
15	display: 'inline-block',
16	height: 24,
17	paddingTop: 2
18	},
19	overallSectionBox: {
20	marginLeft: 8,
21	outline: isFriendlyUI ? theme.palette.border.commentBorder : 'none',	1!
22	borderRadius: isFriendlyUI ? theme.borderRadius.small : 2,	1!
23	textAlign: 'center',
24	minWidth: 60
25	},
26	vote: {
27	fontSize: 30,
28	lineHeight: 0.6,
29	whiteSpace: "nowrap",
30	display: "inline-block"
31	},
32	voteScore: {
33	fontSize: '1.1rem',
34	marginLeft: 4,
35	marginRight: 4,
36	lineHeight: 1,
37	},
38	secondarySymbol: {
39	fontFamily: theme.typography.body1.fontFamily,
40	},
41	secondaryScore: {
42	fontSize: '1.1rem',
43	marginLeft: 2,
44	marginRight: 14
45	},
46	secondaryScoreNumber: {
47	marginLeft: 3,
48	},
49	tooltipHelp: {
50	fontSize: '1rem',
51	fontStyle: "italic"
52	},
53	tooltip: {
54	transform: isFriendlyUI ? "translateY(-10px)" : undefined,	1!
55	},
56	verticalArrows: {
57	"& .LWTooltip-root": {
58	transform: "translateY(1px)",
59	},
60	"& $voteScore": {
61	transform: "translateY(-2px)",
62	display: "block",
63	},
64	},
65	})
66
67	const OverallVoteAxis = ({	1✔
68	document,
69	hideKarma=false,	×
70	voteProps,
71	classes,
72	showBox=false,	×
73	className,
74	}: {
75	document: VoteableTypeClient,
76	hideKarma?: boolean,
77	voteProps: VotingProps<VoteableTypeClient>,
78	classes: ClassesType,
79	showBox?: boolean
80	className?: string,
81	}) => {
82	const currentUser = useCurrentUser();	×
83
84	if (!document) return null;	×
85
86	const { OverallVoteButton, LWTooltip } = Components	×
87
88	const collectionName = voteProps.collectionName;	×
89	const extendedScore = voteProps.document?.extendedScore	×
90	const voteCount = extendedScore && ("approvalVoteCount" in extendedScore)	×
91	? extendedScore.approvalVoteCount	×
92	: (voteProps.voteCount \|\| 0);	×
93	const karma = voteProps.baseScore;	×
94	const {fail, reason: whyYouCantVote} = voteButtonsDisabledForUser(currentUser);	×
95	const canVote = !fail;	×
96
97	let moveToAlignnmentUserId = ""	×
98	let documentTypeName = "comment";	×
99	if (collectionName === "Comments") {	×
100	const comment = document as CommentsList	×
101	moveToAlignnmentUserId = comment.moveToAlignmentUserId	×
102	}
103	if (collectionName === "Posts") {	×
104	documentTypeName = "post";	×
105	}
106	if (collectionName === "Revisions") {	×
107	documentTypeName = "revision";	×
108	}
109
110	const af = (document as any).af;	×
111	const afDate = (document as any).afDate;	×
112	const afBaseScore = (document as any).afBaseScore;	×
113
114	const moveToAfInfo = userIsAdmin(currentUser) && !!moveToAlignnmentUserId && (	×
115	<div className={classes.tooltipHelp}>
116	<span>Moved to AF by <Components.UsersName documentId={moveToAlignnmentUserId }/> on { afDate && moment(new Date(afDate)).format('YYYY-MM-DD') }</span>	×
117	</div>
118	)
119
120	const karmaTooltipTitle = hideKarma	×
121	? 'This post has disabled karma visibility'	×
122	: <div>This {documentTypeName} has {karma} <b>overall</b> karma ({voteCount} {voteCount === 1 ? "Vote" : "Votes"})</div>	×
123
124	const TooltipIfDisabled = (canVote	×
125	? ({children}: {children: React.ReactNode}) => <>{children}</>	×
126	: ({children}: {children: React.ReactNode}) => <LWTooltip	×
127	placement="top"
128	popperClassName={classes.tooltip}
129	title={<>
130	<div>{whyYouCantVote}</div>
131	<div>{karmaTooltipTitle}</div>
132	</>}
133	>
134	{children}
135	</LWTooltip>
136	)
137	const TooltipIfEnabled = (canVote	×
138	? ({children, ...props}: React.ComponentProps<typeof LWTooltip>) =>	×
139	<LWTooltip {...props} popperClassName={classes.tooltip}>	×
140	{children}
141	</LWTooltip>
142	: ({children}: {children: React.ReactNode}) => <>{children}</>	×
143	);
144
145	const tooltipPlacement = isFriendlyUI ? "top" : "bottom";	×
146
147	const buttonProps: Partial<OverallVoteButtonProps<VoteableTypeClient>> = {};	×
148	// TODO: In the fullness of time
NEW 149	const verticalArrows = isBookUI;	×
150	if (verticalArrows) {	×
151	buttonProps.solidArrow = true;	×
152	}
153
NEW 154	const upvoteButton = <TooltipIfEnabled	×
155	title={<div><b>Overall Karma: Upvote</b><br />How much do you like this overall?<br /><em>For strong upvote, click-and-hold<br />(Click twice on mobile)</em></div>}
156	placement={tooltipPlacement}
157	>
158	<OverallVoteButton
159	orientation={verticalArrows ? "up" : "right"}	×
160	color="secondary"
161	upOrDown="Upvote"
162	enabled={canVote}
163	{...voteProps}
164	{...buttonProps}
165	/>
166	</TooltipIfEnabled>
167
NEW 168	const downvoteButton = <TooltipIfEnabled	×
169	title={<div><b>Overall Karma: Downvote</b><br />How much do you like this overall?<br /><em>For strong downvote, click-and-hold<br />(Click twice on mobile)</em></div>}
170	placement={tooltipPlacement}
171	>
172	<OverallVoteButton
173	orientation={verticalArrows ? "down" : "left"}	×
174	color="error"
175	upOrDown="Downvote"
176	enabled={canVote}
177	{...voteProps}
178	{...buttonProps}
179	/>
180	</TooltipIfEnabled>
181
UNCOV 182	return <TooltipIfDisabled>	×
183	<span className={classes.vote}>
184	{!!af && !isAF &&	×
185	<LWTooltip
186	placement={tooltipPlacement}
187	popperClassName={classes.tooltip}
188	title={
189	<div>
190	<p>AI Alignment Forum Karma</p>
191	{ moveToAfInfo }
192	</div>
193	}
194	>
195	<span className={classes.secondaryScore}>
196	<span className={classes.secondarySymbol}>Ω</span>
197	<span className={classes.secondaryScoreNumber}>{afBaseScore \|\| 0}</span>	×
198	</span>
199	</LWTooltip>
200	}
201	{!af && isAF &&	×
202	<LWTooltip
203	title="LessWrong Karma"
204	placement={tooltipPlacement}
205	className={classes.tooltip}
206	>
207	<span className={classes.secondaryScore}>
208	<span className={classes.secondarySymbol}>LW</span>
209	<span className={classes.secondaryScoreNumber}>{document.baseScore \|\| 0}</span>	×
210	</span>
211	</LWTooltip>
212	}
213	{(!isAF \|\| !!af) &&	×
214	<span className={classNames(classes.overallSection, className, {
215	[classes.overallSectionBox]: showBox,
216	[classes.verticalArrows]: verticalArrows,
217	})}>
218	{isBookUI ? upvoteButton : downvoteButton}	×
219	<TooltipIfEnabled title={karmaTooltipTitle} placement={tooltipPlacement}>
220	{hideKarma
221	? <span>{' '}</span>	×
222	: <span className={classes.voteScore}>
223	{karma}
224	</span>
225	}
226	</TooltipIfEnabled>
227	{isBookUI ? downvoteButton : upvoteButton}	×
228	</span>
229	}
230	</span>
231	</TooltipIfDisabled>
232	}
233
234	const OverallVoteAxisComponent = registerComponent('OverallVoteAxis', OverallVoteAxis, {styles});	1✔
235
236	declare global {
237	interface ComponentTypes {
238	OverallVoteAxis: typeof OverallVoteAxisComponent
239	}
240	}

ForumMagnum / ForumMagnum / 10428606389

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