9429583794

Committed 08 Jun 2024 02:58PM UTC coverage: 31.921% (-0.05%) from 31.975%

Build # 9429583794

Build Type

push

github

Committed by

oetherington

Commit Message

Fix lint errors

Run Details

4825 of 39436 branches covered (12.24%)

Branch coverage included in aggregate %.

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

2 existing lines in 1 file now uncovered.

28140 of 63834 relevant lines covered (44.08%)

181.47 hits per line

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

18.82

/packages/lesswrong/components/surveys/SurveyPostsItem.tsx

import React, { useCallback, useRef, useState } from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import { AnalyticsContext, useTracking } from "@/lib/analyticsEvents";
import { useCurrentUser } from "../common/withUser";
import { useCreate } from "@/lib/crud/withCreate";
import { useCookiesWithConsent } from "../hooks/useCookiesWithConsent";
import { CLIENT_ID_COOKIE, HIDE_SURVEY_SCHEDULE_IDS } from "@/lib/cookies/cookies";
import { SECTION_WIDTH } from "../common/SingleColumnSection";
import MoreVertIcon from '@material-ui/icons/MoreVert';
import Collapse from "@material-ui/core/Collapse";
import range from "lodash/range";
import type { SurveyQuestionFormat } from "@/lib/collections/surveyQuestions/schema";

const styles = (theme: ThemeType) => ({
  root: {
    maxWidth: SECTION_WIDTH,
    fontFamily: theme.palette.fonts.sansSerifStack,
    background: theme.palette.grey[0],
    border: `1px solid ${theme.palette.grey[100]}`,
    borderRadius: theme.borderRadius.default,
    padding: 14,
    height: 80,
    display: "flex",
    alignItems: "center",
  },
  loading: {
    height: "unset",
  },
  tooltip: {
    display: "flex",
  },
  info: {
    marginRight: 13,
    color: theme.palette.grey[600],
  },
  questions: {
    flexGrow: 1,
  },
  question: {
    display: "flex",
    flexDirection: "column",
    gap: "8px",
  },
  questionText: {
    fontWeight: 600,
    fontSize: 16,
    color: theme.palette.greyAlpha(0.87),
  },
  rankButtons: {
    display: "flex",
    gap: "6px",
  },
  rankButton: {
    padding: 0,
    minHeight: 30,
  },
  tripleDot: {
    cursor: "pointer",
    color: theme.palette.grey[400],
    fontSize: 20,
    "&:hover": {
      color: theme.palette.grey[700],
    },
  },
  menu: {
    maxWidth: "calc(100vw - 100px)",
  },
});

type QuestionResponse = string | number;

const QuestionReponse = ({format, onRespond, classes}: {
  format: SurveyQuestionFormat,
  onRespond: (response: QuestionResponse) => void,
  classes: ClassesType<typeof styles>,
}) => {
  const {EAButton} = Components;
  switch (format) {
  case "rank0To10":
    return (
      <div className={classes.rankButtons}>
        {range(0, 11).map((i) => (
          <EAButton
            key={i}
            onClick={onRespond.bind(null, i)}
            variant="outlined"
            className={classes.rankButton}
          >
            {i}
          </EAButton>
        ))}
      </div>
    );
  default:
      // TODO
      throw new Error("TODO: Implement other question formats");
  }
}

const SurveyPostsItemInternal = ({survey, surveyScheduleId, collapse, classes}: {
  survey: SurveyMinimumInfo,
  surveyScheduleId?: string,
  collapse: () => void,
  classes: ClassesType<typeof styles>,
}) => {
  const {captureEvent} = useTracking();
  const currentUser = useCurrentUser();
  const anchorEl = useRef<HTMLDivElement | null>(null);
  const [isOpen, setIsOpen] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [_, setResponses] = useState<Record<string, QuestionResponse>>({});

  const [cookies, setCookie] = useCookiesWithConsent([
    HIDE_SURVEY_SCHEDULE_IDS,
    CLIENT_ID_COOKIE,
  ]);
  const clientId = cookies[CLIENT_ID_COOKIE];
  const hideSurveyScheduleIds = cookies[HIDE_SURVEY_SCHEDULE_IDS] || [];

  const onToggleMenu = useCallback(() => {
    setIsOpen((open) => {
      const newOpen = !open;
      captureEvent("tripleDotClick", {
        open: newOpen,
        itemType: "survey",
        surveyId: survey._id,
      });
      return newOpen;
    });
  }, [captureEvent, survey._id]);

  const {create: createResponse} = useCreate({
    collectionName: "SurveyResponses",
    fragmentName: "SurveyResponseMinimumInfo",
  });

  const onSubmit = useCallback(async (response: Record<string, QuestionResponse>) => {
    setIsSubmitting(true);
    try {
      await createResponse({
        data: {
          surveyId: survey._id,
          surveyScheduleId,
          userId: currentUser?._id,
          clientId,
          response,
        },
      });
      captureEvent("surveySubmit", {
        surveyId: survey._id,
        surveyScheduleId,
        response,
      });
      collapse();
    } catch (e) {
      // eslint-disable-next-line no-console
      console.error("Error submitting survey:", e);
      setIsSubmitting(false);
    }
  }, [
    collapse,
    captureEvent,
    survey._id,
    surveyScheduleId,
    createResponse,
    currentUser?._id,
    clientId,
  ]);

  const onRespond = useCallback(async (
    questionId: string,
    response: QuestionResponse,
  ) => {
    setResponses((responses) => {
      const newResponses = {
        ...responses,
        [questionId]: response,
      };
      if (Object.keys(newResponses).length === survey.questions.length) {
        void onSubmit(newResponses);
      }
      return newResponses;
    });
    setResponses((responses) => ({
      ...responses,
      [questionId]: response,
    }));
    captureEvent("surveyResponse", {
      surveyId: survey._id,
      surveyScheduleId,
      questionId,
      response,
    });
  }, [captureEvent, survey, surveyScheduleId, onSubmit]);

  const onDismiss = useCallback(() => {
    setCookie(
      HIDE_SURVEY_SCHEDULE_IDS,
      [...hideSurveyScheduleIds, surveyScheduleId],
    );
    captureEvent("surveyDismiss", {
      surveyId: survey._id,
      surveyScheduleId,
    });
  }, [captureEvent, survey._id, surveyScheduleId, hideSurveyScheduleIds, setCookie]);

  const onOptOut = useCallback(() => {
    // TODO: Opt-out
    captureEvent("surveyOptOut", {
      surveyId: survey._id,
      surveyScheduleId,
    });
  }, [captureEvent, survey._id, surveyScheduleId]);

  if (cookies[HIDE_SURVEY_SCHEDULE_IDS]?.includes(surveyScheduleId)) {
    return null;
  }

  const {
    LWTooltip, ForumIcon, LWClickAwayListener, DropdownMenu, DropdownItem,
    PopperCard, Loading,
  } = Components;
  return (
    <div className={classes.root}>
      <LWTooltip
        title="Some really informative stuff"
        placement="right"
        inlineBlock={false}
        className={classes.tooltip}
      >
        <ForumIcon icon="QuestionMarkCircle" className={classes.info} />
      </LWTooltip>
      <div className={classes.questions}>
        {isSubmitting
          ? <Loading className={classes.loading} />
          : survey.questions.map(({_id, question, format}) => (
            <div key={_id} className={classes.question}>
              <div className={classes.questionText}>{question}</div>
              <QuestionReponse
                format={format}
                onRespond={onRespond.bind(null, _id)}
                classes={classes}
              />
            </div>
          ))
        }
      </div>
      {/* TODO; Misaligned */}
      <div ref={anchorEl}>
        <MoreVertIcon
          onClick={onToggleMenu}
          className={classes.tripleDot}
        />
      </div>
      <PopperCard
        open={isOpen}
        placement="left-start"
        anchorEl={anchorEl.current}
        allowOverflow
      >
        <LWClickAwayListener onClickAway={setIsOpen.bind(null, false)}>
          <DropdownMenu className={classes.menu}>
            {currentUser?.isAdmin &&
              <DropdownItem
                title="Edit survey"
                icon="Edit"
                to={`/survey/${survey._id}/edit`}
              />
            }
            <DropdownItem
              title="Dismiss"
              icon="Close"
              onClick={onDismiss}
            />
            <DropdownItem
              title="Opt-out of feedback"
              icon="No"
              onClick={onOptOut}
            />
          </DropdownMenu>
        </LWClickAwayListener>
      </PopperCard>
    </div>
  );
}

const SurveyPostsItem = ({survey, surveyScheduleId, classes}: {
  survey: SurveyMinimumInfo,
  surveyScheduleId?: string,
  classes: ClassesType<typeof styles>,
}) => {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const collapse = useCallback(() => setIsCollapsed(true), []);
  return (
    <Collapse in={!isCollapsed}>
      <AnalyticsContext pageElementContext="surveyPostsItem">
        <SurveyPostsItemInternal
          survey={survey}
          surveyScheduleId={surveyScheduleId}
          collapse={collapse}
          classes={classes}
        />
      </AnalyticsContext>
    </Collapse>
  );
}

const SurveyPostsItemComponent = registerComponent(
  "SurveyPostsItem",
  SurveyPostsItem,
  {styles},
);

declare global {
  interface ComponentTypes {
    SurveyPostsItem: typeof SurveyPostsItemComponent
  }
}

1	import React, { useCallback, useRef, useState } from "react";	1✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import { AnalyticsContext, useTracking } from "@/lib/analyticsEvents";	1✔
4	import { useCurrentUser } from "../common/withUser";	1✔
5	import { useCreate } from "@/lib/crud/withCreate";	1✔
6	import { useCookiesWithConsent } from "../hooks/useCookiesWithConsent";	1✔
7	import { CLIENT_ID_COOKIE, HIDE_SURVEY_SCHEDULE_IDS } from "@/lib/cookies/cookies";	1✔
8	import { SECTION_WIDTH } from "../common/SingleColumnSection";	1✔
9	import MoreVertIcon from '@material-ui/icons/MoreVert';	1✔
10	import Collapse from "@material-ui/core/Collapse";	1✔
11	import range from "lodash/range";	1✔
12	import type { SurveyQuestionFormat } from "@/lib/collections/surveyQuestions/schema";
13
14	const styles = (theme: ThemeType) => ({	1✔
15	root: {
16	maxWidth: SECTION_WIDTH,
17	fontFamily: theme.palette.fonts.sansSerifStack,
18	background: theme.palette.grey[0],
19	border: `1px solid ${theme.palette.grey[100]}`,
20	borderRadius: theme.borderRadius.default,
21	padding: 14,
22	height: 80,
23	display: "flex",
24	alignItems: "center",
25	},
26	loading: {
27	height: "unset",
28	},
29	tooltip: {
30	display: "flex",
31	},
32	info: {
33	marginRight: 13,
34	color: theme.palette.grey[600],
35	},
36	questions: {
37	flexGrow: 1,
38	},
39	question: {
40	display: "flex",
41	flexDirection: "column",
42	gap: "8px",
43	},
44	questionText: {
45	fontWeight: 600,
46	fontSize: 16,
47	color: theme.palette.greyAlpha(0.87),
48	},
49	rankButtons: {
50	display: "flex",
51	gap: "6px",
52	},
53	rankButton: {
54	padding: 0,
55	minHeight: 30,
56	},
57	tripleDot: {
58	cursor: "pointer",
59	color: theme.palette.grey[400],
60	fontSize: 20,
61	"&:hover": {
62	color: theme.palette.grey[700],
63	},
64	},
65	menu: {
66	maxWidth: "calc(100vw - 100px)",
67	},
68	});
69
70	type QuestionResponse = string \| number;
71
72	const QuestionReponse = ({format, onRespond, classes}: {	1✔
73	format: SurveyQuestionFormat,
74	onRespond: (response: QuestionResponse) => void,
75	classes: ClassesType<typeof styles>,
76	}) => {
77	const {EAButton} = Components;	×
78	switch (format) {	×
79	case "rank0To10":
80	return (	×
81	<div className={classes.rankButtons}>
82	{range(0, 11).map((i) => (
83	<EAButton	×
84	key={i}
85	onClick={onRespond.bind(null, i)}
86	variant="outlined"
87	className={classes.rankButton}
88	>
89	{i}
90	</EAButton>
91	))}
92	</div>
93	);
94	default:
95	// TODO
96	throw new Error("TODO: Implement other question formats");	×
97	}
98	}
99
100	const SurveyPostsItemInternal = ({survey, surveyScheduleId, collapse, classes}: {	1✔
101	survey: SurveyMinimumInfo,
102	surveyScheduleId?: string,
103	collapse: () => void,
104	classes: ClassesType<typeof styles>,
105	}) => {
106	const {captureEvent} = useTracking();	×
UNCOV 107	const currentUser = useCurrentUser();	×
108	const anchorEl = useRef<HTMLDivElement \| null>(null);	×
109	const [isOpen, setIsOpen] = useState(false);	×
110	const [isSubmitting, setIsSubmitting] = useState(false);	×
NEW 111	const [_, setResponses] = useState<Record<string, QuestionResponse>>({});	×
112
NEW 113	const [cookies, setCookie] = useCookiesWithConsent([	×
114	HIDE_SURVEY_SCHEDULE_IDS,
115	CLIENT_ID_COOKIE,
116	]);
NEW 117	const clientId = cookies[CLIENT_ID_COOKIE];	×
NEW 118	const hideSurveyScheduleIds = cookies[HIDE_SURVEY_SCHEDULE_IDS] \|\| [];	×
119
120	const onToggleMenu = useCallback(() => {	×
121	setIsOpen((open) => {	×
122	const newOpen = !open;	×
123	captureEvent("tripleDotClick", {	×
124	open: newOpen,
125	itemType: "survey",
126	surveyId: survey._id,
127	});
128	return newOpen;	×
129	});
130	}, [captureEvent, survey._id]);
131
132	const {create: createResponse} = useCreate({	×
133	collectionName: "SurveyResponses",
134	fragmentName: "SurveyResponseMinimumInfo",
135	});
136
137	const onSubmit = useCallback(async (response: Record<string, QuestionResponse>) => {	×
138	setIsSubmitting(true);	×
139	try {	×
140	await createResponse({	×
141	data: {
142	surveyId: survey._id,
143	surveyScheduleId,
144	userId: currentUser?._id,	×
145	clientId,
146	response,
147	},
148	});
149	captureEvent("surveySubmit", {	×
150	surveyId: survey._id,
151	surveyScheduleId,
152	response,
153	});
154	collapse();	×
155	} catch (e) {
156	// eslint-disable-next-line no-console
157	console.error("Error submitting survey:", e);	×
158	setIsSubmitting(false);	×
159	}
160	}, [
161	collapse,
162	captureEvent,
163	survey._id,
164	surveyScheduleId,
165	createResponse,
166	currentUser?._id,	×
167	clientId,
168	]);
169
170	const onRespond = useCallback(async (	×
171	questionId: string,
172	response: QuestionResponse,
173	) => {
174	setResponses((responses) => {	×
175	const newResponses = {	×
176	...responses,
177	[questionId]: response,
178	};
179	if (Object.keys(newResponses).length === survey.questions.length) {	×
180	void onSubmit(newResponses);	×
181	}
182	return newResponses;	×
183	});
184	setResponses((responses) => ({	×
185	...responses,
186	[questionId]: response,
187	}));
188	captureEvent("surveyResponse", {	×
189	surveyId: survey._id,
190	surveyScheduleId,
191	questionId,
192	response,
193	});
194	}, [captureEvent, survey, surveyScheduleId, onSubmit]);
195
196	const onDismiss = useCallback(() => {	×
197	setCookie(	×
198	HIDE_SURVEY_SCHEDULE_IDS,
199	[...hideSurveyScheduleIds, surveyScheduleId],
200	);
UNCOV 201	captureEvent("surveyDismiss", {	×
202	surveyId: survey._id,
203	surveyScheduleId,
204	});
205	}, [captureEvent, survey._id, surveyScheduleId, hideSurveyScheduleIds, setCookie]);
206
207	const onOptOut = useCallback(() => {	×
208	// TODO: Opt-out
209	captureEvent("surveyOptOut", {	×
210	surveyId: survey._id,
211	surveyScheduleId,
212	});
213	}, [captureEvent, survey._id, surveyScheduleId]);
214
215	if (cookies[HIDE_SURVEY_SCHEDULE_IDS]?.includes(surveyScheduleId)) {	×
216	return null;	×
217	}
218
219	const {
220	LWTooltip, ForumIcon, LWClickAwayListener, DropdownMenu, DropdownItem,
221	PopperCard, Loading,
222	} = Components;	×
223	return (	×
224	<div className={classes.root}>
225	<LWTooltip
226	title="Some really informative stuff"
227	placement="right"
228	inlineBlock={false}
229	className={classes.tooltip}
230	>
231	<ForumIcon icon="QuestionMarkCircle" className={classes.info} />
232	</LWTooltip>
233	<div className={classes.questions}>
234	{isSubmitting
235	? <Loading className={classes.loading} />	×
236	: survey.questions.map(({_id, question, format}) => (
237	<div key={_id} className={classes.question}>	×
238	<div className={classes.questionText}>{question}</div>
239	<QuestionReponse
240	format={format}
241	onRespond={onRespond.bind(null, _id)}
242	classes={classes}
243	/>
244	</div>
245	))
246	}
247	</div>
248	{/* TODO; Misaligned */}
249	<div ref={anchorEl}>
250	<MoreVertIcon
251	onClick={onToggleMenu}
252	className={classes.tripleDot}
253	/>
254	</div>
255	<PopperCard
256	open={isOpen}
257	placement="left-start"
258	anchorEl={anchorEl.current}
259	allowOverflow
260	>
261	<LWClickAwayListener onClickAway={setIsOpen.bind(null, false)}>
262	<DropdownMenu className={classes.menu}>
263	{currentUser?.isAdmin &&	×
264	<DropdownItem
265	title="Edit survey"
266	icon="Edit"
267	to={`/survey/${survey._id}/edit`}
268	/>
269	}
270	<DropdownItem
271	title="Dismiss"
272	icon="Close"
273	onClick={onDismiss}
274	/>
275	<DropdownItem
276	title="Opt-out of feedback"
277	icon="No"
278	onClick={onOptOut}
279	/>
280	</DropdownMenu>
281	</LWClickAwayListener>
282	</PopperCard>
283	</div>
284	);
285	}
286
287	const SurveyPostsItem = ({survey, surveyScheduleId, classes}: {	1✔
288	survey: SurveyMinimumInfo,
289	surveyScheduleId?: string,
290	classes: ClassesType<typeof styles>,
291	}) => {
292	const [isCollapsed, setIsCollapsed] = useState(false);	×
293	const collapse = useCallback(() => setIsCollapsed(true), []);	×
294	return (	×
295	<Collapse in={!isCollapsed}>
296	<AnalyticsContext pageElementContext="surveyPostsItem">
297	<SurveyPostsItemInternal
298	survey={survey}
299	surveyScheduleId={surveyScheduleId}
300	collapse={collapse}
301	classes={classes}
302	/>
303	</AnalyticsContext>
304	</Collapse>
305	);
306	}
307
308	const SurveyPostsItemComponent = registerComponent(	1✔
309	"SurveyPostsItem",
310	SurveyPostsItem,
311	{styles},
312	);
313
314	declare global {
315	interface ComponentTypes {
316	SurveyPostsItem: typeof SurveyPostsItemComponent
317	}
318	}

ForumMagnum / ForumMagnum / 9429583794

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