8898345262

Committed 30 Apr 2024 04:29PM UTC coverage: 32.02% (+0.07%) from 31.952%

Build # 8898345262

Build Type

Pull #9197

github

Committed by

Will-Howard

Commit Message

fix remaining daysAgoCutoff cases, remove suppressHydrationWarning

Pull Request Pull Request #9197: [Draft] Standardise rendering of dates and times

Run Details

4746 of 38503 branches covered (12.33%)

Branch coverage included in aggregate %.

60 of 109 new or added lines in 28 files covered. (55.05%)

23 existing lines in 8 files now uncovered.

27538 of 62323 relevant lines covered (44.19%)

179.41 hits per line

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

29.85

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

import { Components, registerComponent, } from '../../../lib/vulcan-lib';
import React from 'react';
import { Link } from '../../../lib/reactRouterWrapper';
import { createStyles } from '@material-ui/core/styles';
import * as _ from 'underscore';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import { useTimezone } from '../../common/withTimezone';
import { isEAForum } from '../../../lib/instanceSettings';
import { getDefaultEventImg } from './HighlightedEventCard';
import { useCurrentUser } from '../../common/withUser';
import classNames from 'classnames';
import { communityPath } from '../../../lib/routes';
import { isFriendlyUI } from '../../../themes/forumTheme';
import { forumSelect } from '../../../lib/forumTypeUtils';

const styles = createStyles((theme: ThemeType): JssStyles => ({
  noResults: {
    ...theme.typography.commentStyle,
    gridColumn: '1 / 4',
    textAlign: 'center',
    fontSize: 18,
  },
  noResultsText: {
    marginTop: 10
  },
  noResultsCTA: {
    fontSize: 14,
    marginTop: 20
  },
  communityLink: {
    color: theme.palette.primary.main,
  },
  eventCard: {
    position: 'relative',
    width: 373,
    height: 374,
    overflow: 'visible',
    boxShadow: theme.palette.boxShadow.eventCard,
    borderRadius: theme.borderRadius.default,
    [theme.breakpoints.down('xs')]: {
      maxWidth: '100vw'
    }
  },
  eventCardTag: {
    ...theme.typography.commentStyle,
    position: 'absolute',
    top: 15,
    left: 15,
    backgroundColor: theme.palette.buttons.eventCardTag,
    color: theme.palette.buttons.primaryDarkText,
    fontSize: 12,
    padding: '6px 12px',
    borderRadius: 20
  },
  eventCardContent: {
    position: 'relative',
    height: 175,
  },
  eventCardTime: {
    ...theme.typography.commentStyle,
    fontSize: 14,
    color: theme.palette.primary.main
  },
  eventCardTimeApply: {
    color: theme.palette.text.dim,
    fontSize: 11,
    marginRight: 5
  },
  eventCardTitle: {
    ...theme.typography.headline,
    fontSize: 20,
    fontWeight: 600,
    display: '-webkit-box',
    "-webkit-line-clamp": 2,
    "-webkit-box-orient": 'vertical',
    overflow: 'hidden',
    marginTop: 8,
    marginBottom: 0,
    ...(isFriendlyUI && {
      fontFamily: theme.palette.fonts.sansSerifStack,
    }),
  },
  eventCardLocation: {
    ...theme.typography.commentStyle,
    color: theme.palette.text.slightlyDim2,
    fontSize: 14,
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    marginTop: 8,
  },
  eventCardGroup: {
    ...theme.typography.commentStyle,
    fontStyle: "italic",
    maxWidth: 290,
    color: theme.palette.text.dim,
    fontSize: 14,
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    marginTop: 20,
  },
  addToCal: {
    ...theme.typography.commentStyle,
    position: 'absolute',
    bottom: 20,
    right: 20,
    fontSize: 14,
    [theme.breakpoints.down('xs')]: {
      display: 'none'
    }
  },
  eventCardImage: {
    borderRadius: `${theme.borderRadius.default}px ${theme.borderRadius.default}px 0 0`,
    height: 195,
    width: 373,
  },
}))


const EventCards = ({events, loading, numDefaultCards, hideSpecialCards, hideGroupNames, cardClassName, classes}: {
  events: PostsList[],
  loading?: boolean,
  numDefaultCards?: number,
  hideSpecialCards?: boolean,
  hideGroupNames?: boolean,
  cardClassName?: string,
  classes: ClassesType,
}) => {
  const currentUser = useCurrentUser()
  const { timezone } = useTimezone()
  
  const getEventLocation = (event: PostsList): string => {
    if (event.onlineEvent) return 'Online'
    return event.location ? event.location.slice(0, event.location.lastIndexOf(',')) : ''
  }
  
  const { AddToCalendarButton, PostsItemTooltipWrapper, CloudinaryImage2, VirtualProgramCard, PrettyEventDateTime } = Components
  
  // while the data is loading, show some placeholder empty cards
  if (loading && !events.length) {
    return numDefaultCards ? <>
      {_.range(numDefaultCards).map((i) => {
        return <Card key={i} className={classNames(classes.eventCard, cardClassName)}></Card>
      })}
    </> : null
  }
  
  const eventCards = events.map(event => {
    return <Card key={event._id} className={classNames(classes.eventCard, cardClassName)}>
      <Link to={`/events/${event._id}/${event.slug}`}>
        {event.eventImageId ?
          <CloudinaryImage2 height={195} width={373} publicId={event.eventImageId} imgProps={{q: '100'}} className={classes.eventCardImage} /> :
          <img src={getDefaultEventImg(373)} className={classes.eventCardImage} />}
      </Link>
      {event.eventType === 'conference' && <div className={classes.eventCardTag}>Conference</div>}
      <CardContent className={classes.eventCardContent}>
        <div className={classes.eventCardTime}>
          {event.eventType === 'course' && <span className={classes.eventCardTimeApply}>Apply by</span>}
          <PrettyEventDateTime post={event} timezone={timezone} dense={true} />
        </div>
        <PostsItemTooltipWrapper post={event}>
          <div className={classes.eventCardTitle}>
            <Link to={`/events/${event._id}/${event.slug}`}>{event.title}</Link>
          </div>
        </PostsItemTooltipWrapper>
        <div className={classes.eventCardLocation}>{getEventLocation(event)}</div>
        {!hideGroupNames && event.group && <div className={classes.eventCardGroup} title={event.group.name}>
          <Link to={`/groups/${event.group._id}`}>{event.group.name}</Link>
        </div>}
        <div className={classes.addToCal}>
          <AddToCalendarButton post={event} />
        </div>
      </CardContent>
    </Card>
  })
  
  // on the EA Forum, insert card(s) advertising Virtual Programs
  if (isEAForum && !hideSpecialCards) {
    // NOTE: splice() will just insert the card at the end of the list if the first param > length
    if (currentUser) {
      // for logged in users, just display the In-Depth / Precipice VP card
      eventCards.splice(2, 0, <VirtualProgramCard key="advancedVP" program="advanced" />)
    } else {
      // for logged logged out users, display both VP cards
      eventCards.splice(2, 0, <VirtualProgramCard key="introVP" program="intro" />)
      // we try to space out the two cards
      eventCards.splice(5, 0, <VirtualProgramCard key="advancedVP" program="advanced" />)
    }
  }
  
  if (!eventCards.length) {
    // link to the Community page when there are no events to show
    const communityName = forumSelect({
      EAForum: "EA Community",
      LessWrong: "LessWrong Community",
      default: "Community",
    })
    return <div className={classes.noResults}>
      <div className={classes.noResultsText}>No upcoming events matching your search</div>
      <div className={classes.noResultsCTA}>
        <Link to={communityPath} className={classes.communityLink}>
          Explore the {communityName}
        </Link>
      </div>
    </div>
  }

  return <>
    {eventCards}
  </>
}

const EventCardsComponent = registerComponent('EventCards', EventCards, {styles});

declare global {
  interface ComponentTypes {
    EventCards: typeof EventCardsComponent
  }
}

1	import { Components, registerComponent, } from '../../../lib/vulcan-lib';	1✔
2	import React from 'react';	1✔
3	import { Link } from '../../../lib/reactRouterWrapper';	1✔
4	import { createStyles } from '@material-ui/core/styles';	1✔
5	import * as _ from 'underscore';	1✔
6	import Card from '@material-ui/core/Card';	1✔
7	import CardContent from '@material-ui/core/CardContent';	1✔
8	import { useTimezone } from '../../common/withTimezone';	1✔
9	import { isEAForum } from '../../../lib/instanceSettings';	1✔
10	import { getDefaultEventImg } from './HighlightedEventCard';	1✔
11	import { useCurrentUser } from '../../common/withUser';	1✔
12	import classNames from 'classnames';	1✔
13	import { communityPath } from '../../../lib/routes';	1✔
14	import { isFriendlyUI } from '../../../themes/forumTheme';	1✔
15	import { forumSelect } from '../../../lib/forumTypeUtils';	1✔
16
17	const styles = createStyles((theme: ThemeType): JssStyles => ({	1✔
18	noResults: {
19	...theme.typography.commentStyle,
20	gridColumn: '1 / 4',
21	textAlign: 'center',
22	fontSize: 18,
23	},
24	noResultsText: {
25	marginTop: 10
26	},
27	noResultsCTA: {
28	fontSize: 14,
29	marginTop: 20
30	},
31	communityLink: {
32	color: theme.palette.primary.main,
33	},
34	eventCard: {
35	position: 'relative',
36	width: 373,
37	height: 374,
38	overflow: 'visible',
39	boxShadow: theme.palette.boxShadow.eventCard,
40	borderRadius: theme.borderRadius.default,
41	[theme.breakpoints.down('xs')]: {
42	maxWidth: '100vw'
43	}
44	},
45	eventCardTag: {
46	...theme.typography.commentStyle,
47	position: 'absolute',
48	top: 15,
49	left: 15,
50	backgroundColor: theme.palette.buttons.eventCardTag,
51	color: theme.palette.buttons.primaryDarkText,
52	fontSize: 12,
53	padding: '6px 12px',
54	borderRadius: 20
55	},
56	eventCardContent: {
57	position: 'relative',
58	height: 175,
59	},
60	eventCardTime: {
61	...theme.typography.commentStyle,
62	fontSize: 14,
63	color: theme.palette.primary.main
64	},
65	eventCardTimeApply: {
66	color: theme.palette.text.dim,
67	fontSize: 11,
68	marginRight: 5
69	},
70	eventCardTitle: {
71	...theme.typography.headline,
72	fontSize: 20,
73	fontWeight: 600,
74	display: '-webkit-box',
75	"-webkit-line-clamp": 2,
76	"-webkit-box-orient": 'vertical',
77	overflow: 'hidden',
78	marginTop: 8,
79	marginBottom: 0,
80	...(isFriendlyUI && {	2✔
81	fontFamily: theme.palette.fonts.sansSerifStack,
82	}),
83	},
84	eventCardLocation: {
85	...theme.typography.commentStyle,
86	color: theme.palette.text.slightlyDim2,
87	fontSize: 14,
88	textOverflow: 'ellipsis',
89	whiteSpace: 'nowrap',
90	overflow: 'hidden',
91	marginTop: 8,
92	},
93	eventCardGroup: {
94	...theme.typography.commentStyle,
95	fontStyle: "italic",
96	maxWidth: 290,
97	color: theme.palette.text.dim,
98	fontSize: 14,
99	textOverflow: 'ellipsis',
100	whiteSpace: 'nowrap',
101	overflow: 'hidden',
102	marginTop: 20,
103	},
104	addToCal: {
105	...theme.typography.commentStyle,
106	position: 'absolute',
107	bottom: 20,
108	right: 20,
109	fontSize: 14,
110	[theme.breakpoints.down('xs')]: {
111	display: 'none'
112	}
113	},
114	eventCardImage: {
115	borderRadius: `${theme.borderRadius.default}px ${theme.borderRadius.default}px 0 0`,
116	height: 195,
117	width: 373,
118	},
119	}))
120
121
122	const EventCards = ({events, loading, numDefaultCards, hideSpecialCards, hideGroupNames, cardClassName, classes}: {	1✔
123	events: PostsList[],
124	loading?: boolean,
125	numDefaultCards?: number,
126	hideSpecialCards?: boolean,
127	hideGroupNames?: boolean,
128	cardClassName?: string,
129	classes: ClassesType,
130	}) => {
131	const currentUser = useCurrentUser()	×
132	const { timezone } = useTimezone()	×
133
134	const getEventLocation = (event: PostsList): string => {	×
135	if (event.onlineEvent) return 'Online'	×
136	return event.location ? event.location.slice(0, event.location.lastIndexOf(',')) : ''	×
137	}
138
NEW 139	const { AddToCalendarButton, PostsItemTooltipWrapper, CloudinaryImage2, VirtualProgramCard, PrettyEventDateTime } = Components	×
140
141	// while the data is loading, show some placeholder empty cards
142	if (loading && !events.length) {	×
143	return numDefaultCards ? <>	×
144	{_.range(numDefaultCards).map((i) => {
145	return <Card key={i} className={classNames(classes.eventCard, cardClassName)}></Card>	×
146	})}
147	</> : null
148	}
149
150	const eventCards = events.map(event => {	×
151	return <Card key={event._id} className={classNames(classes.eventCard, cardClassName)}>	×
152	<Link to={`/events/${event._id}/${event.slug}`}>
153	{event.eventImageId ?
154	<CloudinaryImage2 height={195} width={373} publicId={event.eventImageId} imgProps={{q: '100'}} className={classes.eventCardImage} /> :	×
155	<img src={getDefaultEventImg(373)} className={classes.eventCardImage} />}
156	</Link>
157	{event.eventType === 'conference' && <div className={classes.eventCardTag}>Conference</div>}	×
158	<CardContent className={classes.eventCardContent}>
159	<div className={classes.eventCardTime}>
160	{event.eventType === 'course' && <span className={classes.eventCardTimeApply}>Apply by</span>}	×
161	<PrettyEventDateTime post={event} timezone={timezone} dense={true} />
162	</div>
163	<PostsItemTooltipWrapper post={event}>
164	<div className={classes.eventCardTitle}>
165	<Link to={`/events/${event._id}/${event.slug}`}>{event.title}</Link>
166	</div>
167	</PostsItemTooltipWrapper>
168	<div className={classes.eventCardLocation}>{getEventLocation(event)}</div>
169	{!hideGroupNames && event.group && <div className={classes.eventCardGroup} title={event.group.name}>	×
170	<Link to={`/groups/${event.group._id}`}>{event.group.name}</Link>
171	</div>}
172	<div className={classes.addToCal}>
173	<AddToCalendarButton post={event} />
174	</div>
175	</CardContent>
176	</Card>
177	})
178
179	// on the EA Forum, insert card(s) advertising Virtual Programs
180	if (isEAForum && !hideSpecialCards) {	×
181	// NOTE: splice() will just insert the card at the end of the list if the first param > length
182	if (currentUser) {	×
183	// for logged in users, just display the In-Depth / Precipice VP card
184	eventCards.splice(2, 0, <VirtualProgramCard key="advancedVP" program="advanced" />)	×
185	} else {
186	// for logged logged out users, display both VP cards
187	eventCards.splice(2, 0, <VirtualProgramCard key="introVP" program="intro" />)	×
188	// we try to space out the two cards
189	eventCards.splice(5, 0, <VirtualProgramCard key="advancedVP" program="advanced" />)	×
190	}
191	}
192
193	if (!eventCards.length) {	×
194	// link to the Community page when there are no events to show
195	const communityName = forumSelect({	×
196	EAForum: "EA Community",
197	LessWrong: "LessWrong Community",
198	default: "Community",
199	})
200	return <div className={classes.noResults}>	×
201	<div className={classes.noResultsText}>No upcoming events matching your search</div>
202	<div className={classes.noResultsCTA}>
203	<Link to={communityPath} className={classes.communityLink}>
204	Explore the {communityName}
205	</Link>
206	</div>
207	</div>
208	}
209
210	return <>	×
211	{eventCards}
212	</>
213	}
214
215	const EventCardsComponent = registerComponent('EventCards', EventCards, {styles});	1✔
216
217	declare global {
218	interface ComponentTypes {
219	EventCards: typeof EventCardsComponent
220	}
221	}

ForumMagnum / ForumMagnum / 8898345262

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