10607472383

Committed 29 Aug 2024 02:10AM UTC coverage: 31.915% (-0.02%) from 31.937%

Build # 10607472383

Build Type

Pull #9654

github

Committed by

Raemon

Commit Message

remove weird comment, fix schema

Pull Request Pull Request #9654: Auto Spotlights for Best of LessWrong

Run Details

5023 of 41063 branches covered (12.23%)

Branch coverage included in aggregate %.

9 of 42 new or added lines in 4 files covered. (21.43%)

25 existing lines in 3 files now uncovered.

29323 of 66554 relevant lines covered (44.06%)

188.26 hits per line

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

33.67

/packages/lesswrong/components/spotlights/SpotlightItem.tsx

import Button from '@material-ui/core/Button';
import EditIcon from '@material-ui/icons/Edit';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import classNames from 'classnames';
import React, { CSSProperties, useCallback, useState } from 'react';
import { userGetProfileUrlFromSlug } from '../../lib/collections/users/helpers';
import { Link } from '../../lib/reactRouterWrapper';
import { Components, getFragment, registerComponent } from '../../lib/vulcan-lib';
import { userCanDo } from '../../lib/vulcan-users';
import { postBodyStyles } from '../../themes/stylePiping';
import { useCurrentUser } from '../common/withUser';
import { isBookUI, isFriendlyUI } from '../../themes/forumTheme';
import { SECTION_WIDTH } from '../common/SingleColumnSection';
import { getSpotlightUrl } from '../../lib/collections/spotlights/helpers';

const TEXT_WIDTH = 350;

export const descriptionStyles = (theme: ThemeType) => ({
  ...postBodyStyles(theme),
  ...(isBookUI ? theme.typography.body2 : {}),
  lineHeight: '1.65rem',
  '& p': {
    marginTop: ".5em",
    marginBottom: ".5em",
    '&:first-child': {
      marginTop: 0,
    },
    'style~&': {
      marginTop: 0,
    },
    '&:last-child': {
      marginBottom: 0,
    }
  },
})

const buildFadeMask = (breakpoints: string[]) => {
  const mask = `linear-gradient(to right, ${breakpoints.join(",")})`;
  return {mask, "-webkit-mask-image": mask};
}

const styles = (theme: ThemeType) => ({
  root: {
    marginBottom: 12,
    boxShadow: theme.palette.boxShadow.default,
    // TODO these were added to fix an urgent bug, hence the forum gating. Maybe they could be un-gated
    ...(isFriendlyUI && {
      maxWidth: SECTION_WIDTH,
      marginLeft: "auto",
      marginRight: "auto",
      [theme.breakpoints.up('md')]: {
        width: SECTION_WIDTH // TODO: replace this hacky solution with a more comprehensive refactoring of SingleColumnSection.
        // (SingleColumnLayout should probably be replaced by grid-css in Layout.tsx)
      }
    })
  },
  spotlightItem: {
    position: "relative",
    borderRadius: theme.borderRadius.default,
    background: theme.palette.panelBackground.default,
    '&:hover': {
      boxShadow: theme.palette.boxShadow.sequencesGridItemHover,
    },
    '&:hover $editButtonIcon': {
      opacity: .2
    },
    '&:hover $closeButton': {
      color: theme.palette.grey[100],
    }
  },
  spotlightFadeBackground: {
    background: "var(--spotlight-fade)",
  },
  closeButtonWrapper: {
    position: 'absolute',
    top: 0,
    right: 0,
  },
  closeButton: {
    padding: '.5em',
    minHeight: '.75em',
    minWidth: '.75em',
    color: isFriendlyUI ? theme.palette.text.alwaysWhite : theme.palette.grey[300],
    zIndex: theme.zIndexes.spotlightItemCloseButton,
  },
  hideButton: {
    cursor: "pointer",
    position: "absolute",
    top: 12,
    right: 12,
    width: 20,
    height: 20,
    color: theme.palette.text.alwaysWhite,
    "&:hover": {
      opacity: 0.8,
    },
  },
  content: {
    padding: 16,
    paddingRight: 35,
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    marginRight: 150,
    position: "relative",
    zIndex: theme.zIndexes.spotlightItem,
    // Drop shadow that helps the text stand out from the background image
    textShadow: isFriendlyUI ? undefined : `
      0px 0px 10px ${theme.palette.background.default},
      0px 0px 20px ${theme.palette.background.default}
    `,
    [theme.breakpoints.up('sm')]: {
      minHeight: 100
    },
    [theme.breakpoints.down('xs')]: {
      marginRight: 100
    },
    '& br': {
      [theme.breakpoints.down('sm')]: {
        display: "none"
      }
    }
  },
  postPadding: {
    paddingBottom: 12
  },
  description: {
    marginTop: 7,
    marginBottom: 10,
    ...descriptionStyles(theme),
    position: "relative",
    [theme.breakpoints.down('xs')]: {
      display: "none"
    },
    ...(isFriendlyUI ? {
      fontSize: 13,
      fontWeight: 500,
      fontFamily: theme.palette.fonts.sansSerifStack,
      color: theme.palette.text.alwaysWhite,
      marginTop: 8,
      maxWidth: TEXT_WIDTH,
      "& a": {
        color: theme.palette.text.alwaysWhite,
        textDecoration: "underline",
        "&:hover": {
          opacity: 0.8,
          color: `${theme.palette.text.alwaysWhite} !important`,
        },
        "&:visited": {
          color: theme.palette.text.alwaysWhite,
        },
      },
    } : {}),
  },
  title: {
    ...theme.typography.postStyle,
    ...(isFriendlyUI
      ? {
        fontSize: 22,
        fontWeight: 700,
        color: theme.palette.text.alwaysWhite,
      }
      : {
        fontSize: 20,
        fontVariant: "small-caps",
        lineHeight: "1.2em",
      }
    ),
    display: "flex",
    alignItems: "center"
  },
  subtitle: {
    ...theme.typography.postStyle,
    ...theme.typography.italic,
    ...(isFriendlyUI ? {
      fontSize: 13,
      fontWeight: 500,
      fontFamily: theme.palette.fonts.sansSerifStack,
      color: theme.palette.text.alwaysWhite,
      marginTop: 8,
      maxWidth: TEXT_WIDTH,
    } : {
      color: theme.palette.grey[700],
      fontSize: 15,
      marginTop: -1,
    }),
  },
  startOrContinue: isFriendlyUI
    ? {
      marginTop: 0,
      [theme.breakpoints.down("xs")]: {
        marginTop: 8,
      },
    }
    : {
      marginTop: 4,
    },
  image: {
    height: "100%",
    position: "absolute",
    top: 0,
    right: 0,
    borderTopRightRadius: theme.borderRadius.default,
    borderBottomRightRadius: theme.borderRadius.default,
    // TODO these were added to fix an urgent bug, hence the forum gating. Maybe they could be un-gated
    ...(isFriendlyUI && {width: "100%", objectFit: "cover"}),
  },
  imageFade: buildFadeMask([
    "transparent 0",
    `${theme.palette.text.alwaysWhite} 80%`,
    `${theme.palette.text.alwaysWhite} 100%`,
  ]),
  imageFadeCustom: buildFadeMask([
    "transparent 0",
    "transparent 30%",
    `${theme.palette.text.alwaysWhite} 90%`,
    `${theme.palette.text.alwaysWhite} 100%`,
  ]),
  author: {
    marginTop: 4,
    color: theme.palette.grey[600],
  },
  authorName: {
    color: theme.palette.primary.main,
  },
  editAllButton: {
    [theme.breakpoints.up('md')]: {
      position: "absolute",
      top: 6,
      right: -28,
    },
    [theme.breakpoints.down('sm')]: {
      position: "absolute",
      top: 4,
      right: 8
    },
  },
  editAllButtonIcon: {
    width: 20
  },
  editButtonIcon: {
    width: 18,
    opacity: 0,
    cursor: "pointer",
    zIndex: theme.zIndexes.spotlightItemCloseButton,
    [theme.breakpoints.down('sm')]: {
      color: theme.palette.background.pageActiveAreaBackground,
      width: 16,
      opacity:.2
    },
    '&:hover': {
      opacity: .5
    }
  },
  editDescriptionButton: {
    marginLeft: 8
  },
  editDescription: {
    '& .form-input': {
      margin: 0
    },
    '& .EditorFormComponent-commentEditorHeight': {
      minHeight: "unset"
    },
    '& .EditorFormComponent-commentEditorHeight .ck.ck-content': {
      minHeight: "unset"
    },
    '& .ck.ck-content.ck-editor__editable': {
      ...descriptionStyles(theme) 
    },
    '& .EditorFormComponent-ckEditorStyles .ck.ck-content': {
      marginLeft: 0,
    },
    '& .ck.ck-editor__editable_inline': {
      padding: 0,
      border: "none !important",
    },
    '& .form-submit button': {
      position: "absolute",
      bottom: -38,
      right: 0,
      marginLeft: 12
    }
  },
  form: {
    borderTop: theme.palette.border.faint,
    background: theme.palette.background.translucentBackground,
    paddingLeft: 16,
    paddingRight: 16,
    paddingTop: 8,
    paddingBottom: 8
  },
  metaData: {
    textAlign: "right",
    paddingTop: 6,
    paddingBottom: 12
  },
  splashImage: {
    transform: "translateX(25%)",
    filter: "brightness(1.2)",
  },
  splashImageContainer: {
    position: "absolute",
    top: 0,
    right: 0,
    width: "100%",
    height: "100%",
    zIndex: -1,
    overflow: "hidden",
  }
});

export const SpotlightItem = ({
  spotlight,
  showAdminInfo,
  hideBanner,
  refetchAllSpotlights,
  className,
  classes,
}: {
  spotlight: SpotlightDisplay,
  showAdminInfo?: boolean,
  hideBanner?: () => void,
  // This is so that if a spotlight's position is updated (in SpotlightsPage), we refetch all of them to display them with their updated positions and in the correct order
  refetchAllSpotlights?: () => void,
  className?: string,
  classes: ClassesType<typeof styles>,
}) => {
  const currentUser = useCurrentUser()

  const [edit, setEdit] = useState<boolean>(false)
  const [editDescription, setEditDescription] = useState<boolean>(false)

  const url = getSpotlightUrl(spotlight);

  const duration = spotlight.duration

  const onUpdate = useCallback(() => {
    setEdit(false);
    refetchAllSpotlights?.();
  }, [refetchAllSpotlights]);

  // Define fade color with a CSS variable to be accessed in the styles
  const style = {
    "--spotlight-fade": spotlight.imageFadeColor,
  } as CSSProperties;

  const {
    MetaInfo, FormatDate, AnalyticsTracker, ContentItemBody, CloudinaryImage2,
    WrappedSmartForm, SpotlightEditorStyles, SpotlightStartOrContinueReading,
    Typography, LWTooltip, ForumIcon,
  } = Components
  return <AnalyticsTracker eventType="spotlightItem" captureOnMount captureOnClick={false}>
    <div
      id={spotlight._id}
      style={style}
      className={classNames(classes.root, className)}
    >
      <div className={classNames(classes.spotlightItem, {
        [classes.spotlightFadeBackground]: !!spotlight.imageFadeColor,
      })}>
        <div className={classNames(classes.content, {[classes.postPadding]: spotlight.documentType === "Post"})}>
          <div className={classes.title}>
            <Link to={url}>
              {spotlight.customTitle ?? spotlight.document.title}
            </Link>
            <span className={classes.editDescriptionButton}>
              {showAdminInfo && userCanDo(currentUser, 'spotlights.edit.all') && <LWTooltip title="Edit Spotlight">
                <EditIcon className={classes.editButtonIcon} onClick={() => setEditDescription(!editDescription)}/>
              </LWTooltip>}
            </span>
          </div>
          {spotlight.customSubtitle && <div className={classes.subtitle}>
            {spotlight.customSubtitle}
          </div>}
          {(spotlight.description?.html || isBookUI) && <div className={classes.description}>
            {editDescription ? 
              <div className={classes.editDescription}>
                <WrappedSmartForm
                  collectionName="Spotlights"
                  fields={['description']}
                  documentId={spotlight._id}
                  mutationFragment={getFragment('SpotlightEditQueryFragment')}
                  queryFragment={getFragment('SpotlightEditQueryFragment')}
                  successCallback={() => setEditDescription(false)}
                />
              </div>
              :
              <ContentItemBody
                dangerouslySetInnerHTML={{__html: spotlight.description?.html ?? ''}}
                description={`${spotlight.documentType} ${spotlight.document._id}`}
              />
            }
          </div>}
          {spotlight.showAuthor && spotlight.document.user && <Typography variant='body2' className={classes.author}>
            by <Link className={classes.authorName} to={userGetProfileUrlFromSlug(spotlight.document.user.slug)}>{spotlight.document.user.displayName}</Link>
          </Typography>}
          <SpotlightStartOrContinueReading spotlight={spotlight} className={classes.startOrContinue} />
        </div>
        {spotlight.spotlightSplashImageUrl && <div className={classes.splashImageContainer}><img src={spotlight.spotlightSplashImageUrl} className={classNames(classes.image, classes.imageFade, classes.splashImage)}/></div>}
        {spotlight.spotlightImageId && <CloudinaryImage2
          publicId={spotlight.spotlightImageId}
          darkPublicId={spotlight.spotlightDarkImageId}
          className={classNames(classes.image, {
            [classes.imageFade]: spotlight.imageFade && !spotlight.imageFadeColor,
            [classes.imageFadeCustom]: spotlight.imageFade && spotlight.imageFadeColor,
          })}
        />}
        {hideBanner && (
          isFriendlyUI
            ? (
              <ForumIcon
                icon="Close"
                onClick={hideBanner}
                className={classes.hideButton}
              />
            )
            : (
              <div className={classes.closeButtonWrapper}>
                <LWTooltip title="Hide this spotlight" placement="right">
                  <Button className={classes.closeButton} onClick={hideBanner}>
                    <ForumIcon icon="Close" />
                  </Button>
                </LWTooltip>
              </div>
            )
          )
        }
        <div className={classes.editAllButton}>
          {showAdminInfo && userCanDo(currentUser, 'spotlights.edit.all') && <LWTooltip title="Edit Spotlight">
            <MoreVertIcon className={classNames(classes.editButtonIcon, classes.editAllButtonIcon)} onClick={() => setEdit(!edit)}/>
          </LWTooltip>}
        </div>
      </div>
      {showAdminInfo && <>
        {edit ? <div className={classes.form}>
            <SpotlightEditorStyles>
            <WrappedSmartForm
              collectionName="Spotlights"
              documentId={spotlight._id}
              mutationFragment={getFragment('SpotlightEditQueryFragment')}
              queryFragment={getFragment('SpotlightEditQueryFragment')}
              successCallback={onUpdate}
            />
            </SpotlightEditorStyles>
          </div>
           :
          <div className={classes.metaData}>
            {spotlight.draft && <MetaInfo>[Draft]</MetaInfo>}
            <MetaInfo>{spotlight.position}</MetaInfo>
            <MetaInfo><FormatDate date={spotlight.lastPromotedAt} format="YYYY-MM-DD"/></MetaInfo>
            <LWTooltip title={`This will be on the frontpage for ${duration} days when it rotates in`}>
              <MetaInfo>{duration} days</MetaInfo>
            </LWTooltip>
          </div>
        }
      </>}
    </div>
  </AnalyticsTracker>
}

const SpotlightItemComponent = registerComponent('SpotlightItem', SpotlightItem, {
  styles,
  stylePriority: -1,
});

declare global {
  interface ComponentTypes {
    SpotlightItem: typeof SpotlightItemComponent
  }
}

1	import Button from '@material-ui/core/Button';	4✔
2	import EditIcon from '@material-ui/icons/Edit';	1✔
3	import MoreVertIcon from '@material-ui/icons/MoreVert';	1✔
4	import classNames from 'classnames';	1✔
5	import React, { CSSProperties, useCallback, useState } from 'react';	1✔
6	import { userGetProfileUrlFromSlug } from '../../lib/collections/users/helpers';	1✔
7	import { Link } from '../../lib/reactRouterWrapper';	1✔
8	import { Components, getFragment, registerComponent } from '../../lib/vulcan-lib';	1✔
9	import { userCanDo } from '../../lib/vulcan-users';	1✔
10	import { postBodyStyles } from '../../themes/stylePiping';	1✔
11	import { useCurrentUser } from '../common/withUser';	1✔
12	import { isBookUI, isFriendlyUI } from '../../themes/forumTheme';	1✔
13	import { SECTION_WIDTH } from '../common/SingleColumnSection';	1✔
14	import { getSpotlightUrl } from '../../lib/collections/spotlights/helpers';	1✔
15
16	const TEXT_WIDTH = 350;	1✔
17
18	export const descriptionStyles = (theme: ThemeType) => ({	3✔
19	...postBodyStyles(theme),
20	...(isBookUI ? theme.typography.body2 : {}),	3!
21	lineHeight: '1.65rem',
22	'& p': {
23	marginTop: ".5em",
24	marginBottom: ".5em",
25	'&:first-child': {
26	marginTop: 0,
27	},
28	'style~&': {
29	marginTop: 0,
30	},
31	'&:last-child': {
32	marginBottom: 0,
33	}
34	},
35	})
36
37	const buildFadeMask = (breakpoints: string[]) => {	1✔
38	const mask = `linear-gradient(to right, ${breakpoints.join(",")})`;	2✔
39	return {mask, "-webkit-mask-image": mask};	2✔
40	}
41
42	const styles = (theme: ThemeType) => ({	1✔
43	root: {
44	marginBottom: 12,
45	boxShadow: theme.palette.boxShadow.default,
46	// TODO these were added to fix an urgent bug, hence the forum gating. Maybe they could be un-gated
47	...(isFriendlyUI && {	2✔
48	maxWidth: SECTION_WIDTH,
49	marginLeft: "auto",
50	marginRight: "auto",
51	[theme.breakpoints.up('md')]: {
52	width: SECTION_WIDTH // TODO: replace this hacky solution with a more comprehensive refactoring of SingleColumnSection.
53	// (SingleColumnLayout should probably be replaced by grid-css in Layout.tsx)
54	}
55	})
56	},
57	spotlightItem: {
58	position: "relative",
59	borderRadius: theme.borderRadius.default,
60	background: theme.palette.panelBackground.default,
61	'&:hover': {
62	boxShadow: theme.palette.boxShadow.sequencesGridItemHover,
63	},
64	'&:hover $editButtonIcon': {
65	opacity: .2
66	},
67	'&:hover $closeButton': {
68	color: theme.palette.grey[100],
69	}
70	},
71	spotlightFadeBackground: {
72	background: "var(--spotlight-fade)",
73	},
74	closeButtonWrapper: {
75	position: 'absolute',
76	top: 0,
77	right: 0,
78	},
79	closeButton: {
80	padding: '.5em',
81	minHeight: '.75em',
82	minWidth: '.75em',
83	color: isFriendlyUI ? theme.palette.text.alwaysWhite : theme.palette.grey[300],	1!
84	zIndex: theme.zIndexes.spotlightItemCloseButton,
85	},
86	hideButton: {
87	cursor: "pointer",
88	position: "absolute",
89	top: 12,
90	right: 12,
91	width: 20,
92	height: 20,
93	color: theme.palette.text.alwaysWhite,
94	"&:hover": {
95	opacity: 0.8,
96	},
97	},
98	content: {
99	padding: 16,
100	paddingRight: 35,
101	display: "flex",
102	flexDirection: "column",
103	justifyContent: "space-between",
104	marginRight: 150,
105	position: "relative",
106	zIndex: theme.zIndexes.spotlightItem,
107	// Drop shadow that helps the text stand out from the background image
108	textShadow: isFriendlyUI ? undefined : `	1!
109	0px 0px 10px ${theme.palette.background.default},
110	0px 0px 20px ${theme.palette.background.default}
111	`,
112	[theme.breakpoints.up('sm')]: {
113	minHeight: 100
114	},
115	[theme.breakpoints.down('xs')]: {
116	marginRight: 100
117	},
118	'& br': {
119	[theme.breakpoints.down('sm')]: {
120	display: "none"
121	}
122	}
123	},
124	postPadding: {
125	paddingBottom: 12
126	},
127	description: {
128	marginTop: 7,
129	marginBottom: 10,
130	...descriptionStyles(theme),
131	position: "relative",
132	[theme.breakpoints.down('xs')]: {
133	display: "none"
134	},
135	...(isFriendlyUI ? {	1!
136	fontSize: 13,
137	fontWeight: 500,
138	fontFamily: theme.palette.fonts.sansSerifStack,
139	color: theme.palette.text.alwaysWhite,
140	marginTop: 8,
141	maxWidth: TEXT_WIDTH,
142	"& a": {
143	color: theme.palette.text.alwaysWhite,
144	textDecoration: "underline",
145	"&:hover": {
146	opacity: 0.8,
147	color: `${theme.palette.text.alwaysWhite} !important`,
148	},
149	"&:visited": {
150	color: theme.palette.text.alwaysWhite,
151	},
152	},
153	} : {}),
154	},
155	title: {
156	...theme.typography.postStyle,
157	...(isFriendlyUI
158	? {	1!
159	fontSize: 22,
160	fontWeight: 700,
161	color: theme.palette.text.alwaysWhite,
162	}
163	: {
164	fontSize: 20,
165	fontVariant: "small-caps",
166	lineHeight: "1.2em",
167	}
168	),
169	display: "flex",
170	alignItems: "center"
171	},
172	subtitle: {
173	...theme.typography.postStyle,
174	...theme.typography.italic,
175	...(isFriendlyUI ? {	1!
176	fontSize: 13,
177	fontWeight: 500,
178	fontFamily: theme.palette.fonts.sansSerifStack,
179	color: theme.palette.text.alwaysWhite,
180	marginTop: 8,
181	maxWidth: TEXT_WIDTH,
182	} : {
183	color: theme.palette.grey[700],
184	fontSize: 15,
185	marginTop: -1,
186	}),
187	},
188	startOrContinue: isFriendlyUI
189	? {	1!
190	marginTop: 0,
191	[theme.breakpoints.down("xs")]: {
192	marginTop: 8,
193	},
194	}
195	: {
196	marginTop: 4,
197	},
198	image: {
199	height: "100%",
200	position: "absolute",
201	top: 0,
202	right: 0,
203	borderTopRightRadius: theme.borderRadius.default,
204	borderBottomRightRadius: theme.borderRadius.default,
205	// TODO these were added to fix an urgent bug, hence the forum gating. Maybe they could be un-gated
206	...(isFriendlyUI && {width: "100%", objectFit: "cover"}),	2✔
207	},
208	imageFade: buildFadeMask([
209	"transparent 0",
210	`${theme.palette.text.alwaysWhite} 80%`,
211	`${theme.palette.text.alwaysWhite} 100%`,
212	]),
213	imageFadeCustom: buildFadeMask([
214	"transparent 0",
215	"transparent 30%",
216	`${theme.palette.text.alwaysWhite} 90%`,
217	`${theme.palette.text.alwaysWhite} 100%`,
218	]),
219	author: {
220	marginTop: 4,
221	color: theme.palette.grey[600],
222	},
223	authorName: {
224	color: theme.palette.primary.main,
225	},
226	editAllButton: {
227	[theme.breakpoints.up('md')]: {
228	position: "absolute",
229	top: 6,
230	right: -28,
231	},
232	[theme.breakpoints.down('sm')]: {
233	position: "absolute",
234	top: 4,
235	right: 8
236	},
237	},
238	editAllButtonIcon: {
239	width: 20
240	},
241	editButtonIcon: {
242	width: 18,
243	opacity: 0,
244	cursor: "pointer",
245	zIndex: theme.zIndexes.spotlightItemCloseButton,
246	[theme.breakpoints.down('sm')]: {
247	color: theme.palette.background.pageActiveAreaBackground,
248	width: 16,
249	opacity:.2
250	},
251	'&:hover': {
252	opacity: .5
253	}
254	},
255	editDescriptionButton: {
256	marginLeft: 8
257	},
258	editDescription: {
259	'& .form-input': {
260	margin: 0
261	},
262	'& .EditorFormComponent-commentEditorHeight': {
263	minHeight: "unset"
264	},
265	'& .EditorFormComponent-commentEditorHeight .ck.ck-content': {
266	minHeight: "unset"
267	},
268	'& .ck.ck-content.ck-editor__editable': {
269	...descriptionStyles(theme)
270	},
271	'& .EditorFormComponent-ckEditorStyles .ck.ck-content': {
272	marginLeft: 0,
273	},
274	'& .ck.ck-editor__editable_inline': {
275	padding: 0,
276	border: "none !important",
277	},
278	'& .form-submit button': {
279	position: "absolute",
280	bottom: -38,
281	right: 0,
282	marginLeft: 12
283	}
284	},
285	form: {
286	borderTop: theme.palette.border.faint,
287	background: theme.palette.background.translucentBackground,
288	paddingLeft: 16,
289	paddingRight: 16,
290	paddingTop: 8,
291	paddingBottom: 8
292	},
293	metaData: {
294	textAlign: "right",
295	paddingTop: 6,
296	paddingBottom: 12
297	},
298	splashImage: {
299	transform: "translateX(25%)",
300	filter: "brightness(1.2)",
301	},
302	splashImageContainer: {
303	position: "absolute",
304	top: 0,
305	right: 0,
306	width: "100%",
307	height: "100%",
308	zIndex: -1,
309	overflow: "hidden",
310	}
311	});
312
313	export const SpotlightItem = ({	1✔
314	spotlight,
315	showAdminInfo,
316	hideBanner,
317	refetchAllSpotlights,
318	className,
319	classes,
320	}: {
321	spotlight: SpotlightDisplay,
322	showAdminInfo?: boolean,
323	hideBanner?: () => void,
324	// This is so that if a spotlight's position is updated (in SpotlightsPage), we refetch all of them to display them with their updated positions and in the correct order
325	refetchAllSpotlights?: () => void,
326	className?: string,
327	classes: ClassesType<typeof styles>,
328	}) => {
UNCOV 329	const currentUser = useCurrentUser()	×
330
331	const [edit, setEdit] = useState<boolean>(false)	×
UNCOV 332	const [editDescription, setEditDescription] = useState<boolean>(false)	×
333
UNCOV 334	const url = getSpotlightUrl(spotlight);	×
335
UNCOV 336	const duration = spotlight.duration	×
337
338	const onUpdate = useCallback(() => {	×
339	setEdit(false);	×
UNCOV 340	refetchAllSpotlights?.();	×
341	}, [refetchAllSpotlights]);
342
343	// Define fade color with a CSS variable to be accessed in the styles
UNCOV 344	const style = {	×
345	"--spotlight-fade": spotlight.imageFadeColor,
346	} as CSSProperties;
347
348	const {
349	MetaInfo, FormatDate, AnalyticsTracker, ContentItemBody, CloudinaryImage2,
350	WrappedSmartForm, SpotlightEditorStyles, SpotlightStartOrContinueReading,
351	Typography, LWTooltip, ForumIcon,
352	} = Components	×
UNCOV 353	return <AnalyticsTracker eventType="spotlightItem" captureOnMount captureOnClick={false}>	×
354	<div
355	id={spotlight._id}
356	style={style}
357	className={classNames(classes.root, className)}
358	>
359	<div className={classNames(classes.spotlightItem, {
360	[classes.spotlightFadeBackground]: !!spotlight.imageFadeColor,
361	})}>
362	<div className={classNames(classes.content, {[classes.postPadding]: spotlight.documentType === "Post"})}>
363	<div className={classes.title}>
364	<Link to={url}>
365	{spotlight.customTitle ?? spotlight.document.title}	×
366	</Link>
367	<span className={classes.editDescriptionButton}>
368	{showAdminInfo && userCanDo(currentUser, 'spotlights.edit.all') && <LWTooltip title="Edit Spotlight">	×
UNCOV 369	<EditIcon className={classes.editButtonIcon} onClick={() => setEditDescription(!editDescription)}/>	×
370	</LWTooltip>}
371	</span>
372	</div>
373	{spotlight.customSubtitle && <div className={classes.subtitle}>	×
374	{spotlight.customSubtitle}
375	</div>}	×
376	{(spotlight.description?.html \|\| isBookUI) && <div className={classes.description}>	×
377	{editDescription ?
378	<div className={classes.editDescription}>	×
379	<WrappedSmartForm
380	collectionName="Spotlights"
381	fields={['description']}
382	documentId={spotlight._id}
383	mutationFragment={getFragment('SpotlightEditQueryFragment')}
384	queryFragment={getFragment('SpotlightEditQueryFragment')}
UNCOV 385	successCallback={() => setEditDescription(false)}	×
386	/>
387	</div>
388	:
389	<ContentItemBody
390	dangerouslySetInnerHTML={{__html: spotlight.description?.html ?? ''}}	×
391	description={`${spotlight.documentType} ${spotlight.document._id}`}
392	/>
393	}
394	</div>}
395	{spotlight.showAuthor && spotlight.document.user && <Typography variant='body2' className={classes.author}>	×
396	by <Link className={classes.authorName} to={userGetProfileUrlFromSlug(spotlight.document.user.slug)}>{spotlight.document.user.displayName}</Link>
397	</Typography>}
398	<SpotlightStartOrContinueReading spotlight={spotlight} className={classes.startOrContinue} />
399	</div>
400	{spotlight.spotlightSplashImageUrl && <div className={classes.splashImageContainer}><img src={spotlight.spotlightSplashImageUrl} className={classNames(classes.image, classes.imageFade, classes.splashImage)}/></div>}	×
401	{spotlight.spotlightImageId && <CloudinaryImage2	×
402	publicId={spotlight.spotlightImageId}
403	darkPublicId={spotlight.spotlightDarkImageId}
404	className={classNames(classes.image, {
405	[classes.imageFade]: spotlight.imageFade && !spotlight.imageFadeColor,	×
406	[classes.imageFadeCustom]: spotlight.imageFade && spotlight.imageFadeColor,	×
407	})}
408	/>}
409	{hideBanner && (	×
410	isFriendlyUI
411	? (
412	<ForumIcon	×
413	icon="Close"
414	onClick={hideBanner}
415	className={classes.hideButton}
416	/>
417	)
418	: (
419	<div className={classes.closeButtonWrapper}>
420	<LWTooltip title="Hide this spotlight" placement="right">
421	<Button className={classes.closeButton} onClick={hideBanner}>
422	<ForumIcon icon="Close" />
423	</Button>
424	</LWTooltip>
425	</div>
426	)
427	)
428	}
429	<div className={classes.editAllButton}>
430	{showAdminInfo && userCanDo(currentUser, 'spotlights.edit.all') && <LWTooltip title="Edit Spotlight">	×
UNCOV 431	<MoreVertIcon className={classNames(classes.editButtonIcon, classes.editAllButtonIcon)} onClick={() => setEdit(!edit)}/>	×
432	</LWTooltip>}
433	</div>
434	</div>
435	{showAdminInfo && <>	×
436	{edit ? <div className={classes.form}>	×
437	<SpotlightEditorStyles>
438	<WrappedSmartForm
439	collectionName="Spotlights"
440	documentId={spotlight._id}
441	mutationFragment={getFragment('SpotlightEditQueryFragment')}
442	queryFragment={getFragment('SpotlightEditQueryFragment')}
443	successCallback={onUpdate}
444	/>
445	</SpotlightEditorStyles>
446	</div>
447	:
448	<div className={classes.metaData}>
449	{spotlight.draft && <MetaInfo>[Draft]</MetaInfo>}	×
450	<MetaInfo>{spotlight.position}</MetaInfo>
451	<MetaInfo><FormatDate date={spotlight.lastPromotedAt} format="YYYY-MM-DD"/></MetaInfo>
452	<LWTooltip title={`This will be on the frontpage for ${duration} days when it rotates in`}>
453	<MetaInfo>{duration} days</MetaInfo>
454	</LWTooltip>
455	</div>
456	}
457	</>}
458	</div>
459	</AnalyticsTracker>
460	}
461
462	const SpotlightItemComponent = registerComponent('SpotlightItem', SpotlightItem, {	1✔
463	styles,
464	stylePriority: -1,
465	});
466
467	declare global {
468	interface ComponentTypes {
469	SpotlightItem: typeof SpotlightItemComponent
470	}
471	}

ForumMagnum / ForumMagnum / 10607472383

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