9506454053

Committed 13 Jun 2024 08:38PM UTC coverage: 31.912% (+0.007%) from 31.905%

Build # 9506454053

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9401 from ForumMagnum/master

[EA] deploy homepage RHS update

Run Details

4816 of 39325 branches covered (12.25%)

Branch coverage included in aggregate %.

9 of 38 new or added lines in 9 files covered. (23.68%)

2 existing lines in 2 files now uncovered.

27994 of 63489 relevant lines covered (44.09%)

180.31 hits per line

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

20.43

/packages/lesswrong/components/ea-forum/EAHomeRightHandSide.tsx

import React, { useState } from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { AnalyticsContext, useTracking } from "../../lib/analyticsEvents";
import { Link } from '../../lib/reactRouterWrapper';
import { useMulti } from '../../lib/crud/withMulti';
import { useCurrentUser } from '../common/withUser';
import { useUpdateCurrentUser } from '../hooks/useUpdateCurrentUser';
import { useUserLocation } from '../../lib/collections/users/helpers';
import { postGetPageUrl } from '../../lib/collections/posts/helpers';
import { getCityName } from '../localGroups/TabNavigationEventsList';
import { userHasEAHomeRHS } from '../../lib/betas';
import { useRecentOpportunities } from '../hooks/useRecentOpportunities';
import ForumNoSSR from '../common/ForumNoSSR';
import { useEAVirtualPrograms } from '../hooks/useEAVirtualPrograms';

/**
 * The max screen width where the Home RHS is visible
 */
export const HOME_RHS_MAX_SCREEN_WIDTH = 1370

const styles = (theme: ThemeType) => ({
  root: {
    paddingRight: 50,
    marginTop: 10,
    marginLeft: 50,
    [`@media(max-width: ${HOME_RHS_MAX_SCREEN_WIDTH}px)`]: {
      display: 'none'
    }
  },
  sidebarToggle: {
    position: 'absolute',
    right: 0,
    height: 36,
    width: 30,
    backgroundColor: theme.palette.grey[200],
    color: theme.palette.grey[500],
    padding: 9,
    borderRadius: '18px 0 0 18px',
    cursor: 'pointer',
    transition: 'width 0.2s ease',
    '&:hover': {
      width: 34,
      backgroundColor: theme.palette.grey[250],
    },
    [`@media(max-width: ${HOME_RHS_MAX_SCREEN_WIDTH}px)`]: {
      display: 'none'
    }
  },
  sidebarToggleIcon: {
    fontSize: 18
  },
  section: {
    maxWidth: 260,
    display: 'flex',
    flexDirection: 'column',
    rowGap: '9px',
    fontSize: 13,
    fontWeight: 450,
    fontFamily: theme.typography.fontFamily,
    marginBottom: 32,
  },
  digestAd: {
    maxWidth: 280,
    marginBottom: 32,
  },
  sectionTitle: {
    fontSize: 12,
    lineHeight: '16px'
  },
  postTitle: {
    fontWeight: 600,
  },
  postTitleLink: {
    display: 'inline-block',
    maxWidth: '100%',
    overflow: 'hidden',
    whiteSpace: "nowrap",
    textOverflow: 'ellipsis',
  },
  postMetadata: {
    color: theme.palette.text.dim3,
  },
  eventDate: {
    display: 'inline-block',
    width: 52
  },
  eventLocation: {
  },
  tooltip: {
    textAlign: "center",
    backgroundColor: `${theme.palette.panelBackground.tooltipBackground2} !important`,
    maxWidth: 156,
  },
  courseLink: {
    display: 'inline-flex',
    alignItems: 'center',
    columnGap: 6,
    fontWeight: 600,
  },
  courseIcon: {
    height: 16,
    width: 16,
  },
  feedbackLink: {
    color: theme.palette.grey[600],
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontWeight: 600,
    fontSize: 13,
  },
});


/**
 * This is a list of upcoming (nearby) events. It uses logic similar to EventsList.tsx.
 */
const UpcomingEventsSection = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const currentUser = useCurrentUser()
  const {lat, lng, known} = useUserLocation(currentUser, true)
  const upcomingEventsTerms: PostsViewTerms = lat && lng && known ? {
    view: 'nearbyEvents',
    lat: lat,
    lng: lng,
    limit: 3,
  } : {
    view: 'globalEvents',
    limit: 3,
  }
  const { results: upcomingEvents } = useMulti({
    collectionName: "Posts",
    terms: upcomingEventsTerms,
    fragmentName: 'PostsList',
    fetchPolicy: 'cache-and-network',
  })

  const {LWTooltip, SectionTitle, PostsItemTooltipWrapper, FormatDate} = Components;
  
  if (!upcomingEvents?.length) return null

  return <AnalyticsContext pageSubSectionContext="upcomingEvents">
    <div className={classes.section}>
      <LWTooltip
        title="View more events"
        placement="top-start"
        popperClassName={classes.tooltip}
      >
        <SectionTitle
          title="Upcoming events"
          href="/events"
          className={classes.sectionTitle}
          noTopMargin
          noBottomPadding
        />
      </LWTooltip>
      {upcomingEvents?.map(event => {
        return <div key={event._id}>
          <div className={classes.postTitle}>
            <PostsItemTooltipWrapper post={event} As="span">
              <Link to={postGetPageUrl(event)} className={classes.postTitleLink}>
                {event.title}
              </Link>
            </PostsItemTooltipWrapper>
          </div>
          <div className={classes.postMetadata}>
            <span className={classes.eventDate}>
              {event.startTime && <FormatDate date={event.startTime} format={"MMM D"} />}
            </span>
            <span className={classes.eventLocation}>
              {event.onlineEvent ? "Online" : getCityName(event)}
            </span>
          </div>
        </div>
      })}
    </div>
  </AnalyticsContext>
}

/**
 * This is the primary EA Forum home page right-hand side component.
 */
export const EAHomeRightHandSide = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const currentUser = useCurrentUser()
  const updateCurrentUser = useUpdateCurrentUser()
  const { captureEvent } = useTracking()
  // logged in users can hide the RHS - this is tracked via state so that the UI is snappy
  const [isHidden, setIsHidden] = useState(!!currentUser?.hideHomeRHS)

  const {results: opportunityPosts} = useRecentOpportunities({
    fragmentName: "PostsListWithVotesAndSequence",
  });
  const vpDates = useEAVirtualPrograms()
  
  const handleToggleSidebar = () => {
    if (!currentUser) return
    
    if (isHidden) {
      setIsHidden(false)
      captureEvent("homeRhsShown")
      void updateCurrentUser({hideHomeRHS: false})
    } else {
      setIsHidden(true)
      captureEvent("homeRhsHidden")
      void updateCurrentUser({hideHomeRHS: true})
    }
  }

  if (!userHasEAHomeRHS(currentUser)) return null
  
  const {
    SectionTitle, PostsItemTooltipWrapper, PostsItemDate, LWTooltip, ForumIcon, SidebarDigestAd, FormatDate
  } = Components
  
  const sidebarToggleNode = <div className={classes.sidebarToggle} onClick={handleToggleSidebar}>
    <LWTooltip title={isHidden ? 'Show sidebar' : 'Hide sidebar'}>
      <ForumIcon icon={isHidden ? 'ThickChevronLeft' : 'ThickChevronRight'} className={classes.sidebarToggleIcon} />
    </LWTooltip>
  </div>
  
  if (isHidden) {
    // We include an empty root here so that when the sidebar is hidden,
    // the center column is slightly closer to the center of the screen.
    return <AnalyticsContext pageSectionContext="homeRhs">
      {sidebarToggleNode}
      <div className={classes.root}></div>
    </AnalyticsContext>
  }
  
  // NoSSR sections that could affect the logged out user cache
  let digestAdNode = <SidebarDigestAd className={classes.digestAd} />
  let upcomingEventsNode = <UpcomingEventsSection classes={classes} />
  if (!currentUser) {
    digestAdNode = <ForumNoSSR>{digestAdNode}</ForumNoSSR>
    upcomingEventsNode = <ForumNoSSR>{upcomingEventsNode}</ForumNoSSR>
  }

  return <AnalyticsContext pageSectionContext="homeRhs">
    {!!currentUser && sidebarToggleNode}
    <div className={classes.root}>
      {digestAdNode}
      
      {!!opportunityPosts?.length && <AnalyticsContext pageSubSectionContext="opportunities">
        <div className={classes.section}>
          <LWTooltip
            title="View more posts tagged “Opportunities to take action”"
            placement="top-start"
            popperClassName={classes.tooltip}
          >
            <SectionTitle
              title="Opportunities"
              href="/topics/opportunities-to-take-action?sortedBy=magic"
              className={classes.sectionTitle}
              noTopMargin
              noBottomPadding
            />
          </LWTooltip>
          {opportunityPosts?.map(post => <div key={post._id}>
            <div className={classes.postTitle}>
              <PostsItemTooltipWrapper post={post} As="span">
                <Link to={postGetPageUrl(post)} className={classes.postTitleLink}>
                  {post.title}
                </Link>
              </PostsItemTooltipWrapper>
            </div>
            <div className={classes.postMetadata}>
              Posted <PostsItemDate post={post} includeAgo useCuratedDate={false} />
            </div>
          </div>)}
        </div>
      </AnalyticsContext>}
      
      {upcomingEventsNode}
      
      <AnalyticsContext pageSubSectionContext="courses">
        <div className={classes.section}>
          <LWTooltip
            title="View more courses"
            placement="top-start"
            popperClassName={classes.tooltip}
          >
            <SectionTitle
              title="Online courses"
              href="https://www.effectivealtruism.org/virtual-programs?utm_source=ea_forum&utm_medium=rhs&utm_campaign=home_page"
              className={classes.sectionTitle}
              noTopMargin
              noBottomPadding
            />
          </LWTooltip>
          <div>
            <Link
              to="https://www.effectivealtruism.org/virtual-programs/introductory-program?utm_source=ea_forum&utm_medium=rhs&utm_campaign=home_page"
              className={classes.courseLink}
            >
              <ForumIcon icon="ComputerDesktop" className={classes.courseIcon} />
              The Introductory EA Program
            </Link>
            <div className={classes.postMetadata}>
              Apply by <FormatDate date={vpDates.deadline.toISOString()} format={"MMM D"} tooltip={false} />,
              starting <FormatDate date={vpDates.start.toISOString()} format={"MMM D"} tooltip={false} />
            </div>
          </div>
        </div>
      </AnalyticsContext>

      <a href="mailto:forum@effectivealtruism.org" className={classes.feedbackLink}>
        Send feedback
      </a>
    </div>
  </AnalyticsContext>
}

const EAHomeRightHandSideComponent = registerComponent('EAHomeRightHandSide', EAHomeRightHandSide, {styles});

declare global {
  interface ComponentTypes {
    EAHomeRightHandSide: typeof EAHomeRightHandSideComponent
  }
}

1	import React, { useState } from 'react';	4✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
3	import { AnalyticsContext, useTracking } from "../../lib/analyticsEvents";	1✔
4	import { Link } from '../../lib/reactRouterWrapper';	1✔
5	import { useMulti } from '../../lib/crud/withMulti';	1✔
6	import { useCurrentUser } from '../common/withUser';	1✔
7	import { useUpdateCurrentUser } from '../hooks/useUpdateCurrentUser';	1✔
8	import { useUserLocation } from '../../lib/collections/users/helpers';	1✔
9	import { postGetPageUrl } from '../../lib/collections/posts/helpers';	1✔
10	import { getCityName } from '../localGroups/TabNavigationEventsList';	1✔
11	import { userHasEAHomeRHS } from '../../lib/betas';	1✔
12	import { useRecentOpportunities } from '../hooks/useRecentOpportunities';	1✔
13	import ForumNoSSR from '../common/ForumNoSSR';	1✔
14	import { useEAVirtualPrograms } from '../hooks/useEAVirtualPrograms';	1✔
15
16	/**
17	* The max screen width where the Home RHS is visible
18	*/
19	export const HOME_RHS_MAX_SCREEN_WIDTH = 1370	1✔
20
21	const styles = (theme: ThemeType) => ({	1✔
22	root: {
23	paddingRight: 50,
24	marginTop: 10,
25	marginLeft: 50,
26	[`@media(max-width: ${HOME_RHS_MAX_SCREEN_WIDTH}px)`]: {
27	display: 'none'
28	}
29	},
30	sidebarToggle: {
31	position: 'absolute',
32	right: 0,
33	height: 36,
34	width: 30,
35	backgroundColor: theme.palette.grey[200],
36	color: theme.palette.grey[500],
37	padding: 9,
38	borderRadius: '18px 0 0 18px',
39	cursor: 'pointer',
40	transition: 'width 0.2s ease',
41	'&:hover': {
42	width: 34,
43	backgroundColor: theme.palette.grey[250],
44	},
45	[`@media(max-width: ${HOME_RHS_MAX_SCREEN_WIDTH}px)`]: {
46	display: 'none'
47	}
48	},
49	sidebarToggleIcon: {
50	fontSize: 18
51	},
52	section: {
53	maxWidth: 260,
54	display: 'flex',
55	flexDirection: 'column',
56	rowGap: '9px',
57	fontSize: 13,
58	fontWeight: 450,
59	fontFamily: theme.typography.fontFamily,
60	marginBottom: 32,
61	},
62	digestAd: {
63	maxWidth: 280,
64	marginBottom: 32,
65	},
66	sectionTitle: {
67	fontSize: 12,
68	lineHeight: '16px'
69	},
70	postTitle: {
71	fontWeight: 600,
72	},
73	postTitleLink: {
74	display: 'inline-block',
75	maxWidth: '100%',
76	overflow: 'hidden',
77	whiteSpace: "nowrap",
78	textOverflow: 'ellipsis',
79	},
80	postMetadata: {
81	color: theme.palette.text.dim3,
82	},
83	eventDate: {
84	display: 'inline-block',
85	width: 52
86	},
87	eventLocation: {
88	},
89	tooltip: {
90	textAlign: "center",
91	backgroundColor: `${theme.palette.panelBackground.tooltipBackground2} !important`,
92	maxWidth: 156,
93	},
94	courseLink: {
95	display: 'inline-flex',
96	alignItems: 'center',
97	columnGap: 6,
98	fontWeight: 600,
99	},
100	courseIcon: {
101	height: 16,
102	width: 16,
103	},
104	feedbackLink: {
105	color: theme.palette.grey[600],
106	fontFamily: theme.palette.fonts.sansSerifStack,
107	fontWeight: 600,
108	fontSize: 13,
109	},
110	});
111
112
113	/**
114	* This is a list of upcoming (nearby) events. It uses logic similar to EventsList.tsx.
115	*/
116	const UpcomingEventsSection = ({classes}: {	1✔
117	classes: ClassesType<typeof styles>,
118	}) => {
119	const currentUser = useCurrentUser()	×
120	const {lat, lng, known} = useUserLocation(currentUser, true)	×
121	const upcomingEventsTerms: PostsViewTerms = lat && lng && known ? {	×
122	view: 'nearbyEvents',
123	lat: lat,
124	lng: lng,
125	limit: 3,
126	} : {
127	view: 'globalEvents',
128	limit: 3,
129	}
130	const { results: upcomingEvents } = useMulti({	×
131	collectionName: "Posts",
132	terms: upcomingEventsTerms,
133	fragmentName: 'PostsList',
134	fetchPolicy: 'cache-and-network',
135	})
136
137	const {LWTooltip, SectionTitle, PostsItemTooltipWrapper, FormatDate} = Components;	×
138
NEW 139	if (!upcomingEvents?.length) return null	×
140
UNCOV 141	return <AnalyticsContext pageSubSectionContext="upcomingEvents">	×
142	<div className={classes.section}>
143	<LWTooltip
144	title="View more events"
145	placement="top-start"
146	popperClassName={classes.tooltip}
147	>
148	<SectionTitle
149	title="Upcoming events"
150	href="/events"
151	className={classes.sectionTitle}
152	noTopMargin
153	noBottomPadding
154	/>
155	</LWTooltip>
156	{upcomingEvents?.map(event => {	×
157	return <div key={event._id}>	×
158	<div className={classes.postTitle}>
159	<PostsItemTooltipWrapper post={event} As="span">
160	<Link to={postGetPageUrl(event)} className={classes.postTitleLink}>
161	{event.title}
162	</Link>
163	</PostsItemTooltipWrapper>
164	</div>
165	<div className={classes.postMetadata}>
166	<span className={classes.eventDate}>
167	{event.startTime && <FormatDate date={event.startTime} format={"MMM D"} />}	×
168	</span>
169	<span className={classes.eventLocation}>
170	{event.onlineEvent ? "Online" : getCityName(event)}	×
171	</span>
172	</div>
173	</div>
174	})}
175	</div>
176	</AnalyticsContext>
177	}
178
179	/**
180	* This is the primary EA Forum home page right-hand side component.
181	*/
182	export const EAHomeRightHandSide = ({classes}: {	1✔
183	classes: ClassesType<typeof styles>,
184	}) => {
185	const currentUser = useCurrentUser()	×
186	const updateCurrentUser = useUpdateCurrentUser()	×
187	const { captureEvent } = useTracking()	×
188	// logged in users can hide the RHS - this is tracked via state so that the UI is snappy
189	const [isHidden, setIsHidden] = useState(!!currentUser?.hideHomeRHS)	×
190
191	const {results: opportunityPosts} = useRecentOpportunities({	×
192	fragmentName: "PostsListWithVotesAndSequence",
193	});
NEW 194	const vpDates = useEAVirtualPrograms()	×
195
196	const handleToggleSidebar = () => {	×
197	if (!currentUser) return	×
198
199	if (isHidden) {	×
200	setIsHidden(false)	×
201	captureEvent("homeRhsShown")	×
202	void updateCurrentUser({hideHomeRHS: false})	×
203	} else {
204	setIsHidden(true)	×
205	captureEvent("homeRhsHidden")	×
206	void updateCurrentUser({hideHomeRHS: true})	×
207	}
208	}
209
210	if (!userHasEAHomeRHS(currentUser)) return null	×
211
212	const {
213	SectionTitle, PostsItemTooltipWrapper, PostsItemDate, LWTooltip, ForumIcon, SidebarDigestAd, FormatDate
214	} = Components	×
215
216	const sidebarToggleNode = <div className={classes.sidebarToggle} onClick={handleToggleSidebar}>	×
217	<LWTooltip title={isHidden ? 'Show sidebar' : 'Hide sidebar'}>	×
218	<ForumIcon icon={isHidden ? 'ThickChevronLeft' : 'ThickChevronRight'} className={classes.sidebarToggleIcon} />	×
219	</LWTooltip>
220	</div>
221
222	if (isHidden) {	×
223	// We include an empty root here so that when the sidebar is hidden,
224	// the center column is slightly closer to the center of the screen.
225	return <AnalyticsContext pageSectionContext="homeRhs">	×
226	{sidebarToggleNode}
227	<div className={classes.root}></div>
228	</AnalyticsContext>
229	}
230
231	// NoSSR sections that could affect the logged out user cache
232	let digestAdNode = <SidebarDigestAd className={classes.digestAd} />	×
233	let upcomingEventsNode = <UpcomingEventsSection classes={classes} />	×
234	if (!currentUser) {	×
235	digestAdNode = <ForumNoSSR>{digestAdNode}</ForumNoSSR>	×
236	upcomingEventsNode = <ForumNoSSR>{upcomingEventsNode}</ForumNoSSR>	×
237	}
238
239	return <AnalyticsContext pageSectionContext="homeRhs">	×
240	{!!currentUser && sidebarToggleNode}	×
241	<div className={classes.root}>
242	{digestAdNode}
243
244	{!!opportunityPosts?.length && <AnalyticsContext pageSubSectionContext="opportunities">	×
245	<div className={classes.section}>
246	<LWTooltip
247	title="View more posts tagged “Opportunities to take action”"
248	placement="top-start"
249	popperClassName={classes.tooltip}
250	>
251	<SectionTitle
252	title="Opportunities"
253	href="/topics/opportunities-to-take-action?sortedBy=magic"
254	className={classes.sectionTitle}
255	noTopMargin
256	noBottomPadding
257	/>
258	</LWTooltip>
259	{opportunityPosts?.map(post => <div key={post._id}>	×
260	<div className={classes.postTitle}>
261	<PostsItemTooltipWrapper post={post} As="span">
262	<Link to={postGetPageUrl(post)} className={classes.postTitleLink}>
263	{post.title}
264	</Link>
265	</PostsItemTooltipWrapper>
266	</div>
267	<div className={classes.postMetadata}>
268	Posted <PostsItemDate post={post} includeAgo useCuratedDate={false} />
269	</div>
270	</div>)}
271	</div>
272	</AnalyticsContext>}
273
274	{upcomingEventsNode}
275
276	<AnalyticsContext pageSubSectionContext="courses">
277	<div className={classes.section}>
278	<LWTooltip
279	title="View more courses"
280	placement="top-start"
281	popperClassName={classes.tooltip}
282	>
283	<SectionTitle
284	title="Online courses"
285	href="https://www.effectivealtruism.org/virtual-programs?utm_source=ea_forum&utm_medium=rhs&utm_campaign=home_page"
286	className={classes.sectionTitle}
287	noTopMargin
288	noBottomPadding
289	/>
290	</LWTooltip>
291	<div>
292	<Link
293	to="https://www.effectivealtruism.org/virtual-programs/introductory-program?utm_source=ea_forum&utm_medium=rhs&utm_campaign=home_page"
294	className={classes.courseLink}
295	>
296	<ForumIcon icon="ComputerDesktop" className={classes.courseIcon} />
297	The Introductory EA Program
298	</Link>
299	<div className={classes.postMetadata}>
300	Apply by <FormatDate date={vpDates.deadline.toISOString()} format={"MMM D"} tooltip={false} />,
301	starting <FormatDate date={vpDates.start.toISOString()} format={"MMM D"} tooltip={false} />
302	</div>
303	</div>
304	</div>
305	</AnalyticsContext>
306
307	<a href="mailto:forum@effectivealtruism.org" className={classes.feedbackLink}>
308	Send feedback
309	</a>
310	</div>
311	</AnalyticsContext>
312	}
313
314	const EAHomeRightHandSideComponent = registerComponent('EAHomeRightHandSide', EAHomeRightHandSide, {styles});	1✔
315
316	declare global {
317	interface ComponentTypes {
318	EAHomeRightHandSide: typeof EAHomeRightHandSideComponent
319	}
320	}

ForumMagnum / ForumMagnum / 9506454053

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