10081210887

Committed 24 Jul 2024 05:24PM UTC coverage: 31.861%. Remained the same

Build # 10081210887

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9537 from ForumMagnum/improve-card-view

Improve card view UI

Run Details

4932 of 40578 branches covered (12.15%)

Branch coverage included in aggregate %.

3 of 6 new or added lines in 1 file covered. (50.0%)

1 existing line in 1 file now uncovered.

28879 of 65542 relevant lines covered (44.06%)

179.5 hits per line

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

19.05

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

import React, { FC, PropsWithChildren, useCallback } 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";
import { usePostsListView } from "../hooks/usePostsListView";

const KARMA_WIDTH = 50;
const CARD_IMG_HEIGHT = 80;
const CARD_IMG_WIDTH = 160;

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,
    },
  },
  titleCardView: {
    // When card view is active, *all* post items change font weight,
    // even those that are not a card, so that all titles are consistent.
    fontWeight: 700,
  },
  titleCard: {
    display: "-webkit-box",
    "-webkit-box-orient": "vertical",
    "-webkit-line-clamp": 2,
    [theme.breakpoints.down("xs")]: {
      "-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: "47px",
    [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: CARD_IMG_HEIGHT,
    [theme.breakpoints.down("xs")]: {
      "-webkit-line-clamp": 4,
      lineHeight: "140%",
    },
  },
  cardTextWithImage: {
    marginTop: 12,
  },
  cardTextNoImage: {
    maxWidth: 509,
  },
  cardImage: {
    borderRadius: theme.borderRadius.small,
    width: CARD_IMG_WIDTH,
    minWidth: CARD_IMG_WIDTH,
    height: CARD_IMG_HEIGHT,
    minHeight: CARD_IMG_HEIGHT,
    objectFit: "cover",
    marginTop: -9,
    [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_${CARD_IMG_WIDTH},h_${CARD_IMG_HEIGHT},dpr_2,`);

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

const EAPostsItem = ({
  openInNewTab,
  hideSecondaryInfo,
  secondaryInfoNode,
  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,
    hideTag,
    className,
  } = usePostsItem(props);
  const {onClick} = useClickableCell({href: postLink, openInNewTab});
  const cardView = viewType === "card";
  // When card view is active, *all* post items change font weight,
  // even those that are not a card, so that all titles are consistent.
  const {view} = usePostsListView()

  const {postContents} = usePostContents({
    post,
    fragmentName: "PostsList",
    skip: !cardView,
  });

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

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

ForumMagnum / ForumMagnum / 10081210887

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