9429356947

Committed 08 Jun 2024 02:14PM UTC coverage: 31.89% (+0.01%) from 31.88%

Build # 9429356947

Build Type

Pull #9385

github

Committed by

s-cheng

Commit Message

some small fixes

Pull Request Pull Request #9385: [EA Forum only] on-site digest page

Run Details

4821 of 39370 branches covered (12.25%)

Branch coverage included in aggregate %.

15 of 41 new or added lines in 7 files covered. (36.59%)

1 existing line in 1 file now uncovered.

28006 of 63569 relevant lines covered (44.06%)

180.12 hits per line

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

18.48

/packages/lesswrong/components/posts/EAPostsItem.tsx

import React, { FC, PropsWithChildren } from "react";
import { registerComponent, Components } from "../../lib/vulcan-lib";
import { AnalyticsContext } from "../../lib/analyticsEvents";
import { usePostsItem, PostsItemConfig } from "./usePostsItem";
import { Link } from "../../lib/reactRouterWrapper";
import { SECTION_WIDTH } from "../common/SingleColumnSection";
import withErrorBoundary from "../common/withErrorBoundary";
import classNames from "classnames";
import { InteractionWrapper, useClickableCell } from "../common/useClickableCell";
import { cloudinaryCloudNameSetting } from "../../lib/publicSettings";
import { usePostContents } from "../hooks/useForeignCrosspost";

const KARMA_WIDTH = 50;

export const styles = (theme: ThemeType) => ({
  root: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    maxWidth: SECTION_WIDTH,
    fontFamily: theme.palette.fonts.sansSerifStack,
  },
  rootCard: {
    marginBottom: 2,
  },
  readCheckbox: {
    minWidth: 24,
    [theme.breakpoints.down("xs")]: {
      marginLeft: -12,
    },
  },
  expandedCommentsWrapper: {
    display: "flex",
    flexDirection: "column",
    minWidth: "100%",
    maxWidth: "100%",
    background: theme.palette.grey[0],
    border: `1px solid ${theme.palette.grey[100]}`,
    borderRadius: theme.borderRadius.default,
    "&:hover": {
      background: theme.palette.grey[50],
      border: `1px solid ${theme.palette.grey[250]}`,
    },
    "&:hover .PostsItemTrailingButtons-actions": {
      opacity: 0.2,
    },
    "&:hover .PostsItemTrailingButtons-archiveButton": {
      opacity: 0.2,
    },
  },
  container: {
    position: "relative",
    flexGrow: 1,
    maxWidth: "100%",
    display: "flex",
    alignItems: "center",
    padding: "8px 12px 8px 0",
    fontWeight: 500,
    fontSize: 13,
    color: theme.palette.grey[600],
    cursor: "pointer",
    [theme.breakpoints.down("xs")]: {
      paddingRight: 12,
    },
  },
  containerCard: {
    paddingTop: 12,
    paddingBottom: 12,
  },
  containerCardWithImage: {
    paddingBottom: 0,
  },
  containerNoKarma: {
    paddingLeft: 20
  },
  postsVote: {
    position: "relative",
    fontSize: 30,
    textAlign: "center",
    "& .PostsVoteDefault-voteBlock": {
      marginTop: -5,
    },
  },
  tagRelWrapper: {
    position: "relative",
    transform: "translateY(1px)",
    marginLeft: 44,
    marginRight: 14,
  },
  details: {
    flexGrow: 1,
    minWidth: 0, // flexbox black magic
  },
  titleWrapper: {
    display: "inline",
  },
  title: {
    fontWeight: 600,
    fontSize: 16,
    fontFamily: theme.palette.fonts.sansSerifStack,
    marginBottom: 2,
    [theme.breakpoints.up("sm")]: {
      display: "flex",
      maxWidth: "100%",
    },
    [theme.breakpoints.down("xs")]: {
      display: "-webkit-box",
      "-webkit-box-orient": "vertical",
      "-webkit-line-clamp": 3,
    },
  },
  meta: {
    display: "flex",
    alignItems: "center",
    whiteSpace: "nowrap",
  },
  secondaryContainer: {
    display: "flex",
    alignItems: "center",
  },
  secondaryContainerCard: {
    alignSelf: "flex-start",
  },
  comments: {
    minWidth: 58,
    marginLeft: 4,
    display: "flex",
    alignItems: "center",
    "& svg": {
      height: 18,
      marginRight: 1,
    },
    "&:hover": {
      color: theme.palette.grey[800],
      opacity: 1,
    },
    [theme.breakpoints.up("sm")]: {
      padding: '10px 0',
    }
  },
  commentsCard: {
    [theme.breakpoints.up("sm")]: {
      padding: 0,
    },
  },
  newComments: {
    fontWeight: 700,
    color: theme.palette.grey[1000],
  },
  postActions: {
    minWidth: 20,
    marginLeft: -5,
    "& .PostActionsButton-icon": {
      fontSize: 20,
    },
    "&:hover .PostActionsButton-icon": {
      color: theme.palette.grey[700],
    },
  },
  hideOnMobile: {
    [theme.breakpoints.down("xs")]: {
      display: "none",
    },
  },
  onlyMobile: {
    [theme.breakpoints.up("sm")]: {
      display: "none",
    },
  },
  expandedComments: {
    padding: "0 12px 8px",
  },
  interactionWrapper: {
    "&:hover": {
      opacity: 1,
    },
  },
  karmaDisplay: {
    width: KARMA_WIDTH,
    minWidth: KARMA_WIDTH,
  },
  card: {
    padding: `0 20px 16px ${KARMA_WIDTH}px`,
    cursor: "pointer",
    display: "flex",
    alignItems: "flex-end",
    gap: "70px",
    [theme.breakpoints.down("xs")]: {
      gap: "12px",
    },
  },
  cardNoKarma: {
    paddingLeft: 20
  },
  cardText: {
    display: "-webkit-box",
    "-webkit-box-orient": "vertical",
    "-webkit-line-clamp": 3,
    overflow: "hidden",
    flexGrow: 1,
    fontWeight: 500,
    fontSize: 13,
    lineHeight: "150%",
    color: theme.palette.grey[600],
    maxHeight: 70,
    [theme.breakpoints.down("xs")]: {
      "-webkit-line-clamp": 4,
      lineHeight: "140%",
    },
  },
  cardTextWithImage: {
    marginTop: 12,
  },
  cardTextNoImage: {
    marginRight: 30,
  },
  cardImage: {
    borderRadius: theme.borderRadius.small,
    width: 124,
    minWidth: 124,
    height: 70,
    minHeight: 70,
    objectFit: "cover",
    [theme.breakpoints.down("xs")]: {
      width: 100,
      minWidth: 100,
    },
  },
});

const cloudinaryBase = `${cloudinaryCloudNameSetting.get()}/image/upload/`;

const formatImageUrl = (url: string) =>
  url.replace(cloudinaryBase, `${cloudinaryBase}c_fill,w_124,h_70,dpr_2,`);

export type EAPostsItemProps = PostsItemConfig & {
  hideSecondaryInfo?: boolean,
  classes: ClassesType<typeof styles>,
};

const EAPostsItem = ({
  hideSecondaryInfo,
  classes,
  ...props
}: EAPostsItemProps) => {
  const {
    post,
    postLink,
    tagRel,
    commentCount,
    hasUnreadComments,
    sticky,
    showDraftTag,
    showPersonalIcon,
    showTrailingButtons,
    showMostValuableCheckbox,
    showDismissButton,
    onDismiss,
    onArchive,
    resumeReading,
    strikethroughTitle,
    curatedIconLeft,
    showIcons,
    isRead,
    showReadCheckbox,
    tooltipPlacement,
    toggleComments,
    renderComments,
    commentTerms,
    condensedAndHiddenComments,
    isRepeated,
    analyticsProps,
    viewType,
    isVoteable,
    showKarma,
    useCuratedDate,
    className,
  } = usePostsItem(props);
  const {onClick} = useClickableCell({href: postLink});
  const cardView = viewType === "card";
  const {postContents} = usePostContents({
    post,
    fragmentName: "PostsList",
    skip: !cardView,
  });

  if (isRepeated) {
    return null;
  }

  const {
    PostsTitle, ForumIcon, PostActionsButton, EAKarmaDisplay, EAPostMeta,
    PostsItemTagRelevance, PostsItemTooltipWrapper, PostsVote,
    PostsItemTrailingButtons, PostReadCheckbox, PostsItemNewCommentsWrapper,
    PostMostValuableCheckbox,
  } = Components;

  const SecondaryInfo = () => (hideSecondaryInfo || showMostValuableCheckbox) ? null : (
    <>
      <InteractionWrapper className={classes.interactionWrapper}>
        <a onClick={toggleComments} className={classNames(
          classes.comments,
          cardView && classes.commentsCard,
          hasUnreadComments && classes.newComments,
        )}>
          <ForumIcon icon="Comment" />
          {commentCount}
        </a>
      </InteractionWrapper>
      <div className={classes.postActions}>
        <InteractionWrapper className={classes.interactionWrapper}>
          <PostActionsButton post={post} popperGap={16} autoPlace vertical />
        </InteractionWrapper>
      </div>
      {tagRel &&
        <div className={classes.tagRelWrapper}>
          <InteractionWrapper className={classes.interactionWrapper}>
            <PostsItemTagRelevance tagRel={tagRel} />
          </InteractionWrapper>
        </div>
      }
    </>
  );
  
  const karmaNode = isVoteable
    ? (
      <InteractionWrapper className={classNames(
        classes.interactionWrapper,
        classes.postsVote,
      )}>
        <PostsVote post={post} />
      </InteractionWrapper>
    )
    : (
      <EAKarmaDisplay post={post} className={classes.karmaDisplay} />
    )

  // The nesting here gets a little messy: we need to add the extra `Link`
  // around the title to make it right-clickable/cmd+clickable. However,
  // clicking this adds a second history item when navigating to the post
  // normally requiring the user to press back twice to get to where they
  // started so we need to wrap that whole thing in an `InteractionWrapper`
  // too.
  const TitleWrapper: FC<PropsWithChildren<{}>> = ({children}) => (
    <PostsItemTooltipWrapper post={post} placement={tooltipPlacement} As="span">
      <InteractionWrapper className={classes.titleWrapper}>
        <Link to={postLink}>{children}</Link>
      </InteractionWrapper>
    </PostsItemTooltipWrapper>
  );

  const body =
    post.customHighlight?.plaintextDescription ||
    postContents?.plaintextDescription ||
    post.contents?.plaintextDescription ||
    "";
  const hasBody = body.trim().length > 0;
  const hasImage = !!post.socialPreviewData.imageUrl;

  return (
    <AnalyticsContext {...analyticsProps}>
      <div className={classNames(
        classes.root,
        cardView && classes.rootCard,
        className,
      )}>
        {showReadCheckbox &&
          <div className={classes.readCheckbox}>
            <PostReadCheckbox post={post} width={14} />
          </div>
        }
        <div className={classes.expandedCommentsWrapper}>
          <div onClick={onClick} className={classNames(
            classes.container,
            cardView && classes.containerCard,
            cardView && post.socialPreviewData.imageUrl && classes.containerCardWithImage,
            !showKarma && classes.containerNoKarma,
          )}>
            {showKarma && karmaNode}
            <div className={classes.details}>
              <PostsTitle
                {...{
                  post,
                  sticky,
                  showDraftTag,
                  showPersonalIcon,
                  strikethroughTitle,
                  curatedIconLeft,
                  showIcons,
                }}
                Wrapper={TitleWrapper}
                read={isRead && !showReadCheckbox}
                isLink={false}
                showEventTag
                className={classes.title}
              />
              <div className={classes.meta}>
                <EAPostMeta post={post} useCuratedDate={useCuratedDate} />
                <div className={classNames(
                  classes.secondaryContainer,
                  classes.onlyMobile,
                )}>
                  <SecondaryInfo />
                </div>
              </div>
            </div>
            <div className={classNames(
              classes.secondaryContainer,
              cardView && classes.secondaryContainerCard,
              classes.hideOnMobile,
            )}>
              <SecondaryInfo />
            </div>
            {showMostValuableCheckbox && <div className={classes.secondaryContainer}>
              <InteractionWrapper className={classes.interactionWrapper}>
                <PostMostValuableCheckbox post={post} />
              </InteractionWrapper>
            </div>}
            <InteractionWrapper className={classes.interactionWrapper}>
              <PostsItemTrailingButtons
                showArchiveButton={false}
                {...{
                  post,
                  showTrailingButtons,
                  showMostValuableCheckbox,
                  showDismissButton,
                  resumeReading,
                  onDismiss,
                  onArchive,
                }}
              />
            </InteractionWrapper>
          </div>
          {cardView && (hasBody || hasImage) &&
            <div className={classNames(classes.card, !showKarma && classes.cardNoKarma)} onClick={onClick}>
              <div className={classNames(
                classes.cardText,
                hasImage && classes.cardTextWithImage,
                !hasImage && classes.cardTextNoImage,
              )}>
                {body}
              </div>
              {hasImage &&
                <img
                  src={formatImageUrl(post.socialPreviewData.imageUrl)}
                  alt={post.title}
                  className={classes.cardImage}
                />
              }
            </div>
          }
          {renderComments &&
            <div className={classes.expandedComments}>
              <PostsItemNewCommentsWrapper
                terms={commentTerms}
                post={post}
                treeOptions={{
                  highlightDate: post.lastVisitedAt ?? undefined,
                  condensed: condensedAndHiddenComments,
                }}
              />
            </div>
          }
        </div>
      </div>
    </AnalyticsContext>
  );
}

const EAPostsItemComponent = registerComponent(
  "EAPostsItem",
  EAPostsItem,
  {
    styles,
    stylePriority: 1,
    hocs: [withErrorBoundary],
    areEqual: {
      terms: "deep",
    },
  },
);

declare global {
  interface ComponentTypes {
    EAPostsItem: typeof EAPostsItemComponent
  }
}

1	import React, { FC, PropsWithChildren } from "react";	3✔
2	import { registerComponent, Components } from "../../lib/vulcan-lib";	1✔
3	import { AnalyticsContext } from "../../lib/analyticsEvents";	1✔
4	import { usePostsItem, PostsItemConfig } from "./usePostsItem";	1✔
5	import { Link } from "../../lib/reactRouterWrapper";	1✔
6	import { SECTION_WIDTH } from "../common/SingleColumnSection";	1✔
7	import withErrorBoundary from "../common/withErrorBoundary";	1✔
8	import classNames from "classnames";	1✔
9	import { InteractionWrapper, useClickableCell } from "../common/useClickableCell";	1✔
10	import { cloudinaryCloudNameSetting } from "../../lib/publicSettings";	1✔
11	import { usePostContents } from "../hooks/useForeignCrosspost";	1✔
12
13	const KARMA_WIDTH = 50;	1✔
14
15	export const styles = (theme: ThemeType) => ({	1✔
16	root: {
17	display: "flex",
18	alignItems: "center",
19	justifyContent: "space-between",
20	maxWidth: SECTION_WIDTH,
21	fontFamily: theme.palette.fonts.sansSerifStack,
22	},
23	rootCard: {
24	marginBottom: 2,
25	},
26	readCheckbox: {
27	minWidth: 24,
28	[theme.breakpoints.down("xs")]: {
29	marginLeft: -12,
30	},
31	},
32	expandedCommentsWrapper: {
33	display: "flex",
34	flexDirection: "column",
35	minWidth: "100%",
36	maxWidth: "100%",
37	background: theme.palette.grey[0],
38	border: `1px solid ${theme.palette.grey[100]}`,
39	borderRadius: theme.borderRadius.default,
40	"&:hover": {
41	background: theme.palette.grey[50],
42	border: `1px solid ${theme.palette.grey[250]}`,
43	},
44	"&:hover .PostsItemTrailingButtons-actions": {
45	opacity: 0.2,
46	},
47	"&:hover .PostsItemTrailingButtons-archiveButton": {
48	opacity: 0.2,
49	},
50	},
51	container: {
52	position: "relative",
53	flexGrow: 1,
54	maxWidth: "100%",
55	display: "flex",
56	alignItems: "center",
57	padding: "8px 12px 8px 0",
58	fontWeight: 500,
59	fontSize: 13,
60	color: theme.palette.grey[600],
61	cursor: "pointer",
62	[theme.breakpoints.down("xs")]: {
63	paddingRight: 12,
64	},
65	},
66	containerCard: {
67	paddingTop: 12,
68	paddingBottom: 12,
69	},
70	containerCardWithImage: {
71	paddingBottom: 0,
72	},
73	containerNoKarma: {
74	paddingLeft: 20
75	},
76	postsVote: {
77	position: "relative",
78	fontSize: 30,
79	textAlign: "center",
80	"& .PostsVoteDefault-voteBlock": {
81	marginTop: -5,
82	},
83	},
84	tagRelWrapper: {
85	position: "relative",
86	transform: "translateY(1px)",
87	marginLeft: 44,
88	marginRight: 14,
89	},
90	details: {
91	flexGrow: 1,
92	minWidth: 0, // flexbox black magic
93	},
94	titleWrapper: {
95	display: "inline",
96	},
97	title: {
98	fontWeight: 600,
99	fontSize: 16,
100	fontFamily: theme.palette.fonts.sansSerifStack,
101	marginBottom: 2,
102	[theme.breakpoints.up("sm")]: {
103	display: "flex",
104	maxWidth: "100%",
105	},
106	[theme.breakpoints.down("xs")]: {
107	display: "-webkit-box",
108	"-webkit-box-orient": "vertical",
109	"-webkit-line-clamp": 3,
110	},
111	},
112	meta: {
113	display: "flex",
114	alignItems: "center",
115	whiteSpace: "nowrap",
116	},
117	secondaryContainer: {
118	display: "flex",
119	alignItems: "center",
120	},
121	secondaryContainerCard: {
122	alignSelf: "flex-start",
123	},
124	comments: {
125	minWidth: 58,
126	marginLeft: 4,
127	display: "flex",
128	alignItems: "center",
129	"& svg": {
130	height: 18,
131	marginRight: 1,
132	},
133	"&:hover": {
134	color: theme.palette.grey[800],
135	opacity: 1,
136	},
137	[theme.breakpoints.up("sm")]: {
138	padding: '10px 0',
139	}
140	},
141	commentsCard: {
142	[theme.breakpoints.up("sm")]: {
143	padding: 0,
144	},
145	},
146	newComments: {
147	fontWeight: 700,
148	color: theme.palette.grey[1000],
149	},
150	postActions: {
151	minWidth: 20,
152	marginLeft: -5,
153	"& .PostActionsButton-icon": {
154	fontSize: 20,
155	},
156	"&:hover .PostActionsButton-icon": {
157	color: theme.palette.grey[700],
158	},
159	},
160	hideOnMobile: {
161	[theme.breakpoints.down("xs")]: {
162	display: "none",
163	},
164	},
165	onlyMobile: {
166	[theme.breakpoints.up("sm")]: {
167	display: "none",
168	},
169	},
170	expandedComments: {
171	padding: "0 12px 8px",
172	},
173	interactionWrapper: {
174	"&:hover": {
175	opacity: 1,
176	},
177	},
178	karmaDisplay: {
179	width: KARMA_WIDTH,
180	minWidth: KARMA_WIDTH,
181	},
182	card: {
183	padding: `0 20px 16px ${KARMA_WIDTH}px`,
184	cursor: "pointer",
185	display: "flex",
186	alignItems: "flex-end",
187	gap: "70px",
188	[theme.breakpoints.down("xs")]: {
189	gap: "12px",
190	},
191	},
192	cardNoKarma: {
193	paddingLeft: 20
194	},
195	cardText: {
196	display: "-webkit-box",
197	"-webkit-box-orient": "vertical",
198	"-webkit-line-clamp": 3,
199	overflow: "hidden",
200	flexGrow: 1,
201	fontWeight: 500,
202	fontSize: 13,
203	lineHeight: "150%",
204	color: theme.palette.grey[600],
205	maxHeight: 70,
206	[theme.breakpoints.down("xs")]: {
207	"-webkit-line-clamp": 4,
208	lineHeight: "140%",
209	},
210	},
211	cardTextWithImage: {
212	marginTop: 12,
213	},
214	cardTextNoImage: {
215	marginRight: 30,
216	},
217	cardImage: {
218	borderRadius: theme.borderRadius.small,
219	width: 124,
220	minWidth: 124,
221	height: 70,
222	minHeight: 70,
223	objectFit: "cover",
224	[theme.breakpoints.down("xs")]: {
225	width: 100,
226	minWidth: 100,
227	},
228	},
229	});
230
231	const cloudinaryBase = `${cloudinaryCloudNameSetting.get()}/image/upload/`;	1✔
232
233	const formatImageUrl = (url: string) =>	1✔
234	url.replace(cloudinaryBase, `${cloudinaryBase}c_fill,w_124,h_70,dpr_2,`);	×
235
236	export type EAPostsItemProps = PostsItemConfig & {
237	hideSecondaryInfo?: boolean,
238	classes: ClassesType<typeof styles>,
239	};
240
241	const EAPostsItem = ({	1✔
242	hideSecondaryInfo,
243	classes,
244	...props
245	}: EAPostsItemProps) => {
246	const {
247	post,
248	postLink,
249	tagRel,
250	commentCount,
251	hasUnreadComments,
252	sticky,
253	showDraftTag,
254	showPersonalIcon,
255	showTrailingButtons,
256	showMostValuableCheckbox,
257	showDismissButton,
258	onDismiss,
259	onArchive,
260	resumeReading,
261	strikethroughTitle,
262	curatedIconLeft,
263	showIcons,
264	isRead,
265	showReadCheckbox,
266	tooltipPlacement,
267	toggleComments,
268	renderComments,
269	commentTerms,
270	condensedAndHiddenComments,
271	isRepeated,
272	analyticsProps,
273	viewType,
274	isVoteable,
275	showKarma,
276	useCuratedDate,
277	className,
278	} = usePostsItem(props);	×
279	const {onClick} = useClickableCell({href: postLink});	×
280	const cardView = viewType === "card";	×
281	const {postContents} = usePostContents({	×
282	post,
283	fragmentName: "PostsList",
284	skip: !cardView,
285	});
286
287	if (isRepeated) {	×
288	return null;	×
289	}
290
291	const {
292	PostsTitle, ForumIcon, PostActionsButton, EAKarmaDisplay, EAPostMeta,
293	PostsItemTagRelevance, PostsItemTooltipWrapper, PostsVote,
294	PostsItemTrailingButtons, PostReadCheckbox, PostsItemNewCommentsWrapper,
295	PostMostValuableCheckbox,
296	} = Components;	×
297
298	const SecondaryInfo = () => (hideSecondaryInfo \|\| showMostValuableCheckbox) ? null : (	×
299	<>
300	<InteractionWrapper className={classes.interactionWrapper}>
301	<a onClick={toggleComments} className={classNames(
302	classes.comments,
303	cardView && classes.commentsCard,	×
304	hasUnreadComments && classes.newComments,	×
305	)}>
306	<ForumIcon icon="Comment" />
307	{commentCount}
308	</a>
309	</InteractionWrapper>
310	<div className={classes.postActions}>
311	<InteractionWrapper className={classes.interactionWrapper}>
312	<PostActionsButton post={post} popperGap={16} autoPlace vertical />
313	</InteractionWrapper>
314	</div>
315	{tagRel &&	×
316	<div className={classes.tagRelWrapper}>
317	<InteractionWrapper className={classes.interactionWrapper}>
318	<PostsItemTagRelevance tagRel={tagRel} />
319	</InteractionWrapper>
320	</div>
321	}
322	</>
323	);
324
NEW 325	const karmaNode = isVoteable	×
326	? (
327	<InteractionWrapper className={classNames(	×
328	classes.interactionWrapper,
329	classes.postsVote,
330	)}>
331	<PostsVote post={post} />
332	</InteractionWrapper>
333	)
334	: (
335	<EAKarmaDisplay post={post} className={classes.karmaDisplay} />
336	)
337
338	// The nesting here gets a little messy: we need to add the extra `Link`
339	// around the title to make it right-clickable/cmd+clickable. However,
340	// clicking this adds a second history item when navigating to the post
341	// normally requiring the user to press back twice to get to where they
342	// started so we need to wrap that whole thing in an `InteractionWrapper`
343	// too.
344	const TitleWrapper: FC<PropsWithChildren<{}>> = ({children}) => (	×
345	<PostsItemTooltipWrapper post={post} placement={tooltipPlacement} As="span">	×
346	<InteractionWrapper className={classes.titleWrapper}>
347	<Link to={postLink}>{children}</Link>
348	</InteractionWrapper>
349	</PostsItemTooltipWrapper>
350	);
351
352	const body =	×
353	post.customHighlight?.plaintextDescription \|\|	×
354	postContents?.plaintextDescription \|\|	×
355	post.contents?.plaintextDescription \|\|	×
356	"";
357	const hasBody = body.trim().length > 0;	×
358	const hasImage = !!post.socialPreviewData.imageUrl;	×
359
360	return (	×
361	<AnalyticsContext {...analyticsProps}>
362	<div className={classNames(
363	classes.root,
364	cardView && classes.rootCard,	×
365	className,
366	)}>
367	{showReadCheckbox &&	×
368	<div className={classes.readCheckbox}>
369	<PostReadCheckbox post={post} width={14} />
370	</div>
371	}
372	<div className={classes.expandedCommentsWrapper}>
373	<div onClick={onClick} className={classNames(
374	classes.container,
375	cardView && classes.containerCard,	×
376	cardView && post.socialPreviewData.imageUrl && classes.containerCardWithImage,	×
377	!showKarma && classes.containerNoKarma,	×
378	)}>
379	{showKarma && karmaNode}	×
380	<div className={classes.details}>
381	<PostsTitle
382	{...{
383	post,
384	sticky,
385	showDraftTag,
386	showPersonalIcon,
387	strikethroughTitle,
388	curatedIconLeft,
389	showIcons,
390	}}
391	Wrapper={TitleWrapper}
392	read={isRead && !showReadCheckbox}	×
393	isLink={false}
394	showEventTag
395	className={classes.title}
396	/>
397	<div className={classes.meta}>
398	<EAPostMeta post={post} useCuratedDate={useCuratedDate} />
399	<div className={classNames(
400	classes.secondaryContainer,
401	classes.onlyMobile,
402	)}>
403	<SecondaryInfo />
404	</div>
405	</div>
406	</div>
407	<div className={classNames(
408	classes.secondaryContainer,
409	cardView && classes.secondaryContainerCard,	×
410	classes.hideOnMobile,
411	)}>
412	<SecondaryInfo />
413	</div>
414	{showMostValuableCheckbox && <div className={classes.secondaryContainer}>	×
415	<InteractionWrapper className={classes.interactionWrapper}>
416	<PostMostValuableCheckbox post={post} />
417	</InteractionWrapper>
418	</div>}
419	<InteractionWrapper className={classes.interactionWrapper}>
420	<PostsItemTrailingButtons
421	showArchiveButton={false}
422	{...{
423	post,
424	showTrailingButtons,
425	showMostValuableCheckbox,
426	showDismissButton,
427	resumeReading,
428	onDismiss,
429	onArchive,
430	}}
431	/>
432	</InteractionWrapper>
433	</div>
434	{cardView && (hasBody \|\| hasImage) &&	×
435	<div className={classNames(classes.card, !showKarma && classes.cardNoKarma)} onClick={onClick}>	×
436	<div className={classNames(
437	classes.cardText,
438	hasImage && classes.cardTextWithImage,	×
439	!hasImage && classes.cardTextNoImage,	×
440	)}>
441	{body}
442	</div>
443	{hasImage &&	×
444	<img
445	src={formatImageUrl(post.socialPreviewData.imageUrl)}
446	alt={post.title}
447	className={classes.cardImage}
448	/>
449	}
450	</div>
451	}
452	{renderComments &&	×
453	<div className={classes.expandedComments}>
454	<PostsItemNewCommentsWrapper
455	terms={commentTerms}
456	post={post}
457	treeOptions={{
458	highlightDate: post.lastVisitedAt ?? undefined,	×
459	condensed: condensedAndHiddenComments,
460	}}
461	/>
462	</div>
463	}
464	</div>
465	</div>
466	</AnalyticsContext>
467	);
468	}
469
470	const EAPostsItemComponent = registerComponent(	1✔
471	"EAPostsItem",
472	EAPostsItem,
473	{
474	styles,
475	stylePriority: 1,
476	hocs: [withErrorBoundary],
477	areEqual: {
478	terms: "deep",
479	},
480	},
481	);
482
483	declare global {
484	interface ComponentTypes {
485	EAPostsItem: typeof EAPostsItemComponent
486	}
487	}

ForumMagnum / ForumMagnum / 9429356947

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