9515693249

Committed 14 Jun 2024 11:56AM UTC coverage: 31.914% (+0.06%) from 31.855%

Build # 9515693249

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9406 from ForumMagnum/master

[EA] Deploy first batch of people directory updates

Run Details

4823 of 39418 branches covered (12.24%)

Branch coverage included in aggregate %.

53 of 116 new or added lines in 22 files covered. (45.69%)

3 existing lines in 3 files now uncovered.

28062 of 63625 relevant lines covered (44.11%)

180.0 hits per line

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

9.71

/packages/lesswrong/components/users/FriendlyUsersProfile.tsx

import React, { useEffect, useState } from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { useMulti } from '../../lib/crud/withMulti';
import { useCurrentUser } from '../common/withUser';
import { useLocation } from '../../lib/routeUtil';
import { Link } from '../../lib/reactRouterWrapper';
import { AnalyticsContext } from '../../lib/analyticsEvents';
import { userCanDo } from '../../lib/vulcan-users/permissions';
import { userCanEditUser, userGetDisplayName, userGetProfileUrlFromSlug } from '../../lib/collections/users/helpers';
import { getBrowserLocalStorage } from '../editor/localStorageHandlers';
import {
  siteNameWithArticleSetting,
  taggingNameIsSet,
  taggingNameCapitalSetting,
  taglineSetting,
  isEAForum,
} from '../../lib/instanceSettings'
import { DEFAULT_LOW_KARMA_THRESHOLD } from '../../lib/collections/posts/views'
import { SORT_ORDER_OPTIONS } from '../../lib/collections/posts/dropdownOptions';
import { PROGRAM_PARTICIPATION } from '../../lib/collections/users/schema';
import { eaUsersProfileSectionStyles, UserProfileTabType } from '../ea-forum/users/modules/EAUsersProfileTabbedSection';
import { getUserFromResults } from './UsersProfile';
import InfoIcon from '@material-ui/icons/Info'
import DescriptionIcon from '@material-ui/icons/Description'
import LibraryAddIcon from '@material-ui/icons/LibraryAdd'
import Button from '@material-ui/core/Button';
import { nofollowKarmaThreshold } from '../../lib/publicSettings';
import classNames from 'classnames';
import { getUserStructuredData } from './UsersSingle';
import { SHOW_NEW_SEQUENCE_KARMA_THRESHOLD } from '../../lib/collections/sequences/permissions';

const styles = (theme: ThemeType) => ({
  section: {
    ...eaUsersProfileSectionStyles(theme)
  },
  mainSection: {
    [theme.breakpoints.down('sm')]: {
      borderTopLeftRadius: 0,
      borderTopRightRadius: 0,
    },
  },
  sunshineSection: {
    marginBottom: 24
  },
  sectionHeadingRow: {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: 24
  },
  sectionHeading: {
    display: 'inline-flex',
    columnGap: 10,
    fontSize: 20,
    lineHeight: '30px',
    fontWeight: '600',
    paddingBottom: 3,
    borderBottom: `3px solid ${theme.palette.primary.main}`,
    fontFamily: theme.palette.fonts.sansSerifStack,
    [theme.breakpoints.down('xs')]: {
      columnGap: 8,
      fontSize: 18,
      lineHeight: '28px',
    }
  },
  sectionHeadingCount: {
    fontWeight: '450',
    color: theme.palette.grey[600],
    fontSize: 13,
    [theme.breakpoints.down('xs')]: {
      fontSize: 12,
    }
  },
  sectionSubHeadingRow: {
    display: 'flex',
    justifyContent: 'space-between',
    marginTop: 26,
    marginBottom: 8
  },
  sectionSubHeading: {
    fontSize: 16,
    fontWeight: '600',
    fontFamily: theme.palette.fonts.sansSerifStack,
  },
  inactiveGroup: {
    color: theme.palette.grey[500],
    marginRight: 6,
  },
  showSectionBtn: {
    marginBottom: 24,
  },
  editProfile: {
    position: "absolute",
    top: 0,
    right: 0,
    paddingTop: "inherit",
    paddingRight: "inherit",
  },
  editProfileButtonWrapper: {
  },
  editProfileButton: {
    textTransform: "none",
    fontSize: 14,
    fontWeight: 500,
    background: theme.palette.grey[200],
    height: 40,
    "&:hover": {
      opacity: 1,
      background: theme.palette.grey[300],
    },
    "& .MuiButton-label": {
      maxHeight: "100%",
    },
  },
  username: {
    fontSize: 32,
    lineHeight: '42px',
    marginBottom: 8,
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontWeight: 500,
    overflowWrap: "break-word",
  },
  deletedUsername: {
    textDecoration: 'line-through'
  },
  accountDeletedText: {
    display: 'inline-block',
    fontSize: 16,
    lineHeight: '22px',
    fontFamily: theme.typography.fontFamily,
    fontWeight: '500',
    marginLeft: 10
  },
  roleAndOrg: {
    fontSize: 16,
  },
  btns: {
    display: 'flex',
    columnGap: 8,
    marginTop: 20,
  },
  messageBtn: {
    display: 'block',
    backgroundColor: theme.palette.buttons.alwaysPrimary,
    color: theme.palette.text.alwaysWhite,
    fontFamily: theme.typography.fontFamily,
    border: theme.palette.border.normal,
    borderColor: theme.palette.buttons.alwaysPrimary,
    borderRadius: 4,
    fontSize: 14,
    fontWeight: 500,
    padding: '8px 16px',
  },
  privateSectionIcon: {
    fontSize: 20,
    color: theme.palette.grey[500],
  },
  privateActionsRow: {
    display: 'flex',
    columnGap: 26,
    alignItems: 'baseline',
    marginBottom: 20
  },
  interests: {
    fontSize: 14,
    fontWeight: 500,
    color: theme.palette.grey[600],
    marginTop: 14,
    display: "flex",
    flexWrap: "wrap",
    alignItems: "center",
    gap: "2px",
    overflowX: "hidden",
    "& .FooterTag-root": {
      margin: "0",
    },
    "& > :first-child": {
      marginRight: 6,
    },
  },
})

const FriendlyUsersProfile = ({terms, slug, classes}: {
  terms: UsersViewTerms,
  slug: string,
  classes: ClassesType<typeof styles>,
}) => {
  const currentUser = useCurrentUser()
  const {loading, results} = useMulti({
    terms,
    collectionName: "Users",
    fragmentName: 'UsersProfile',
    enableTotal: false,
    fetchPolicy: 'cache-and-network'
  });
  const user = getUserFromResults(results)

  const { query } = useLocation()
  // track profile views in local storage
  useEffect(() => {
    const ls = getBrowserLocalStorage()
    if (currentUser && user && currentUser._id !== user._id && ls) {
      let from = query.from
      let profiles: any[] = JSON.parse(ls.getItem('lastViewedProfiles')) || []
      // if the profile user is already in the list, then remove them before re-adding them at the end
      const profileUserIndex = profiles?.findIndex(profile => profile.userId === user._id)
      if (profiles && profileUserIndex !== -1) {
        // remember where we originally saw this profile, if necessary
        from = from || profiles[profileUserIndex].from
        profiles.splice(profileUserIndex, 1)
      }

      profiles.push({userId: user._id, ...(from && {from})})
      // we only bother to save the last 10 profiles
      if (profiles.length > 10) profiles.shift()
      // save it in local storage
      ls.setItem('lastViewedProfiles', JSON.stringify(profiles))
    }
  }, [currentUser, user, query.from])

  // although both the owner and admins can see the drafts section,
  // admins need to click a button to view it (so it's not distracting)
  const [draftsSectionExpanded, setDraftsSectionExpanded] = useState(!user || (currentUser && user._id === currentUser._id))
  useEffect(() => {
    if (user) {
      setDraftsSectionExpanded(currentUser && user._id === currentUser._id)
    }
  }, [currentUser, user])

  // show/hide the "Posts" section sort/filter settings
  const [showPostSettings, setShowPostSettings] = useState(false)

  const { results: userOrganizesGroups, loadMoreProps: userOrganizesGroupsLoadMoreProps } = useMulti({
    terms: {view: 'userOrganizesGroups', userId: user?._id, limit: 300},
    collectionName: "Localgroups",
    fragmentName: 'localGroupsHomeFragment',
    enableTotal: false,
    skip: !user
  })

  // count posts here rather than using user.postCount,
  // because the latter doesn't include posts where the user is a coauthor
  const { totalCount: userPostsCount } = useMulti({
    terms: {
      view: 'userPosts',
      userId: user?._id,
      authorIsUnreviewed: currentUser?.isAdmin ? null : false,
      limit: 0
    },
    collectionName: "Posts",
    fragmentName: 'PostsMinimumInfo',
    enableTotal: true,
    skip: !user
  })

  const { SunshineNewUsersProfileInfo, SingleColumnSection, LWTooltip,
    SortButton, NewConversationButton, TagEditsByUser, LoadMore,
    PostsList2, ContentItemBody, Loading, Error404, PermanentRedirect, HeadTags,
    Typography, ContentStyles, EAUsersProfileTabbedSection, PostsListSettings,
    RecentComments, SectionButton, SequencesGridWrapper, ReportUserButton, DraftsList,
    ProfileShortform, EAUsersProfileImage, EAUsersMetaInfo, EAUsersProfileLinks,
    UserNotifyDropdown, FooterTag,
  } = Components

  if (loading) {
    return <Loading/>
  }

  if (!user || !user._id || (user.deleted && !currentUser?.isAdmin)) {
    //eslint-disable-next-line no-console
    console.error(`// missing user (_id/slug: ${slug})`);
    return <Error404/>
  }

  if (user.oldSlugs?.includes(slug) && !user.deleted) {
    return <PermanentRedirect url={userGetProfileUrlFromSlug(user.slug)} />
  }

  // Does this profile page belong to a likely-spam account?
  if (user.spamRiskScore < 0.4) {
    if (currentUser?._id === user._id) {
      // Logged-in spammer can see their own profile
    } else if (currentUser && userCanDo(currentUser, 'posts.moderate.all')) {
      // Admins and sunshines can see spammer's profile
    } else {
      // Anyone else gets a 404 here
      // eslint-disable-next-line no-console
      console.log(`Not rendering profile page for account with poor spam risk score: ${user.displayName}`);
      return <Components.Error404/>
    }
  }

  const scheduledPostsTerms: PostsViewTerms = {view: "scheduled", userId: user._id, limit: 20}
  const unlistedTerms: PostsViewTerms = {view: "unlisted", userId: user._id, limit: 20}
  const postTerms: PostsViewTerms = {view: "userPosts", ...query, userId: user._id, authorIsUnreviewed: null}

  // posts list sort settings
  const currentSorting = (query.sortedBy || query.view ||  "new") as PostSortingMode
  const currentFilter = query.filter ||  "all"
  const ownPage = currentUser?._id === user._id
  const currentShowLowKarma = (parseInt(query.karmaThreshold) !== DEFAULT_LOW_KARMA_THRESHOLD)
  const currentIncludeEvents = (query.includeEvents === 'true')
  const currentHideCommunity = (query.hideCommunity === 'true')
  postTerms.excludeEvents = !currentIncludeEvents && currentFilter !== 'events'
  postTerms.hideCommunity = currentHideCommunity

  const username = userGetDisplayName(user)
  const metaDescription = `${username}'s profile on ${siteNameWithArticleSetting.get()} — ${taglineSetting.get()}`
  const userKarma = user.karma || 0

  const privateSectionTabs: Array<UserProfileTabType> = [{
    id: 'drafts',
    label: `Drafts`,
    secondaryNode: <LWTooltip title="This section is only visible to you and site admins.">
      <InfoIcon className={classes.privateSectionIcon} />
    </LWTooltip>,
    body: <>
      <div className={classes.sectionSubHeadingRow}>
        <Typography variant="headline" className={classes.sectionSubHeading}>Draft/hidden posts</Typography>
        {ownPage && <Link to="/newPost">
          <SectionButton>
            <DescriptionIcon /> New post
          </SectionButton>
        </Link>}
      </div>
      <AnalyticsContext listContext="userPageDrafts">
        <DraftsList userId={user._id} limit={2} hideHeaderRow />
        <PostsList2 hideAuthor showDraftTag={false} terms={scheduledPostsTerms} showNoResults={false} showLoading={false} showLoadMore={false} boxShadow={false} />
        <PostsList2 hideAuthor showDraftTag={false} terms={unlistedTerms} showNoResults={false} showLoading={false} showLoadMore={false} boxShadow={false} />
      </AnalyticsContext>
      <div className={classes.sectionSubHeadingRow}>
        <Typography variant="headline" className={classes.sectionSubHeading}>Draft/hidden sequences</Typography>
        {ownPage && currentUser.karma >= SHOW_NEW_SEQUENCE_KARMA_THRESHOLD && <Link to="/sequencesnew">
          <SectionButton>
            <LibraryAddIcon /> New sequence
          </SectionButton>
        </Link>}
      </div>
      <SequencesGridWrapper terms={{view: "userProfilePrivate", userId: user._id, limit: 3}} showLoadMore={true} />
    </>
  }]
  if (userOrganizesGroups?.length) {
    privateSectionTabs.push({
      id: 'localgroups',
      label: 'Organizer of',
      count: userOrganizesGroups.length,
      secondaryNode: <LWTooltip title="This section is only visible to you and site admins.">
        <InfoIcon className={classes.privateSectionIcon} />
      </LWTooltip>,
      body: <>
        <ContentStyles contentType="post">
          {userOrganizesGroups.map(group => {
            return <div key={group._id}>
              {group.inactive && <span className={classes.inactiveGroup}>[Inactive]</span>}
              <Link to={`/groups/${group._id}`}>
                {group.name}
              </Link>
            </div>
          })}
        </ContentStyles>
        <LoadMore {...userOrganizesGroupsLoadMoreProps} />
      </>
    })
  }

  const bioSectionTabs: Array<UserProfileTabType> = []
  if (user.biography?.html || user.howOthersCanHelpMe?.html || user.howICanHelpOthers?.html) {
    bioSectionTabs.push({
      id: 'bio',
      label: 'Bio',
      body: <>
        {user.biography?.html && <ContentStyles contentType="post">
          <ContentItemBody
            dangerouslySetInnerHTML={{__html: user.biography.html }}
            description={`user ${user._id} bio`}
            nofollow={userKarma < nofollowKarmaThreshold.get()}
          />
        </ContentStyles>}
        {user.howOthersCanHelpMe?.html && <>
          <div className={classes.sectionSubHeadingRow}>
            <Typography variant="headline" className={classes.sectionSubHeading}>How others can help me</Typography>
          </div>
          <ContentStyles contentType="post">
            <ContentItemBody dangerouslySetInnerHTML={{__html: user.howOthersCanHelpMe.html }} nofollow={userKarma < nofollowKarmaThreshold.get()}/>
          </ContentStyles>
        </>}
        {user.howICanHelpOthers?.html && <>
          <div className={classes.sectionSubHeadingRow}>
            <Typography variant="headline" className={classes.sectionSubHeading}>How I can help others</Typography>
          </div>
          <ContentStyles contentType="post">
            <ContentItemBody dangerouslySetInnerHTML={{__html: user.howICanHelpOthers.html }} nofollow={userKarma < nofollowKarmaThreshold.get()}/>
          </ContentStyles>
        </>}
      </>,
      collapsable: true
    })
  }
  if (user.organizerOfGroupIds?.length || user.programParticipation?.length) {
    bioSectionTabs.push({
      id: 'participation',
      label: 'Participation',
      count: (user.organizerOfGroupIds?.length || 0) + (user.programParticipation?.length || 0),
      body: <>
        <ContentStyles contentType="post">
          <ul>
            {user.organizerOfGroups?.map(group => {
              return <li key={group._id}>
                Organizer of <Link to={`/groups/${group._id}`}>
                  {group.name}
                </Link>
              </li>
            })}
            {user.programParticipation?.map(participation => {
              const label = PROGRAM_PARTICIPATION.find(program => program.value === participation)?.label
              if (!label) return null
              return <li key={participation}>
                {label}
              </li>
            })}
          </ul>
        </ContentStyles>
      </>
    })
  }

  const commentsSectionTabs: Array<UserProfileTabType> = []
  if (user.commentCount) {
    commentsSectionTabs.push({
      id: 'comments',
      label: 'Comments',
      count: user.commentCount,
      body: <AnalyticsContext pageSectionContext="commentsSection">
        <RecentComments
          terms={{view: 'profileRecentComments', authorIsUnreviewed: null, limit: 10, userId: user._id}}
          showPinnedOnProfile
        />
      </AnalyticsContext>
    })
  }
  if (user.tagRevisionCount) {
    commentsSectionTabs.push({
      id: 'tagRevisions',
      label: `${taggingNameIsSet.get() ? taggingNameCapitalSetting.get() : 'Wiki'} contributions`,
      count: user.tagRevisionCount,
      body: <AnalyticsContext listContext="userPageWiki">
        <TagEditsByUser userId={user._id} limit={10} />
      </AnalyticsContext>
    })
  }

  return <div>
    <HeadTags
      description={metaDescription}
      noIndex={(!userPostsCount && !user.commentCount) || user.karma <= 0 || user.noindex}
      image={user.profileImageId && `https://res.cloudinary.com/cea/image/upload/c_crop,g_custom,q_auto,f_auto/${user.profileImageId}.jpg`}
      structuredData={getUserStructuredData(user)}
      useSmallImage
    />
    <AnalyticsContext pageContext="userPage">
      <SingleColumnSection>
        <div className={classNames(classes.section, classes.mainSection)}>
          {isEAForum && userCanEditUser(currentUser, user) &&
            <div className={classes.editProfile}>
              <Button
                type="submit"
                href={`/profile/${user.slug}/edit`}
                className={classes.editProfileButton}
              >
                Edit public profile
              </Button>
            </div>
          }
          <EAUsersProfileImage user={user} />
          <Typography variant="headline" className={classNames(classes.username, {[classes.deletedUsername]: user.deleted})}>
            {username}{user.deleted && <span className={classes.accountDeletedText}>(account deleted)</span>}
          </Typography>
          {(user.jobTitle || user.organization) && <ContentStyles contentType="comment" className={classes.roleAndOrg}>
            {user.jobTitle} {user.organization ? `@ ${user.organization}` : ''}
          </ContentStyles>}
          <EAUsersMetaInfo user={user} />
          {currentUser?._id !== user._id && <div className={classes.btns}>
            <NewConversationButton
              user={user}
              currentUser={currentUser}
            >
              <a tabIndex={0} className={classes.messageBtn} data-cy="message">
                Message
              </a>
            </NewConversationButton>
            <UserNotifyDropdown user={user} />
          </div>}

          {user.profileTags?.length &&
            <div className={classes.interests}>
              <div>Interests:</div>
              {user.profileTags.map((tag) =>
                <FooterTag key={tag._id} tag={tag} neverCoreStyling hideIcon />
              )}
            </div>
          }

          <EAUsersProfileLinks user={user} />
        </div>

        {userCanDo(currentUser, 'posts.moderate.all') && <div className={classes.sunshineSection}>
          <SunshineNewUsersProfileInfo userId={user._id} />
        </div>}

        {(ownPage || currentUser?.isAdmin) && (draftsSectionExpanded ?
          <EAUsersProfileTabbedSection tabs={privateSectionTabs} /> :
          <Button color="primary"
            onClick={() => setDraftsSectionExpanded(true)}
            className={classes.showSectionBtn}
          >
            Click to view drafts
          </Button>
        )}

        <EAUsersProfileTabbedSection tabs={bioSectionTabs} />

        {!!(userPostsCount || user.postCount) && <div className={classes.section}>
          <div className={classes.sectionHeadingRow}>
            <Typography variant="headline" className={classes.sectionHeading}>
              Posts <div className={classes.sectionHeadingCount}>{(userPostsCount || user.postCount)}</div>
            </Typography>
            <SortButton onClick={() => setShowPostSettings(!showPostSettings)}
              label={`Sorted by ${ SORT_ORDER_OPTIONS[currentSorting].label }`} />
          </div>
          {showPostSettings && <PostsListSettings
            hidden={false}
            currentSorting={currentSorting}
            currentFilter={currentFilter}
            currentShowLowKarma={currentShowLowKarma}
            currentIncludeEvents={currentIncludeEvents}
            currentHideCommunity={currentHideCommunity}
          />}
          <AnalyticsContext listContext="userPagePosts">
            <ProfileShortform user={user} />
            <PostsList2 terms={postTerms} boxShadow={false} hideAuthor hideShortform />
          </AnalyticsContext>
        </div>}

        {!!user.sequenceCount && <div className={classes.section}>
          <div className={classes.sectionHeadingRow}>
            <Typography variant="headline" className={classes.sectionHeading}>
              Sequences <div className={classes.sectionHeadingCount}>{user.sequenceCount}</div>
            </Typography>
          </div>
          <SequencesGridWrapper terms={{view: "userProfile", userId: user._id, limit: 9}} showLoadMore={true} />
        </div>}

        <EAUsersProfileTabbedSection tabs={commentsSectionTabs} />
      </SingleColumnSection>

      <ReportUserButton user={user}/>
    </AnalyticsContext>
  </div>
}

const FriendlyUsersProfileComponent = registerComponent(
  'FriendlyUsersProfile', FriendlyUsersProfile, {styles}
);

declare global {
  interface ComponentTypes {
    FriendlyUsersProfile: typeof FriendlyUsersProfileComponent
  }
}

1	import React, { useEffect, useState } from 'react';	1✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
3	import { useMulti } from '../../lib/crud/withMulti';	1✔
4	import { useCurrentUser } from '../common/withUser';	1✔
5	import { useLocation } from '../../lib/routeUtil';	1✔
6	import { Link } from '../../lib/reactRouterWrapper';	1✔
7	import { AnalyticsContext } from '../../lib/analyticsEvents';	1✔
8	import { userCanDo } from '../../lib/vulcan-users/permissions';	1✔
9	import { userCanEditUser, userGetDisplayName, userGetProfileUrlFromSlug } from '../../lib/collections/users/helpers';	1✔
10	import { getBrowserLocalStorage } from '../editor/localStorageHandlers';	1✔
11	import {
12	siteNameWithArticleSetting,
13	taggingNameIsSet,
14	taggingNameCapitalSetting,
15	taglineSetting,
16	isEAForum,
17	} from '../../lib/instanceSettings'	1✔
18	import { DEFAULT_LOW_KARMA_THRESHOLD } from '../../lib/collections/posts/views'	1✔
19	import { SORT_ORDER_OPTIONS } from '../../lib/collections/posts/dropdownOptions';	1✔
20	import { PROGRAM_PARTICIPATION } from '../../lib/collections/users/schema';	1✔
21	import { eaUsersProfileSectionStyles, UserProfileTabType } from '../ea-forum/users/modules/EAUsersProfileTabbedSection';	1✔
22	import { getUserFromResults } from './UsersProfile';	1✔
23	import InfoIcon from '@material-ui/icons/Info'	1✔
24	import DescriptionIcon from '@material-ui/icons/Description'	1✔
25	import LibraryAddIcon from '@material-ui/icons/LibraryAdd'	1✔
26	import Button from '@material-ui/core/Button';	1✔
27	import { nofollowKarmaThreshold } from '../../lib/publicSettings';	1✔
28	import classNames from 'classnames';	1✔
29	import { getUserStructuredData } from './UsersSingle';	1✔
30	import { SHOW_NEW_SEQUENCE_KARMA_THRESHOLD } from '../../lib/collections/sequences/permissions';	1✔
31
32	const styles = (theme: ThemeType) => ({	1✔
33	section: {
34	...eaUsersProfileSectionStyles(theme)
35	},
36	mainSection: {
37	[theme.breakpoints.down('sm')]: {
38	borderTopLeftRadius: 0,
39	borderTopRightRadius: 0,
40	},
41	},
42	sunshineSection: {
43	marginBottom: 24
44	},
45	sectionHeadingRow: {
46	display: 'flex',
47	justifyContent: 'space-between',
48	marginBottom: 24
49	},
50	sectionHeading: {
51	display: 'inline-flex',
52	columnGap: 10,
53	fontSize: 20,
54	lineHeight: '30px',
55	fontWeight: '600',
56	paddingBottom: 3,
57	borderBottom: `3px solid ${theme.palette.primary.main}`,
58	fontFamily: theme.palette.fonts.sansSerifStack,
59	[theme.breakpoints.down('xs')]: {
60	columnGap: 8,
61	fontSize: 18,
62	lineHeight: '28px',
63	}
64	},
65	sectionHeadingCount: {
66	fontWeight: '450',
67	color: theme.palette.grey[600],
68	fontSize: 13,
69	[theme.breakpoints.down('xs')]: {
70	fontSize: 12,
71	}
72	},
73	sectionSubHeadingRow: {
74	display: 'flex',
75	justifyContent: 'space-between',
76	marginTop: 26,
77	marginBottom: 8
78	},
79	sectionSubHeading: {
80	fontSize: 16,
81	fontWeight: '600',
82	fontFamily: theme.palette.fonts.sansSerifStack,
83	},
84	inactiveGroup: {
85	color: theme.palette.grey[500],
86	marginRight: 6,
87	},
88	showSectionBtn: {
89	marginBottom: 24,
90	},
91	editProfile: {
92	position: "absolute",
93	top: 0,
94	right: 0,
95	paddingTop: "inherit",
96	paddingRight: "inherit",
97	},
98	editProfileButtonWrapper: {
99	},
100	editProfileButton: {
101	textTransform: "none",
102	fontSize: 14,
103	fontWeight: 500,
104	background: theme.palette.grey[200],
105	height: 40,
106	"&:hover": {
107	opacity: 1,
108	background: theme.palette.grey[300],
109	},
110	"& .MuiButton-label": {
111	maxHeight: "100%",
112	},
113	},
114	username: {
115	fontSize: 32,
116	lineHeight: '42px',
117	marginBottom: 8,
118	fontFamily: theme.palette.fonts.sansSerifStack,
119	fontWeight: 500,
120	overflowWrap: "break-word",
121	},
122	deletedUsername: {
123	textDecoration: 'line-through'
124	},
125	accountDeletedText: {
126	display: 'inline-block',
127	fontSize: 16,
128	lineHeight: '22px',
129	fontFamily: theme.typography.fontFamily,
130	fontWeight: '500',
131	marginLeft: 10
132	},
133	roleAndOrg: {
134	fontSize: 16,
135	},
136	btns: {
137	display: 'flex',
138	columnGap: 8,
139	marginTop: 20,
140	},
141	messageBtn: {
142	display: 'block',
143	backgroundColor: theme.palette.buttons.alwaysPrimary,
144	color: theme.palette.text.alwaysWhite,
145	fontFamily: theme.typography.fontFamily,
146	border: theme.palette.border.normal,
147	borderColor: theme.palette.buttons.alwaysPrimary,
148	borderRadius: 4,
149	fontSize: 14,
150	fontWeight: 500,
151	padding: '8px 16px',
152	},
153	privateSectionIcon: {
154	fontSize: 20,
155	color: theme.palette.grey[500],
156	},
157	privateActionsRow: {
158	display: 'flex',
159	columnGap: 26,
160	alignItems: 'baseline',
161	marginBottom: 20
162	},
163	interests: {
164	fontSize: 14,
165	fontWeight: 500,
166	color: theme.palette.grey[600],
167	marginTop: 14,
168	display: "flex",
169	flexWrap: "wrap",
170	alignItems: "center",
171	gap: "2px",
172	overflowX: "hidden",
173	"& .FooterTag-root": {
174	margin: "0",
175	},
176	"& > :first-child": {
177	marginRight: 6,
178	},
179	},
180	})
181
182	const FriendlyUsersProfile = ({terms, slug, classes}: {	1✔
183	terms: UsersViewTerms,
184	slug: string,
185	classes: ClassesType<typeof styles>,
186	}) => {
187	const currentUser = useCurrentUser()	×
188	const {loading, results} = useMulti({	×
189	terms,
190	collectionName: "Users",
191	fragmentName: 'UsersProfile',
192	enableTotal: false,
193	fetchPolicy: 'cache-and-network'
194	});
195	const user = getUserFromResults(results)	×
196
197	const { query } = useLocation()	×
198	// track profile views in local storage
199	useEffect(() => {	×
200	const ls = getBrowserLocalStorage()	×
201	if (currentUser && user && currentUser._id !== user._id && ls) {	×
202	let from = query.from	×
203	let profiles: any[] = JSON.parse(ls.getItem('lastViewedProfiles')) \|\| []	×
204	// if the profile user is already in the list, then remove them before re-adding them at the end
205	const profileUserIndex = profiles?.findIndex(profile => profile.userId === user._id)	×
206	if (profiles && profileUserIndex !== -1) {	×
207	// remember where we originally saw this profile, if necessary
208	from = from \|\| profiles[profileUserIndex].from	×
209	profiles.splice(profileUserIndex, 1)	×
210	}
211
212	profiles.push({userId: user._id, ...(from && {from})})	×
213	// we only bother to save the last 10 profiles
214	if (profiles.length > 10) profiles.shift()	×
215	// save it in local storage
216	ls.setItem('lastViewedProfiles', JSON.stringify(profiles))	×
217	}
218	}, [currentUser, user, query.from])
219
220	// although both the owner and admins can see the drafts section,
221	// admins need to click a button to view it (so it's not distracting)
222	const [draftsSectionExpanded, setDraftsSectionExpanded] = useState(!user \|\| (currentUser && user._id === currentUser._id))	×
223	useEffect(() => {	×
224	if (user) {	×
225	setDraftsSectionExpanded(currentUser && user._id === currentUser._id)	×
226	}
227	}, [currentUser, user])
228
229	// show/hide the "Posts" section sort/filter settings
230	const [showPostSettings, setShowPostSettings] = useState(false)	×
231
232	const { results: userOrganizesGroups, loadMoreProps: userOrganizesGroupsLoadMoreProps } = useMulti({	×
233	terms: {view: 'userOrganizesGroups', userId: user?._id, limit: 300},	×
234	collectionName: "Localgroups",
235	fragmentName: 'localGroupsHomeFragment',
236	enableTotal: false,
237	skip: !user
238	})
239
240	// count posts here rather than using user.postCount,
241	// because the latter doesn't include posts where the user is a coauthor
242	const { totalCount: userPostsCount } = useMulti({	×
243	terms: {
244	view: 'userPosts',
245	userId: user?._id,	×
246	authorIsUnreviewed: currentUser?.isAdmin ? null : false,	×
247	limit: 0
248	},
249	collectionName: "Posts",
250	fragmentName: 'PostsMinimumInfo',
251	enableTotal: true,
252	skip: !user
253	})
254
255	const { SunshineNewUsersProfileInfo, SingleColumnSection, LWTooltip,
256	SortButton, NewConversationButton, TagEditsByUser, LoadMore,
257	PostsList2, ContentItemBody, Loading, Error404, PermanentRedirect, HeadTags,
258	Typography, ContentStyles, EAUsersProfileTabbedSection, PostsListSettings,
259	RecentComments, SectionButton, SequencesGridWrapper, ReportUserButton, DraftsList,
260	ProfileShortform, EAUsersProfileImage, EAUsersMetaInfo, EAUsersProfileLinks,
261	UserNotifyDropdown, FooterTag,
262	} = Components	×
263
264	if (loading) {	×
265	return <Loading/>	×
266	}
267
268	if (!user \|\| !user._id \|\| (user.deleted && !currentUser?.isAdmin)) {	×
269	//eslint-disable-next-line no-console
270	console.error(`// missing user (_id/slug: ${slug})`);	×
271	return <Error404/>	×
272	}
273
274	if (user.oldSlugs?.includes(slug) && !user.deleted) {	×
275	return <PermanentRedirect url={userGetProfileUrlFromSlug(user.slug)} />	×
276	}
277
278	// Does this profile page belong to a likely-spam account?
279	if (user.spamRiskScore < 0.4) {	×
280	if (currentUser?._id === user._id) {	×
281	// Logged-in spammer can see their own profile
282	} else if (currentUser && userCanDo(currentUser, 'posts.moderate.all')) {	×
283	// Admins and sunshines can see spammer's profile
284	} else {
285	// Anyone else gets a 404 here
286	// eslint-disable-next-line no-console
287	console.log(`Not rendering profile page for account with poor spam risk score: ${user.displayName}`);	×
288	return <Components.Error404/>	×
289	}
290	}
291
292	const scheduledPostsTerms: PostsViewTerms = {view: "scheduled", userId: user._id, limit: 20}	×
293	const unlistedTerms: PostsViewTerms = {view: "unlisted", userId: user._id, limit: 20}	×
294	const postTerms: PostsViewTerms = {view: "userPosts", ...query, userId: user._id, authorIsUnreviewed: null}	×
295
296	// posts list sort settings
297	const currentSorting = (query.sortedBy \|\| query.view \|\| "new") as PostSortingMode	×
298	const currentFilter = query.filter \|\| "all"	×
299	const ownPage = currentUser?._id === user._id	×
300	const currentShowLowKarma = (parseInt(query.karmaThreshold) !== DEFAULT_LOW_KARMA_THRESHOLD)	×
301	const currentIncludeEvents = (query.includeEvents === 'true')	×
302	const currentHideCommunity = (query.hideCommunity === 'true')	×
303	postTerms.excludeEvents = !currentIncludeEvents && currentFilter !== 'events'	×
304	postTerms.hideCommunity = currentHideCommunity	×
305
306	const username = userGetDisplayName(user)	×
307	const metaDescription = `${username}'s profile on ${siteNameWithArticleSetting.get()} — ${taglineSetting.get()}`	×
308	const userKarma = user.karma \|\| 0	×
309
310	const privateSectionTabs: Array<UserProfileTabType> = [{	×
311	id: 'drafts',
312	label: `Drafts`,
313	secondaryNode: <LWTooltip title="This section is only visible to you and site admins.">
314	<InfoIcon className={classes.privateSectionIcon} />
315	</LWTooltip>,
316	body: <>
317	<div className={classes.sectionSubHeadingRow}>
318	<Typography variant="headline" className={classes.sectionSubHeading}>Draft/hidden posts</Typography>
319	{ownPage && <Link to="/newPost">	×
320	<SectionButton>
321	<DescriptionIcon /> New post
322	</SectionButton>
323	</Link>}
324	</div>
325	<AnalyticsContext listContext="userPageDrafts">
326	<DraftsList userId={user._id} limit={2} hideHeaderRow />
327	<PostsList2 hideAuthor showDraftTag={false} terms={scheduledPostsTerms} showNoResults={false} showLoading={false} showLoadMore={false} boxShadow={false} />
328	<PostsList2 hideAuthor showDraftTag={false} terms={unlistedTerms} showNoResults={false} showLoading={false} showLoadMore={false} boxShadow={false} />
329	</AnalyticsContext>
330	<div className={classes.sectionSubHeadingRow}>
331	<Typography variant="headline" className={classes.sectionSubHeading}>Draft/hidden sequences</Typography>
332	{ownPage && currentUser.karma >= SHOW_NEW_SEQUENCE_KARMA_THRESHOLD && <Link to="/sequencesnew">	×
333	<SectionButton>
334	<LibraryAddIcon /> New sequence
335	</SectionButton>
336	</Link>}
337	</div>
338	<SequencesGridWrapper terms={{view: "userProfilePrivate", userId: user._id, limit: 3}} showLoadMore={true} />
339	</>
340	}]
341	if (userOrganizesGroups?.length) {	×
342	privateSectionTabs.push({	×
343	id: 'localgroups',
344	label: 'Organizer of',
345	count: userOrganizesGroups.length,
346	secondaryNode: <LWTooltip title="This section is only visible to you and site admins.">
347	<InfoIcon className={classes.privateSectionIcon} />
348	</LWTooltip>,
349	body: <>
350	<ContentStyles contentType="post">
351	{userOrganizesGroups.map(group => {
352	return <div key={group._id}>	×
353	{group.inactive && <span className={classes.inactiveGroup}>[Inactive]</span>}	×
354	<Link to={`/groups/${group._id}`}>
355	{group.name}
356	</Link>
357	</div>
358	})}
359	</ContentStyles>
360	<LoadMore {...userOrganizesGroupsLoadMoreProps} />
361	</>
362	})
363	}
364
365	const bioSectionTabs: Array<UserProfileTabType> = []	×
366	if (user.biography?.html \|\| user.howOthersCanHelpMe?.html \|\| user.howICanHelpOthers?.html) {	×
367	bioSectionTabs.push({	×
368	id: 'bio',
369	label: 'Bio',
370	body: <>	×
371	{user.biography?.html && <ContentStyles contentType="post">	×
372	<ContentItemBody
373	dangerouslySetInnerHTML={{__html: user.biography.html }}
374	description={`user ${user._id} bio`}
375	nofollow={userKarma < nofollowKarmaThreshold.get()}
376	/>
377	</ContentStyles>}	×
378	{user.howOthersCanHelpMe?.html && <>	×
379	<div className={classes.sectionSubHeadingRow}>
380	<Typography variant="headline" className={classes.sectionSubHeading}>How others can help me</Typography>
381	</div>
382	<ContentStyles contentType="post">
383	<ContentItemBody dangerouslySetInnerHTML={{__html: user.howOthersCanHelpMe.html }} nofollow={userKarma < nofollowKarmaThreshold.get()}/>
384	</ContentStyles>
385	</>}	×
386	{user.howICanHelpOthers?.html && <>	×
387	<div className={classes.sectionSubHeadingRow}>
388	<Typography variant="headline" className={classes.sectionSubHeading}>How I can help others</Typography>
389	</div>
390	<ContentStyles contentType="post">
391	<ContentItemBody dangerouslySetInnerHTML={{__html: user.howICanHelpOthers.html }} nofollow={userKarma < nofollowKarmaThreshold.get()}/>
392	</ContentStyles>
393	</>}
394	</>,
395	collapsable: true
396	})
397	}
398	if (user.organizerOfGroupIds?.length \|\| user.programParticipation?.length) {	×
399	bioSectionTabs.push({	×
400	id: 'participation',
401	label: 'Participation',
402	count: (user.organizerOfGroupIds?.length \|\| 0) + (user.programParticipation?.length \|\| 0),	×
403	body: <>
404	<ContentStyles contentType="post">
405	<ul>
406	{user.organizerOfGroups?.map(group => {	×
407	return <li key={group._id}>	×
408	Organizer of <Link to={`/groups/${group._id}`}>
409	{group.name}
410	</Link>
411	</li>
412	})}
413	{user.programParticipation?.map(participation => {	×
414	const label = PROGRAM_PARTICIPATION.find(program => program.value === participation)?.label	×
415	if (!label) return null	×
416	return <li key={participation}>	×
417	{label}
418	</li>
419	})}
420	</ul>
421	</ContentStyles>
422	</>
423	})
424	}
425
426	const commentsSectionTabs: Array<UserProfileTabType> = []	×
427	if (user.commentCount) {	×
428	commentsSectionTabs.push({	×
429	id: 'comments',
430	label: 'Comments',
431	count: user.commentCount,
432	body: <AnalyticsContext pageSectionContext="commentsSection">
433	<RecentComments
434	terms={{view: 'profileRecentComments', authorIsUnreviewed: null, limit: 10, userId: user._id}}
435	showPinnedOnProfile
436	/>
437	</AnalyticsContext>
438	})
439	}
440	if (user.tagRevisionCount) {	×
441	commentsSectionTabs.push({	×
442	id: 'tagRevisions',
443	label: `${taggingNameIsSet.get() ? taggingNameCapitalSetting.get() : 'Wiki'} contributions`,	×
444	count: user.tagRevisionCount,
445	body: <AnalyticsContext listContext="userPageWiki">
446	<TagEditsByUser userId={user._id} limit={10} />
447	</AnalyticsContext>
448	})
449	}
450
451	return <div>	×
452	<HeadTags
453	description={metaDescription}
454	noIndex={(!userPostsCount && !user.commentCount) \|\| user.karma <= 0 \|\| user.noindex}	×
455	image={user.profileImageId && `https://res.cloudinary.com/cea/image/upload/c_crop,g_custom,q_auto,f_auto/${user.profileImageId}.jpg`}	×
456	structuredData={getUserStructuredData(user)}
457	useSmallImage
458	/>
459	<AnalyticsContext pageContext="userPage">
460	<SingleColumnSection>
461	<div className={classNames(classes.section, classes.mainSection)}>
462	{isEAForum && userCanEditUser(currentUser, user) &&	×
463	<div className={classes.editProfile}>
464	<Button
465	type="submit"
466	href={`/profile/${user.slug}/edit`}
467	className={classes.editProfileButton}
468	>
469	Edit public profile
470	</Button>
471	</div>
472	}
473	<EAUsersProfileImage user={user} />
474	<Typography variant="headline" className={classNames(classes.username, {[classes.deletedUsername]: user.deleted})}>
475	{username}{user.deleted && <span className={classes.accountDeletedText}>(account deleted)</span>}	×
476	</Typography>
477	{(user.jobTitle \|\| user.organization) && <ContentStyles contentType="comment" className={classes.roleAndOrg}>	×
478	{user.jobTitle} {user.organization ? `@ ${user.organization}` : ''}	×
479	</ContentStyles>}
480	<EAUsersMetaInfo user={user} />	×
481	{currentUser?._id !== user._id && <div className={classes.btns}>	×
482	<NewConversationButton
483	user={user}
484	currentUser={currentUser}
485	>
486	<a tabIndex={0} className={classes.messageBtn} data-cy="message">
487	Message
488	</a>
489	</NewConversationButton>
490	<UserNotifyDropdown user={user} />
491	</div>}	×
492
493	{user.profileTags?.length &&	×
494	<div className={classes.interests}>
495	<div>Interests:</div>
496	{user.profileTags.map((tag) =>
NEW 497	<FooterTag key={tag._id} tag={tag} neverCoreStyling hideIcon />	×
498	)}
499	</div>
500	}
501
502	<EAUsersProfileLinks user={user} />
503	</div>	×
504
505	{userCanDo(currentUser, 'posts.moderate.all') && <div className={classes.sunshineSection}>
506	<SunshineNewUsersProfileInfo userId={user._id} />
507	</div>}
508
509	{(ownPage \|\| currentUser?.isAdmin) && (draftsSectionExpanded ?	×
510	<EAUsersProfileTabbedSection tabs={privateSectionTabs} /> :	×
511	<Button color="primary"
512	onClick={() => setDraftsSectionExpanded(true)}	×
513	className={classes.showSectionBtn}
514	>
515	Click to view drafts
516	</Button>
517	)}
518
519	<EAUsersProfileTabbedSection tabs={bioSectionTabs} />
520
521	{!!(userPostsCount \|\| user.postCount) && <div className={classes.section}>	×
522	<div className={classes.sectionHeadingRow}>
523	<Typography variant="headline" className={classes.sectionHeading}>
524	Posts <div className={classes.sectionHeadingCount}>{(userPostsCount \|\| user.postCount)}</div>	×
525	</Typography>
526	<SortButton onClick={() => setShowPostSettings(!showPostSettings)}	×
527	label={`Sorted by ${ SORT_ORDER_OPTIONS[currentSorting].label }`} />
528	</div>
529	{showPostSettings && <PostsListSettings	×
530	hidden={false}
531	currentSorting={currentSorting}
532	currentFilter={currentFilter}
533	currentShowLowKarma={currentShowLowKarma}
534	currentIncludeEvents={currentIncludeEvents}
535	currentHideCommunity={currentHideCommunity}
536	/>}
537	<AnalyticsContext listContext="userPagePosts">
538	<ProfileShortform user={user} />
539	<PostsList2 terms={postTerms} boxShadow={false} hideAuthor hideShortform />
540	</AnalyticsContext>
541	</div>}
542
543	{!!user.sequenceCount && <div className={classes.section}>	×
544	<div className={classes.sectionHeadingRow}>
545	<Typography variant="headline" className={classes.sectionHeading}>
546	Sequences <div className={classes.sectionHeadingCount}>{user.sequenceCount}</div>
547	</Typography>
548	</div>
549	<SequencesGridWrapper terms={{view: "userProfile", userId: user._id, limit: 9}} showLoadMore={true} />
550	</div>}
551
552	<EAUsersProfileTabbedSection tabs={commentsSectionTabs} />
553	</SingleColumnSection>
554
555	<ReportUserButton user={user}/>
556	</AnalyticsContext>
557	</div>
558	}
559
560	const FriendlyUsersProfileComponent = registerComponent(	1✔
561	'FriendlyUsersProfile', FriendlyUsersProfile, {styles}
562	);
563
564	declare global {
565	interface ComponentTypes {
566	FriendlyUsersProfile: typeof FriendlyUsersProfileComponent
567	}
568	}

ForumMagnum / ForumMagnum / 9515693249

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