10187444351

Committed 31 Jul 2024 08:48PM UTC coverage: 32.056% (-0.02%) from 32.079%

Build # 10187444351

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

Update audio and events

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4945 of 40151 branches covered (12.32%)

Branch coverage included in aggregate %.

26 of 84 new or added lines in 8 files covered. (30.95%)

2 existing lines in 2 files now uncovered.

28747 of 64951 relevant lines covered (44.26%)

180.68 hits per line

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

18.62

/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,
  },
  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
}: {
  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
}) => {
  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}: {
    tooltipBody: ReactNode,
    label: string,
  }) => {
    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,
        })}>
          {label}
        </div>
      </HoverOver>
    );
  }, [classes, smallText]);

  // 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}/>
      </Link>
    : (post.frontpageDate
      ? <MaybeLink to={contentTypeInfo.frontpage.linkTarget} className={classes.postTypeLink}>
          <PostTypeTag label="Frontpage" tooltipBody={contentTypeInfo.frontpage.tooltipBody}/>
        </MaybeLink>
      : (post.reviewedByUserId
        ? <MaybeLink to={contentTypeInfo.personal.linkTarget} className={classes.postTypeLink}>
          <PostTypeTag label="Personal Blog" tooltipBody={contentTypeInfo.personal.tooltipBody}/>
          </MaybeLink>
        : null
      )
    )

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

ForumMagnum / ForumMagnum / 10187444351

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