9215719826

Committed 23 May 2024 10:30PM UTC coverage: 31.9% (-0.07%) from 31.973%

Build # 9215719826

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9327 from ForumMagnum/master

LW Deploy, 2024-05-23

Run Details

4799 of 39209 branches covered (12.24%)

Branch coverage included in aggregate %.

69 of 171 new or added lines in 18 files covered. (40.35%)

2 existing lines in 2 files now uncovered.

27922 of 63364 relevant lines covered (44.07%)

180.04 hits per line

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

21.7

/packages/lesswrong/components/posts/FeedPostsHighlight.tsx

import { Components, registerComponent } from '../../lib/vulcan-lib';
import { postGetPageUrl } from '../../lib/collections/posts/helpers';
import React, { FC, useState, useCallback, useEffect } from 'react';
import { Link } from '../../lib/reactRouterWrapper';
import { useSingle } from '../../lib/crud/withSingle';
import { nofollowKarmaThreshold } from '../../lib/publicSettings';
import { useForeignCrosspost, isPostWithForeignId, PostWithForeignId } from "../hooks/useForeignCrosspost";
import { useForeignApolloClient } from "../hooks/useForeignApolloClient";
import { captureException }from "@sentry/core";
import classNames from 'classnames';
import { useRecordPostView } from '../hooks/useRecordPostView';
import { useTracking } from '../../lib/analyticsEvents';
import { truncateWithGrace } from '../../lib/editor/ellipsize';

const styles = (theme: ThemeType) => ({
  root: {
    '& .read-more-button': {
      opacity: 0.7,
    }
  },
  expandedTextBody: {
    marginBottom: 10,
  },
  highlightContinue: {
    marginTop: theme.spacing.unit*2,
    fontFamily: theme.palette.fonts.sansSerifStack,
    '&& a, && a:hover': {
      color: theme.palette.primary.main,
    },
  },
})

const TruncatedSuffix: FC<{
  post: PostsList,
  wordsLeft: number,
}> = ({post, wordsLeft}) => {
  return (
    <Link to={postGetPageUrl(post)} eventProps={{intent: 'expandPost'}}>
        {`(Continue Reading - ${wordsLeft} words more)`}
    </Link>
  );
}

const foreignFetchProps = {
  collectionName: "Posts",
  fragmentName: "PostsList",
} as const;

const expandedFetchProps = {
  collectionName: "Posts",
  fragmentName: "PostsExpandedHighlight",
  fetchPolicy: "cache-first",
} as const;

const FeedPostHighlightBody = ({
  post,
  maxCollapsedLengthWords,
  expanded,
  setExpanded,
  expandedLoading,
  expandedDocument,
  classes,
}: {
  post: PostsList,
  maxCollapsedLengthWords: number,
  expanded: boolean,
  setExpanded: (value: boolean) => void,
  expandedLoading: boolean,
  expandedDocument?: PostsExpandedHighlight,
  classes: ClassesType<typeof styles>,
}) => {
  const { htmlHighlight = "", wordCount = 0 } = post.contents ?? {};

  const { recordPostView } = useRecordPostView(post); 
  const { captureEvent } = useTracking();

  const clickExpand = useCallback((ev: MouseEvent) => {
    setExpanded(true);
    ev.preventDefault();
    void recordPostView({post, extraEventProperties: {type: 'expandPostCard'}});
    captureEvent('readMoreClicked', {postId: post._id});
  }, [setExpanded, recordPostView, post, captureEvent]);


  const maxLengthWords = expanded ? 1000 : maxCollapsedLengthWords;

  const html = expandedDocument?.contents?.html ?? htmlHighlight
  const rawWordCount = wordCount ?? 0;
  const readMoreId = `feed-post-read-more-${post._id}`;

  const styles = html.match(/<style[\s\S]*?<\/style>/g) ?? ""
  const suffix = expanded ? undefined : `... <span id="${readMoreId}" class="read-more-button">(read more)</span>${styles}`

  useEffect(() => {
    const readMoreButton = document.getElementById(readMoreId);
    readMoreButton?.addEventListener('click', clickExpand);
    return () => {
      readMoreButton?.removeEventListener('click', clickExpand);
    } 
  }, [readMoreId, clickExpand]);

  const {truncatedHtml, wasTruncated, wordsLeft} =  truncateWithGrace(html, maxLengthWords, 20, rawWordCount, suffix);

  return <Components.ContentStyles contentType="postHighlight" className={classes.root}>
    <Components.ContentItemBody
      dangerouslySetInnerHTML={{__html: truncatedHtml}}
      description={`post ${post._id}`}
      nofollow={(post.user?.karma || 0) < nofollowKarmaThreshold.get()}
      className={classNames({[classes.expandedTextBody]: expanded})}
    />
    {expanded && wasTruncated && <TruncatedSuffix
      post={post}
      wordsLeft={wordsLeft}
    />}
    {expandedLoading && expanded && <Components.Loading/>}
  </Components.ContentStyles>
}

const FeedForeignPostsHighlightBody = ({post, maxCollapsedLengthWords, forceSeeMore=false, smallerFonts, loading, classes}: {
  post: PostsList & PostWithForeignId,
  maxCollapsedLengthWords: number,
  forceSeeMore?: boolean,
  smallerFonts?: boolean,
  loading: boolean,
  classes: ClassesType<typeof styles>,
}) => {
  const [expanded, setExpanded] = useState(false);
  const apolloClient = useForeignApolloClient();
  const {document: expandedDocument, loading: expandedLoading} = useSingle({
    skip: !expanded && !!post.contents,
    documentId: post.fmCrosspost.foreignPostId,
    apolloClient,
    ...expandedFetchProps,
  });

  return loading
    ? <Components.Loading />
    : <FeedPostHighlightBody {...{
        post,
        maxCollapsedLengthWords,
        forceSeeMore,
        smallerFonts,
        expanded,
        setExpanded,
        expandedLoading,
        expandedDocument,
        classes,
      }}/>
}

const FeedForeignPostsHighlight = ({post, maxCollapsedLengthWords, forceSeeMore=false, smallerFonts, classes}: {
  post: PostsList & PostWithForeignId,
  maxCollapsedLengthWords: number,
  forceSeeMore?: boolean,
  smallerFonts?: boolean,
  classes: ClassesType,
}) => {
  const {loading, error, combinedPost} = useForeignCrosspost(post, foreignFetchProps);
  post = combinedPost ?? post;
  if (error) {
    captureException(error);
  }
  return error
    ? <FeedLocalPostsHighlight {...{post, maxCollapsedLengthWords, forceSeeMore, smallerFonts, classes}} />
    : <FeedForeignPostsHighlightBody {...{post, maxCollapsedLengthWords, forceSeeMore, smallerFonts, loading, classes}} />;
}

const FeedLocalPostsHighlight = ({post, maxCollapsedLengthWords, forceSeeMore=false, smallerFonts, classes}: {
  post: PostsList,
  maxCollapsedLengthWords: number,
  forceSeeMore?: boolean,
  smallerFonts?: boolean,
  classes: ClassesType<typeof styles>,
}) => {
  const [expanded, setExpanded] = useState(false);
  const {document: expandedDocument, loading: expandedLoading} = useSingle({
    skip: !expanded && !!post.contents,
    documentId: post._id,
    ...expandedFetchProps,
  });

  return <FeedPostHighlightBody {...{
    post,
    maxCollapsedLengthWords,
    forceSeeMore,
    smallerFonts,
    expanded,
    setExpanded,
    expandedLoading,
    expandedDocument,
    classes,
  }} />
};

const FeedPostsHighlight = ({post, ...rest}: {
  post: PostsList,
  maxCollapsedLengthWords: number,
  initiallyExpanded?: boolean,
  forceSeeMore?: boolean,
  classes: ClassesType,
}) => isPostWithForeignId(post)
  ? <FeedForeignPostsHighlight post={post} {...rest} />
  : <FeedLocalPostsHighlight post={post} {...rest} />;

const FeedPostsHighlightComponent = registerComponent('FeedPostsHighlight', FeedPostsHighlight, {styles});

declare global {
  interface ComponentTypes {
    FeedPostsHighlight: typeof FeedPostsHighlightComponent
  }
}


1	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
2	import { postGetPageUrl } from '../../lib/collections/posts/helpers';	1✔
3	import React, { FC, useState, useCallback, useEffect } from 'react';	1✔
4	import { Link } from '../../lib/reactRouterWrapper';	1✔
5	import { useSingle } from '../../lib/crud/withSingle';	1✔
6	import { nofollowKarmaThreshold } from '../../lib/publicSettings';	1✔
7	import { useForeignCrosspost, isPostWithForeignId, PostWithForeignId } from "../hooks/useForeignCrosspost";	1✔
8	import { useForeignApolloClient } from "../hooks/useForeignApolloClient";	1✔
9	import { captureException }from "@sentry/core";	1✔
10	import classNames from 'classnames';	1✔
11	import { useRecordPostView } from '../hooks/useRecordPostView';	1✔
12	import { useTracking } from '../../lib/analyticsEvents';	1✔
13	import { truncateWithGrace } from '../../lib/editor/ellipsize';	1✔
14
15	const styles = (theme: ThemeType) => ({	1✔
16	root: {
17	'& .read-more-button': {
18	opacity: 0.7,
19	}
20	},
21	expandedTextBody: {
22	marginBottom: 10,
23	},
24	highlightContinue: {
25	marginTop: theme.spacing.unit*2,
26	fontFamily: theme.palette.fonts.sansSerifStack,
27	'&& a, && a:hover': {
28	color: theme.palette.primary.main,
29	},
30	},
31	})
32
33	const TruncatedSuffix: FC<{
34	post: PostsList,
35	wordsLeft: number,
36	}> = ({post, wordsLeft}) => {	1✔
NEW 37	return (	×
38	<Link to={postGetPageUrl(post)} eventProps={{intent: 'expandPost'}}>
39	{`(Continue Reading - ${wordsLeft} words more)`}
40	</Link>
41	);
42	}
43
44	const foreignFetchProps = {	1✔
45	collectionName: "Posts",
46	fragmentName: "PostsList",
47	} as const;
48
49	const expandedFetchProps = {	1✔
50	collectionName: "Posts",
51	fragmentName: "PostsExpandedHighlight",
52	fetchPolicy: "cache-first",
53	} as const;
54
55	const FeedPostHighlightBody = ({	1✔
56	post,
57	maxCollapsedLengthWords,
58	expanded,
59	setExpanded,
60	expandedLoading,
61	expandedDocument,
62	classes,
63	}: {
64	post: PostsList,
65	maxCollapsedLengthWords: number,
66	expanded: boolean,
67	setExpanded: (value: boolean) => void,
68	expandedLoading: boolean,
69	expandedDocument?: PostsExpandedHighlight,
70	classes: ClassesType<typeof styles>,
71	}) => {
NEW 72	const { htmlHighlight = "", wordCount = 0 } = post.contents ?? {};	×
73
NEW 74	const { recordPostView } = useRecordPostView(post);	×
NEW 75	const { captureEvent } = useTracking();	×
76
NEW 77	const clickExpand = useCallback((ev: MouseEvent) => {	×
NEW 78	setExpanded(true);	×
NEW 79	ev.preventDefault();	×
NEW 80	void recordPostView({post, extraEventProperties: {type: 'expandPostCard'}});	×
NEW 81	captureEvent('readMoreClicked', {postId: post._id});	×
82	}, [setExpanded, recordPostView, post, captureEvent]);
83
84
NEW 85	const maxLengthWords = expanded ? 1000 : maxCollapsedLengthWords;	×
86
NEW 87	const html = expandedDocument?.contents?.html ?? htmlHighlight	×
NEW 88	const rawWordCount = wordCount ?? 0;	×
NEW 89	const readMoreId = `feed-post-read-more-${post._id}`;	×
90
NEW 91	const styles = html.match(/<style[\s\S]*?<\/style>/g) ?? ""	×
NEW 92	const suffix = expanded ? undefined : `... <span id="${readMoreId}" class="read-more-button">(read more)</span>${styles}`	×
93
NEW 94	useEffect(() => {	×
NEW 95	const readMoreButton = document.getElementById(readMoreId);	×
NEW 96	readMoreButton?.addEventListener('click', clickExpand);	×
NEW 97	return () => {	×
NEW 98	readMoreButton?.removeEventListener('click', clickExpand);	×
99	}
100	}, [readMoreId, clickExpand]);
101
NEW 102	const {truncatedHtml, wasTruncated, wordsLeft} = truncateWithGrace(html, maxLengthWords, 20, rawWordCount, suffix);	×
103
NEW 104	return <Components.ContentStyles contentType="postHighlight" className={classes.root}>	×
105	<Components.ContentItemBody
106	dangerouslySetInnerHTML={{__html: truncatedHtml}}
107	description={`post ${post._id}`}
108	nofollow={(post.user?.karma \|\| 0) < nofollowKarmaThreshold.get()}	×
109	className={classNames({[classes.expandedTextBody]: expanded})}
110	/>
111	{expanded && wasTruncated && <TruncatedSuffix	×
112	post={post}
113	wordsLeft={wordsLeft}
114	/>}
115	{expandedLoading && expanded && <Components.Loading/>}	×
116	</Components.ContentStyles>
117	}
118
119	const FeedForeignPostsHighlightBody = ({post, maxCollapsedLengthWords, forceSeeMore=false, smallerFonts, loading, classes}: {	1!
120	post: PostsList & PostWithForeignId,
121	maxCollapsedLengthWords: number,
122	forceSeeMore?: boolean,
123	smallerFonts?: boolean,
124	loading: boolean,
125	classes: ClassesType<typeof styles>,
126	}) => {
NEW 127	const [expanded, setExpanded] = useState(false);	×
NEW 128	const apolloClient = useForeignApolloClient();	×
NEW 129	const {document: expandedDocument, loading: expandedLoading} = useSingle({	×
130	skip: !expanded && !!post.contents,	×
131	documentId: post.fmCrosspost.foreignPostId,
132	apolloClient,
133	...expandedFetchProps,
134	});
135
NEW 136	return loading	×
137	? <Components.Loading />	×
138	: <FeedPostHighlightBody {...{
139	post,
140	maxCollapsedLengthWords,
141	forceSeeMore,
142	smallerFonts,
143	expanded,
144	setExpanded,
145	expandedLoading,
146	expandedDocument,
147	classes,
148	}}/>
149	}
150
151	const FeedForeignPostsHighlight = ({post, maxCollapsedLengthWords, forceSeeMore=false, smallerFonts, classes}: {	1!
152	post: PostsList & PostWithForeignId,
153	maxCollapsedLengthWords: number,
154	forceSeeMore?: boolean,
155	smallerFonts?: boolean,
156	classes: ClassesType,
157	}) => {
NEW 158	const {loading, error, combinedPost} = useForeignCrosspost(post, foreignFetchProps);	×
NEW 159	post = combinedPost ?? post;	×
NEW 160	if (error) {	×
NEW 161	captureException(error);	×
162	}
NEW 163	return error	×
164	? <FeedLocalPostsHighlight {...{post, maxCollapsedLengthWords, forceSeeMore, smallerFonts, classes}} />	×
165	: <FeedForeignPostsHighlightBody {...{post, maxCollapsedLengthWords, forceSeeMore, smallerFonts, loading, classes}} />;
166	}
167
168	const FeedLocalPostsHighlight = ({post, maxCollapsedLengthWords, forceSeeMore=false, smallerFonts, classes}: {	1!
169	post: PostsList,
170	maxCollapsedLengthWords: number,
171	forceSeeMore?: boolean,
172	smallerFonts?: boolean,
173	classes: ClassesType<typeof styles>,
174	}) => {
NEW 175	const [expanded, setExpanded] = useState(false);	×
NEW 176	const {document: expandedDocument, loading: expandedLoading} = useSingle({	×
177	skip: !expanded && !!post.contents,	×
178	documentId: post._id,
179	...expandedFetchProps,
180	});
181
NEW 182	return <FeedPostHighlightBody {...{	×
183	post,
184	maxCollapsedLengthWords,
185	forceSeeMore,
186	smallerFonts,
187	expanded,
188	setExpanded,
189	expandedLoading,
190	expandedDocument,
191	classes,
192	}} />
193	};
194
195	const FeedPostsHighlight = ({post, ...rest}: {	1✔
196	post: PostsList,
197	maxCollapsedLengthWords: number,
198	initiallyExpanded?: boolean,
199	forceSeeMore?: boolean,
200	classes: ClassesType,
201	}) => isPostWithForeignId(post)
202	? <FeedForeignPostsHighlight post={post} {...rest} />	×
203	: <FeedLocalPostsHighlight post={post} {...rest} />;
204
205	const FeedPostsHighlightComponent = registerComponent('FeedPostsHighlight', FeedPostsHighlight, {styles});	1✔
206
207	declare global {
208	interface ComponentTypes {
209	FeedPostsHighlight: typeof FeedPostsHighlightComponent
210	}
211	}
212

ForumMagnum / ForumMagnum / 9215719826

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