9506370521

Committed 13 Jun 2024 08:31PM UTC coverage: 31.858% (+0.006%) from 31.852%

Build # 9506370521

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9377 from ForumMagnum/rhs-updates

[EA Forum only] update homepage RHS

Run Details

4816 of 39387 branches covered (12.23%)

Branch coverage included in aggregate %.

7 of 21 new or added lines in 4 files covered. (33.33%)

1 existing line in 1 file now uncovered.

27994 of 63600 relevant lines covered (44.02%)

180.01 hits per line

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

36.36

/packages/lesswrong/components/events/modules/VirtualProgramCard.tsx

import { Components, registerComponent, } from '../../../lib/vulcan-lib';
import React from 'react';
import { createStyles } from '@material-ui/core/styles';
import * as _ from 'underscore';
import Card from '@material-ui/core/Card';
import classNames from 'classnames';
import moment from 'moment';
import { useTracking } from '../../../lib/analyticsEvents';
import { useCurrentTime } from '../../../lib/utils/timeUtil';
import { useTimezone } from '../../common/withTimezone';
import { useEAVirtualPrograms } from '@/components/hooks/useEAVirtualPrograms';

const styles = createStyles((theme: ThemeType): JssStyles => ({
  eventCard: {
    position: 'relative',
    width: 373,
    height: 374,
    borderRadius: theme.borderRadius.default,
    overflow: 'visible',
    boxShadow: theme.palette.boxShadow.eventCard,
    [theme.breakpoints.down('xs')]: {
      maxWidth: '100vw'
    }
  },
  introVPCard: {
    background: "linear-gradient(rgba(0, 87, 102, 0.7), rgba(0, 87, 102, 0.7)), url('https://res.cloudinary.com/cea/image/upload/w_374,h_373,c_fill,q_auto,f_auto/Event/pz3xmsm63xl8thlyt2up.jpg')",
    padding: '50px 24px',
    '& .VirtualProgramCard-eventCardDescription': {
      opacity: 1,
      lineHeight: '1.6em',
      marginTop: 30
    },
    '& .VirtualProgramCard-eventCardDeadline': {
      marginTop: 30
    }
  },
  cardLink: {
    '&:hover': {
      opacity: '0.9'
    },
    '&:hover .VirtualProgramCard-eventCardDeadline': {
      borderBottom: '2px solid white'
    }
  },
  cardSection: {
    display: 'flex',
    width: 373,
    height: 243,
    padding: 20,
    overflow: 'hidden'
  },
  inDepthSection: {
    background: "linear-gradient(rgba(0, 87, 102, 0.7), rgba(0, 87, 102, 0.7)), url('https://res.cloudinary.com/cea/image/upload/w_374,h_243,c_fill,q_auto,f_auto/Event/f2cbeqvjyhyl6rhhzdsu.jpg')",
    clipPath: 'polygon(0 0, 100% 0, 100% 54%, 0 100%)',
    borderRadius: `${theme.borderRadius.default}px ${theme.borderRadius.default}px 0 0`,
  },
  precipiceSection: {
    background: "linear-gradient(rgb(168, 114, 51, 0.5), rgb(168, 114, 51, 0.5)), url('https://res.cloudinary.com/cea/image/upload/w_374,h_243,c_fill,q_auto,f_auto/Event/xfhrtorwdxxmplaofqa8.jpg')",
    clipPath: 'polygon(0 46%, 100% 0, 100% 100%, 0 100%)',
    position: 'absolute',
    bottom: 0,
    alignItems: 'flex-end',
    textAlign: 'right',
    borderRadius: `0 0 ${theme.borderRadius.default}px ${theme.borderRadius.default}px`,
  },
  eventCardTime: {
    ...theme.typography.commentStyle,
    fontSize: 14,
    color: 'white'
  },
  eventCardTitle: {
    ...theme.typography.headline,
    fontFamily: theme.palette.fonts.sansSerifStack,
    color: 'white',
    fontSize: 20,
    fontWeight: 600,
    marginTop: 8,
    marginBottom: 0
  },
  eventCardLocation: {
    ...theme.typography.commentStyle,
    opacity: '0.7',
    color: 'white',
    fontSize: 14,
    marginTop: 8,
  },
  eventCardDescription: {
    ...theme.typography.commentStyle,
    opacity: '0.7',
    color: 'white',
    fontSize: 14,
    lineHeight: '1.5em',
    marginTop: 10,
  },
  eventCardDeadline: {
    ...theme.typography.commentStyle,
    display: 'inline-block',
    fontWeight: 600,
    color: 'white',
    fontSize: 16,
    paddingBottom: 5,
    marginTop: 10,
    borderBottom: '2px solid transparent'
  },
}))


const VirtualProgramCard = ({program, classes}: {
  program: string,
  classes: ClassesType,
}) => {
  const { captureEvent } = useTracking();
  const now = useCurrentTime()
  const { deadline, start, end } = useEAVirtualPrograms();
  const { FormatDate } = Components;

  if (program === 'intro') {
    return <a
      href="https://www.effectivealtruism.org/virtual-programs/introductory-program?utm_source=ea_forum&utm_medium=vp_card&utm_campaign=events_page"
      className={classes.cardLink}
      onClick={() => captureEvent('introVPClicked')}
    >
      <Card className={classNames(classes.eventCard, classes.introVPCard)}>
        <div className={classes.eventCardTime}>
          <FormatDate date={start.toISOString()} format={"MMMM D"} granularity='date' tooltip={false} /> – <FormatDate date={end.toISOString()} format={"MMMM D"} granularity='date' tooltip={false} />
        </div>
        <div className={classes.eventCardTitle}>
          Introductory EA Program
        </div>
        <div className={classes.eventCardLocation}>Online</div>
        <div className={classes.eventCardDescription}>
          Explore key ideas in effective altruism through short readings and weekly discussions
        </div>
        <div className={classes.eventCardDeadline}>Apply by <FormatDate date={deadline.toISOString()} format={"dddd, MMMM D"} granularity='date' tooltip={false} /></div>
      </Card>
    </a>
  }
  
  if (program === 'advanced') {
    // Find the next deadline for applying to the Precipice VP, which is some Sunday every 3 months
    // (as with the Intro/Advanced VP deadline, it will prob sometimes be off by a week or two).
    // The first confirmed deadline is Nov 19, 2023, so we assume the deadlines will be
    // ~the 3rd Sunday in Feb, May, Aug, and Nov each year. Start by checking Feb of this year.
    // NOTE: I changed it to the last Sunday of the prev month since that's what they used for Aug 2024,
    // but that might change back later.
    let precipiceDeadline = moment(now).month(1).date(0).day(0)
    // While that day is in the past, keep adding 3 months.
    while (precipiceDeadline.isBefore(now)) {
      precipiceDeadline = moment(precipiceDeadline).add(3, 'months').date(0).day(0)
    }
    
    // VP starts 22 days after the deadline, on a Monday
    const startOfPrecipice = moment(precipiceDeadline).add(22, 'days')
    // VP ends 8 weeks after the start (subtract a day to end on a Sunday)
    const endOfPrecipice = moment(startOfPrecipice).add(8, 'weeks').subtract(1, 'day')
    
    return <Card className={classes.eventCard}>
      <a
        href="https://www.effectivealtruism.org/virtual-programs/in-depth-program?utm_source=ea_forum&utm_medium=vp_card&utm_campaign=events_page"
        className={classNames(classes.cardLink, classes.cardSection, classes.inDepthSection)}
        onClick={() => captureEvent('inDepthVPClicked')}
      >
        <div>
          <div className={classes.eventCardTime}>
            <FormatDate date={start.toISOString()} format={"MMMM D"} granularity='date' tooltip={false} /> – <FormatDate date={end.toISOString()} format={"MMMM D"} granularity='date' tooltip={false} />
          </div>
          <div className={classes.eventCardTitle}>
            In-Depth EA Program
          </div>
          <div className={classes.eventCardDescription}>
            Dive deeper into more complex EA ideas and examine your key uncertainties
          </div>
          <div className={classes.eventCardDeadline}>Apply by <FormatDate date={deadline.toISOString()} format={"dddd, MMMM D"} granularity='date' /></div>
        </div>
      </a>
      <a
        href="https://www.effectivealtruism.org/virtual-programs/the-precipice-reading-group?utm_source=ea_forum&utm_medium=vp_card&utm_campaign=events_page"
        className={classNames(classes.cardLink, classes.cardSection, classes.precipiceSection)}
        onClick={() => captureEvent('precipiceVPClicked')}
      >
        <div>
          <div className={classes.eventCardTime}>
            <FormatDate date={startOfPrecipice.toISOString()} format={"MMMM D"} granularity='date' tooltip={false} /> – <FormatDate date={endOfPrecipice.toISOString()} format={"MMMM D"} granularity='date' tooltip={false} />
          </div>
          <div className={classes.eventCardTitle}>
            <em>The Precipice</em> Reading Group
          </div>
          <div className={classes.eventCardDescription}>
            Join weekly discussions about existential risks and safeguarding the future of humanity
          </div>
          <div className={classes.eventCardDeadline}>Apply by <FormatDate date={precipiceDeadline.toISOString()} format={"dddd, MMMM D"} granularity='date' tooltip={false} /></div>
        </div>
      </a>
    </Card>
  }
  
  return null
}

const VirtualProgramCardComponent = registerComponent('VirtualProgramCard', VirtualProgramCard, {
  styles,
  
  // This is based around an image, which doesn't get inverted in dark mode
  allowNonThemeColors: true,
});

declare global {
  interface ComponentTypes {
    VirtualProgramCard: typeof VirtualProgramCardComponent
  }
}

1	import { Components, registerComponent, } from '../../../lib/vulcan-lib';	1✔
2	import React from 'react';	1✔
3	import { createStyles } from '@material-ui/core/styles';	1✔
4	import * as _ from 'underscore';
5	import Card from '@material-ui/core/Card';	1✔
6	import classNames from 'classnames';	1✔
7	import moment from 'moment';	1✔
8	import { useTracking } from '../../../lib/analyticsEvents';	1✔
9	import { useCurrentTime } from '../../../lib/utils/timeUtil';	1✔
10	import { useTimezone } from '../../common/withTimezone';
11	import { useEAVirtualPrograms } from '@/components/hooks/useEAVirtualPrograms';	1✔
12
13	const styles = createStyles((theme: ThemeType): JssStyles => ({	1✔
14	eventCard: {
15	position: 'relative',
16	width: 373,
17	height: 374,
18	borderRadius: theme.borderRadius.default,
19	overflow: 'visible',
20	boxShadow: theme.palette.boxShadow.eventCard,
21	[theme.breakpoints.down('xs')]: {
22	maxWidth: '100vw'
23	}
24	},
25	introVPCard: {
26	background: "linear-gradient(rgba(0, 87, 102, 0.7), rgba(0, 87, 102, 0.7)), url('https://res.cloudinary.com/cea/image/upload/w_374,h_373,c_fill,q_auto,f_auto/Event/pz3xmsm63xl8thlyt2up.jpg')",
27	padding: '50px 24px',
28	'& .VirtualProgramCard-eventCardDescription': {
29	opacity: 1,
30	lineHeight: '1.6em',
31	marginTop: 30
32	},
33	'& .VirtualProgramCard-eventCardDeadline': {
34	marginTop: 30
35	}
36	},
37	cardLink: {
38	'&:hover': {
39	opacity: '0.9'
40	},
41	'&:hover .VirtualProgramCard-eventCardDeadline': {
42	borderBottom: '2px solid white'
43	}
44	},
45	cardSection: {
46	display: 'flex',
47	width: 373,
48	height: 243,
49	padding: 20,
50	overflow: 'hidden'
51	},
52	inDepthSection: {
53	background: "linear-gradient(rgba(0, 87, 102, 0.7), rgba(0, 87, 102, 0.7)), url('https://res.cloudinary.com/cea/image/upload/w_374,h_243,c_fill,q_auto,f_auto/Event/f2cbeqvjyhyl6rhhzdsu.jpg')",
54	clipPath: 'polygon(0 0, 100% 0, 100% 54%, 0 100%)',
55	borderRadius: `${theme.borderRadius.default}px ${theme.borderRadius.default}px 0 0`,
56	},
57	precipiceSection: {
58	background: "linear-gradient(rgb(168, 114, 51, 0.5), rgb(168, 114, 51, 0.5)), url('https://res.cloudinary.com/cea/image/upload/w_374,h_243,c_fill,q_auto,f_auto/Event/xfhrtorwdxxmplaofqa8.jpg')",
59	clipPath: 'polygon(0 46%, 100% 0, 100% 100%, 0 100%)',
60	position: 'absolute',
61	bottom: 0,
62	alignItems: 'flex-end',
63	textAlign: 'right',
64	borderRadius: `0 0 ${theme.borderRadius.default}px ${theme.borderRadius.default}px`,
65	},
66	eventCardTime: {
67	...theme.typography.commentStyle,
68	fontSize: 14,
69	color: 'white'
70	},
71	eventCardTitle: {
72	...theme.typography.headline,
73	fontFamily: theme.palette.fonts.sansSerifStack,
74	color: 'white',
75	fontSize: 20,
76	fontWeight: 600,
77	marginTop: 8,
78	marginBottom: 0
79	},
80	eventCardLocation: {
81	...theme.typography.commentStyle,
82	opacity: '0.7',
83	color: 'white',
84	fontSize: 14,
85	marginTop: 8,
86	},
87	eventCardDescription: {
88	...theme.typography.commentStyle,
89	opacity: '0.7',
90	color: 'white',
91	fontSize: 14,
92	lineHeight: '1.5em',
93	marginTop: 10,
94	},
95	eventCardDeadline: {
96	...theme.typography.commentStyle,
97	display: 'inline-block',
98	fontWeight: 600,
99	color: 'white',
100	fontSize: 16,
101	paddingBottom: 5,
102	marginTop: 10,
103	borderBottom: '2px solid transparent'
104	},
105	}))
106
107
108	const VirtualProgramCard = ({program, classes}: {	1✔
109	program: string,
110	classes: ClassesType,
111	}) => {
112	const { captureEvent } = useTracking();	×
113	const now = useCurrentTime()	×
NEW 114	const { deadline, start, end } = useEAVirtualPrograms();	×
NEW 115	const { FormatDate } = Components;	×
116
117	if (program === 'intro') {	×
118	return <a	×
119	href="https://www.effectivealtruism.org/virtual-programs/introductory-program?utm_source=ea_forum&utm_medium=vp_card&utm_campaign=events_page"
120	className={classes.cardLink}
121	onClick={() => captureEvent('introVPClicked')}	×
122	>
123	<Card className={classNames(classes.eventCard, classes.introVPCard)}>
124	<div className={classes.eventCardTime}>
125	<FormatDate date={start.toISOString()} format={"MMMM D"} granularity='date' tooltip={false} /> – <FormatDate date={end.toISOString()} format={"MMMM D"} granularity='date' tooltip={false} />
126	</div>
127	<div className={classes.eventCardTitle}>
128	Introductory EA Program
129	</div>
130	<div className={classes.eventCardLocation}>Online</div>
131	<div className={classes.eventCardDescription}>
132	Explore key ideas in effective altruism through short readings and weekly discussions
133	</div>
134	<div className={classes.eventCardDeadline}>Apply by <FormatDate date={deadline.toISOString()} format={"dddd, MMMM D"} granularity='date' tooltip={false} /></div>
135	</Card>
136	</a>
137	}
138
139	if (program === 'advanced') {	×
140	// Find the next deadline for applying to the Precipice VP, which is some Sunday every 3 months
141	// (as with the Intro/Advanced VP deadline, it will prob sometimes be off by a week or two).
142	// The first confirmed deadline is Nov 19, 2023, so we assume the deadlines will be
143	// ~the 3rd Sunday in Feb, May, Aug, and Nov each year. Start by checking Feb of this year.
144	// NOTE: I changed it to the last Sunday of the prev month since that's what they used for Aug 2024,
145	// but that might change back later.
NEW 146	let precipiceDeadline = moment(now).month(1).date(0).day(0)	×
147	// While that day is in the past, keep adding 3 months.
148	while (precipiceDeadline.isBefore(now)) {	×
NEW 149	precipiceDeadline = moment(precipiceDeadline).add(3, 'months').date(0).day(0)	×
150	}
151
152	// VP starts 22 days after the deadline, on a Monday
153	const startOfPrecipice = moment(precipiceDeadline).add(22, 'days')	×
154	// VP ends 8 weeks after the start (subtract a day to end on a Sunday)
155	const endOfPrecipice = moment(startOfPrecipice).add(8, 'weeks').subtract(1, 'day')	×
156
157	return <Card className={classes.eventCard}>	×
158	<a
159	href="https://www.effectivealtruism.org/virtual-programs/in-depth-program?utm_source=ea_forum&utm_medium=vp_card&utm_campaign=events_page"
160	className={classNames(classes.cardLink, classes.cardSection, classes.inDepthSection)}
161	onClick={() => captureEvent('inDepthVPClicked')}	×
162	>
163	<div>
164	<div className={classes.eventCardTime}>
165	<FormatDate date={start.toISOString()} format={"MMMM D"} granularity='date' tooltip={false} /> – <FormatDate date={end.toISOString()} format={"MMMM D"} granularity='date' tooltip={false} />
166	</div>
167	<div className={classes.eventCardTitle}>
168	In-Depth EA Program
169	</div>
170	<div className={classes.eventCardDescription}>
171	Dive deeper into more complex EA ideas and examine your key uncertainties
172	</div>
173	<div className={classes.eventCardDeadline}>Apply by <FormatDate date={deadline.toISOString()} format={"dddd, MMMM D"} granularity='date' /></div>
174	</div>
175	</a>
176	<a
177	href="https://www.effectivealtruism.org/virtual-programs/the-precipice-reading-group?utm_source=ea_forum&utm_medium=vp_card&utm_campaign=events_page"
178	className={classNames(classes.cardLink, classes.cardSection, classes.precipiceSection)}
179	onClick={() => captureEvent('precipiceVPClicked')}	×
180	>
181	<div>
182	<div className={classes.eventCardTime}>
183	<FormatDate date={startOfPrecipice.toISOString()} format={"MMMM D"} granularity='date' tooltip={false} /> – <FormatDate date={endOfPrecipice.toISOString()} format={"MMMM D"} granularity='date' tooltip={false} />
184	</div>
185	<div className={classes.eventCardTitle}>
186	<em>The Precipice</em> Reading Group
187	</div>
188	<div className={classes.eventCardDescription}>
189	Join weekly discussions about existential risks and safeguarding the future of humanity
190	</div>
191	<div className={classes.eventCardDeadline}>Apply by <FormatDate date={precipiceDeadline.toISOString()} format={"dddd, MMMM D"} granularity='date' tooltip={false} /></div>
192	</div>
193	</a>
194	</Card>
195	}
196
197	return null	×
198	}
199
200	const VirtualProgramCardComponent = registerComponent('VirtualProgramCard', VirtualProgramCard, {	1✔
201	styles,
202
203	// This is based around an image, which doesn't get inverted in dark mode
204	allowNonThemeColors: true,
205	});
206
207	declare global {
208	interface ComponentTypes {
209	VirtualProgramCard: typeof VirtualProgramCardComponent
210	}
211	}

ForumMagnum / ForumMagnum / 9506370521

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