9324070933

Committed 31 May 2024 08:38PM UTC coverage: 31.882% (-0.02%) from 31.905%

Build # 9324070933

Build Type

Pull #9346

github

Committed by

darkruby501

Commit Message

fix comment count on cards

Pull Request Pull Request #9346: Subscribed feed launch

Run Details

4815 of 39328 branches covered (12.24%)

Branch coverage included in aggregate %.

64 of 204 new or added lines in 18 files covered. (31.37%)

5 existing lines in 5 files now uncovered.

27971 of 63509 relevant lines covered (44.04%)

180.22 hits per line

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

19.61

/packages/lesswrong/components/posts/FeedPostCardMeta.tsx

import React, { useRef } from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import { InteractionWrapper } from "../common/useClickableCell";
import classNames from "classnames";
import { isAF } from "../../lib/instanceSettings";
import { postGetCommentCountStr, postGetLink, postGetLinkTarget, postGetPageUrl } from "../../lib/collections/posts/helpers";
import { Link } from "../../lib/reactRouterWrapper";

const styles = (theme: ThemeType) => ({
  root: {
    color: theme.palette.grey[600],
    width: "100%",
    display: "flex",
    alignItems: "flex-start",
    justifyContent: "start"
  },
  interactionWrapper: {
    display: "flex",
    alignItems: "center",
    "&:hover": {
      opacity: 1,
    },
    marginRight: 6,
  },
  icon: {
    width: 16,
  },
  eventOrganizer: {
    display: "flex",
    fontSize: "14px",
  },
  authorsList: {
    fontSize: "1.1rem",
  },
  read: {
    opacity: ".8"
  },
  linkIcon: {
    fontSize: "1.2rem",
    opacity: 0.9
  },
  karma: {
    textAlign: "center",
    display: "inline-block",
  },
  karmaIcon: {
    fonsize: "1.1rem",
    opacity: 0.8,
  },
  linkPost: {
  },
  info: {
    display: "flex",
    color: theme.palette.text.dim3,
    marginRight: 4,
    fontSize: "1.1rem",
    textWrap: "nowrap",
    ...theme.typography.commentStyle,
  },
  dot: {
    opacity: 0.8,
    marginLeft: 4,
    fontWeight: 600,
  },
  hideOnSmallScreens: {
    ['@media (max-width: 500px)']: {
      display: "none",
    }
  }
});

const FeedPostCardMeta = ({post, className, classes}: {
  post: PostsList | SunshinePostsList,
  useEventStyles?: boolean,
  className?: string,
  classes: ClassesType<typeof styles>,
}) => {
  const authorExpandContainer = useRef(null);

  const {
    TruncatedAuthorsList, ForumIcon, LWTooltip, FormatDate
  } = Components;

  // TODO: Think about styling for events

  const baseScore = (isAF ? post.afBaseScore : post.baseScore) ?? 0
  const showAfScore = !isAF && post.af && !post.shortform && !post.isEvent;
  const afBaseScore = showAfScore ? post.afBaseScore : null

  const separatorElement = <span className={classes.dot}>·</span>

  const linkPostMessage = <div>
    This is a linkpost for <a
      href={postGetLink(post)}
      target={postGetLinkTarget(post)}
    >{post.url}</a>
  </div>

  const linkPostIcon =  post.url && <span className={classNames(classes.linkPost, classes.info)}>
    <LWTooltip title={linkPostMessage} placement="left">
      <a href={postGetLink(post)}><ForumIcon icon="Link" className={classes.linkIcon}/></a>
    </LWTooltip>
  </span>

  const dateElement = post.postedAt && !post.isEvent && <div className={classes.info}>
        <FormatDate date={post.postedAt}/>
        {(post.url || (post.commentCount > 0)) && separatorElement}
      </div>
  
  const baseScoreElement = !post.shortform && !post.isEvent && <span className={classes.info}>
    <LWTooltip title={<div>
      This post has { baseScore } karma<br/>
      ({ post.voteCount} votes)
    </div>}>
      <span className={classes.karma}>
        <span>{ baseScore }</span>
      </span>
    </LWTooltip>
    {separatorElement}
  </span>

  const afScoreElement = showAfScore && <span className={classes.info}>
    <LWTooltip title={<div>
      { afBaseScore } karma on alignmentforum.org
    </div>}>
      <span>Ω { afBaseScore }</span>
    </LWTooltip>
    {separatorElement}
  </span>

  const authorsListElement = <InteractionWrapper className={classes.interactionWrapper}>
    <TruncatedAuthorsList
      post={post}
      expandContainer={authorExpandContainer}
      className={classes.authorsList}
    />
    {separatorElement}
  </InteractionWrapper>

  const commentCountElement = (post.commentCount > 0) && <span className={classNames(classes.info, classes.hideOnSmallScreens)}>
    <Link to={`${postGetPageUrl(post)}#comments`}>
      {postGetCommentCountStr(post)}
    </Link>
    {post.url && separatorElement}
  </span>

  return (
    <div
      className={classNames(classes.root, className)}
      ref={authorExpandContainer}
    >
      {baseScoreElement}
      {afScoreElement}
      {authorsListElement}
      {dateElement}
      {commentCountElement}
      {linkPostIcon}
    </div>
  );
}

const FeedPostCardMetaComponent = registerComponent(
  "FeedPostCardMeta",
  FeedPostCardMeta,
  {styles, stylePriority: -1},
);

declare global {
  interface ComponentTypes {
    FeedPostCardMeta: typeof FeedPostCardMetaComponent,
  }
}

1	import React, { useRef } from "react";	1✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import { InteractionWrapper } from "../common/useClickableCell";	1✔
4	import classNames from "classnames";	1✔
5	import { isAF } from "../../lib/instanceSettings";	1✔
6	import { postGetCommentCountStr, postGetLink, postGetLinkTarget, postGetPageUrl } from "../../lib/collections/posts/helpers";	1✔
7	import { Link } from "../../lib/reactRouterWrapper";	1✔
8
9	const styles = (theme: ThemeType) => ({	1✔
10	root: {
11	color: theme.palette.grey[600],
12	width: "100%",
13	display: "flex",
14	alignItems: "flex-start",
15	justifyContent: "start"
16	},
17	interactionWrapper: {
18	display: "flex",
19	alignItems: "center",
20	"&:hover": {
21	opacity: 1,
22	},
23	marginRight: 6,
24	},
25	icon: {
26	width: 16,
27	},
28	eventOrganizer: {
29	display: "flex",
30	fontSize: "14px",
31	},
32	authorsList: {
33	fontSize: "1.1rem",
34	},
35	read: {
36	opacity: ".8"
37	},
38	linkIcon: {
39	fontSize: "1.2rem",
40	opacity: 0.9
41	},
42	karma: {
43	textAlign: "center",
44	display: "inline-block",
45	},
46	karmaIcon: {
47	fonsize: "1.1rem",
48	opacity: 0.8,
49	},
50	linkPost: {
51	},
52	info: {
53	display: "flex",
54	color: theme.palette.text.dim3,
55	marginRight: 4,
56	fontSize: "1.1rem",
57	textWrap: "nowrap",
58	...theme.typography.commentStyle,
59	},
60	dot: {
61	opacity: 0.8,
62	marginLeft: 4,
63	fontWeight: 600,
64	},
65	hideOnSmallScreens: {
66	['@media (max-width: 500px)']: {
67	display: "none",
68	}
69	}
70	});
71
72	const FeedPostCardMeta = ({post, className, classes}: {	1✔
73	post: PostsList \| SunshinePostsList,
74	useEventStyles?: boolean,
75	className?: string,
76	classes: ClassesType<typeof styles>,
77	}) => {
78	const authorExpandContainer = useRef(null);	×
79
80	const {
81	TruncatedAuthorsList, ForumIcon, LWTooltip, FormatDate
82	} = Components;	×
83
84	// TODO: Think about styling for events
85
86	const baseScore = (isAF ? post.afBaseScore : post.baseScore) ?? 0	×
87	const showAfScore = !isAF && post.af && !post.shortform && !post.isEvent;	×
88	const afBaseScore = showAfScore ? post.afBaseScore : null	×
89
90	const separatorElement = <span className={classes.dot}>·</span>	×
91
92	const linkPostMessage = <div>	×
93	This is a linkpost for <a
94	href={postGetLink(post)}
95	target={postGetLinkTarget(post)}
96	>{post.url}</a>
97	</div>
98
99	const linkPostIcon = post.url && <span className={classNames(classes.linkPost, classes.info)}>	×
100	<LWTooltip title={linkPostMessage} placement="left">
101	<a href={postGetLink(post)}><ForumIcon icon="Link" className={classes.linkIcon}/></a>
102	</LWTooltip>
103	</span>
104
105	const dateElement = post.postedAt && !post.isEvent && <div className={classes.info}>	×
106	<FormatDate date={post.postedAt}/>
107	{(post.url \|\| (post.commentCount > 0)) && separatorElement}	×
108	</div>
109
110	const baseScoreElement = !post.shortform && !post.isEvent && <span className={classes.info}>	×
111	<LWTooltip title={<div>
112	This post has { baseScore } karma<br/>
113	({ post.voteCount} votes)
114	</div>}>
115	<span className={classes.karma}>
116	<span>{ baseScore }</span>
117	</span>
118	</LWTooltip>
119	{separatorElement}
120	</span>
121
122	const afScoreElement = showAfScore && <span className={classes.info}>	×
123	<LWTooltip title={<div>
124	{ afBaseScore } karma on alignmentforum.org
125	</div>}>
126	<span>Ω { afBaseScore }</span>
127	</LWTooltip>
128	{separatorElement}
129	</span>
130
131	const authorsListElement = <InteractionWrapper className={classes.interactionWrapper}>	×
132	<TruncatedAuthorsList
133	post={post}
134	expandContainer={authorExpandContainer}
135	className={classes.authorsList}
136	/>
137	{separatorElement}
138	</InteractionWrapper>
139
NEW 140	const commentCountElement = (post.commentCount > 0) && <span className={classNames(classes.info, classes.hideOnSmallScreens)}>	×
141	<Link to={`${postGetPageUrl(post)}#comments`}>
142	{postGetCommentCountStr(post)}
143	</Link>
144	{post.url && separatorElement}	×
145	</span>
146
UNCOV 147	return (	×
148	<div
149	className={classNames(classes.root, className)}
150	ref={authorExpandContainer}
151	>
152	{baseScoreElement}
153	{afScoreElement}
154	{authorsListElement}
155	{dateElement}
156	{commentCountElement}
157	{linkPostIcon}
158	</div>
159	);
160	}
161
162	const FeedPostCardMetaComponent = registerComponent(	1✔
163	"FeedPostCardMeta",
164	FeedPostCardMeta,
165	{styles, stylePriority: -1},
166	);
167
168	declare global {
169	interface ComponentTypes {
170	FeedPostCardMeta: typeof FeedPostCardMetaComponent,
171	}
172	}

ForumMagnum / ForumMagnum / 9324070933

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