10308521435

Committed 07 Aug 2024 11:59PM UTC coverage: 32.075% (+0.05%) from 32.026%

Build # 10308521435

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

improve styles

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4935 of 40157 branches covered (12.29%)

Branch coverage included in aggregate %.

50 of 109 new or added lines in 19 files covered. (45.87%)

3 existing lines in 3 files now uncovered.

28805 of 65035 relevant lines covered (44.29%)

180.47 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, neverCoreStyling]);

  // 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
      )
    )

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

ForumMagnum / ForumMagnum / 10308521435

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