11113155993

Committed 30 Sep 2024 07:52PM UTC coverage: 31.736% (-0.2%) from 31.896%

Build # 11113155993

Build Type

push

github

Committed by

ben-pace

Commit Message

Merge remote-tracking branch 'origin/master' into jargonBot

Run Details

5076 of 41702 branches covered (12.17%)

Branch coverage included in aggregate %.

200 of 687 new or added lines in 51 files covered. (29.11%)

30 existing lines in 23 files now uncovered.

29586 of 67517 relevant lines covered (43.82%)

183.27 hits per line

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

16.88

/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/collections/posts/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,
  tagRight = true,
}: {
  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,
  tagRight?: 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]);

  // FIXME: Unstable component will lose state on rerender
  // eslint-disable-next-line react/no-unstable-nested-components
  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={neverCoreStyling}/>
      </Link>
    : (post.frontpageDate
      ? <MaybeLink to={contentTypeInfo.frontpage.linkTarget} className={classes.postTypeLink}>
          <PostTypeTag label="Frontpage" tooltipBody={contentTypeInfo.frontpage.tooltipBody} neverCoreStyling={neverCoreStyling}/>
        </MaybeLink>
      : (post.reviewedByUserId
        ? <MaybeLink to={contentTypeInfo.personal.linkTarget} className={classes.postTypeLink}>
            <PostTypeTag label="Personal Blog" tooltipBody={contentTypeInfo.personal.tooltipBody} neverCoreStyling={neverCoreStyling}/>
          </MaybeLink>
        : null
      )
    )

  const eventTag = contentTypeInfo.event && post.isEvent ? <MaybeLink to={contentTypeInfo.event.linkTarget} className={classes.postTypeLink}>
    <PostTypeTag label="Event" tooltipBody={contentTypeInfo.event.tooltipBody} neverCoreStyling={neverCoreStyling}/>
  </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 addTagButton = <AddTagButton onTagSelected={onTagSelected} isVotingContext tooltipPlacement={tooltipPlacement}>
    {useAltAddTagButton && <span className={classNames(classes.altAddTagButton, noBackground && classes.noBackground)}>+</span>}
  </AddTagButton>

  const innerContent = (
    <>
      {!tagRight && currentUser && !hideAddTag && addTagButton}
      {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}
      {isLWorAF && annualReviewMarketInfo && (
        <PostsAnnualReviewMarketTag post={post} annualReviewMarketInfo={annualReviewMarketInfo} />
      )}
      {tagRight && currentUser && !hideAddTag && 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/collections/posts/annualReviewMarkets';
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	tagRight = true,	×
137	}: {
138	post: PostsWithNavigation \| PostsWithNavigationAndRevision \| PostsList \| SunshinePostsList,
139	hideScore?: boolean,
140	hideAddTag?: boolean,
141	useAltAddTagButton?: boolean,
142	showCoreTags?: boolean
143	hidePostTypeTag?: boolean,
144	smallText?: boolean,
145	link?: boolean,
146	highlightAutoApplied?: boolean,
147	allowTruncate?: boolean,
148	overrideMargins?: boolean,
149	appendElement?: ReactNode,
150	annualReviewMarketInfo?: AnnualReviewMarketInfo,
151	align?: "left" \| "right",
152	classes: ClassesType<typeof styles>,
153	noBackground?: boolean,
154	neverCoreStyling?: boolean,
155	tagRight?: boolean,
156	}) => {
157	const [isAwaiting, setIsAwaiting] = useState(false);	×
158	const rootRef = useRef<HTMLSpanElement>(null);	×
159	const [showAll, setShowAll] = useState(!allowTruncate);	×
160	const [displayShowAllButton, setDisplayShowAllButton] = useState(false);	×
161
162	const currentUser = useCurrentUser();	×
163	const { captureEvent } = useTracking()	×
164	const { flash } = useMessages();	×
165
166	// We already have the tags as a resolver on the post, this additional query
167	// serves two purposes:
168	// - It fetches more info that is only required on hover (the tagRel score,
169	// the truncated description). Fetching this in a second round trip allows the
170	// initial render to be faster.
171	// - (somewhat speculative) It allows the mutation to be handled more seamlessly
172	// (incrementing the score and reordering the tags) by updating the result of
173	// this query
174	const { results, loading, loadingInitial, refetch } = useMulti({	×
175	terms: {
176	view: "tagsOnPost",
177	postId: post._id,
178	},
179	collectionName: "TagRels",
180	fragmentName: "TagRelMinimumFragment", // Must match the fragment in the mutation
181	limit: 100,
182	fetchPolicy: 'cache-and-network',
183	// Only fetch this as a follow-up query on the client
184	ssr: false,
185	});
186
187	const checkShouldDisplayShowAll = useCallback(() => {	×
188	if (!showAll && rootRef.current) {	×
189	const el = rootRef.current;	×
190	// Even when expanded scrollHeight and clientHeight can be off by a few pixels,
191	// we are interested in the case where a whole row is hidden
192	if (el.scrollHeight > (el.clientHeight + 10)) {	×
193	setDisplayShowAllButton(true);	×
194	} else {
195	setDisplayShowAllButton(false);	×
196	}
197	}
198	}, [showAll, rootRef, setDisplayShowAllButton]);
199
200	// Check whether we should display the "Show all topics" button when:
201	// - Results or loading state change
202	// - The component window is resized
203	const resultsSignature = stringify(results);	×
204	useEffect(checkShouldDisplayShowAll, [showAll, loadingInitial, resultsSignature, checkShouldDisplayShowAll]);	×
205	useEffect(() => {	×
206	window.addEventListener("resize", checkShouldDisplayShowAll);	×
207	return () => window.removeEventListener("resize", checkShouldDisplayShowAll);	×
208	// eslint-disable-next-line react-hooks/exhaustive-deps
209	}, [])
210
211	const onClickShowAll = useCallback(() => {	×
212	setShowAll(true);	×
213	setDisplayShowAllButton(false);	×
214	}, [setShowAll, setDisplayShowAllButton]);
215
216	const tagIds = (results ? results.map((tagRel) => tagRel.tag?._id) : post.tags.map((tag) => tag._id)).filter(	×
217	Boolean
218	) as string[];
219
220	useOnMountTracking({	×
221	eventType: "tagList",
222	eventProps: {tagIds},
223	captureOnMount: eventProps => eventProps.tagIds.length > 0,	×
224	// LW doesn't get a lot of use out of `tagListMounted` events and there are a lot of them
225	skip: isLWorAF \|\| !tagIds.length \|\| loading	×
226	});
227
228	const [mutate] = useMutation(gql`	×
229	mutation addOrUpvoteTag($tagId: String, $postId: String) {
230	addOrUpvoteTag(tagId: $tagId, postId: $postId) {
231	...TagRelMinimumFragment
232	}
233	}
234	${getFragment("TagRelMinimumFragment")}
235	`);
236
237	const onTagSelected = useCallback(async ({tagId, tagName}: {tagId: string, tagName: string}) => {	×
238	try {	×
239	setIsAwaiting(true);	×
240	await mutate({	×
241	variables: {
242	tagId: tagId,
243	postId: post._id,
244	},
245	});
246	setIsAwaiting(false);	×
247	refetch();	×
248	captureEvent("tagAddedToItem", {tagId, tagName});	×
249	} catch (e) {
250	setIsAwaiting(false);	×
251	flash(e.message);	×
252	}
253	}, [setIsAwaiting, mutate, refetch, post._id, captureEvent, flash]);
254
255	// FIXME: Unstable component will lose state on rerender
256	// eslint-disable-next-line react/no-unstable-nested-components
UNCOV 257	const MaybeLink = ({to, children, className}: {	×
258	to: string\|null,
259	children: React.ReactNode,
260	className?: string,
261	}) => {
262	if (to) {	×
263	return <Link to={to} className={className}>{children}</Link>	×
264	} else {
265	return <>{children}</>;	×
266	}
267	}
268
269	const contentTypeInfo = forumSelect(contentTypes);	×
270
271	const PostTypeTag = useCallback(({tooltipBody, label, neverCoreStyling}: {	×
272	tooltipBody: ReactNode,
273	label: string,
274	neverCoreStyling?: boolean
275	}) => {
276	const {HoverOver, ContentStyles} = Components;	×
277	return (	×
278	<HoverOver
279	title={
280	<Card className={classes.card}>
281	<ContentStyles contentType="comment">
282	{tooltipBody}
283	</ContentStyles>
284	</Card>
285	}
286	tooltip={false}
287	>
288	<div className={classNames(classes.frontpageOrPersonal, {
289	[classes.smallText]: smallText,
290	[classes.noBackground]: noBackground,
291	[classes.neverCoreStyling]: neverCoreStyling,
292	})}>
293	{label}
294	</div>
295	</HoverOver>
296	);
297	}, [classes, smallText, noBackground]);
298
299	// Post type is either Curated, Frontpage, Personal, or uncategorized (in which case
300	// we don't show any indicator). It's uncategorized if it's not frontpaged and doesn't
301	// have reviewedByUserId set to anything.
302	let postType = post.curatedDate	×
303	? <Link to={contentTypeInfo.curated.linkTarget} className={classes.postTypeLink}>	×
304	<PostTypeTag label="Curated" tooltipBody={contentTypeInfo.curated.tooltipBody} neverCoreStyling={neverCoreStyling}/>
305	</Link>
306	: (post.frontpageDate
307	? <MaybeLink to={contentTypeInfo.frontpage.linkTarget} className={classes.postTypeLink}>	×
308	<PostTypeTag label="Frontpage" tooltipBody={contentTypeInfo.frontpage.tooltipBody} neverCoreStyling={neverCoreStyling}/>
309	</MaybeLink>
310	: (post.reviewedByUserId
311	? <MaybeLink to={contentTypeInfo.personal.linkTarget} className={classes.postTypeLink}>	×
312	<PostTypeTag label="Personal Blog" tooltipBody={contentTypeInfo.personal.tooltipBody} neverCoreStyling={neverCoreStyling}/>
313	</MaybeLink>
314	: null
315	)
316	)
317
318	const eventTag = contentTypeInfo.event && post.isEvent ? <MaybeLink to={contentTypeInfo.event.linkTarget} className={classes.postTypeLink}>	×
319	<PostTypeTag label="Event" tooltipBody={contentTypeInfo.event.tooltipBody} neverCoreStyling={neverCoreStyling}/>
320	</MaybeLink> : null
321
322	const sortedTagInfo = results	×
323	? stableSortTags(results.filter((tagRel) => !!tagRel?.tag).map((tr) => ({ tag: tr.tag!, tagRel: tr })))	×
324	: post.tags.map((tag) => ({ tag, tagRel: undefined }));	×
325
326	const {Loading, FooterTag, AddTagButton, CoreTagsChecklist, PostsAnnualReviewMarketTag} = Components;	×
327
328	const tooltipPlacement = useAltAddTagButton ? "bottom-end" : undefined;	×
329
330	const addTagButton = <AddTagButton onTagSelected={onTagSelected} isVotingContext tooltipPlacement={tooltipPlacement}>	×
331	{useAltAddTagButton && <span className={classNames(classes.altAddTagButton, noBackground && classes.noBackground)}>+</span>}	×
332	</AddTagButton>
333
334	const innerContent = (
335	<>	×
336	{!tagRight && currentUser && !hideAddTag && addTagButton}	×
337	{showCoreTags && (	×
338	<div>
339	<CoreTagsChecklist existingTagIds={tagIds} onTagSelected={onTagSelected} />
340	</div>
341	)}
342	{sortedTagInfo.map(
343	({ tagRel, tag }) =>
344	tag && (	×
345	<FooterTag
346	key={tag._id}
347	tagRel={tagRel}
348	tag={tag}
349	hideScore={hideScore}
350	smallText={smallText}
351	highlightAsAutoApplied={highlightAutoApplied && tagRel?.autoApplied}	×
352	link={link}
353	noBackground={noBackground}
354	neverCoreStyling={neverCoreStyling}
355	/>
356	)
357	)}
358	{!hidePostTypeTag && postType}	×
359	{eventTag}
360	{isLWorAF && annualReviewMarketInfo && (	×
361	<PostsAnnualReviewMarketTag post={post} annualReviewMarketInfo={annualReviewMarketInfo} />
362	)}
363	{tagRight && currentUser && !hideAddTag && addTagButton}	×
364	{isAwaiting && <Loading />}	×
365	</>
366	);
367
368	return <>	×
369	<span
370	ref={rootRef}
371	className={classNames(classes.root, {[classes.allowTruncate]: !showAll}, {[classes.overrideMargins] : overrideMargins, [classes.alignRight]: align === "right"})}
372	>
373	{innerContent}
374	{appendElement}
375	</span>
376	{displayShowAllButton && <div className={classes.showAll} onClick={onClickShowAll}>Show all {taggingNamePluralSetting.get()}</div>}	×
377	</>
378	};
379
380	const FooterTagListComponent = registerComponent("FooterTagList", FooterTagList, {styles});	1✔
381
382	declare global {
383	interface ComponentTypes {
384	FooterTagList: typeof FooterTagListComponent
385	}
386	}

ForumMagnum / ForumMagnum / 11113155993

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