9782268147

Committed 03 Jul 2024 05:23PM UTC coverage: 31.871% (-0.005%) from 31.876%

Build # 9782268147

Build Type

Pull #9476

github

Committed by

s-cheng

Commit Message

Merge branch 'master' into debate-week-sparkline

Pull Request Pull Request #9476: [EA Forum only] add sparkline for forum event poll results

Run Details

4901 of 40217 branches covered (12.19%)

Branch coverage included in aggregate %.

6 of 29 new or added lines in 4 files covered. (20.69%)

1 existing line in 1 file now uncovered.

28585 of 64850 relevant lines covered (44.08%)

180.51 hits per line

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

19.49

/packages/lesswrong/components/forumEvents/ForumEventFrontpageBanner.tsx

import React, { CSSProperties, useMemo, useState } from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import { useCurrentForumEvent } from "../hooks/useCurrentForumEvent";
import moment from "moment";
import { HIDE_FORUM_EVENT_BANNER_PREFIX } from "../../lib/cookies/cookies";
import { useDismissable } from "../hooks/useDismissable";
import classNames from "classnames";
import { HEADER_HEIGHT } from "../common/Header";
import { Link } from "@/lib/reactRouterWrapper";
import orderBy from "lodash/orderBy";
import toPairs from "lodash/toPairs";
import { tagGetUrl } from "@/lib/collections/tags/helpers";
import { AnalyticsContext } from "@/lib/analyticsEvents";
import { POLL_MAX_WIDTH } from "./ForumEventPoll";

export const forumEventBannerGradientBackground = (theme: ThemeType) => ({
  background: `
    linear-gradient(
      90deg,
      var(--forum-event-background) 0%,
      var(--forum-event-background) 30%,
      ${theme.palette.greyAlpha(0)} 50%
    );
  `,
});

export const forumEventBannerDescriptionStyles = (theme: ThemeType) => ({
  color: theme.palette.text.alwaysWhite,
  "& a": {
    textDecoration: "underline",
    textUnderlineOffset: '2px',
    color: `${theme.palette.text.alwaysWhite} !important`,
    "&::after": {
      display: "inline-block",
      textDecoration: "none",
    },
  },
});

const BANNER_HEIGHT = 180;

const styles = (theme: ThemeType) => ({
  root: {
    fontFamily: theme.palette.fonts.sansSerifStack,
    color: theme.palette.text.alwaysWhite,
    position: "relative",
    width: "100%",
    overflow: "hidden",
  },
  rootWithGradient: {
    height: BANNER_HEIGHT,
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    ...forumEventBannerGradientBackground(theme),
    [theme.breakpoints.down("sm")]: {
      background: "var(--forum-event-background)",
      height: "unset",
    },
  },
  expandToggleRow: {
    padding: '0 20px 20px',
    [`@media(max-width: ${POLL_MAX_WIDTH}px)`]: {
      display: 'none'
    },
  },
  expandToggleButton: {
    display: 'flex',
    alignItems: 'center',
    columnGap: 3,
    background: 'none',
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontSize: 14,
    fontWeight: 500,
    lineHeight: 'normal',
    color: theme.palette.text.alwaysWhite,
    padding: 0,
    '&:hover': {
      opacity: 0.7
    }
  },
  expandToggleIcon: {
    fontSize: 16,
  },
  contentBasic: {
    // If you change this width, you probably also want to change the middle
    // breakpoint in `forumEventBannerGradientBackground` to match
    maxWidth: 480,
    padding: 30,
    [theme.breakpoints.down("xs")]: {
      padding: 20,
      marginTop: 8,
    },
  },
  contentWithPoll: {
    maxWidth: 1000,
    padding: '0 30px 58px',
    margin: '0 auto ',
    [`@media(max-width: ${POLL_MAX_WIDTH}px)`]: {
      display: 'none'
    },
  },
  contentWithPollMobile: {
    display: 'none',
    maxWidth: 500,
    textWrap: 'pretty',
    padding: '16px 30px 30px',
    [`@media(max-width: ${POLL_MAX_WIDTH}px)`]: {
      display: 'block'
    },
  },
  postsHeading: {
    display: 'flex',
    columnGap: '8px',
    alignItems: 'center',
    fontSize: 16,
    fontWeight: 700,
    marginBottom: 16,
  },
  postsHeadingIcon: {
    fontSize: 16,
    cursor: 'pointer',
    opacity: 0.5,
    '&:hover': {
      opacity: 0.7
    }
  },
  posts: {
    flex: '1 1 0',
    minWidth: 0,
    maxWidth: 600,
  },
  postsAndBody: {
    display: 'flex',
    columnGap: '48px',
  },
  postsSeeAll: {
    fontSize: 13,
    fontWeight: 500,
    lineHeight: '140%',
    marginTop: 16,
    "& a": {
      textDecoration: "underline",
      textUnderlineOffset: '2px',
    }
  },
  contentWithPollBody: {
    flex: 'none',
    width: 250,
  },
  date: {
    fontWeight: 500,
    marginBottom: 6,
    fontSize: "1.1rem",
  },
  title: {
    fontSize: 34,
    fontWeight: 700,
  },
  description: {
    ...forumEventBannerDescriptionStyles(theme),
  },
  titleWithPoll: {
    fontSize: 32,
    fontWeight: 700,
    lineHeight: 'normal',
  },
  titleWithPollMobile: {
    fontSize: 28,
    fontWeight: 700,
    lineHeight: 'normal',
  },
  dateWithPoll: {
    fontSize: 14,
    fontWeight: 600,
    lineHeight: 'normal',
    marginTop: 6,
  },
  descriptionWithPoll: {
    marginTop: 20,
    "& a": {
      textDecoration: "underline",
      textUnderlineOffset: '2px',
    }
  },
  image: {
    position: "absolute",
    zIndex: -1,
    top: -HEADER_HEIGHT,
    right: 0,
    width: '100%',
  },
  imageWithGradient: {
    right: "-10%",
    width: "80vw",
  },
  hideButton: {
    cursor: "pointer",
    position: "absolute",
    top: 12,
    right: 12,
    width: 20,
    height: 20,
    color: theme.palette.text.alwaysWhite,
  },
});

const formatDate = ({startDate, endDate}: ForumEventsDisplay) => {
  const start = moment.utc(startDate);
  const end = moment.utc(endDate);
  const startFormatted = start.format("MMMM D");
  const endFormatted = end.format(
    start.month() === end.month() ? "D" : "MMMM D",
  );
  return `${startFormatted} - ${endFormatted}`;
}

/**
 * This is the standard forum event banner. Dismissable.
 *
 * Includes description text on the left side, background dark color fading into
 * banner on the right side.
 *
 * Site header is not affected.
 */
const ForumEventFrontpageBannerBasic = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const {currentForumEvent} = useCurrentForumEvent();
  const cookieName = HIDE_FORUM_EVENT_BANNER_PREFIX + currentForumEvent?._id;
  const {dismiss, dismissed} = useDismissable(cookieName);
  if (!currentForumEvent || dismissed) {
    return null;
  }

  const {title, frontpageDescription, bannerImageId, darkColor} = currentForumEvent;
  const date = formatDate(currentForumEvent);
  
  const {ContentStyles, ContentItemBody, CloudinaryImage2, ForumIcon} = Components;

  // Define background color with a CSS variable to be accessed in the styles
  const style = {
    "--forum-event-background": darkColor,
  } as CSSProperties;

  return (
    <AnalyticsContext pageSectionContext="forumEventFrontpageBannerBasic">
      <div className={classNames(classes.root, classes.rootWithGradient)} style={style}>
        <div className={classes.contentBasic}>
          <div className={classes.date}>{date}</div>
          <div className={classes.title}>{title}</div>
          {frontpageDescription?.html &&
            <ContentStyles contentType="comment">
              <ContentItemBody
                dangerouslySetInnerHTML={{__html: frontpageDescription.html}}
                className={classes.description}
              />
            </ContentStyles>
          }
        </div>
        {bannerImageId &&
          <CloudinaryImage2
            publicId={bannerImageId}
            className={classNames(classes.image, classes.imageWithGradient)}
          />
        }
        <ForumIcon icon="Close" onClick={dismiss} className={classes.hideButton} />
      </div>
    </AnalyticsContext>
  );
}

/**
 * This is the forum event banner that includes an interactive slider on desktop,
 * so we can poll users. Not dismissable.
 *
 * Has no gradient over the banner. On desktop, has a large slider in the center,
 * and the banner is expandable to display event description and post list.
 *
 * On mobile, just displays event description.
 *
 * On the home page, the site header is given a background as well,
 * to match this banner.
 */
const ForumEventFrontpageBannerWithPoll = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const {currentForumEvent} = useCurrentForumEvent();
  const [expanded, setExpanded] = useState(false)
  
  // Calculate how many points each post got, to find the 4 most influential posts
  const influentialPosts = useMemo(() => {
    if (!currentForumEvent?.publicData) return []

    // Track the total number of points each post got, {postId: points}
    const scores: Record<string, number> = {}
    Object.values(currentForumEvent?.publicData).forEach((vote: AnyBecauseTodo) => {
      if (vote.points) {
        Object.keys(vote.points).forEach((postId: string) => {
          if (postId in scores) {
            scores[postId] += vote.points[postId]
          } else {
            scores[postId] = vote.points[postId]
          }
        })
      }
    })
    const postIdScorePairs = toPairs(scores)
    return orderBy(postIdScorePairs, p => p[1], 'desc').map(p => p[0]).slice(0, 4)
  }, [currentForumEvent])
  
  if (!currentForumEvent) {
    return null;
  }

  const {title, bannerImageId, tag, frontpageDescription, frontpageDescriptionMobile, darkColor, contrastColor} = currentForumEvent;
  const date = formatDate(currentForumEvent);
  const mobileDescription = frontpageDescriptionMobile?.html ?? frontpageDescription?.html
  
  const {
    CloudinaryImage2, ForumEventPoll, ForumIcon, LWTooltip, PostsList2, ContentStyles, ContentItemBody
  } = Components;
  
  // Define colors with CSS variables to be accessed in the styles
  const style = {
    "--forum-event-background": darkColor,
    "--forum-event-contrast": contrastColor,
  } as CSSProperties;
  
  return (
    <AnalyticsContext pageSectionContext="forumEventFrontpageBannerWithPoll">
      <div className={classes.root} style={style}>
        <ForumEventPoll />
        <div className={classes.expandToggleRow}>
          <button className={classes.expandToggleButton} onClick={() => setExpanded(!expanded)}>
            <ForumIcon
              icon={expanded ? "ThickChevronDown" : "ThickChevronRight"}
              className={classes.expandToggleIcon}
            />
            {expanded ? 'Collapse' : `Most influential posts`}
          </button>
        </div>
        {expanded && <div className={classes.contentWithPoll}>
          <div className={classes.postsHeading}>
            Most influential posts so far
            <LWTooltip
              title="
                The most influential posts are those that are responsible for the
                most opinion change, based on the posts cited when you change your
                mind on the banner.
              "
            >
              <ForumIcon icon="QuestionMarkCircleFilled" className={classes.postsHeadingIcon} />
            </LWTooltip>
          </div>
          <div className={classes.postsAndBody}>
            <div className={classes.posts}>
              <PostsList2
                terms={{postIds: influentialPosts, limit: 4}}
                order={influentialPosts}
                showLoadMore={false}
                placeholderCount={4}
                showKarma={false}
                hideTag
                showNoResults={false}
                showPlacement
              />
              {tag && <div className={classes.postsSeeAll}>
                See all eligible posts <Link to={tagGetUrl(tag)}>here</Link>
              </div>}
            </div>
            <div className={classes.contentWithPollBody}>
              <div className={classes.titleWithPoll}>{title}</div>
              <div className={classes.dateWithPoll}>{date}</div>
              <div className={classes.descriptionWithPoll}>
                {frontpageDescription?.html &&
                  <ContentStyles contentType="comment">
                    <ContentItemBody
                      dangerouslySetInnerHTML={{__html: frontpageDescription.html}}
                      className={classes.description}
                    />
                  </ContentStyles>
                }
              </div>
            </div>
          </div>
        </div>}
        <div className={classes.contentWithPollMobile}>
          <div className={classes.titleWithPollMobile}>{title}</div>
          <div className={classes.dateWithPoll}>{date}</div>
          <div className={classes.descriptionWithPoll}>
              {mobileDescription &&
                <ContentStyles contentType="comment">
                  <ContentItemBody
                    dangerouslySetInnerHTML={{__html: mobileDescription}}
                    className={classes.description}
                  />
                </ContentStyles>
              }
            </div>
        </div>
        {bannerImageId &&
          <CloudinaryImage2
            publicId={bannerImageId}
            className={classes.image}
          />
        }
      </div>
    </AnalyticsContext>
  );
}

export const ForumEventFrontpageBanner = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const {currentForumEvent} = useCurrentForumEvent();
  if (!currentForumEvent) {
    return null;
  }

  if (currentForumEvent.includesPoll) {
    return <ForumEventFrontpageBannerWithPoll classes={classes} />
  }
  return <ForumEventFrontpageBannerBasic classes={classes} />
}

const ForumEventFrontpageBannerComponent = registerComponent(
  "ForumEventFrontpageBanner",
  ForumEventFrontpageBanner,
  {styles},
);

declare global {
  interface ComponentTypes {
    ForumEventFrontpageBanner: typeof ForumEventFrontpageBannerComponent
  }
}

1	import React, { CSSProperties, useMemo, useState } from "react";	5✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import { useCurrentForumEvent } from "../hooks/useCurrentForumEvent";	1✔
4	import moment from "moment";	1✔
5	import { HIDE_FORUM_EVENT_BANNER_PREFIX } from "../../lib/cookies/cookies";	1✔
6	import { useDismissable } from "../hooks/useDismissable";	1✔
7	import classNames from "classnames";	1✔
8	import { HEADER_HEIGHT } from "../common/Header";	1✔
9	import { Link } from "@/lib/reactRouterWrapper";	1✔
10	import orderBy from "lodash/orderBy";	1✔
11	import toPairs from "lodash/toPairs";	1✔
12	import { tagGetUrl } from "@/lib/collections/tags/helpers";	1✔
13	import { AnalyticsContext } from "@/lib/analyticsEvents";	1✔
14	import { POLL_MAX_WIDTH } from "./ForumEventPoll";	1✔
15
16	export const forumEventBannerGradientBackground = (theme: ThemeType) => ({	2✔
17	background: `
18	linear-gradient(
19	90deg,
20	var(--forum-event-background) 0%,
21	var(--forum-event-background) 30%,
22	${theme.palette.greyAlpha(0)} 50%
23	);
24	`,
25	});
26
27	export const forumEventBannerDescriptionStyles = (theme: ThemeType) => ({	2✔
28	color: theme.palette.text.alwaysWhite,
29	"& a": {
30	textDecoration: "underline",
31	textUnderlineOffset: '2px',
32	color: `${theme.palette.text.alwaysWhite} !important`,
33	"&::after": {
34	display: "inline-block",
35	textDecoration: "none",
36	},
37	},
38	});
39
40	const BANNER_HEIGHT = 180;	1✔
41
42	const styles = (theme: ThemeType) => ({	1✔
43	root: {
44	fontFamily: theme.palette.fonts.sansSerifStack,
45	color: theme.palette.text.alwaysWhite,
46	position: "relative",
47	width: "100%",
48	overflow: "hidden",
49	},
50	rootWithGradient: {
51	height: BANNER_HEIGHT,
52	display: "flex",
53	flexDirection: "column",
54	justifyContent: "center",
55	...forumEventBannerGradientBackground(theme),
56	[theme.breakpoints.down("sm")]: {
57	background: "var(--forum-event-background)",
58	height: "unset",
59	},
60	},
61	expandToggleRow: {
62	padding: '0 20px 20px',
63	[`@media(max-width: ${POLL_MAX_WIDTH}px)`]: {
64	display: 'none'
65	},
66	},
67	expandToggleButton: {
68	display: 'flex',
69	alignItems: 'center',
70	columnGap: 3,
71	background: 'none',
72	fontFamily: theme.palette.fonts.sansSerifStack,
73	fontSize: 14,
74	fontWeight: 500,
75	lineHeight: 'normal',
76	color: theme.palette.text.alwaysWhite,
77	padding: 0,
78	'&:hover': {
79	opacity: 0.7
80	}
81	},
82	expandToggleIcon: {
83	fontSize: 16,
84	},
85	contentBasic: {
86	// If you change this width, you probably also want to change the middle
87	// breakpoint in `forumEventBannerGradientBackground` to match
88	maxWidth: 480,
89	padding: 30,
90	[theme.breakpoints.down("xs")]: {
91	padding: 20,
92	marginTop: 8,
93	},
94	},
95	contentWithPoll: {
96	maxWidth: 1000,
97	padding: '0 30px 58px',
98	margin: '0 auto ',
99	[`@media(max-width: ${POLL_MAX_WIDTH}px)`]: {
100	display: 'none'
101	},
102	},
103	contentWithPollMobile: {
104	display: 'none',
105	maxWidth: 500,
106	textWrap: 'pretty',
107	padding: '16px 30px 30px',
108	[`@media(max-width: ${POLL_MAX_WIDTH}px)`]: {
109	display: 'block'
110	},
111	},
112	postsHeading: {
113	display: 'flex',
114	columnGap: '8px',
115	alignItems: 'center',
116	fontSize: 16,
117	fontWeight: 700,
118	marginBottom: 16,
119	},
120	postsHeadingIcon: {
121	fontSize: 16,
122	cursor: 'pointer',
123	opacity: 0.5,
124	'&:hover': {
125	opacity: 0.7
126	}
127	},
128	posts: {
129	flex: '1 1 0',
130	minWidth: 0,
131	maxWidth: 600,
132	},
133	postsAndBody: {
134	display: 'flex',
135	columnGap: '48px',
136	},
137	postsSeeAll: {
138	fontSize: 13,
139	fontWeight: 500,
140	lineHeight: '140%',
141	marginTop: 16,
142	"& a": {
143	textDecoration: "underline",
144	textUnderlineOffset: '2px',
145	}
146	},
147	contentWithPollBody: {
148	flex: 'none',
149	width: 250,
150	},
151	date: {
152	fontWeight: 500,
153	marginBottom: 6,
154	fontSize: "1.1rem",
155	},
156	title: {
157	fontSize: 34,
158	fontWeight: 700,
159	},
160	description: {
161	...forumEventBannerDescriptionStyles(theme),
162	},
163	titleWithPoll: {
164	fontSize: 32,
165	fontWeight: 700,
166	lineHeight: 'normal',
167	},
168	titleWithPollMobile: {
169	fontSize: 28,
170	fontWeight: 700,
171	lineHeight: 'normal',
172	},
173	dateWithPoll: {
174	fontSize: 14,
175	fontWeight: 600,
176	lineHeight: 'normal',
177	marginTop: 6,
178	},
179	descriptionWithPoll: {
180	marginTop: 20,
181	"& a": {
182	textDecoration: "underline",
183	textUnderlineOffset: '2px',
184	}
185	},
186	image: {
187	position: "absolute",
188	zIndex: -1,
189	top: -HEADER_HEIGHT,
190	right: 0,
191	width: '100%',
192	},
193	imageWithGradient: {
194	right: "-10%",
195	width: "80vw",
196	},
197	hideButton: {
198	cursor: "pointer",
199	position: "absolute",
200	top: 12,
201	right: 12,
202	width: 20,
203	height: 20,
204	color: theme.palette.text.alwaysWhite,
205	},
206	});
207
208	const formatDate = ({startDate, endDate}: ForumEventsDisplay) => {	1✔
209	const start = moment.utc(startDate);	×
210	const end = moment.utc(endDate);	×
211	const startFormatted = start.format("MMMM D");	×
212	const endFormatted = end.format(	×
213	start.month() === end.month() ? "D" : "MMMM D",	×
214	);
215	return `${startFormatted} - ${endFormatted}`;	×
216	}
217
218	/**
219	* This is the standard forum event banner. Dismissable.
220	*
221	* Includes description text on the left side, background dark color fading into
222	* banner on the right side.
223	*
224	* Site header is not affected.
225	*/
226	const ForumEventFrontpageBannerBasic = ({classes}: {	1✔
227	classes: ClassesType<typeof styles>,
228	}) => {
229	const {currentForumEvent} = useCurrentForumEvent();	×
230	const cookieName = HIDE_FORUM_EVENT_BANNER_PREFIX + currentForumEvent?._id;	×
231	const {dismiss, dismissed} = useDismissable(cookieName);	×
232	if (!currentForumEvent \|\| dismissed) {	×
233	return null;	×
234	}
235
236	const {title, frontpageDescription, bannerImageId, darkColor} = currentForumEvent;	×
237	const date = formatDate(currentForumEvent);	×
238
239	const {ContentStyles, ContentItemBody, CloudinaryImage2, ForumIcon} = Components;	×
240
241	// Define background color with a CSS variable to be accessed in the styles
242	const style = {	×
243	"--forum-event-background": darkColor,
244	} as CSSProperties;
245
246	return (	×
247	<AnalyticsContext pageSectionContext="forumEventFrontpageBannerBasic">
248	<div className={classNames(classes.root, classes.rootWithGradient)} style={style}>
249	<div className={classes.contentBasic}>
250	<div className={classes.date}>{date}</div>
251	<div className={classes.title}>{title}</div>
252	{frontpageDescription?.html &&	×
253	<ContentStyles contentType="comment">
254	<ContentItemBody
255	dangerouslySetInnerHTML={{__html: frontpageDescription.html}}
256	className={classes.description}
257	/>
258	</ContentStyles>
259	}
260	</div>
261	{bannerImageId &&	×
262	<CloudinaryImage2
263	publicId={bannerImageId}
264	className={classNames(classes.image, classes.imageWithGradient)}
265	/>
266	}
267	<ForumIcon icon="Close" onClick={dismiss} className={classes.hideButton} />
268	</div>
269	</AnalyticsContext>
270	);
271	}
272
273	/**
274	* This is the forum event banner that includes an interactive slider on desktop,
275	* so we can poll users. Not dismissable.
276	*
277	* Has no gradient over the banner. On desktop, has a large slider in the center,
278	* and the banner is expandable to display event description and post list.
279	*
280	* On mobile, just displays event description.
281	*
282	* On the home page, the site header is given a background as well,
283	* to match this banner.
284	*/
285	const ForumEventFrontpageBannerWithPoll = ({classes}: {	1✔
286	classes: ClassesType<typeof styles>,
287	}) => {
288	const {currentForumEvent} = useCurrentForumEvent();	×
289	const [expanded, setExpanded] = useState(false)	×
290
291	// Calculate how many points each post got, to find the 4 most influential posts
292	const influentialPosts = useMemo(() => {	×
293	if (!currentForumEvent?.publicData) return []	×
294
295	// Track the total number of points each post got, {postId: points}
296	const scores: Record<string, number> = {}	×
297	Object.values(currentForumEvent?.publicData).forEach((vote: AnyBecauseTodo) => {	×
298	if (vote.points) {	×
299	Object.keys(vote.points).forEach((postId: string) => {	×
300	if (postId in scores) {	×
301	scores[postId] += vote.points[postId]	×
302	} else {
303	scores[postId] = vote.points[postId]	×
304	}
305	})
306	}
307	})
308	const postIdScorePairs = toPairs(scores)	×
309	return orderBy(postIdScorePairs, p => p[1], 'desc').map(p => p[0]).slice(0, 4)	×
310	}, [currentForumEvent])
311
312	if (!currentForumEvent) {	×
313	return null;	×
314	}
315
NEW 316	const {title, bannerImageId, tag, frontpageDescription, frontpageDescriptionMobile, darkColor, contrastColor} = currentForumEvent;	×
317	const date = formatDate(currentForumEvent);	×
318	const mobileDescription = frontpageDescriptionMobile?.html ?? frontpageDescription?.html	×
319
320	const {
321	CloudinaryImage2, ForumEventPoll, ForumIcon, LWTooltip, PostsList2, ContentStyles, ContentItemBody
322	} = Components;	×
323
324	// Define colors with CSS variables to be accessed in the styles
NEW 325	const style = {	×
326	"--forum-event-background": darkColor,
327	"--forum-event-contrast": contrastColor,
328	} as CSSProperties;
329
UNCOV 330	return (	×
331	<AnalyticsContext pageSectionContext="forumEventFrontpageBannerWithPoll">
332	<div className={classes.root} style={style}>
333	<ForumEventPoll />
334	<div className={classes.expandToggleRow}>
335	<button className={classes.expandToggleButton} onClick={() => setExpanded(!expanded)}>	×
336	<ForumIcon
337	icon={expanded ? "ThickChevronDown" : "ThickChevronRight"}	×
338	className={classes.expandToggleIcon}
339	/>
340	{expanded ? 'Collapse' : `Most influential posts`}	×
341	</button>
342	</div>
343	{expanded && <div className={classes.contentWithPoll}>	×
344	<div className={classes.postsHeading}>
345	Most influential posts so far
346	<LWTooltip
347	title="
348	The most influential posts are those that are responsible for the
349	most opinion change, based on the posts cited when you change your
350	mind on the banner.
351	"
352	>
353	<ForumIcon icon="QuestionMarkCircleFilled" className={classes.postsHeadingIcon} />
354	</LWTooltip>
355	</div>
356	<div className={classes.postsAndBody}>
357	<div className={classes.posts}>
358	<PostsList2
359	terms={{postIds: influentialPosts, limit: 4}}
360	order={influentialPosts}
361	showLoadMore={false}
362	placeholderCount={4}
363	showKarma={false}
364	hideTag
365	showNoResults={false}
366	showPlacement
367	/>
368	{tag && <div className={classes.postsSeeAll}>	×
369	See all eligible posts <Link to={tagGetUrl(tag)}>here</Link>
370	</div>}
371	</div>
372	<div className={classes.contentWithPollBody}>
373	<div className={classes.titleWithPoll}>{title}</div>
374	<div className={classes.dateWithPoll}>{date}</div>
375	<div className={classes.descriptionWithPoll}>
376	{frontpageDescription?.html &&	×
377	<ContentStyles contentType="comment">
378	<ContentItemBody
379	dangerouslySetInnerHTML={{__html: frontpageDescription.html}}
380	className={classes.description}
381	/>
382	</ContentStyles>
383	}
384	</div>
385	</div>
386	</div>
387	</div>}
388	<div className={classes.contentWithPollMobile}>
389	<div className={classes.titleWithPollMobile}>{title}</div>
390	<div className={classes.dateWithPoll}>{date}</div>
391	<div className={classes.descriptionWithPoll}>
392	{mobileDescription &&	×
393	<ContentStyles contentType="comment">
394	<ContentItemBody
395	dangerouslySetInnerHTML={{__html: mobileDescription}}
396	className={classes.description}
397	/>
398	</ContentStyles>
399	}
400	</div>
401	</div>
402	{bannerImageId &&	×
403	<CloudinaryImage2
404	publicId={bannerImageId}
405	className={classes.image}
406	/>
407	}
408	</div>
409	</AnalyticsContext>
410	);
411	}
412
413	export const ForumEventFrontpageBanner = ({classes}: {	1✔
414	classes: ClassesType<typeof styles>,
415	}) => {
416	const {currentForumEvent} = useCurrentForumEvent();	×
417	if (!currentForumEvent) {	×
418	return null;	×
419	}
420
421	if (currentForumEvent.includesPoll) {	×
422	return <ForumEventFrontpageBannerWithPoll classes={classes} />	×
423	}
424	return <ForumEventFrontpageBannerBasic classes={classes} />	×
425	}
426
427	const ForumEventFrontpageBannerComponent = registerComponent(	1✔
428	"ForumEventFrontpageBanner",
429	ForumEventFrontpageBanner,
430	{styles},
431	);
432
433	declare global {
434	interface ComponentTypes {
435	ForumEventFrontpageBanner: typeof ForumEventFrontpageBannerComponent
436	}
437	}

ForumMagnum / ForumMagnum / 9782268147

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