9471957696

Committed 11 Jun 2024 07:57PM UTC coverage: 31.865% (-0.003%) from 31.868%

Build # 9471957696

Build Type

Pull #9389

github

Committed by

web-flow

Commit Message

Merge 91f3bc6cc into 3ed295acd

Pull Request Pull Request #9389: Further Subscribed Tab Improvements, 2024-06-11

Run Details

4815 of 39367 branches covered (12.23%)

Branch coverage included in aggregate %.

2 of 11 new or added lines in 2 files covered. (18.18%)

15 existing lines in 2 files now uncovered.

27989 of 63580 relevant lines covered (44.02%)

180.04 hits per line

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

20.0

/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,
    },
  },
  maxHeight: {
    maxHeight: 600,
    overflow: "hidden",
  },
})

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, [classes.maxHeight]: !expanded})}
    />
    {expanded && wasTruncated && <TruncatedSuffix
      post={post}
      wordsLeft={wordsLeft}
    />}
    {expandedLoading && expanded && <Components.Loading/>}
  </Components.ContentStyles>
}

const FeedPostsHighlight = ({post, ...rest}: {
  post: PostsList & Partial<PostWithForeignId>,
  maxCollapsedLengthWords: number,
  initiallyExpanded?: boolean,
  forceSeeMore?: boolean,
  classes: ClassesType,
}) => {
  const [expanded, setExpanded] = useState(false);
  const isForeignCrosspost = isPostWithForeignId(post) && !post.fmCrosspost.hostedHere

  const { loading, error, combinedPost } = useForeignCrosspost(post, foreignFetchProps, !isForeignCrosspost);
  post = combinedPost ?? post;
  if (error) {
    captureException(error);
  }

  const apolloClient = useForeignApolloClient();

  const documentId = (isForeignCrosspost && !error) ? post.fmCrosspost.foreignPostId : post._id;

  const { document: expandedDocument, loading: expandedLoading } = useSingle({
    documentId,
    apolloClient: isForeignCrosspost ? apolloClient : undefined,
    skip: !expanded && !!post.contents,
    ...expandedFetchProps,
  });

  return loading
    ? <Components.Loading />
    : <FeedPostHighlightBody {...{
        post,
        expanded,
        setExpanded,
        expandedLoading,
        expandedDocument,
        ...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	maxHeight: {
32	maxHeight: 600,
33	overflow: "hidden",
34	},
35	})
36
37	const TruncatedSuffix: FC<{
38	post: PostsList,
39	wordsLeft: number,
40	}> = ({post, wordsLeft}) => {	1✔
41	return (	×
42	<Link to={postGetPageUrl(post)} eventProps={{intent: 'expandPost'}}>
43	{`(Continue Reading - ${wordsLeft} words more)`}
44	</Link>
45	);
46	}
47
48	const foreignFetchProps = {	1✔
49	collectionName: "Posts",
50	fragmentName: "PostsList",
51	} as const;
52
53	const expandedFetchProps = {	1✔
54	collectionName: "Posts",
55	fragmentName: "PostsExpandedHighlight",
56	fetchPolicy: "cache-first",
57	} as const;
58
59	const FeedPostHighlightBody = ({	1✔
60	post,
61	maxCollapsedLengthWords,
62	expanded,
63	setExpanded,
64	expandedLoading,
65	expandedDocument,
66	classes,
67	}: {
68	post: PostsList,
69	maxCollapsedLengthWords: number,
70	expanded: boolean,
71	setExpanded: (value: boolean) => void,
72	expandedLoading: boolean,
73	expandedDocument?: PostsExpandedHighlight,
74	classes: ClassesType<typeof styles>,
75	}) => {
76	const { htmlHighlight = "", wordCount = 0 } = post.contents ?? {};	×
77
78	const { recordPostView } = useRecordPostView(post);	×
79	const { captureEvent } = useTracking();	×
80
81	const clickExpand = useCallback((ev: MouseEvent) => {	×
82	setExpanded(true);	×
83	ev.preventDefault();	×
84	void recordPostView({post, extraEventProperties: {type: 'expandPostCard'}});	×
85	captureEvent('readMoreClicked', {postId: post._id});	×
86	}, [setExpanded, recordPostView, post, captureEvent]);
87
88
89	const maxLengthWords = expanded ? 1000 : maxCollapsedLengthWords;	×
90
91	const html = expandedDocument?.contents?.html ?? htmlHighlight	×
92	const rawWordCount = wordCount ?? 0;	×
93	const readMoreId = `feed-post-read-more-${post._id}`;	×
94
95	const styles = html.match(/<style[\s\S]*?<\/style>/g) ?? ""	×
96	const suffix = expanded ? undefined : `... <span id="${readMoreId}" class="read-more-button">(read more)</span>${styles}`	×
97
98	useEffect(() => {	×
99	const readMoreButton = document.getElementById(readMoreId);	×
100	readMoreButton?.addEventListener('click', clickExpand);	×
101	return () => {	×
102	readMoreButton?.removeEventListener('click', clickExpand);	×
103	}
104	}, [readMoreId, clickExpand]);
105
106	const {truncatedHtml, wasTruncated, wordsLeft} = truncateWithGrace(html, maxLengthWords, 20, rawWordCount, suffix);	×
107
108	return <Components.ContentStyles contentType="postHighlight" className={classes.root}>	×
109	<Components.ContentItemBody
110	dangerouslySetInnerHTML={{__html: truncatedHtml}}
111	description={`post ${post._id}`}
112	nofollow={(post.user?.karma \|\| 0) < nofollowKarmaThreshold.get()}	×
113	className={classNames({[classes.expandedTextBody]: expanded, [classes.maxHeight]: !expanded})}
114	/>
115	{expanded && wasTruncated && <TruncatedSuffix	×
116	post={post}
117	wordsLeft={wordsLeft}
118	/>}
119	{expandedLoading && expanded && <Components.Loading/>}	×
120	</Components.ContentStyles>
121	}
122
123	const FeedPostsHighlight = ({post, ...rest}: {	1✔
124	post: PostsList & Partial<PostWithForeignId>,
125	maxCollapsedLengthWords: number,
126	initiallyExpanded?: boolean,
127	forceSeeMore?: boolean,
128	classes: ClassesType,
129	}) => {
130	const [expanded, setExpanded] = useState(false);	×
NEW 131	const isForeignCrosspost = isPostWithForeignId(post) && !post.fmCrosspost.hostedHere	×
132
NEW 133	const { loading, error, combinedPost } = useForeignCrosspost(post, foreignFetchProps, !isForeignCrosspost);	×
NEW 134	post = combinedPost ?? post;	×
NEW 135	if (error) {	×
NEW 136	captureException(error);	×
137	}
138
139	const apolloClient = useForeignApolloClient();	×
140
NEW 141	const documentId = (isForeignCrosspost && !error) ? post.fmCrosspost.foreignPostId : post._id;	×
142
NEW 143	const { document: expandedDocument, loading: expandedLoading } = useSingle({	×
144	documentId,
145	apolloClient: isForeignCrosspost ? apolloClient : undefined,	×
146	skip: !expanded && !!post.contents,	×
147	...expandedFetchProps,
148	});
149
150	return loading	×
151	? <Components.Loading />	×
152	: <FeedPostHighlightBody {...{
153	post,
154	expanded,
155	setExpanded,
156	expandedLoading,
157	expandedDocument,
158	...rest
159	}}/>;
160	}
161
162	const FeedPostsHighlightComponent = registerComponent('FeedPostsHighlight', FeedPostsHighlight, {styles});	1✔
163
164	declare global {
165	interface ComponentTypes {
166	FeedPostsHighlight: typeof FeedPostsHighlightComponent
167	}
168	}
169

ForumMagnum / ForumMagnum / 9471957696

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