8822504027

Committed 24 Apr 2024 07:27PM UTC coverage: 32.053% (+0.002%) from 32.051%

Build # 8822504027

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9167 from ForumMagnum/ea-spotlight-enhancements-04-24

[EA] Spotlight enhancements April '24

Run Details

4699 of 38084 branches covered (12.34%)

Branch coverage included in aggregate %.

7 of 10 new or added lines in 2 files covered. (70.0%)

2 existing lines in 1 file now uncovered.

27204 of 61448 relevant lines covered (44.27%)

181.97 hits per line

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

34.38

/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.headerStyle,
    ...(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
  }
});

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.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.headerStyle,
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	});
299
300	export const SpotlightItem = ({	1✔
301	spotlight,
302	showAdminInfo,
303	hideBanner,
304	refetchAllSpotlights,
305	className,
306	classes,
307	}: {
308	spotlight: SpotlightDisplay,
309	showAdminInfo?: boolean,
310	hideBanner?: () => void,
311	// 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
312	refetchAllSpotlights?: () => void,
313	className?: string,
314	classes: ClassesType<typeof styles>,
315	}) => {
UNCOV 316	const currentUser = useCurrentUser()	×
317
318	const [edit, setEdit] = useState<boolean>(false)	×
319	const [editDescription, setEditDescription] = useState<boolean>(false)	×
320
321	const url = getSpotlightUrl(spotlight);	×
322
323	const duration = spotlight.duration	×
324
NEW 325	const onUpdate = useCallback(() => {	×
326	setEdit(false);	×
327	refetchAllSpotlights?.();	×
328	}, [refetchAllSpotlights]);
329
330	// Define fade color with a CSS variable to be accessed in the styles
NEW 331	const style = {	×
332	"--spotlight-fade": spotlight.imageFadeColor,
333	} as CSSProperties;
334
335	const {
336	MetaInfo, FormatDate, AnalyticsTracker, ContentItemBody, CloudinaryImage2,
337	WrappedSmartForm, SpotlightEditorStyles, SpotlightStartOrContinueReading,
338	Typography, LWTooltip, ForumIcon,
NEW 339	} = Components	×
UNCOV 340	return <AnalyticsTracker eventType="spotlightItem" captureOnMount captureOnClick={false}>	×
341	<div
342	id={spotlight._id}
343	style={style}
344	className={classNames(classes.root, className)}
345	>
346	<div className={classNames(classes.spotlightItem, {
347	[classes.spotlightFadeBackground]: !!spotlight.imageFadeColor,
348	})}>
349	<div className={classNames(classes.content, {[classes.postPadding]: spotlight.documentType === "Post"})}>
350	<div className={classes.title}>
351	<Link to={url}>
352	{spotlight.customTitle ?? spotlight.document.title}	×
353	</Link>
354	<span className={classes.editDescriptionButton}>
355	{showAdminInfo && userCanDo(currentUser, 'spotlights.edit.all') && <LWTooltip title="Edit Spotlight">	×
356	<EditIcon className={classes.editButtonIcon} onClick={() => setEditDescription(!editDescription)}/>	×
357	</LWTooltip>}
358	</span>
359	</div>
360	{spotlight.customSubtitle && <div className={classes.subtitle}>	×
361	{spotlight.customSubtitle}
362	</div>}	×
363	{(spotlight.description?.html \|\| isBookUI) && <div className={classes.description}>	×
364	{editDescription ?
365	<div className={classes.editDescription}>	×
366	<WrappedSmartForm
367	collectionName="Spotlights"
368	fields={['description']}
369	documentId={spotlight._id}
370	mutationFragment={getFragment('SpotlightEditQueryFragment')}
371	queryFragment={getFragment('SpotlightEditQueryFragment')}
372	successCallback={() => setEditDescription(false)}	×
373	/>
374	</div>
375	:
376	<ContentItemBody
377	dangerouslySetInnerHTML={{__html: spotlight.description?.html ?? ''}}	×
378	description={`${spotlight.documentType} ${spotlight.document._id}`}
379	/>
380	}
381	</div>}
382	{spotlight.showAuthor && spotlight.document.user && <Typography variant='body2' className={classes.author}>	×
383	by <Link className={classes.authorName} to={userGetProfileUrlFromSlug(spotlight.document.user.slug)}>{spotlight.document.user.displayName}</Link>
384	</Typography>}
385	<SpotlightStartOrContinueReading spotlight={spotlight} className={classes.startOrContinue} />
386	</div>
387	{spotlight.spotlightImageId && <CloudinaryImage2	×
388	publicId={spotlight.spotlightImageId}
389	darkPublicId={spotlight.spotlightDarkImageId}
390	className={classNames(classes.image, {
391	[classes.imageFade]: spotlight.imageFade && !spotlight.imageFadeColor,	×
392	[classes.imageFadeCustom]: spotlight.imageFade && spotlight.imageFadeColor,	×
393	})}
394	/>}
395	{hideBanner && (	×
396	isFriendlyUI
397	? (
398	<ForumIcon	×
399	icon="Close"
400	onClick={hideBanner}
401	className={classes.hideButton}
402	/>
403	)
404	: (
405	<div className={classes.closeButtonWrapper}>
406	<LWTooltip title="Hide this spotlight" placement="right">
407	<Button className={classes.closeButton} onClick={hideBanner}>
408	<ForumIcon icon="Close" />
409	</Button>
410	</LWTooltip>
411	</div>
412	)
413	)
414	}
415	<div className={classes.editAllButton}>
416	{showAdminInfo && userCanDo(currentUser, 'spotlights.edit.all') && <LWTooltip title="Edit Spotlight">	×
417	<MoreVertIcon className={classNames(classes.editButtonIcon, classes.editAllButtonIcon)} onClick={() => setEdit(!edit)}/>	×
418	</LWTooltip>}
419	</div>
420	</div>
421	{showAdminInfo && <>	×
422	{edit ? <div className={classes.form}>	×
423	<SpotlightEditorStyles>
424	<WrappedSmartForm
425	collectionName="Spotlights"
426	documentId={spotlight._id}
427	mutationFragment={getFragment('SpotlightEditQueryFragment')}
428	queryFragment={getFragment('SpotlightEditQueryFragment')}
429	successCallback={onUpdate}
430	/>
431	</SpotlightEditorStyles>
432	</div>
433	:
434	<div className={classes.metaData}>
435	{spotlight.draft && <MetaInfo>[Draft]</MetaInfo>}	×
436	<MetaInfo>{spotlight.position}</MetaInfo>
437	<MetaInfo><FormatDate date={spotlight.lastPromotedAt} format="YYYY-MM-DD"/></MetaInfo>
438	<LWTooltip title={`This will be on the frontpage for ${duration} days when it rotates in`}>
439	<MetaInfo>{duration} days</MetaInfo>
440	</LWTooltip>
441	</div>
442	}
443	</>}
444	</div>
445	</AnalyticsTracker>
446	}
447
448	const SpotlightItemComponent = registerComponent('SpotlightItem', SpotlightItem, {	1✔
449	styles,
450	stylePriority: -1,
451	});
452
453	declare global {
454	interface ComponentTypes {
455	SpotlightItem: typeof SpotlightItemComponent
456	}
457	}

ForumMagnum / ForumMagnum / 8822504027

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