8930121180

Committed 02 May 2024 08:34PM UTC coverage: 31.923% (+0.003%) from 31.92%

Build # 8930121180

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9214 from ForumMagnum/master

[EA] Deploy card view fixes, LW stuff

Run Details

4726 of 38668 branches covered (12.22%)

Branch coverage included in aggregate %.

5 of 12 new or added lines in 3 files covered. (41.67%)

1 existing line in 1 file now uncovered.

27576 of 62518 relevant lines covered (44.11%)

178.65 hits per line

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

20.73

/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,
  },
  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",
    },
  },
  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,
    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>
      }
    </>
  );

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

ForumMagnum / ForumMagnum / 8930121180

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