9716762786

Committed 28 Jun 2024 05:56PM UTC coverage: 31.947% (-0.01%) from 31.959%

Build # 9716762786

Build Type

Pull #9457

github

Committed by

s-cheng

Commit Message

code cleanup and add comment

Pull Request Pull Request #9457: [EA Forum only] Debate week post page section

Run Details

4885 of 39930 branches covered (12.23%)

Branch coverage included in aggregate %.

26 of 71 new or added lines in 6 files covered. (36.62%)

5 existing lines in 3 files now uncovered.

28466 of 64464 relevant lines covered (44.16%)

180.92 hits per line

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

25.0

/packages/lesswrong/components/forumEvents/ForumEventPostSelectionDialog.tsx

import React, { useCallback, useMemo, useState } from "react";
import { registerComponent, Components, decodeIntlError } from "../../lib/vulcan-lib";
import { ForumEventVoteData, addForumEventVoteQuery } from "./ForumEventPoll";
import { useMutation } from "@apollo/client";
import { usePostsList } from "../posts/usePostsList";
import { AnalyticsContext } from "@/lib/analyticsEvents";
import FormattedMessage from "@/lib/vulcan-i18n/message";
import Checkbox from "@material-ui/core/Checkbox";
import { useCurrentForumEvent } from "../hooks/useCurrentForumEvent";

const styles = (theme: ThemeType) => ({
  dialog: {
    color: theme.palette.grey[1000],
    fontFamily: theme.palette.fonts.sansSerifStack,
    lineHeight: '140%',
    padding: 32,
  },
  title: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    fontSize: 24,
    fontWeight: 700,
    marginTop: 0,
    marginBottom: 16,
  },
  closeIcon: {
    fontSize: 20,
    color: theme.palette.grey[700],
    cursor: 'pointer',
    transform: 'translate(4px, -4px)',
    '&:hover': {
      color: theme.palette.grey[1000],
    }
  },
  description: {
    fontSize: 14,
    lineHeight: '21px',
    fontWeight: 500,
    marginBottom: 26,
  },
  postsSection: {
    overflowY: 'scroll',
  },
  buttons: {
    display: 'flex',
    alignItems: 'baseline',
    justifyContent: 'flex-end',
    columnGap: '16px',
    marginTop: 24,
  },
  somethingElseButton: {
    background: 'none',
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontSize: 14,
    fontWeight: 500,
    lineHeight: 'normal',
    color: theme.palette.primary.main,
    padding: 0,
    '&:hover': {
      color: theme.palette.primary.dark,
    }
  },
  doneButton: {
    minWidth: 110,
    padding: '12px 20px',
  },
});

/**
 * Modal that handles post selection before submitting a vote for a forum event with a poll.
 * Built for the EA Forum, so if others want to use it you will want to audit the code first.
 */
const ForumEventPostSelectionDialog = ({ tag, voteData, onClose, classes }: {
  tag: TagBasicInfo,
  voteData: ForumEventVoteData,
  onClose?: () => void,
  classes: ClassesType<typeof styles>
}) => {
  const {refetch} = useCurrentForumEvent()
  const [selectedPosts, setSelectedPosts] = useState<string[]>([])
  
  const postsListProps = useMemo(() => ({
    terms: {
      filterSettings: {tags:[{tagId: tag._id, tagName: tag.name, filterMode: "Required"}]},
      view: "tagRelevance",
      tagId: tag._id,
      sortedBy: 'magic',
      limit: 50
    },
    hideTag: true,
  }), [tag])
  const {loading, error, orderedResults, itemProps} = usePostsList(postsListProps)
  
  const [addVote] = useMutation(
    addForumEventVoteQuery,
    {errorPolicy: "all"},
  )
  
  /**
   * Save the user's vote whenever they close the modal,
   * and include the selected posts if they clicked the "Done" button
   */
  const handleDone = useCallback((e: React.MouseEvent, includePosts=false) => {
    void addVote({variables: {
      ...voteData,
      postIds: includePosts ? selectedPosts : []
    }})
    refetch?.()
    onClose?.()
  }, [selectedPosts, addVote, voteData, refetch, onClose])
  
  const {
    LWDialog, EAButton, PostsNoResults, EAPostsItem, PostsLoading, ForumIcon
  } = Components;
  const postsError = decodeIntlError(error)

  return (
    <LWDialog
      open
      dialogClasses={{
        paper: classes.dialog,
      }}
    >
      <h2 className={classes.title}>
        Which posts changed your mind?
        <ForumIcon icon="Close" className={classes.closeIcon} onClick={handleDone} />
      </h2>
      <div className={classes.description}>
        Selecting a post in this list will assign it points for changing your mind.
        We use these points to rank debate week posts in order of influence.
      </div>
      <div className={classes.postsSection}>
        {/* Adapted from PostsList2 */}
        {error && <>
          <FormattedMessage id={postsError.id} values={{value: postsError.value}}/>{postsError.message}
        </>}
        {!orderedResults && loading && <PostsLoading placeholderCount={7} viewType="list" />}
        {orderedResults && !orderedResults.length && <PostsNoResults />}
        <AnalyticsContext viewType="list">
          {itemProps?.map((props) => <EAPostsItem
            key={props.post._id}
            {...props}
            openInNewTab
            secondaryInfoNode={
              <div>
                <Checkbox
                  checked={selectedPosts.includes(props.post._id)}
                  onChange={(event, checked) => {
                    if (checked) {
                      setSelectedPosts(prev => [...prev, props.post._id])
                    } else {
                      setSelectedPosts(prev => prev.filter(p => p !== props.post._id))
                    }
                  }}
                />
              </div>
            }
          />)}
        </AnalyticsContext>
      </div>
      <div className={classes.buttons}>
        <button onClick={handleDone} className={classes.somethingElseButton}>
          I changed my mind for other reasons
        </button>
        <EAButton onClick={(e) => handleDone(e, true)} className={classes.doneButton}>
          Done
        </EAButton>
      </div>
    </LWDialog>
  );
};

const ForumEventPostSelectionDialogComponent = registerComponent(
  "ForumEventPostSelectionDialog",
  ForumEventPostSelectionDialog,
  {styles}
);

declare global {
  interface ComponentTypes {
    ForumEventPostSelectionDialog: typeof ForumEventPostSelectionDialogComponent;
  }
}

1	import React, { useCallback, useMemo, useState } from "react";	1✔
2	import { registerComponent, Components, decodeIntlError } from "../../lib/vulcan-lib";	1✔
3	import { ForumEventVoteData, addForumEventVoteQuery } from "./ForumEventPoll";	1✔
4	import { useMutation } from "@apollo/client";	1✔
5	import { usePostsList } from "../posts/usePostsList";	1✔
6	import { AnalyticsContext } from "@/lib/analyticsEvents";	1✔
7	import FormattedMessage from "@/lib/vulcan-i18n/message";	1✔
8	import Checkbox from "@material-ui/core/Checkbox";	1✔
9	import { useCurrentForumEvent } from "../hooks/useCurrentForumEvent";	1✔
10
11	const styles = (theme: ThemeType) => ({	1✔
12	dialog: {
13	color: theme.palette.grey[1000],
14	fontFamily: theme.palette.fonts.sansSerifStack,
15	lineHeight: '140%',
16	padding: 32,
17	},
18	title: {
19	display: 'flex',
20	justifyContent: 'space-between',
21	alignItems: 'flex-start',
22	fontSize: 24,
23	fontWeight: 700,
24	marginTop: 0,
25	marginBottom: 16,
26	},
27	closeIcon: {
28	fontSize: 20,
29	color: theme.palette.grey[700],
30	cursor: 'pointer',
31	transform: 'translate(4px, -4px)',
32	'&:hover': {
33	color: theme.palette.grey[1000],
34	}
35	},
36	description: {
37	fontSize: 14,
38	lineHeight: '21px',
39	fontWeight: 500,
40	marginBottom: 26,
41	},
42	postsSection: {
43	overflowY: 'scroll',
44	},
45	buttons: {
46	display: 'flex',
47	alignItems: 'baseline',
48	justifyContent: 'flex-end',
49	columnGap: '16px',
50	marginTop: 24,
51	},
52	somethingElseButton: {
53	background: 'none',
54	fontFamily: theme.palette.fonts.sansSerifStack,
55	fontSize: 14,
56	fontWeight: 500,
57	lineHeight: 'normal',
58	color: theme.palette.primary.main,
59	padding: 0,
60	'&:hover': {
61	color: theme.palette.primary.dark,
62	}
63	},
64	doneButton: {
65	minWidth: 110,
66	padding: '12px 20px',
67	},
68	});
69
70	/**
71	* Modal that handles post selection before submitting a vote for a forum event with a poll.
72	* Built for the EA Forum, so if others want to use it you will want to audit the code first.
73	*/
74	const ForumEventPostSelectionDialog = ({ tag, voteData, onClose, classes }: {	1✔
75	tag: TagBasicInfo,
76	voteData: ForumEventVoteData,
77	onClose?: () => void,
78	classes: ClassesType<typeof styles>
79	}) => {
NEW 80	const {refetch} = useCurrentForumEvent()	×
UNCOV 81	const [selectedPosts, setSelectedPosts] = useState<string[]>([])	×
82
83	const postsListProps = useMemo(() => ({	×
84	terms: {
85	filterSettings: {tags:[{tagId: tag._id, tagName: tag.name, filterMode: "Required"}]},
86	view: "tagRelevance",
87	tagId: tag._id,
88	sortedBy: 'magic',
89	limit: 50
90	},
91	hideTag: true,
92	}), [tag])
93	const {loading, error, orderedResults, itemProps} = usePostsList(postsListProps)	×
94
95	const [addVote] = useMutation(	×
96	addForumEventVoteQuery,
97	{errorPolicy: "all"},
98	)
99
100	/**
101	* Save the user's vote whenever they close the modal,
102	* and include the selected posts if they clicked the "Done" button
103	*/
104	const handleDone = useCallback((e: React.MouseEvent, includePosts=false) => {	×
105	void addVote({variables: {	×
106	...voteData,
107	postIds: includePosts ? selectedPosts : []	×
108	}})
NEW 109	refetch?.()	×
UNCOV 110	onClose?.()	×
111	}, [selectedPosts, addVote, voteData, refetch, onClose])
112
113	const {
114	LWDialog, EAButton, PostsNoResults, EAPostsItem, PostsLoading, ForumIcon
115	} = Components;	×
116	const postsError = decodeIntlError(error)	×
117
118	return (	×
119	<LWDialog
120	open
121	dialogClasses={{
122	paper: classes.dialog,
123	}}
124	>
125	<h2 className={classes.title}>
126	Which posts changed your mind?
127	<ForumIcon icon="Close" className={classes.closeIcon} onClick={handleDone} />
128	</h2>
129	<div className={classes.description}>
130	Selecting a post in this list will assign it points for changing your mind.
131	We use these points to rank debate week posts in order of influence.
132	</div>
133	<div className={classes.postsSection}>
134	{/* Adapted from PostsList2 */}
135	{error && <>	×
136	<FormattedMessage id={postsError.id} values={{value: postsError.value}}/>{postsError.message}
137	</>}
138	{!orderedResults && loading && <PostsLoading placeholderCount={7} viewType="list" />}	×
139	{orderedResults && !orderedResults.length && <PostsNoResults />}	×
140	<AnalyticsContext viewType="list">
141	{itemProps?.map((props) => <EAPostsItem	×
142	key={props.post._id}
143	{...props}
144	openInNewTab
145	secondaryInfoNode={
146	<div>
147	<Checkbox
148	checked={selectedPosts.includes(props.post._id)}
149	onChange={(event, checked) => {
150	if (checked) {	×
151	setSelectedPosts(prev => [...prev, props.post._id])	×
152	} else {
153	setSelectedPosts(prev => prev.filter(p => p !== props.post._id))	×
154	}
155	}}
156	/>
157	</div>
158	}
159	/>)}
160	</AnalyticsContext>
161	</div>
162	<div className={classes.buttons}>
163	<button onClick={handleDone} className={classes.somethingElseButton}>
164	I changed my mind for other reasons
165	</button>
166	<EAButton onClick={(e) => handleDone(e, true)} className={classes.doneButton}>	×
167	Done
168	</EAButton>
169	</div>
170	</LWDialog>
171	);
172	};
173
174	const ForumEventPostSelectionDialogComponent = registerComponent(	1✔
175	"ForumEventPostSelectionDialog",
176	ForumEventPostSelectionDialog,
177	{styles}
178	);
179
180	declare global {
181	interface ComponentTypes {
182	ForumEventPostSelectionDialog: typeof ForumEventPostSelectionDialogComponent;
183	}
184	}

ForumMagnum / ForumMagnum / 9716762786

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