10378254738

Committed 13 Aug 2024 10:38PM UTC coverage: 32.035% (+0.01%) from 32.024%

Build # 10378254738

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

forumgate + unused imports

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4940 of 40226 branches covered (12.28%)

Branch coverage included in aggregate %.

68 of 125 new or added lines in 26 files covered. (54.4%)

4 existing lines in 3 files now uncovered.

28814 of 65139 relevant lines covered (44.23%)

180.17 hits per line

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

18.49

/packages/lesswrong/components/tagging/FooterTagList.tsx

import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
import { Components, registerComponent, getFragment } from '../../lib/vulcan-lib';
import { useMulti } from '../../lib/crud/withMulti';
import { useMutation, gql } from '@apollo/client';
import { useCurrentUser } from '../common/withUser';
import { useTracking, useOnMountTracking } from "../../lib/analyticsEvents";
import { contentTypes } from '../posts/PostsPage/ContentType';
import { tagStyle, smallTagTextStyle } from './FooterTag';
import classNames from 'classnames';
import Card from '@material-ui/core/Card';
import { Link } from '../../lib/reactRouterWrapper';
import { forumSelect } from '../../lib/forumTypeUtils';
import { useMessages } from '../common/withMessages';
import { isLWorAF, taggingNamePluralSetting } from '../../lib/instanceSettings';
import stringify from 'json-stringify-deterministic';
import { isFriendlyUI } from '../../themes/forumTheme';
import { FRIENDLY_HOVER_OVER_WIDTH } from '../common/FriendlyHoverOver';
import { AnnualReviewMarketInfo, highlightMarket } from '../../lib/annualReviewMarkets';
import { stableSortTags } from '../../lib/collections/tags/helpers';

const styles = (theme: ThemeType) => ({
  root: isFriendlyUI ? {
    marginTop: 8,
    marginBottom: 8,
  } : {
    display: 'flex',
    gap: '4px',
    flexWrap: 'wrap',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  alignRight: {
    justifyContent: 'flex-end'
  },
  allowTruncate: {
    display: isFriendlyUI ? "block" : "inline-flex",
    // Truncate to 3 rows (webkit-line-clamp would be ideal here but it adds an ellipsis
    // which can't be removed)
    maxHeight: 104,
    overflow: "hidden",
  },
  overrideMargins: {
    marginTop: 0,
    marginBottom: 0,
  },
  postTypeLink: {
    "&:hover": isFriendlyUI ? {opacity: 1} : {},
  },
  frontpageOrPersonal: {
    ...tagStyle(theme),
    backgroundColor: theme.palette.tag.hollowTagBackground,
    ...(isFriendlyUI
      ? {
        marginBottom: 0,
        "&:hover": {
          opacity: 1,
          backgroundColor: theme.palette.tag.hollowTagBackgroundHover,
        },
        "& a:hover": {
          opacity: 1,
        },
      }
      : {
        paddingTop: 4.5,
        paddingBottom: 4.5,
      }),
    border: theme.palette.tag.hollowTagBorder,
    color: theme.palette.text.dim3,
  },
  neverCoreStyling: {
    color: theme.palette.tag.text,
  },
  noBackground: {
    '&&&': {
      backgroundColor: 'transparent',
      border: 'none',
    }
  },
  card: {
    padding: 16,
    ...(isFriendlyUI
      ? {
        paddingTop: 12,
        width: FRIENDLY_HOVER_OVER_WIDTH,
      }
      : {
        width: 450,
        paddingTop: 8,
      }),
  },
  smallText: {
    ...smallTagTextStyle(theme),
  },
  showAll: {
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontSize: 14,
    fontWeight: 600,
    color: theme.palette.grey[500],
    cursor: "pointer",
    width: 'fit-content',
  },
  altAddTagButton: {
    backgroundColor: theme.palette.panelBackground.default,
    display: "inline-block",
    paddingLeft: 8,
    paddingTop: 4.5,
    paddingBottom: 4.5,
    paddingRight: 8,
    borderRadius: 3,
    fontWeight: 700,
    gap: 4,
    cursor: "pointer",
    border: theme.palette.tag.border
  },
});

const FooterTagList = ({
  post,
  hideScore,
  hideAddTag,
  //used for PostsPageSplashHeader
  useAltAddTagButton,
  smallText=false,
  showCoreTags,
  hidePostTypeTag,
  link=true,
  highlightAutoApplied=false,
  allowTruncate=false,
  overrideMargins=false,
  appendElement,
  annualReviewMarketInfo,
  classes,
  align = "left",
  noBackground = false,
  neverCoreStyling = false
}: {
  post: PostsWithNavigation | PostsWithNavigationAndRevision | PostsList | SunshinePostsList,
  hideScore?: boolean,
  hideAddTag?: boolean,
  useAltAddTagButton?: boolean,
  showCoreTags?: boolean
  hidePostTypeTag?: boolean,
  smallText?: boolean,
  link?: boolean,
  highlightAutoApplied?: boolean,
  allowTruncate?: boolean,
  overrideMargins?: boolean,
  appendElement?: ReactNode,
  annualReviewMarketInfo?: AnnualReviewMarketInfo,
  align?: "left" | "right",
  classes: ClassesType<typeof styles>,
  noBackground?: boolean,
  neverCoreStyling?: boolean
}) => {
  const [isAwaiting, setIsAwaiting] = useState(false);
  const rootRef = useRef<HTMLSpanElement>(null);
  const [showAll, setShowAll] = useState(!allowTruncate);
  const [displayShowAllButton, setDisplayShowAllButton] = useState(false);

  const currentUser = useCurrentUser();
  const { captureEvent } = useTracking()
  const { flash } = useMessages();

  // We already have the tags as a resolver on the post, this additional query
  // serves two purposes:
  // - It fetches more info that is only required on hover (the tagRel score,
  // the truncated description). Fetching this in a second round trip allows the
  // initial render to be faster.
  // - (somewhat speculative) It allows the mutation to be handled more seamlessly
  // (incrementing the score and reordering the tags) by updating the result of
  // this query
  const { results, loading, loadingInitial, refetch } = useMulti({
    terms: {
      view: "tagsOnPost",
      postId: post._id,
    },
    collectionName: "TagRels",
    fragmentName: "TagRelMinimumFragment", // Must match the fragment in the mutation
    limit: 100,
    fetchPolicy: 'cache-and-network',
    // Only fetch this as a follow-up query on the client
    ssr: false,
  });

  const checkShouldDisplayShowAll = useCallback(() => {
    if (!showAll && rootRef.current) {
      const el = rootRef.current;
      // Even when expanded scrollHeight and clientHeight can be off by a few pixels,
      // we are interested in the case where a whole row is hidden
      if (el.scrollHeight > (el.clientHeight + 10)) {
        setDisplayShowAllButton(true);
      } else {
        setDisplayShowAllButton(false);
      }
    }
  }, [showAll, rootRef, setDisplayShowAllButton]);

  // Check whether we should display the "Show all topics" button when:
  // - Results or loading state change
  // - The component window is resized
  const resultsSignature = stringify(results);
  useEffect(checkShouldDisplayShowAll, [showAll, loadingInitial, resultsSignature, checkShouldDisplayShowAll]);
  useEffect(() => {
    window.addEventListener("resize", checkShouldDisplayShowAll);
    return () => window.removeEventListener("resize", checkShouldDisplayShowAll);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const onClickShowAll = useCallback(() => {
    setShowAll(true);
    setDisplayShowAllButton(false);
  }, [setShowAll, setDisplayShowAllButton]);

  const tagIds = (results ? results.map((tagRel) => tagRel.tag?._id) : post.tags.map((tag) => tag._id)).filter(
    Boolean
  ) as string[];

  useOnMountTracking({
    eventType: "tagList",
    eventProps: {tagIds},
    captureOnMount: eventProps => eventProps.tagIds.length > 0,
    // LW doesn't get a lot of use out of `tagListMounted` events and there are a lot of them
    skip: isLWorAF || !tagIds.length || loading
  });

  const [mutate] = useMutation(gql`
    mutation addOrUpvoteTag($tagId: String, $postId: String) {
      addOrUpvoteTag(tagId: $tagId, postId: $postId) {
        ...TagRelMinimumFragment
      }
    }
    ${getFragment("TagRelMinimumFragment")}
  `);

  const onTagSelected = useCallback(async ({tagId, tagName}: {tagId: string, tagName: string}) => {
    try {
      setIsAwaiting(true);
      await mutate({
        variables: {
          tagId: tagId,
          postId: post._id,
        },
      });
      setIsAwaiting(false);
      refetch();
      captureEvent("tagAddedToItem", {tagId, tagName});
    } catch (e) {
      setIsAwaiting(false);
      flash(e.message);
    }
  }, [setIsAwaiting, mutate, refetch, post._id, captureEvent, flash]);

  const MaybeLink = ({to, children, className}: {
    to: string|null,
    children: React.ReactNode,
    className?: string,
  }) => {
    if (to) {
      return <Link to={to} className={className}>{children}</Link>
    } else {
      return <>{children}</>;
    }
  }

  const contentTypeInfo = forumSelect(contentTypes);

  const PostTypeTag = useCallback(({tooltipBody, label, neverCoreStyling}: {
    tooltipBody: ReactNode,
    label: string,
    neverCoreStyling?: boolean
  }) => {
    const {HoverOver, ContentStyles} = Components;
    return (
      <HoverOver
        title={
          <Card className={classes.card}>
            <ContentStyles contentType="comment">
              {tooltipBody}
            </ContentStyles>
          </Card>
        }
        tooltip={false}
      >
        <div className={classNames(classes.frontpageOrPersonal, {
          [classes.smallText]: smallText,
          [classes.noBackground]: noBackground,
          [classes.neverCoreStyling]: neverCoreStyling,
        })}>
          {label}
        </div>
      </HoverOver>
    );
  }, [classes, smallText, noBackground]);

  // Post type is either Curated, Frontpage, Personal, or uncategorized (in which case
  // we don't show any indicator). It's uncategorized if it's not frontpaged and doesn't
  // have reviewedByUserId set to anything.
  let postType = post.curatedDate
    ? <Link to={contentTypeInfo.curated.linkTarget} className={classes.postTypeLink}>
        <PostTypeTag label="Curated" tooltipBody={contentTypeInfo.curated.tooltipBody} neverCoreStyling/>
      </Link>
    : (post.frontpageDate
      ? <MaybeLink to={contentTypeInfo.frontpage.linkTarget} className={classes.postTypeLink}>
          <PostTypeTag label="Frontpage" tooltipBody={contentTypeInfo.frontpage.tooltipBody} neverCoreStyling/>
        </MaybeLink>
      : (post.reviewedByUserId
        ? <MaybeLink to={contentTypeInfo.personal.linkTarget} className={classes.postTypeLink}>
            <PostTypeTag label="Personal Blog" tooltipBody={contentTypeInfo.personal.tooltipBody} neverCoreStyling/>
          </MaybeLink>
        : null
      )
    )

  const eventTag = contentTypeInfo.event && post.isEvent ? <MaybeLink to={contentTypeInfo.event.linkTarget} className={classes.postTypeLink}>
    <PostTypeTag label="Event" tooltipBody={contentTypeInfo.event.tooltipBody}/>
  </MaybeLink> : null

  const sortedTagInfo = results
    ? stableSortTags(results.filter((tagRel) => !!tagRel?.tag).map((tr) => ({ tag: tr.tag!, tagRel: tr })))
    : post.tags.map((tag) => ({ tag, tagRel: undefined }));

  const {Loading, FooterTag, AddTagButton, CoreTagsChecklist, PostsAnnualReviewMarketTag} = Components;

  const tooltipPlacement = useAltAddTagButton ? "bottom-end" : undefined;

  const innerContent = (
    <>
      {showCoreTags && (
        <div>
          <CoreTagsChecklist existingTagIds={tagIds} onTagSelected={onTagSelected} />
        </div>
      )}
      {sortedTagInfo.map(
        ({ tagRel, tag }) =>
          tag && (
            <FooterTag
              key={tag._id}
              tagRel={tagRel}
              tag={tag}
              hideScore={hideScore}
              smallText={smallText}
              highlightAsAutoApplied={highlightAutoApplied && tagRel?.autoApplied}
              link={link}
              noBackground={noBackground}
              neverCoreStyling={neverCoreStyling}
            />
          )
      )}
      {!hidePostTypeTag && postType}
      {eventTag}
      {annualReviewMarketInfo && highlightMarket(annualReviewMarketInfo) && (
        <PostsAnnualReviewMarketTag post={post} annualReviewMarketInfo={annualReviewMarketInfo} />
      )}
      {currentUser && !hideAddTag && (
        <AddTagButton onTagSelected={onTagSelected} isVotingContext tooltipPlacement={tooltipPlacement}>
          {useAltAddTagButton && <span className={classNames(classes.altAddTagButton, {[classes.noBackground]: noBackground})}>+</span>}
        </AddTagButton>
      )}
      {isAwaiting && <Loading />}
    </>
  );

  return <>
    <span
      ref={rootRef}
      className={classNames(classes.root, {[classes.allowTruncate]: !showAll}, {[classes.overrideMargins] : overrideMargins, [classes.alignRight]: align === "right"})}
    >
      {innerContent}
      {appendElement}
    </span>
    {displayShowAllButton && <div className={classes.showAll} onClick={onClickShowAll}>Show all {taggingNamePluralSetting.get()}</div>}
  </>
};

const FooterTagListComponent = registerComponent("FooterTagList", FooterTagList, {styles});

declare global {
  interface ComponentTypes {
    FooterTagList: typeof FooterTagListComponent
  }
}

1	import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';	1✔
2	import { Components, registerComponent, getFragment } from '../../lib/vulcan-lib';	1✔
3	import { useMulti } from '../../lib/crud/withMulti';	1✔
4	import { useMutation, gql } from '@apollo/client';	1✔
5	import { useCurrentUser } from '../common/withUser';	1✔
6	import { useTracking, useOnMountTracking } from "../../lib/analyticsEvents";	1✔
7	import { contentTypes } from '../posts/PostsPage/ContentType';	1✔
8	import { tagStyle, smallTagTextStyle } from './FooterTag';	1✔
9	import classNames from 'classnames';	1✔
10	import Card from '@material-ui/core/Card';	1✔
11	import { Link } from '../../lib/reactRouterWrapper';	1✔
12	import { forumSelect } from '../../lib/forumTypeUtils';	1✔
13	import { useMessages } from '../common/withMessages';	1✔
14	import { isLWorAF, taggingNamePluralSetting } from '../../lib/instanceSettings';	1✔
15	import stringify from 'json-stringify-deterministic';	1✔
16	import { isFriendlyUI } from '../../themes/forumTheme';	1✔
17	import { FRIENDLY_HOVER_OVER_WIDTH } from '../common/FriendlyHoverOver';	1✔
18	import { AnnualReviewMarketInfo, highlightMarket } from '../../lib/annualReviewMarkets';	1✔
19	import { stableSortTags } from '../../lib/collections/tags/helpers';	1✔
20
21	const styles = (theme: ThemeType) => ({	1✔
22	root: isFriendlyUI ? {	1!
23	marginTop: 8,
24	marginBottom: 8,
25	} : {
26	display: 'flex',
27	gap: '4px',
28	flexWrap: 'wrap',
29	justifyContent: 'flex-start',
30	alignItems: 'center',
31	},
32	alignRight: {
33	justifyContent: 'flex-end'
34	},
35	allowTruncate: {
36	display: isFriendlyUI ? "block" : "inline-flex",	1!
37	// Truncate to 3 rows (webkit-line-clamp would be ideal here but it adds an ellipsis
38	// which can't be removed)
39	maxHeight: 104,
40	overflow: "hidden",
41	},
42	overrideMargins: {
43	marginTop: 0,
44	marginBottom: 0,
45	},
46	postTypeLink: {
47	"&:hover": isFriendlyUI ? {opacity: 1} : {},	1!
48	},
49	frontpageOrPersonal: {
50	...tagStyle(theme),
51	backgroundColor: theme.palette.tag.hollowTagBackground,
52	...(isFriendlyUI
53	? {	1!
54	marginBottom: 0,
55	"&:hover": {
56	opacity: 1,
57	backgroundColor: theme.palette.tag.hollowTagBackgroundHover,
58	},
59	"& a:hover": {
60	opacity: 1,
61	},
62	}
63	: {
64	paddingTop: 4.5,
65	paddingBottom: 4.5,
66	}),
67	border: theme.palette.tag.hollowTagBorder,
68	color: theme.palette.text.dim3,
69	},
70	neverCoreStyling: {
71	color: theme.palette.tag.text,
72	},
73	noBackground: {
74	'&&&': {
75	backgroundColor: 'transparent',
76	border: 'none',
77	}
78	},
79	card: {
80	padding: 16,
81	...(isFriendlyUI
82	? {	1!
83	paddingTop: 12,
84	width: FRIENDLY_HOVER_OVER_WIDTH,
85	}
86	: {
87	width: 450,
88	paddingTop: 8,
89	}),
90	},
91	smallText: {
92	...smallTagTextStyle(theme),
93	},
94	showAll: {
95	fontFamily: theme.palette.fonts.sansSerifStack,
96	fontSize: 14,
97	fontWeight: 600,
98	color: theme.palette.grey[500],
99	cursor: "pointer",
100	width: 'fit-content',
101	},
102	altAddTagButton: {
103	backgroundColor: theme.palette.panelBackground.default,
104	display: "inline-block",
105	paddingLeft: 8,
106	paddingTop: 4.5,
107	paddingBottom: 4.5,
108	paddingRight: 8,
109	borderRadius: 3,
110	fontWeight: 700,
111	gap: 4,
112	cursor: "pointer",
113	border: theme.palette.tag.border
114	},
115	});
116
117	const FooterTagList = ({	1✔
118	post,
119	hideScore,
120	hideAddTag,
121	//used for PostsPageSplashHeader
122	useAltAddTagButton,
123	smallText=false,	×
124	showCoreTags,
125	hidePostTypeTag,
126	link=true,	×
127	highlightAutoApplied=false,	×
128	allowTruncate=false,	×
129	overrideMargins=false,	×
130	appendElement,
131	annualReviewMarketInfo,
132	classes,
133	align = "left",	×
134	noBackground = false,	×
135	neverCoreStyling = false	×
136	}: {
137	post: PostsWithNavigation \| PostsWithNavigationAndRevision \| PostsList \| SunshinePostsList,
138	hideScore?: boolean,
139	hideAddTag?: boolean,
140	useAltAddTagButton?: boolean,
141	showCoreTags?: boolean
142	hidePostTypeTag?: boolean,
143	smallText?: boolean,
144	link?: boolean,
145	highlightAutoApplied?: boolean,
146	allowTruncate?: boolean,
147	overrideMargins?: boolean,
148	appendElement?: ReactNode,
149	annualReviewMarketInfo?: AnnualReviewMarketInfo,
150	align?: "left" \| "right",
151	classes: ClassesType<typeof styles>,
152	noBackground?: boolean,
153	neverCoreStyling?: boolean
154	}) => {
155	const [isAwaiting, setIsAwaiting] = useState(false);	×
156	const rootRef = useRef<HTMLSpanElement>(null);	×
157	const [showAll, setShowAll] = useState(!allowTruncate);	×
158	const [displayShowAllButton, setDisplayShowAllButton] = useState(false);	×
159
160	const currentUser = useCurrentUser();	×
161	const { captureEvent } = useTracking()	×
162	const { flash } = useMessages();	×
163
164	// We already have the tags as a resolver on the post, this additional query
165	// serves two purposes:
166	// - It fetches more info that is only required on hover (the tagRel score,
167	// the truncated description). Fetching this in a second round trip allows the
168	// initial render to be faster.
169	// - (somewhat speculative) It allows the mutation to be handled more seamlessly
170	// (incrementing the score and reordering the tags) by updating the result of
171	// this query
172	const { results, loading, loadingInitial, refetch } = useMulti({	×
173	terms: {
174	view: "tagsOnPost",
175	postId: post._id,
176	},
177	collectionName: "TagRels",
178	fragmentName: "TagRelMinimumFragment", // Must match the fragment in the mutation
179	limit: 100,
180	fetchPolicy: 'cache-and-network',
181	// Only fetch this as a follow-up query on the client
182	ssr: false,
183	});
184
185	const checkShouldDisplayShowAll = useCallback(() => {	×
186	if (!showAll && rootRef.current) {	×
187	const el = rootRef.current;	×
188	// Even when expanded scrollHeight and clientHeight can be off by a few pixels,
189	// we are interested in the case where a whole row is hidden
190	if (el.scrollHeight > (el.clientHeight + 10)) {	×
191	setDisplayShowAllButton(true);	×
192	} else {
193	setDisplayShowAllButton(false);	×
194	}
195	}
196	}, [showAll, rootRef, setDisplayShowAllButton]);
197
198	// Check whether we should display the "Show all topics" button when:
199	// - Results or loading state change
200	// - The component window is resized
201	const resultsSignature = stringify(results);	×
202	useEffect(checkShouldDisplayShowAll, [showAll, loadingInitial, resultsSignature, checkShouldDisplayShowAll]);	×
203	useEffect(() => {	×
204	window.addEventListener("resize", checkShouldDisplayShowAll);	×
205	return () => window.removeEventListener("resize", checkShouldDisplayShowAll);	×
206	// eslint-disable-next-line react-hooks/exhaustive-deps
207	}, [])
208
209	const onClickShowAll = useCallback(() => {	×
210	setShowAll(true);	×
211	setDisplayShowAllButton(false);	×
212	}, [setShowAll, setDisplayShowAllButton]);
213
214	const tagIds = (results ? results.map((tagRel) => tagRel.tag?._id) : post.tags.map((tag) => tag._id)).filter(	×
215	Boolean
216	) as string[];
217
218	useOnMountTracking({	×
219	eventType: "tagList",
220	eventProps: {tagIds},
221	captureOnMount: eventProps => eventProps.tagIds.length > 0,	×
222	// LW doesn't get a lot of use out of `tagListMounted` events and there are a lot of them
223	skip: isLWorAF \|\| !tagIds.length \|\| loading	×
224	});
225
226	const [mutate] = useMutation(gql`	×
227	mutation addOrUpvoteTag($tagId: String, $postId: String) {
228	addOrUpvoteTag(tagId: $tagId, postId: $postId) {
229	...TagRelMinimumFragment
230	}
231	}
232	${getFragment("TagRelMinimumFragment")}
233	`);
234
235	const onTagSelected = useCallback(async ({tagId, tagName}: {tagId: string, tagName: string}) => {	×
236	try {	×
237	setIsAwaiting(true);	×
238	await mutate({	×
239	variables: {
240	tagId: tagId,
241	postId: post._id,
242	},
243	});
244	setIsAwaiting(false);	×
245	refetch();	×
246	captureEvent("tagAddedToItem", {tagId, tagName});	×
247	} catch (e) {
248	setIsAwaiting(false);	×
249	flash(e.message);	×
250	}
251	}, [setIsAwaiting, mutate, refetch, post._id, captureEvent, flash]);
252
253	const MaybeLink = ({to, children, className}: {	×
254	to: string\|null,
255	children: React.ReactNode,
256	className?: string,
257	}) => {
258	if (to) {	×
259	return <Link to={to} className={className}>{children}</Link>	×
260	} else {
261	return <>{children}</>;	×
262	}
263	}
264
265	const contentTypeInfo = forumSelect(contentTypes);	×
266
NEW 267	const PostTypeTag = useCallback(({tooltipBody, label, neverCoreStyling}: {	×
268	tooltipBody: ReactNode,
269	label: string,
270	neverCoreStyling?: boolean
271	}) => {
272	const {HoverOver, ContentStyles} = Components;	×
273	return (	×
274	<HoverOver
275	title={
276	<Card className={classes.card}>
277	<ContentStyles contentType="comment">
278	{tooltipBody}
279	</ContentStyles>
280	</Card>
281	}
282	tooltip={false}
283	>
284	<div className={classNames(classes.frontpageOrPersonal, {
285	[classes.smallText]: smallText,
286	[classes.noBackground]: noBackground,
287	[classes.neverCoreStyling]: neverCoreStyling,
288	})}>
289	{label}
290	</div>
291	</HoverOver>
292	);
293	}, [classes, smallText, noBackground]);
294
295	// Post type is either Curated, Frontpage, Personal, or uncategorized (in which case
296	// we don't show any indicator). It's uncategorized if it's not frontpaged and doesn't
297	// have reviewedByUserId set to anything.
298	let postType = post.curatedDate	×
299	? <Link to={contentTypeInfo.curated.linkTarget} className={classes.postTypeLink}>	×
300	<PostTypeTag label="Curated" tooltipBody={contentTypeInfo.curated.tooltipBody} neverCoreStyling/>
301	</Link>
302	: (post.frontpageDate
303	? <MaybeLink to={contentTypeInfo.frontpage.linkTarget} className={classes.postTypeLink}>	×
304	<PostTypeTag label="Frontpage" tooltipBody={contentTypeInfo.frontpage.tooltipBody} neverCoreStyling/>
305	</MaybeLink>
306	: (post.reviewedByUserId
307	? <MaybeLink to={contentTypeInfo.personal.linkTarget} className={classes.postTypeLink}>	×
308	<PostTypeTag label="Personal Blog" tooltipBody={contentTypeInfo.personal.tooltipBody} neverCoreStyling/>
309	</MaybeLink>
310	: null
311	)
312	)
313
NEW 314	const eventTag = contentTypeInfo.event && post.isEvent ? <MaybeLink to={contentTypeInfo.event.linkTarget} className={classes.postTypeLink}>	×
315	<PostTypeTag label="Event" tooltipBody={contentTypeInfo.event.tooltipBody}/>
316	</MaybeLink> : null
317
318	const sortedTagInfo = results	×
319	? stableSortTags(results.filter((tagRel) => !!tagRel?.tag).map((tr) => ({ tag: tr.tag!, tagRel: tr })))	×
320	: post.tags.map((tag) => ({ tag, tagRel: undefined }));	×
321
322	const {Loading, FooterTag, AddTagButton, CoreTagsChecklist, PostsAnnualReviewMarketTag} = Components;	×
323
324	const tooltipPlacement = useAltAddTagButton ? "bottom-end" : undefined;	×
325
326	const innerContent = (
327	<>	×
328	{showCoreTags && (	×
329	<div>
330	<CoreTagsChecklist existingTagIds={tagIds} onTagSelected={onTagSelected} />
331	</div>
332	)}
333	{sortedTagInfo.map(
334	({ tagRel, tag }) =>
335	tag && (	×
336	<FooterTag
337	key={tag._id}
338	tagRel={tagRel}
339	tag={tag}
340	hideScore={hideScore}
341	smallText={smallText}
342	highlightAsAutoApplied={highlightAutoApplied && tagRel?.autoApplied}	×
343	link={link}
344	noBackground={noBackground}
345	neverCoreStyling={neverCoreStyling}
346	/>
347	)
348	)}
349	{!hidePostTypeTag && postType}	×
350	{eventTag}
351	{annualReviewMarketInfo && highlightMarket(annualReviewMarketInfo) && (	×
352	<PostsAnnualReviewMarketTag post={post} annualReviewMarketInfo={annualReviewMarketInfo} />
353	)}
354	{currentUser && !hideAddTag && (	×
355	<AddTagButton onTagSelected={onTagSelected} isVotingContext tooltipPlacement={tooltipPlacement}>
356	{useAltAddTagButton && <span className={classNames(classes.altAddTagButton, {[classes.noBackground]: noBackground})}>+</span>}	×
357	</AddTagButton>
358	)}
359	{isAwaiting && <Loading />}	×
360	</>
361	);
362
363	return <>	×
364	<span
365	ref={rootRef}
366	className={classNames(classes.root, {[classes.allowTruncate]: !showAll}, {[classes.overrideMargins] : overrideMargins, [classes.alignRight]: align === "right"})}
367	>
368	{innerContent}
369	{appendElement}
370	</span>
371	{displayShowAllButton && <div className={classes.showAll} onClick={onClickShowAll}>Show all {taggingNamePluralSetting.get()}</div>}	×
372	</>
373	};
374
375	const FooterTagListComponent = registerComponent("FooterTagList", FooterTagList, {styles});	1✔
376
377	declare global {
378	interface ComponentTypes {
379	FooterTagList: typeof FooterTagListComponent
380	}
381	}

ForumMagnum / ForumMagnum / 10378254738

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