10092669847

Committed 25 Jul 2024 10:41AM UTC coverage: 31.869% (+0.01%) from 31.858%

Build # 10092669847

Build Type

Pull #9549

github

Committed by

Will-Howard

Commit Message

Rename preferCustomHighlight to useCustomHighlight for clarity

Pull Request Pull Request #9549: [EA] Use post contents rather than customHighlight as the excerpt in recent discussion

Run Details

4932 of 40561 branches covered (12.16%)

Branch coverage included in aggregate %.

0 of 2 new or added lines in 1 file covered. (0.0%)

209 existing lines in 12 files now uncovered.

28871 of 65507 relevant lines covered (44.07%)

179.58 hits per line

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

22.64

/packages/lesswrong/components/sequences/SequencesPage.tsx

import React, { useState, useCallback, useRef } from 'react';
import { Components, registerComponent, } from '../../lib/vulcan-lib';
import { useSingle } from '../../lib/crud/withSingle';
import { sequenceGetPageUrl } from '../../lib/collections/sequences/helpers';
import { userCanDo, userOwns } from '../../lib/vulcan-users/permissions';
import { useCurrentUser } from '../common/withUser';
import { sectionFooterLeftStyles } from '../users/UsersProfile'
import {AnalyticsContext} from "../../lib/analyticsEvents";
import { DatabasePublicSetting, nofollowKarmaThreshold } from '../../lib/publicSettings';
import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from '../common/Header';
import { isFriendlyUI } from '../../themes/forumTheme';
import { makeCloudinaryImageUrl } from '../common/CloudinaryImage2';
import { allowSubscribeToSequencePosts } from '../../lib/betas';
import { Link } from '../../lib/reactRouterWrapper';
import DeferRender from '../common/DeferRender';

export const sequencesImageScrim = (theme: ThemeType) => ({
  position: 'absolute',
  bottom: 0,
  height: 150,
  width: '100%',
  zIndex: theme.zIndexes.sequencesImageScrim,
  background: theme.palette.panelBackground.sequenceImageGradient,
})

export const defaultSequenceBannerIdSetting = new DatabasePublicSetting<string|null>("defaultSequenceBannerId", null)

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    paddingTop: isFriendlyUI ? (270 + HEADER_HEIGHT) : 380,
  },
  deletedText: {
    paddingTop: 20,
    [theme.breakpoints.down('xs')]: {
      paddingTop: 30
    },
  },
  link: {
    color: theme.palette.primary.main
  },
  topSection: {
    display: 'flex',
    justifyContent: 'space-between',
    columnGap: 16,
    [theme.breakpoints.down('xs')]: {
      display: 'block'
    },
  },
  titleCol: {
    flexGrow: 1
  },
  notifyCol: {
    flex: 'none',
    paddingTop: 3,
    [theme.breakpoints.down('xs')]: {
      paddingTop: 0
    },
  },
  titleWrapper: {
    paddingLeft: theme.spacing.unit/2
  },
  title: {
    fontFamily: theme.typography.uiSecondary.fontFamily,
    marginTop: 0,
    ...theme.typography.smallCaps,
  },
  description: {
    marginTop: theme.spacing.unit * 2,
    marginLeft: theme.spacing.unit/2,
    marginBottom: isFriendlyUI ? 40 : theme.spacing.unit * 2,
  },
  banner: {
    position: "absolute",
    right: 0,
    top: HEADER_HEIGHT,
    width: "100vw",
    height: 380,
    zIndex: theme.zIndexes.sequenceBanner,
    [theme.breakpoints.down('sm')]: {
      top: MOBILE_HEADER_HEIGHT,
    },
    "& img": {
      width: "100vw",
    },
  },
  bannerWrapper: {
    position: "relative",
    height: 380,
    backgroundColor: theme.palette.panelBackground.sequencesBanner,
  },
  meta: {
    ...theme.typography.body2,
    ...sectionFooterLeftStyles
  },
  metaItem: {
    marginRight: theme.spacing.unit
  },
  content: {
    padding: theme.spacing.unit * 4,
    position: 'relative',
    backgroundColor: theme.palette.panelBackground.default,
    borderRadius: theme.borderRadius.default,
    marginTop: -127,
    zIndex: theme.zIndexes.sequencesPageContent,
    [theme.breakpoints.down('sm')]: {
      marginTop: -100,
    },
    [theme.breakpoints.down('xs')]: {
      marginTop: isFriendlyUI ? undefined : theme.spacing.unit,
      padding: isFriendlyUI ? 16 : theme.spacing.unit
    },
  },
  leftAction: {
    [theme.breakpoints.down('xs')]: {
      textAlign: 'left'
    }
  },
  imageScrim: {
    ...sequencesImageScrim(theme)
  }
})

const SequencesPage = ({ documentId, classes }: {
  documentId: string,
  classes: ClassesType
}) => {
  const [edit,setEdit] = useState(false);
  const [showNewChapterForm,setShowNewChapterForm] = useState(false);
  const nextSuggestedNumberRef = useRef(1);

  const currentUser = useCurrentUser();
  const { document, loading } = useSingle({
    documentId,
    collectionName: "Sequences",
    fragmentName: 'SequencesPageFragment',
  });

  const showEdit = useCallback(() => {
    setEdit(true);
  }, []);
  const showSequence = useCallback(() => {
    setEdit(false);
  }, []);

  const { SequencesEditForm, HeadTags, CloudinaryImage, SingleColumnSection, SectionSubtitle,
    ChaptersList, ChaptersNewForm, FormatDate, Loading, SectionFooter, UsersName,
    ContentItemBody, Typography, SectionButton, ContentStyles, NotifyMeButton
  } = Components
  
  if (document?.isDeleted) {
    return <SingleColumnSection>
      <Typography variant="body2" className={classes.deletedText}>
        This sequence has been deleted. <Link to="/library" className={classes.link}>Click here to view all sequences.</Link>
      </Typography>
    </SingleColumnSection>
  }
  if (loading) return <Loading />
  
  if (!document) {
    return <Components.Error404/>
  }
  if (edit) return (
    <SequencesEditForm
      documentId={documentId}
      successCallback={showSequence}
      cancelCallback={showSequence}
    />
  )

  const canEdit = userCanDo(currentUser, 'sequences.edit.all') || (userCanDo(currentUser, 'sequences.edit.own') && userOwns(currentUser, document))
  const canCreateChapter = userCanDo(currentUser, 'chapters.new.all')
  const canEditChapter = userCanDo(currentUser, 'chapters.edit.all') || canEdit
  const { html = "", plaintextDescription } = document.contents || {}

  if (!canEdit && document.draft)
    throw new Error('This sequence is a draft and is not publicly visible')

  const bannerId = document.bannerImageId || defaultSequenceBannerIdSetting.get();
  const socialImageId = document.gridImageId || document.bannerImageId;
  const socialImageUrl = socialImageId ? makeCloudinaryImageUrl(socialImageId, {
    c: "fill",
    dpr: "auto",
    q: "auto",
    f: "auto",
    g: "auto:faces",
  }) : undefined;
    
  return <AnalyticsContext pageContext="sequencesPage">
    <div className={classes.root}>
      <HeadTags
        canonicalUrl={sequenceGetPageUrl(document, true)}
        title={document.title}
        description={plaintextDescription || undefined}
        image={socialImageUrl}
        noIndex={document.noindex}
      />
      {bannerId && <div className={classes.banner}>
        <div className={classes.bannerWrapper}>
          <DeferRender ssr={false}>
            <div>
              <CloudinaryImage
                publicId={bannerId}
                width="auto"
                height="380"
              />
              <div className={classes.imageScrim}/>
            </div>
          </DeferRender>
        </div>
      </div>}
      <SingleColumnSection>
        <div className={classes.content}>
          <section className={classes.topSection}>
            <div className={classes.titleCol}>
              <div className={classes.titleWrapper}>
                <Typography variant='display2' className={classes.title}>
                  {document.draft && <span>[Draft] </span>}{document.title}
                </Typography>
              </div>
              <SectionFooter>
                <div className={classes.meta}>
                  <span className={classes.metaItem}><FormatDate date={document.createdAt} format="MMM DD, YYYY"/></span>
                  {document.user && <span className={classes.metaItem}> by <UsersName user={document.user} /></span>}
                </div>
                {canEdit && <span className={classes.leftAction}><SectionSubtitle>
                  <a onClick={showEdit}>edit</a>
                </SectionSubtitle></span>}
              </SectionFooter>
            </div>
            {allowSubscribeToSequencePosts && !canEdit && <div className={classes.notifyCol}>
              <AnalyticsContext pageElementContext="notifyMeButton">
                <NotifyMeButton
                  document={document}
                  tooltip="Get notified when a new post is added to this sequence"
                  subscribeMessage="Get notified"
                  unsubscribeMessage="Notifications set"
                  showIcon
                  asButton={isFriendlyUI}
                  hideFlashes
                />
              </AnalyticsContext>
            </div>}
          </section>
          
          {html && <ContentStyles contentType="post" className={classes.description}>
            <ContentItemBody dangerouslySetInnerHTML={{__html: html}} description={`sequence ${document._id}`} nofollow={(document.user?.karma || 0) < nofollowKarmaThreshold.get()}/>
          </ContentStyles>}
          <div>
            <AnalyticsContext listContext={"sequencePage"} sequenceId={document._id} capturePostItemOnMount>
              <ChaptersList sequenceId={document._id} canEdit={canEditChapter} nextSuggestedNumberRef={nextSuggestedNumberRef} />
            </AnalyticsContext>
            {canCreateChapter && <SectionFooter>
              <SectionButton>
                <a onClick={() => setShowNewChapterForm(true)}>Add Chapter</a>
              </SectionButton>
            </SectionFooter>}
            {showNewChapterForm && <ChaptersNewForm prefilledProps={{sequenceId: document._id, number: nextSuggestedNumberRef.current}}/>}
          </div>
        </div>
      </SingleColumnSection>
    </div>
  </AnalyticsContext>
}

const SequencesPageComponent = registerComponent('SequencesPage', SequencesPage, {styles});

declare global {
  interface ComponentTypes {
    SequencesPage: typeof SequencesPageComponent
  }
}

1	import React, { useState, useCallback, useRef } from 'react';	4✔
2	import { Components, registerComponent, } from '../../lib/vulcan-lib';	1✔
3	import { useSingle } from '../../lib/crud/withSingle';	1✔
4	import { sequenceGetPageUrl } from '../../lib/collections/sequences/helpers';	1✔
5	import { userCanDo, userOwns } from '../../lib/vulcan-users/permissions';	1✔
6	import { useCurrentUser } from '../common/withUser';	1✔
7	import { sectionFooterLeftStyles } from '../users/UsersProfile'	1✔
8	import {AnalyticsContext} from "../../lib/analyticsEvents";	1✔
9	import { DatabasePublicSetting, nofollowKarmaThreshold } from '../../lib/publicSettings';	1✔
10	import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from '../common/Header';	1✔
11	import { isFriendlyUI } from '../../themes/forumTheme';	1✔
12	import { makeCloudinaryImageUrl } from '../common/CloudinaryImage2';	1✔
13	import { allowSubscribeToSequencePosts } from '../../lib/betas';	1✔
14	import { Link } from '../../lib/reactRouterWrapper';	1✔
15	import DeferRender from '../common/DeferRender';	1✔
16
17	export const sequencesImageScrim = (theme: ThemeType) => ({	2✔
18	position: 'absolute',
19	bottom: 0,
20	height: 150,
21	width: '100%',
22	zIndex: theme.zIndexes.sequencesImageScrim,
23	background: theme.palette.panelBackground.sequenceImageGradient,
24	})
25
26	export const defaultSequenceBannerIdSetting = new DatabasePublicSetting<string\|null>("defaultSequenceBannerId", null)	1✔
27
28	const styles = (theme: ThemeType): JssStyles => ({	1✔
29	root: {
30	paddingTop: isFriendlyUI ? (270 + HEADER_HEIGHT) : 380,	1!
31	},
32	deletedText: {
33	paddingTop: 20,
34	[theme.breakpoints.down('xs')]: {
35	paddingTop: 30
36	},
37	},
38	link: {
39	color: theme.palette.primary.main
40	},
41	topSection: {
42	display: 'flex',
43	justifyContent: 'space-between',
44	columnGap: 16,
45	[theme.breakpoints.down('xs')]: {
46	display: 'block'
47	},
48	},
49	titleCol: {
50	flexGrow: 1
51	},
52	notifyCol: {
53	flex: 'none',
54	paddingTop: 3,
55	[theme.breakpoints.down('xs')]: {
56	paddingTop: 0
57	},
58	},
59	titleWrapper: {
60	paddingLeft: theme.spacing.unit/2
61	},
62	title: {
63	fontFamily: theme.typography.uiSecondary.fontFamily,
64	marginTop: 0,
65	...theme.typography.smallCaps,
66	},
67	description: {
68	marginTop: theme.spacing.unit * 2,
69	marginLeft: theme.spacing.unit/2,
70	marginBottom: isFriendlyUI ? 40 : theme.spacing.unit * 2,	1!
71	},
72	banner: {
73	position: "absolute",
74	right: 0,
75	top: HEADER_HEIGHT,
76	width: "100vw",
77	height: 380,
78	zIndex: theme.zIndexes.sequenceBanner,
79	[theme.breakpoints.down('sm')]: {
80	top: MOBILE_HEADER_HEIGHT,
81	},
82	"& img": {
83	width: "100vw",
84	},
85	},
86	bannerWrapper: {
87	position: "relative",
88	height: 380,
89	backgroundColor: theme.palette.panelBackground.sequencesBanner,
90	},
91	meta: {
92	...theme.typography.body2,
93	...sectionFooterLeftStyles
94	},
95	metaItem: {
96	marginRight: theme.spacing.unit
97	},
98	content: {
99	padding: theme.spacing.unit * 4,
100	position: 'relative',
101	backgroundColor: theme.palette.panelBackground.default,
102	borderRadius: theme.borderRadius.default,
103	marginTop: -127,
104	zIndex: theme.zIndexes.sequencesPageContent,
105	[theme.breakpoints.down('sm')]: {
106	marginTop: -100,
107	},
108	[theme.breakpoints.down('xs')]: {
109	marginTop: isFriendlyUI ? undefined : theme.spacing.unit,	1!
110	padding: isFriendlyUI ? 16 : theme.spacing.unit	1!
111	},
112	},
113	leftAction: {
114	[theme.breakpoints.down('xs')]: {
115	textAlign: 'left'
116	}
117	},
118	imageScrim: {
119	...sequencesImageScrim(theme)
120	}
121	})
122
123	const SequencesPage = ({ documentId, classes }: {	1✔
124	documentId: string,
125	classes: ClassesType
126	}) => {
UNCOV 127	const [edit,setEdit] = useState(false);	×
UNCOV 128	const [showNewChapterForm,setShowNewChapterForm] = useState(false);	×
UNCOV 129	const nextSuggestedNumberRef = useRef(1);	×
130
131	const currentUser = useCurrentUser();	×
132	const { document, loading } = useSingle({	×
133	documentId,
134	collectionName: "Sequences",
135	fragmentName: 'SequencesPageFragment',
136	});
137
UNCOV 138	const showEdit = useCallback(() => {	×
UNCOV 139	setEdit(true);	×
140	}, []);
141	const showSequence = useCallback(() => {	×
142	setEdit(false);	×
143	}, []);
144
145	const { SequencesEditForm, HeadTags, CloudinaryImage, SingleColumnSection, SectionSubtitle,
146	ChaptersList, ChaptersNewForm, FormatDate, Loading, SectionFooter, UsersName,
147	ContentItemBody, Typography, SectionButton, ContentStyles, NotifyMeButton
UNCOV 148	} = Components	×
149
UNCOV 150	if (document?.isDeleted) {	×
151	return <SingleColumnSection>	×
152	<Typography variant="body2" className={classes.deletedText}>
153	This sequence has been deleted. <Link to="/library" className={classes.link}>Click here to view all sequences.</Link>
154	</Typography>
155	</SingleColumnSection>
156	}
UNCOV 157	if (loading) return <Loading />	×
158
UNCOV 159	if (!document) {	×
160	return <Components.Error404/>	×
161	}
162	if (edit) return (	×
163	<SequencesEditForm
164	documentId={documentId}
165	successCallback={showSequence}
166	cancelCallback={showSequence}
167	/>
168	)
169
UNCOV 170	const canEdit = userCanDo(currentUser, 'sequences.edit.all') \|\| (userCanDo(currentUser, 'sequences.edit.own') && userOwns(currentUser, document))	×
UNCOV 171	const canCreateChapter = userCanDo(currentUser, 'chapters.new.all')	×
UNCOV 172	const canEditChapter = userCanDo(currentUser, 'chapters.edit.all') \|\| canEdit	×
173	const { html = "", plaintextDescription } = document.contents \|\| {}	×
174
175	if (!canEdit && document.draft)	×
176	throw new Error('This sequence is a draft and is not publicly visible')	×
177
178	const bannerId = document.bannerImageId \|\| defaultSequenceBannerIdSetting.get();	×
179	const socialImageId = document.gridImageId \|\| document.bannerImageId;	×
UNCOV 180	const socialImageUrl = socialImageId ? makeCloudinaryImageUrl(socialImageId, {	×
181	c: "fill",
182	dpr: "auto",
183	q: "auto",
184	f: "auto",
185	g: "auto:faces",
186	}) : undefined;
187
UNCOV 188	return <AnalyticsContext pageContext="sequencesPage">	×
189	<div className={classes.root}>
190	<HeadTags
191	canonicalUrl={sequenceGetPageUrl(document, true)}
192	title={document.title}
193	description={plaintextDescription \|\| undefined}	×
194	image={socialImageUrl}
195	noIndex={document.noindex}
196	/>
197	{bannerId && <div className={classes.banner}>	×
198	<div className={classes.bannerWrapper}>
199	<DeferRender ssr={false}>
200	<div>
201	<CloudinaryImage
202	publicId={bannerId}
203	width="auto"
204	height="380"
205	/>
206	<div className={classes.imageScrim}/>
207	</div>
208	</DeferRender>
209	</div>
210	</div>}
211	<SingleColumnSection>
212	<div className={classes.content}>
213	<section className={classes.topSection}>
214	<div className={classes.titleCol}>
215	<div className={classes.titleWrapper}>
216	<Typography variant='display2' className={classes.title}>
217	{document.draft && <span>[Draft] </span>}{document.title}	×
218	</Typography>
219	</div>
220	<SectionFooter>
221	<div className={classes.meta}>
222	<span className={classes.metaItem}><FormatDate date={document.createdAt} format="MMM DD, YYYY"/></span>
223	{document.user && <span className={classes.metaItem}> by <UsersName user={document.user} /></span>}	×
224	</div>
225	{canEdit && <span className={classes.leftAction}><SectionSubtitle>	×
226	<a onClick={showEdit}>edit</a>
227	</SectionSubtitle></span>}
228	</SectionFooter>
229	</div>
230	{allowSubscribeToSequencePosts && !canEdit && <div className={classes.notifyCol}>	×
231	<AnalyticsContext pageElementContext="notifyMeButton">
232	<NotifyMeButton
233	document={document}
234	tooltip="Get notified when a new post is added to this sequence"
235	subscribeMessage="Get notified"
236	unsubscribeMessage="Notifications set"
237	showIcon
238	asButton={isFriendlyUI}
239	hideFlashes
240	/>
241	</AnalyticsContext>
242	</div>}
243	</section>
244
245	{html && <ContentStyles contentType="post" className={classes.description}>	×
246	<ContentItemBody dangerouslySetInnerHTML={{__html: html}} description={`sequence ${document._id}`} nofollow={(document.user?.karma \|\| 0) < nofollowKarmaThreshold.get()}/>	×
247	</ContentStyles>}
248	<div>
249	<AnalyticsContext listContext={"sequencePage"} sequenceId={document._id} capturePostItemOnMount>
250	<ChaptersList sequenceId={document._id} canEdit={canEditChapter} nextSuggestedNumberRef={nextSuggestedNumberRef} />
251	</AnalyticsContext>
252	{canCreateChapter && <SectionFooter>	×
253	<SectionButton>
UNCOV 254	<a onClick={() => setShowNewChapterForm(true)}>Add Chapter</a>	×
255	</SectionButton>
256	</SectionFooter>}
257	{showNewChapterForm && <ChaptersNewForm prefilledProps={{sequenceId: document._id, number: nextSuggestedNumberRef.current}}/>}	×
258	</div>
259	</div>
260	</SingleColumnSection>
261	</div>
262	</AnalyticsContext>
263	}
264
265	const SequencesPageComponent = registerComponent('SequencesPage', SequencesPage, {styles});	1✔
266
267	declare global {
268	interface ComponentTypes {
269	SequencesPage: typeof SequencesPageComponent
270	}
271	}

ForumMagnum / ForumMagnum / 10092669847

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