10689918928

Committed 03 Sep 2024 08:11PM UTC coverage: 31.854% (-0.02%) from 31.878%

Build # 10689918928

Build Type

Pull #9701

github

Committed by

b0b3rt

Commit Message

cleanup

Pull Request Pull Request #9701: fix graphql resolver args (wip)

Run Details

5028 of 41195 branches covered (12.21%)

Branch coverage included in aggregate %.

12 of 20 new or added lines in 6 files covered. (60.0%)

609 existing lines in 23 files now uncovered.

29356 of 66746 relevant lines covered (43.98%)

187.79 hits per line

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

14.6

/packages/lesswrong/components/tagging/TagPage.tsx

import { useApolloClient } from "@apollo/client";
import classNames from 'classnames';
import React, { FC, Fragment, useCallback, useEffect, useState } from 'react';
import { AnalyticsContext, useTracking } from "../../lib/analyticsEvents";
import { userHasNewTagSubscriptions } from "../../lib/betas";
import { subscriptionTypes } from '../../lib/collections/subscriptions/schema';
import { tagGetUrl, tagMinimumKarmaPermissions, tagUserHasSufficientKarma } from '../../lib/collections/tags/helpers';
import { useMulti } from '../../lib/crud/withMulti';
import { truncate } from '../../lib/editor/ellipsize';
import { Link } from '../../lib/reactRouterWrapper';
import { useLocation } from '../../lib/routeUtil';
import { useOnSearchHotkey } from '../common/withGlobalKeydown';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { useCurrentUser } from '../common/withUser';
import { MAX_COLUMN_WIDTH } from '../posts/PostsPage/PostsPage';
import { EditTagForm } from './EditTagPage';
import { useTagBySlug } from './useTag';
import { taggingNameCapitalSetting, taggingNamePluralCapitalSetting, taggingNamePluralSetting } from '../../lib/instanceSettings';
import truncateTagDescription from "../../lib/utils/truncateTagDescription";
import { getTagStructuredData } from "./TagPageRouter";
import { HEADER_HEIGHT } from "../common/Header";
import { isFriendlyUI } from "../../themes/forumTheme";
import DeferRender from "../common/DeferRender";

export const tagPageHeaderStyles = (theme: ThemeType) => ({
  postListMeta: {
    display: "flex",
    alignItems: "baseline",
    marginBottom: 8,
  },
  relevance: {
    fontFamily: theme.palette.fonts.sansSerifStack,
    color: theme.palette.grey[600],
    fontWeight: 500,
    textAlign: "right",
    flexGrow: 1,
    marginRight: 8,
  },
});

// Also used in TagCompareRevisions, TagDiscussionPage
export const styles = (theme: ThemeType): JssStyles => ({
  rootGivenImage: {
    marginTop: 185,
    [theme.breakpoints.down('sm')]: {
      marginTop: 130,
    },
  },
  imageContainer: {
    width: '100%',
    '& > picture > img': {
      height: 300,
      objectFit: 'cover',
      width: '100%',
    },
    position: 'absolute',
    top: HEADER_HEIGHT,
    [theme.breakpoints.down('sm')]: {
      width: 'unset',
      '& > picture > img': {
        height: 200,
        width: '100%',
      },
      left: -4,
      right: -4,
    },
  },
  centralColumn: {
    marginLeft: "auto",
    marginRight: "auto",
    maxWidth: MAX_COLUMN_WIDTH,
  },
  header: {
    paddingTop: 19,
    paddingBottom: 5,
    paddingLeft: 42,
    paddingRight: 42,
    background: theme.palette.panelBackground.default,
    borderTopLeftRadius: theme.borderRadius.default,
    borderTopRightRadius: theme.borderRadius.default,
  },
  titleRow: {
    [theme.breakpoints.up('sm')]: {
      display: 'flex',
      justifyContent: 'space-between',
    }
  },
  title: {
    ...theme.typography[isFriendlyUI ? "display2" : "display3"],
    ...theme.typography[isFriendlyUI ? "headerStyle" : "commentStyle"],
    marginTop: 0,
    fontWeight: isFriendlyUI ? 700 : 600,
    ...theme.typography.smallCaps,
  },
  notifyMeButton: {
    [theme.breakpoints.down('xs')]: {
      marginTop: 6,
    },
  },
  nonMobileButtonRow: {
    [theme.breakpoints.down('xs')]: {
      // Ensure this takes priority over the properties in TagPageButtonRow
      display: 'none !important',
    },
  },
  mobileButtonRow: {
    [theme.breakpoints.up('sm')]: {
      display: 'none !important',
    },
  },
  editMenu: {
    [theme.breakpoints.down('xs')]: {
      marginTop: 16,
      marginBottom: 8,
    },
  },
  wikiSection: {
    paddingTop: 5,
    paddingLeft: 42,
    paddingRight: 42,
    paddingBottom: 12,
    marginBottom: 24,
    background: theme.palette.panelBackground.default,
    borderBottomLeftRadius: theme.borderRadius.default,
    borderBottomRightRadius: theme.borderRadius.default,
  },
  subHeading: {
    paddingLeft: 42,
    paddingRight: 42,
    marginTop: -2,
    background: theme.palette.panelBackground.default,
    ...theme.typography.body2,
    ...theme.typography.postStyle,
  },
  subHeadingInner: {
    paddingTop: 2,
    paddingBottom: 2,
    borderTop: theme.palette.border.extraFaint,
    borderBottom: theme.palette.border.extraFaint,
  },
  relatedTag : {
    display: '-webkit-box',
    "-webkit-line-clamp": 2,
    "-webkit-box-orient": 'vertical',
    overflow: 'hidden',
    fontFamily: isFriendlyUI ? theme.palette.fonts.sansSerifStack : undefined,
  },
  relatedTagLink : {
    color: theme.palette.lwTertiary.dark
  },
  tagHeader: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    paddingBottom: 8,
    ...theme.typography.body2,
    ...theme.typography.commentStyle,
  },
  postsTaggedTitle: {
    color: theme.palette.grey[600]
  },
  pastRevisionNotice: {
    ...theme.typography.commentStyle,
    fontStyle: 'italic'
  },
  nextLink: {
    ...theme.typography.commentStyle
  },
  ...tagPageHeaderStyles(theme),
});

export const tagPostTerms = (tag: Pick<TagBasicInfo, "_id" | "name"> | null, query: any) => {
  if (!tag) return
  return ({
    ...query,
    filterSettings: {tags:[{tagId: tag._id, tagName: tag.name, filterMode: "Required"}]},
    view: "tagRelevance",
    tagId: tag._id,
  })
}

const PostsListHeading: FC<{
  tag: TagPageFragment|TagPageWithRevisionFragment,
  query: Record<string, string>,
  classes: ClassesType,
}> = ({tag, query, classes}) => {
  const {SectionTitle, PostsListSortDropdown} = Components;
  if (isFriendlyUI) {
    return (
      <>
        <SectionTitle title={`Posts tagged ${tag.name}`} />
        <div className={classes.postListMeta}>
          <PostsListSortDropdown value={query.sortedBy || "relevance"} />
          <div className={classes.relevance}>Relevance</div>
        </div>
      </>
    );
  }
  return (
    <div className={classes.tagHeader}>
      <div className={classes.postsTaggedTitle}>Posts tagged <em>{tag.name}</em></div>
      <PostsListSortDropdown value={query.sortedBy || "relevance"}/>
    </div>
  );
}

const TagPage = ({classes}: {
  classes: ClassesType
}) => {
  const {
    PostsList2, ContentItemBody, Loading, AddPostsToTag, Error404, Typography,
    PermanentRedirect, HeadTags, UsersNameDisplay, TagFlagItem, TagDiscussionSection,
    TagPageButtonRow, ToCColumn, SubscribeButton, CloudinaryImage2, TagIntroSequence,
    TagTableOfContents, TagVersionHistoryButton, ContentStyles, CommentsListCondensed,
  } = Components;
  const currentUser = useCurrentUser();
  const { query, params: { slug } } = useLocation();
  
  // Support URLs with ?version=1.2.3 or with ?revision=1.2.3 (we were previously inconsistent, ?version is now preferred)
  const { version: queryVersion, revision: queryRevision } = query;
  const revision = queryVersion ?? queryRevision ?? null;
  
  const contributorsLimit = 7;
  const { tag, loading: loadingTag } = useTagBySlug(slug, revision ? "TagPageWithRevisionFragment" : "TagPageFragment", {
    extraVariables: revision ? {
      version: 'String',
      contributorsLimit: 'Int',
    } : {
      contributorsLimit: 'Int',
    },
    extraVariablesValues: revision ? {
      version: revision,
      contributorsLimit,
    } : {
      contributorsLimit,
    },
  });
  
  const [truncated, setTruncated] = useState(true)
  const [editing, setEditing] = useState(!!query.edit)
  const [hoveredContributorId, setHoveredContributorId] = useState<string|null>(null);
  const { captureEvent } =  useTracking()
  const client = useApolloClient()

  const multiTerms: AnyBecauseTodo = {
    allPages: {view: "allPagesByNewest"},
    myPages: {view: "userTags", userId: currentUser?._id},
    //tagFlagId handled as default case below
  }

  const { results: otherTagsWithNavigation } = useMulti({
    terms: ["allPages", "myPages"].includes(query.focus) ? multiTerms[query.focus] : {view: "tagsByTagFlag", tagFlagId: query.focus},
    collectionName: "Tags",
    fragmentName: 'TagWithFlagsFragment',
    limit: 1500,
    skip: !query.flagId
  })
  
  useOnSearchHotkey(() => setTruncated(false));

  const tagPositionInList = otherTagsWithNavigation?.findIndex(tagInList => tag?._id === tagInList._id);
  // We have to handle updates to the listPosition explicitly, since we have to deal with three cases
  // 1. Initially the listPosition is -1 because we don't have a list at all yet
  // 2. Then we have the real position
  // 3. Then we remove the tagFlag, we still want it to have the right next button
  const [nextTagPosition, setNextTagPosition] = useState<number | null>(null);
  useEffect(() => {
    // Initial list position setting
    if (tagPositionInList && tagPositionInList >= 0) {
      setNextTagPosition(tagPositionInList + 1)
    }
    if (nextTagPosition !== null && tagPositionInList && tagPositionInList < 0) {
      // Here we want to decrement the list positions by one, because we removed the original tag and so
      // all the indices are moved to the next
      setNextTagPosition(nextTagPosition => (nextTagPosition || 1) - 1)
    }
    //eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tagPositionInList])
  const nextTag = otherTagsWithNavigation && (nextTagPosition !== null && nextTagPosition >= 0) && otherTagsWithNavigation[nextTagPosition]
  
  const expandAll = useCallback(() => {
    setTruncated(false)
  }, []);

  const onHoverContributor = useCallback((userId: string) => {
    setHoveredContributorId(userId);
  }, []);
  
  if (loadingTag)
    return <Loading/>
  if (!tag)
    return <Error404/>
  // If the slug in our URL is not the same as the slug on the tag, redirect to the canonical slug page
  if (tag.oldSlugs?.filter(slug => slug !== tag.slug)?.includes(slug)) {
    return <PermanentRedirect url={tagGetUrl(tag)} />
  }
  if (editing && !tagUserHasSufficientKarma(currentUser, "edit")) {
    throw new Error(`Sorry, you cannot edit ${taggingNamePluralSetting.get()} without ${tagMinimumKarmaPermissions.edit} or more karma.`)
  }

  // if no sort order was selected, try to use the tag page's default sort order for posts
  if (query.sortedBy || tag.postsDefaultSortOrder) {
    query.sortedBy = query.sortedBy || tag.postsDefaultSortOrder
  }

  const terms = {
    ...tagPostTerms(tag, query),
    limit: 15
  }

  const clickReadMore = () => {
    setTruncated(false)
    captureEvent("readMoreClicked", {tagId: tag._id, tagName: tag.name, pageSectionContext: "wikiSection"})
  }

  const htmlWithAnchors = tag.tableOfContents?.html ?? tag.description?.html ?? "";
  let description = htmlWithAnchors;
  // EA Forum wants to truncate much less than LW
  if (isFriendlyUI) {
    description = truncated
      ? truncateTagDescription(htmlWithAnchors, tag.descriptionTruncationCount)
      : htmlWithAnchors;
  } else {
    description = (truncated && !tag.wikiOnly)
    ? truncate(htmlWithAnchors, tag.descriptionTruncationCount || 4, "paragraphs", "<span>...<p><a>(Read More)</a></p></span>")
    : htmlWithAnchors
  }

  const headTagDescription = tag.description?.plaintextDescription || `All posts related to ${tag.name}, sorted by relevance`
  
  const tagFlagItemType: AnyBecauseTodo = {
    allPages: "allPages",
    myPages: "userPages"
  }
  
  return <AnalyticsContext
    pageContext='tagPage'
    tagName={tag.name}
    tagId={tag._id}
    sortedBy={query.sortedBy || "relevance"}
    limit={terms.limit}
  >
    <HeadTags
      description={headTagDescription}
      structuredData={getTagStructuredData(tag)}
      noIndex={tag.noindex}
    />
    {hoveredContributorId && <style>
      {`.by_${hoveredContributorId} {background: rgba(95, 155, 101, 0.35);}`}
    </style>}
    {tag.bannerImageId && <div className={classes.imageContainer}>
      <CloudinaryImage2
        publicId={tag.bannerImageId}
        height={300}
        fullWidthHeader
      />
    </div>}
    <div className={tag.bannerImageId ? classes.rootGivenImage : ''}>
      <ToCColumn
        tableOfContents={
          <TagTableOfContents
            tag={tag} expandAll={expandAll} showContributors={true}
            onHoverContributor={onHoverContributor}
          />
        }
        header={<div className={classNames(classes.header,classes.centralColumn)}>
          {query.flagId && <span>
            <Link to={`/tags/dashboard?focus=${query.flagId}`}>
              <TagFlagItem 
                itemType={["allPages", "myPages"].includes(query.flagId) ? tagFlagItemType[query.flagId] : "tagFlagId"}
                documentId={query.flagId}
              />
            </Link>
            {nextTag && <span onClick={() => setEditing(true)}><Link
              className={classes.nextLink}
              to={tagGetUrl(nextTag, {flagId: query.flagId, edit: true})}>
                Next Tag ({nextTag.name})
            </Link></span>}
          </span>}
          <div className={classes.titleRow}>
            <Typography variant="display3" className={classes.title}>
              {tag.deleted ? "[Deleted] " : ""}{tag.name}
            </Typography>
            <TagPageButtonRow tag={tag} editing={editing} setEditing={setEditing} className={classNames(classes.editMenu, classes.mobileButtonRow)} />
            {!tag.wikiOnly && !editing && userHasNewTagSubscriptions(currentUser) &&
              <SubscribeButton
                tag={tag}
                className={classes.notifyMeButton}
                subscribeMessage="Subscribe"
                unsubscribeMessage="Subscribed"
                subscriptionType={subscriptionTypes.newTagPosts}
              />
            }
          </div>
          <TagPageButtonRow tag={tag} editing={editing} setEditing={setEditing} className={classNames(classes.editMenu, classes.nonMobileButtonRow)} />
        </div>}
      >
        {(tag.parentTag || tag.subTags.length) ?
        <div className={classNames(classes.subHeading,classes.centralColumn)}>
          <div className={classes.subHeadingInner}>
            {tag.parentTag && <div className={classes.relatedTag}>Parent {taggingNameCapitalSetting.get()}: <Link className={classes.relatedTagLink} to={tagGetUrl(tag.parentTag)}>{tag.parentTag.name}</Link></div>}
            {/* For subtags it would be better to:
                 - put them at the bottom of the page
                 - truncate the list
                for our first use case we only need a small number of subtags though, so I'm leaving it for now
             */}
            {tag.subTags.length ? <div className={classes.relatedTag}><span>Sub-{tag.subTags.length > 1 ? taggingNamePluralCapitalSetting.get() : taggingNameCapitalSetting.get()}:&nbsp;{
                tag.subTags.map((subTag, idx) => {
                return <Fragment key={idx}>
                  <Link className={classes.relatedTagLink} to={tagGetUrl(subTag)}>{subTag.name}</Link>
                  {idx < tag.subTags.length - 1 ? <>,&nbsp;</>: <></>}
                </Fragment>
              })}</span>
            </div> : <></>}
          </div>
        </div>: <></>}
        <div className={classNames(classes.wikiSection,classes.centralColumn)}>
          <AnalyticsContext pageSectionContext="wikiSection">
            { revision && tag.description && (tag.description as TagRevisionFragment_description).user && <div className={classes.pastRevisionNotice}>
              You are viewing revision {tag.description.version}, last edited by <UsersNameDisplay user={(tag.description as TagRevisionFragment_description).user}/>
            </div>}
            {editing ? <div>
              <EditTagForm
                tag={tag}
                successCallback={ async () => {
                  setEditing(false)
                  await client.resetStore()
                }}
                cancelCallback={() => setEditing(false)}
              />
              <TagVersionHistoryButton tagId={tag._id} />
            </div> :
            <div onClick={clickReadMore}>
              <ContentStyles contentType="tag">
                <ContentItemBody
                  dangerouslySetInnerHTML={{__html: description||""}}
                  description={`tag ${tag.name}`}
                  className={classes.description}
                />
              </ContentStyles>
            </div>}
          </AnalyticsContext>
        </div>
        <div className={classes.centralColumn}>
          {editing && <TagDiscussionSection
            key={tag._id}
            tag={tag}
          />}
          {tag.sequence && <TagIntroSequence tag={tag} />}
          {!tag.wikiOnly && <>
            <AnalyticsContext pageSectionContext="tagsSection">
              <PostsListHeading tag={tag} query={query} classes={classes} />
              <PostsList2
                terms={terms}
                enableTotal
                tagId={tag._id}
                itemsPerPage={200}
              >
                <AddPostsToTag tag={tag} />
              </PostsList2>
            </AnalyticsContext>
            <DeferRender ssr={false}>
              <AnalyticsContext pageSectionContext="quickTakesSection">
                <CommentsListCondensed
                  label="Quick takes"
                  terms={{
                    view: "tagSubforumComments" as const,
                    tagId: tag._id,
                    sortBy: 'new',
                  }}
                  initialLimit={8}
                  itemsPerPage={20}
                  showTotal
                  hideTag
                />
              </AnalyticsContext>
            </DeferRender>
          </>}
        </div>
      </ToCColumn>
    </div>
  </AnalyticsContext>
}

const TagPageComponent = registerComponent("TagPage", TagPage, {styles});

declare global {
  interface ComponentTypes {
    TagPage: typeof TagPageComponent
  }
}

1	import { useApolloClient } from "@apollo/client";	5✔
2	import classNames from 'classnames';	1✔
3	import React, { FC, Fragment, useCallback, useEffect, useState } from 'react';	1✔
4	import { AnalyticsContext, useTracking } from "../../lib/analyticsEvents";	1✔
5	import { userHasNewTagSubscriptions } from "../../lib/betas";	1✔
6	import { subscriptionTypes } from '../../lib/collections/subscriptions/schema';	1✔
7	import { tagGetUrl, tagMinimumKarmaPermissions, tagUserHasSufficientKarma } from '../../lib/collections/tags/helpers';	1✔
8	import { useMulti } from '../../lib/crud/withMulti';	1✔
9	import { truncate } from '../../lib/editor/ellipsize';	1✔
10	import { Link } from '../../lib/reactRouterWrapper';	1✔
11	import { useLocation } from '../../lib/routeUtil';	1✔
12	import { useOnSearchHotkey } from '../common/withGlobalKeydown';	1✔
13	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
14	import { useCurrentUser } from '../common/withUser';	1✔
15	import { MAX_COLUMN_WIDTH } from '../posts/PostsPage/PostsPage';	1✔
16	import { EditTagForm } from './EditTagPage';	1✔
17	import { useTagBySlug } from './useTag';	1✔
18	import { taggingNameCapitalSetting, taggingNamePluralCapitalSetting, taggingNamePluralSetting } from '../../lib/instanceSettings';	1✔
19	import truncateTagDescription from "../../lib/utils/truncateTagDescription";	1✔
20	import { getTagStructuredData } from "./TagPageRouter";	1✔
21	import { HEADER_HEIGHT } from "../common/Header";	1✔
22	import { isFriendlyUI } from "../../themes/forumTheme";	1✔
23	import DeferRender from "../common/DeferRender";	1✔
24
25	export const tagPageHeaderStyles = (theme: ThemeType) => ({	3✔
26	postListMeta: {
27	display: "flex",
28	alignItems: "baseline",
29	marginBottom: 8,
30	},
31	relevance: {
32	fontFamily: theme.palette.fonts.sansSerifStack,
33	color: theme.palette.grey[600],
34	fontWeight: 500,
35	textAlign: "right",
36	flexGrow: 1,
37	marginRight: 8,
38	},
39	});
40
41	// Also used in TagCompareRevisions, TagDiscussionPage
42	export const styles = (theme: ThemeType): JssStyles => ({	2✔
43	rootGivenImage: {
44	marginTop: 185,
45	[theme.breakpoints.down('sm')]: {
46	marginTop: 130,
47	},
48	},
49	imageContainer: {
50	width: '100%',
51	'& > picture > img': {
52	height: 300,
53	objectFit: 'cover',
54	width: '100%',
55	},
56	position: 'absolute',
57	top: HEADER_HEIGHT,
58	[theme.breakpoints.down('sm')]: {
59	width: 'unset',
60	'& > picture > img': {
61	height: 200,
62	width: '100%',
63	},
64	left: -4,
65	right: -4,
66	},
67	},
68	centralColumn: {
69	marginLeft: "auto",
70	marginRight: "auto",
71	maxWidth: MAX_COLUMN_WIDTH,
72	},
73	header: {
74	paddingTop: 19,
75	paddingBottom: 5,
76	paddingLeft: 42,
77	paddingRight: 42,
78	background: theme.palette.panelBackground.default,
79	borderTopLeftRadius: theme.borderRadius.default,
80	borderTopRightRadius: theme.borderRadius.default,
81	},
82	titleRow: {
83	[theme.breakpoints.up('sm')]: {
84	display: 'flex',
85	justifyContent: 'space-between',
86	}
87	},
88	title: {
89	...theme.typography[isFriendlyUI ? "display2" : "display3"],	2!
90	...theme.typography[isFriendlyUI ? "headerStyle" : "commentStyle"],	2!
91	marginTop: 0,
92	fontWeight: isFriendlyUI ? 700 : 600,	2!
93	...theme.typography.smallCaps,
94	},
95	notifyMeButton: {
96	[theme.breakpoints.down('xs')]: {
97	marginTop: 6,
98	},
99	},
100	nonMobileButtonRow: {
101	[theme.breakpoints.down('xs')]: {
102	// Ensure this takes priority over the properties in TagPageButtonRow
103	display: 'none !important',
104	},
105	},
106	mobileButtonRow: {
107	[theme.breakpoints.up('sm')]: {
108	display: 'none !important',
109	},
110	},
111	editMenu: {
112	[theme.breakpoints.down('xs')]: {
113	marginTop: 16,
114	marginBottom: 8,
115	},
116	},
117	wikiSection: {
118	paddingTop: 5,
119	paddingLeft: 42,
120	paddingRight: 42,
121	paddingBottom: 12,
122	marginBottom: 24,
123	background: theme.palette.panelBackground.default,
124	borderBottomLeftRadius: theme.borderRadius.default,
125	borderBottomRightRadius: theme.borderRadius.default,
126	},
127	subHeading: {
128	paddingLeft: 42,
129	paddingRight: 42,
130	marginTop: -2,
131	background: theme.palette.panelBackground.default,
132	...theme.typography.body2,
133	...theme.typography.postStyle,
134	},
135	subHeadingInner: {
136	paddingTop: 2,
137	paddingBottom: 2,
138	borderTop: theme.palette.border.extraFaint,
139	borderBottom: theme.palette.border.extraFaint,
140	},
141	relatedTag : {
142	display: '-webkit-box',
143	"-webkit-line-clamp": 2,
144	"-webkit-box-orient": 'vertical',
145	overflow: 'hidden',
146	fontFamily: isFriendlyUI ? theme.palette.fonts.sansSerifStack : undefined,	2!
147	},
148	relatedTagLink : {
149	color: theme.palette.lwTertiary.dark
150	},
151	tagHeader: {
152	display: "flex",
153	justifyContent: "space-between",
154	alignItems: "center",
155	paddingBottom: 8,
156	...theme.typography.body2,
157	...theme.typography.commentStyle,
158	},
159	postsTaggedTitle: {
160	color: theme.palette.grey[600]
161	},
162	pastRevisionNotice: {
163	...theme.typography.commentStyle,
164	fontStyle: 'italic'
165	},
166	nextLink: {
167	...theme.typography.commentStyle
168	},
169	...tagPageHeaderStyles(theme),
170	});
171
172	export const tagPostTerms = (tag: Pick<TagBasicInfo, "_id" \| "name"> \| null, query: any) => {	1✔
173	if (!tag) return	×
174	return ({	×
175	...query,
176	filterSettings: {tags:[{tagId: tag._id, tagName: tag.name, filterMode: "Required"}]},
177	view: "tagRelevance",
178	tagId: tag._id,
179	})
180	}
181
182	const PostsListHeading: FC<{
183	tag: TagPageFragment\|TagPageWithRevisionFragment,
184	query: Record<string, string>,
185	classes: ClassesType,
186	}> = ({tag, query, classes}) => {	1✔
UNCOV 187	const {SectionTitle, PostsListSortDropdown} = Components;	×
UNCOV 188	if (isFriendlyUI) {	×
UNCOV 189	return (	×
190	<>
191	<SectionTitle title={`Posts tagged ${tag.name}`} />
192	<div className={classes.postListMeta}>
193	<PostsListSortDropdown value={query.sortedBy \|\| "relevance"} />	×
194	<div className={classes.relevance}>Relevance</div>
195	</div>
196	</>
197	);
198	}
UNCOV 199	return (	×
200	<div className={classes.tagHeader}>
201	<div className={classes.postsTaggedTitle}>Posts tagged <em>{tag.name}</em></div>
202	<PostsListSortDropdown value={query.sortedBy \|\| "relevance"}/>	×
203	</div>
204	);
205	}
206
207	const TagPage = ({classes}: {	1✔
208	classes: ClassesType
209	}) => {
210	const {
211	PostsList2, ContentItemBody, Loading, AddPostsToTag, Error404, Typography,
212	PermanentRedirect, HeadTags, UsersNameDisplay, TagFlagItem, TagDiscussionSection,
213	TagPageButtonRow, ToCColumn, SubscribeButton, CloudinaryImage2, TagIntroSequence,
214	TagTableOfContents, TagVersionHistoryButton, ContentStyles, CommentsListCondensed,
UNCOV 215	} = Components;	×
UNCOV 216	const currentUser = useCurrentUser();	×
UNCOV 217	const { query, params: { slug } } = useLocation();	×
218
219	// Support URLs with ?version=1.2.3 or with ?revision=1.2.3 (we were previously inconsistent, ?version is now preferred)
UNCOV 220	const { version: queryVersion, revision: queryRevision } = query;	×
UNCOV 221	const revision = queryVersion ?? queryRevision ?? null;	×
222
UNCOV 223	const contributorsLimit = 7;	×
UNCOV 224	const { tag, loading: loadingTag } = useTagBySlug(slug, revision ? "TagPageWithRevisionFragment" : "TagPageFragment", {	×
225	extraVariables: revision ? {	×
226	version: 'String',
227	contributorsLimit: 'Int',
228	} : {
229	contributorsLimit: 'Int',
230	},
231	extraVariablesValues: revision ? {	×
232	version: revision,
233	contributorsLimit,
234	} : {
235	contributorsLimit,
236	},
237	});
238
UNCOV 239	const [truncated, setTruncated] = useState(true)	×
UNCOV 240	const [editing, setEditing] = useState(!!query.edit)	×
UNCOV 241	const [hoveredContributorId, setHoveredContributorId] = useState<string\|null>(null);	×
UNCOV 242	const { captureEvent } = useTracking()	×
UNCOV 243	const client = useApolloClient()	×
244
UNCOV 245	const multiTerms: AnyBecauseTodo = {	×
246	allPages: {view: "allPagesByNewest"},
247	myPages: {view: "userTags", userId: currentUser?._id},	×
248	//tagFlagId handled as default case below
249	}
250
251	const { results: otherTagsWithNavigation } = useMulti({	×
252	terms: ["allPages", "myPages"].includes(query.focus) ? multiTerms[query.focus] : {view: "tagsByTagFlag", tagFlagId: query.focus},	×
253	collectionName: "Tags",
254	fragmentName: 'TagWithFlagsFragment',
255	limit: 1500,
256	skip: !query.flagId
257	})
258
UNCOV 259	useOnSearchHotkey(() => setTruncated(false));	×
260
UNCOV 261	const tagPositionInList = otherTagsWithNavigation?.findIndex(tagInList => tag?._id === tagInList._id);	×
262	// We have to handle updates to the listPosition explicitly, since we have to deal with three cases
263	// 1. Initially the listPosition is -1 because we don't have a list at all yet
264	// 2. Then we have the real position
265	// 3. Then we remove the tagFlag, we still want it to have the right next button
UNCOV 266	const [nextTagPosition, setNextTagPosition] = useState<number \| null>(null);	×
UNCOV 267	useEffect(() => {	×
268	// Initial list position setting
UNCOV 269	if (tagPositionInList && tagPositionInList >= 0) {	×
270	setNextTagPosition(tagPositionInList + 1)	×
271	}
272	if (nextTagPosition !== null && tagPositionInList && tagPositionInList < 0) {	×
273	// Here we want to decrement the list positions by one, because we removed the original tag and so
274	// all the indices are moved to the next
UNCOV 275	setNextTagPosition(nextTagPosition => (nextTagPosition \|\| 1) - 1)	×
276	}
277	//eslint-disable-next-line react-hooks/exhaustive-deps
278	}, [tagPositionInList])
UNCOV 279	const nextTag = otherTagsWithNavigation && (nextTagPosition !== null && nextTagPosition >= 0) && otherTagsWithNavigation[nextTagPosition]	×
280
281	const expandAll = useCallback(() => {	×
UNCOV 282	setTruncated(false)	×
283	}, []);
284
UNCOV 285	const onHoverContributor = useCallback((userId: string) => {	×
286	setHoveredContributorId(userId);	×
287	}, []);
288
UNCOV 289	if (loadingTag)	×
290	return <Loading/>	×
UNCOV 291	if (!tag)	×
292	return <Error404/>	×
293	// If the slug in our URL is not the same as the slug on the tag, redirect to the canonical slug page
UNCOV 294	if (tag.oldSlugs?.filter(slug => slug !== tag.slug)?.includes(slug)) {	×
UNCOV 295	return <PermanentRedirect url={tagGetUrl(tag)} />	×
296	}
297	if (editing && !tagUserHasSufficientKarma(currentUser, "edit")) {	×
UNCOV 298	throw new Error(`Sorry, you cannot edit ${taggingNamePluralSetting.get()} without ${tagMinimumKarmaPermissions.edit} or more karma.`)	×
299	}
300
301	// if no sort order was selected, try to use the tag page's default sort order for posts
302	if (query.sortedBy \|\| tag.postsDefaultSortOrder) {	×
303	query.sortedBy = query.sortedBy \|\| tag.postsDefaultSortOrder	×
304	}
305
306	const terms = {	×
307	...tagPostTerms(tag, query),
308	limit: 15
309	}
310
UNCOV 311	const clickReadMore = () => {	×
UNCOV 312	setTruncated(false)	×
313	captureEvent("readMoreClicked", {tagId: tag._id, tagName: tag.name, pageSectionContext: "wikiSection"})	×
314	}
315
UNCOV 316	const htmlWithAnchors = tag.tableOfContents?.html ?? tag.description?.html ?? "";	×
317	let description = htmlWithAnchors;	×
318	// EA Forum wants to truncate much less than LW
UNCOV 319	if (isFriendlyUI) {	×
UNCOV 320	description = truncated	×
321	? truncateTagDescription(htmlWithAnchors, tag.descriptionTruncationCount)
322	: htmlWithAnchors;
323	} else {
324	description = (truncated && !tag.wikiOnly)	×
325	? truncate(htmlWithAnchors, tag.descriptionTruncationCount \|\| 4, "paragraphs", "<span>...<p><a>(Read More)</a></p></span>")	×
326	: htmlWithAnchors
327	}
328
UNCOV 329	const headTagDescription = tag.description?.plaintextDescription \|\| `All posts related to ${tag.name}, sorted by relevance`	×
330
331	const tagFlagItemType: AnyBecauseTodo = {	×
332	allPages: "allPages",
333	myPages: "userPages"
334	}
335
UNCOV 336	return <AnalyticsContext	×
337	pageContext='tagPage'
338	tagName={tag.name}
339	tagId={tag._id}
340	sortedBy={query.sortedBy \|\| "relevance"}	×
341	limit={terms.limit}
342	>
343	<HeadTags
344	description={headTagDescription}
345	structuredData={getTagStructuredData(tag)}
346	noIndex={tag.noindex}
347	/>
348	{hoveredContributorId && <style>	×
349	{`.by_${hoveredContributorId} {background: rgba(95, 155, 101, 0.35);}`}
350	</style>}
351	{tag.bannerImageId && <div className={classes.imageContainer}>	×
352	<CloudinaryImage2
353	publicId={tag.bannerImageId}
354	height={300}
355	fullWidthHeader
356	/>
357	</div>}
358	<div className={tag.bannerImageId ? classes.rootGivenImage : ''}>	×
359	<ToCColumn
360	tableOfContents={
361	<TagTableOfContents
362	tag={tag} expandAll={expandAll} showContributors={true}
363	onHoverContributor={onHoverContributor}
364	/>
365	}
366	header={<div className={classNames(classes.header,classes.centralColumn)}>
367	{query.flagId && <span>	×
368	<Link to={`/tags/dashboard?focus=${query.flagId}`}>
369	<TagFlagItem
370	itemType={["allPages", "myPages"].includes(query.flagId) ? tagFlagItemType[query.flagId] : "tagFlagId"}	×
371	documentId={query.flagId}
372	/>
373	</Link>
UNCOV 374	{nextTag && <span onClick={() => setEditing(true)}><Link	×
375	className={classes.nextLink}
376	to={tagGetUrl(nextTag, {flagId: query.flagId, edit: true})}>
377	Next Tag ({nextTag.name})
378	</Link></span>}
379	</span>}
380	<div className={classes.titleRow}>
381	<Typography variant="display3" className={classes.title}>
382	{tag.deleted ? "[Deleted] " : ""}{tag.name}	×
383	</Typography>
384	<TagPageButtonRow tag={tag} editing={editing} setEditing={setEditing} className={classNames(classes.editMenu, classes.mobileButtonRow)} />
385	{!tag.wikiOnly && !editing && userHasNewTagSubscriptions(currentUser) &&	×
386	<SubscribeButton
387	tag={tag}
388	className={classes.notifyMeButton}
389	subscribeMessage="Subscribe"
390	unsubscribeMessage="Subscribed"
391	subscriptionType={subscriptionTypes.newTagPosts}
392	/>
393	}
394	</div>
395	<TagPageButtonRow tag={tag} editing={editing} setEditing={setEditing} className={classNames(classes.editMenu, classes.nonMobileButtonRow)} />
396	</div>}
397	>
398	{(tag.parentTag \|\| tag.subTags.length) ?	×
399	<div className={classNames(classes.subHeading,classes.centralColumn)}>	×
400	<div className={classes.subHeadingInner}>
401	{tag.parentTag && <div className={classes.relatedTag}>Parent {taggingNameCapitalSetting.get()}: <Link className={classes.relatedTagLink} to={tagGetUrl(tag.parentTag)}>{tag.parentTag.name}</Link></div>}	×
402	{/* For subtags it would be better to:
403	- put them at the bottom of the page
404	- truncate the list
405	for our first use case we only need a small number of subtags though, so I'm leaving it for now
406	*/}
407	{tag.subTags.length ? <div className={classes.relatedTag}><span>Sub-{tag.subTags.length > 1 ? taggingNamePluralCapitalSetting.get() : taggingNameCapitalSetting.get()}: {	×
408	tag.subTags.map((subTag, idx) => {
UNCOV 409	return <Fragment key={idx}>	×
410	<Link className={classes.relatedTagLink} to={tagGetUrl(subTag)}>{subTag.name}</Link>
411	{idx < tag.subTags.length - 1 ? <>, </>: <></>}	×
412	</Fragment>
413	})}</span>
414	</div> : <></>}
415	</div>
416	</div>: <></>}
417	<div className={classNames(classes.wikiSection,classes.centralColumn)}>
418	<AnalyticsContext pageSectionContext="wikiSection">
419	{ revision && tag.description && (tag.description as TagRevisionFragment_description).user && <div className={classes.pastRevisionNotice}>	×
420	You are viewing revision {tag.description.version}, last edited by <UsersNameDisplay user={(tag.description as TagRevisionFragment_description).user}/>
421	</div>}
422	{editing ? <div>	×
423	<EditTagForm
424	tag={tag}
425	successCallback={ async () => {
UNCOV 426	setEditing(false)	×
UNCOV 427	await client.resetStore()	×
428	}}
UNCOV 429	cancelCallback={() => setEditing(false)}	×
430	/>
431	<TagVersionHistoryButton tagId={tag._id} />
432	</div> :
433	<div onClick={clickReadMore}>
434	<ContentStyles contentType="tag">
435	<ContentItemBody
436	dangerouslySetInnerHTML={{__html: description\|\|""}}	×
437	description={`tag ${tag.name}`}
438	className={classes.description}
439	/>
440	</ContentStyles>
441	</div>}
442	</AnalyticsContext>
443	</div>
444	<div className={classes.centralColumn}>
445	{editing && <TagDiscussionSection	×
446	key={tag._id}
447	tag={tag}
448	/>}
449	{tag.sequence && <TagIntroSequence tag={tag} />}	×
450	{!tag.wikiOnly && <>	×
451	<AnalyticsContext pageSectionContext="tagsSection">
452	<PostsListHeading tag={tag} query={query} classes={classes} />
453	<PostsList2
454	terms={terms}
455	enableTotal
456	tagId={tag._id}
457	itemsPerPage={200}
458	>
459	<AddPostsToTag tag={tag} />
460	</PostsList2>
461	</AnalyticsContext>
462	<DeferRender ssr={false}>
463	<AnalyticsContext pageSectionContext="quickTakesSection">
464	<CommentsListCondensed
465	label="Quick takes"
466	terms={{
467	view: "tagSubforumComments" as const,
468	tagId: tag._id,
469	sortBy: 'new',
470	}}
471	initialLimit={8}
472	itemsPerPage={20}
473	showTotal
474	hideTag
475	/>
476	</AnalyticsContext>
477	</DeferRender>
478	</>}
479	</div>
480	</ToCColumn>
481	</div>
482	</AnalyticsContext>
483	}
484
485	const TagPageComponent = registerComponent("TagPage", TagPage, {styles});	1✔
486
487	declare global {
488	interface ComponentTypes {
489	TagPage: typeof TagPageComponent
490	}
491	}

ForumMagnum / ForumMagnum / 10689918928

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