10059096302

Committed 23 Jul 2024 12:40PM UTC coverage: 31.897% (-0.07%) from 31.965%

Build # 10059096302

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9533 from ForumMagnum/master

[EA] Deploy nudge to add GWWC pledge diamonds

Run Details

4931 of 40498 branches covered (12.18%)

Branch coverage included in aggregate %.

16 of 40 new or added lines in 5 files covered. (40.0%)

1 existing line in 1 file now uncovered.

28849 of 65406 relevant lines covered (44.11%)

179.86 hits per line

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

9.31

/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, hash} = useLocation();

  useEffect(() => {
    if (user && hash) {
      const element = document.querySelector(hash);
      setTimeout(() => element?.scrollIntoView(true), 0);
    }
  }, [user, hash]);

  // 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, DisplayNameWithMarkers
  } = 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 displayName = userGetDisplayName(user)
  const metaDescription = `${displayName}'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})}>
            <DisplayNameWithMarkers name={displayName} />{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}>
                Message
              </a>
            </NewConversationButton>
            <UserNotifyDropdown user={user} />
          </div>}

          {(user.profileTags?.length ?? 0) > 0 &&
            <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} id="drafts" /> :
          <Button color="primary"
            onClick={() => setDraftsSectionExpanded(true)}
            className={classes.showSectionBtn}
          >
            Click to view drafts
          </Button>
        )}

        <EAUsersProfileTabbedSection tabs={bioSectionTabs} id="bio" />

        {!!(userPostsCount || user.postCount) && <div className={classes.section} id="posts">
          <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} id="sequences">
          <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} id="contributions" />
      </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, hash} = useLocation();	×
198
199	useEffect(() => {	×
200	if (user && hash) {	×
201	const element = document.querySelector(hash);	×
202	setTimeout(() => element?.scrollIntoView(true), 0);	×
203	}
204	}, [user, hash]);
205
206	// track profile views in local storage
207	useEffect(() => {	×
208	const ls = getBrowserLocalStorage()	×
209	if (currentUser && user && currentUser._id !== user._id && ls) {	×
210	let from = query.from	×
211	let profiles: any[] = JSON.parse(ls.getItem('lastViewedProfiles')) \|\| []	×
212	// if the profile user is already in the list, then remove them before re-adding them at the end
213	const profileUserIndex = profiles?.findIndex(profile => profile.userId === user._id)	×
214	if (profiles && profileUserIndex !== -1) {	×
215	// remember where we originally saw this profile, if necessary
216	from = from \|\| profiles[profileUserIndex].from	×
217	profiles.splice(profileUserIndex, 1)	×
218	}
219
220	profiles.push({userId: user._id, ...(from && {from})})	×
221	// we only bother to save the last 10 profiles
222	if (profiles.length > 10) profiles.shift()	×
223	// save it in local storage
224	ls.setItem('lastViewedProfiles', JSON.stringify(profiles))	×
225	}
226	}, [currentUser, user, query.from])
227
228	// although both the owner and admins can see the drafts section,
229	// admins need to click a button to view it (so it's not distracting)
230	const [draftsSectionExpanded, setDraftsSectionExpanded] = useState(!user \|\| (currentUser && user._id === currentUser._id))	×
231	useEffect(() => {	×
232	if (user) {	×
233	setDraftsSectionExpanded(currentUser && user._id === currentUser._id)	×
234	}
235	}, [currentUser, user])
236
237	// show/hide the "Posts" section sort/filter settings
238	const [showPostSettings, setShowPostSettings] = useState(false)	×
239
240	const { results: userOrganizesGroups, loadMoreProps: userOrganizesGroupsLoadMoreProps } = useMulti({	×
241	terms: {view: 'userOrganizesGroups', userId: user?._id, limit: 300},	×
242	collectionName: "Localgroups",
243	fragmentName: 'localGroupsHomeFragment',
244	enableTotal: false,
245	skip: !user
246	})
247
248	// count posts here rather than using user.postCount,
249	// because the latter doesn't include posts where the user is a coauthor
250	const { totalCount: userPostsCount } = useMulti({	×
251	terms: {
252	view: 'userPosts',
253	userId: user?._id,	×
254	authorIsUnreviewed: currentUser?.isAdmin ? null : false,	×
255	limit: 0
256	},
257	collectionName: "Posts",
258	fragmentName: 'PostsMinimumInfo',
259	enableTotal: true,
260	skip: !user
261	})
262
263	const { SunshineNewUsersProfileInfo, SingleColumnSection, LWTooltip,
264	SortButton, NewConversationButton, TagEditsByUser, LoadMore,
265	PostsList2, ContentItemBody, Loading, Error404, PermanentRedirect, HeadTags,
266	Typography, ContentStyles, EAUsersProfileTabbedSection, PostsListSettings,
267	RecentComments, SectionButton, SequencesGridWrapper, ReportUserButton, DraftsList,
268	ProfileShortform, EAUsersProfileImage, EAUsersMetaInfo, EAUsersProfileLinks,
269	UserNotifyDropdown, FooterTag, DisplayNameWithMarkers
270	} = Components	×
271
272	if (loading) {	×
273	return <Loading/>	×
274	}
275
276	if (!user \|\| !user._id \|\| (user.deleted && !currentUser?.isAdmin)) {	×
277	//eslint-disable-next-line no-console
278	console.error(`// missing user (_id/slug: ${slug})`);	×
279	return <Error404/>	×
280	}
281
282	if (user.oldSlugs?.includes(slug) && !user.deleted) {	×
283	return <PermanentRedirect url={userGetProfileUrlFromSlug(user.slug)} />	×
284	}
285
286	// Does this profile page belong to a likely-spam account?
287	if (user.spamRiskScore < 0.4) {	×
288	if (currentUser?._id === user._id) {	×
289	// Logged-in spammer can see their own profile
290	} else if (currentUser && userCanDo(currentUser, 'posts.moderate.all')) {	×
291	// Admins and sunshines can see spammer's profile
292	} else {
293	// Anyone else gets a 404 here
294	// eslint-disable-next-line no-console
295	console.log(`Not rendering profile page for account with poor spam risk score: ${user.displayName}`);	×
296	return <Components.Error404/>	×
297	}
298	}
299
300	const scheduledPostsTerms: PostsViewTerms = {view: "scheduled", userId: user._id, limit: 20}	×
301	const unlistedTerms: PostsViewTerms = {view: "unlisted", userId: user._id, limit: 20}	×
302	const postTerms: PostsViewTerms = {view: "userPosts", ...query, userId: user._id, authorIsUnreviewed: null}	×
303
304	// posts list sort settings
305	const currentSorting = (query.sortedBy \|\| query.view \|\| "new") as PostSortingMode	×
306	const currentFilter = query.filter \|\| "all"	×
307	const ownPage = currentUser?._id === user._id	×
308	const currentShowLowKarma = (parseInt(query.karmaThreshold) !== DEFAULT_LOW_KARMA_THRESHOLD)	×
309	const currentIncludeEvents = (query.includeEvents === 'true')	×
310	const currentHideCommunity = (query.hideCommunity === 'true')	×
311	postTerms.excludeEvents = !currentIncludeEvents && currentFilter !== 'events'	×
312	postTerms.hideCommunity = currentHideCommunity	×
313
NEW 314	const displayName = userGetDisplayName(user)	×
NEW 315	const metaDescription = `${displayName}'s profile on ${siteNameWithArticleSetting.get()} — ${taglineSetting.get()}`	×
UNCOV 316	const userKarma = user.karma \|\| 0	×
317
318	const privateSectionTabs: Array<UserProfileTabType> = [{	×
319	id: 'drafts',
320	label: `Drafts`,
321	secondaryNode: <LWTooltip title="This section is only visible to you and site admins.">
322	<InfoIcon className={classes.privateSectionIcon} />
323	</LWTooltip>,
324	body: <>
325	<div className={classes.sectionSubHeadingRow}>
326	<Typography variant="headline" className={classes.sectionSubHeading}>Draft/hidden posts</Typography>
327	{ownPage && <Link to="/newPost">	×
328	<SectionButton>
329	<DescriptionIcon /> New post
330	</SectionButton>
331	</Link>}
332	</div>
333	<AnalyticsContext listContext="userPageDrafts">
334	<DraftsList userId={user._id} limit={2} hideHeaderRow />
335	<PostsList2 hideAuthor showDraftTag={false} terms={scheduledPostsTerms} showNoResults={false} showLoading={false} showLoadMore={false} boxShadow={false} />
336	<PostsList2 hideAuthor showDraftTag={false} terms={unlistedTerms} showNoResults={false} showLoading={false} showLoadMore={false} boxShadow={false} />
337	</AnalyticsContext>
338	<div className={classes.sectionSubHeadingRow}>
339	<Typography variant="headline" className={classes.sectionSubHeading}>Draft/hidden sequences</Typography>
340	{ownPage && currentUser.karma >= SHOW_NEW_SEQUENCE_KARMA_THRESHOLD && <Link to="/sequencesnew">	×
341	<SectionButton>
342	<LibraryAddIcon /> New sequence
343	</SectionButton>
344	</Link>}
345	</div>
346	<SequencesGridWrapper terms={{view: "userProfilePrivate", userId: user._id, limit: 3}} showLoadMore={true} />
347	</>
348	}]
349	if (userOrganizesGroups?.length) {	×
350	privateSectionTabs.push({	×
351	id: 'localgroups',
352	label: 'Organizer of',
353	count: userOrganizesGroups.length,
354	secondaryNode: <LWTooltip title="This section is only visible to you and site admins.">
355	<InfoIcon className={classes.privateSectionIcon} />
356	</LWTooltip>,
357	body: <>
358	<ContentStyles contentType="post">
359	{userOrganizesGroups.map(group => {
360	return <div key={group._id}>	×
361	{group.inactive && <span className={classes.inactiveGroup}>[Inactive]</span>}	×
362	<Link to={`/groups/${group._id}`}>
363	{group.name}
364	</Link>
365	</div>
366	})}
367	</ContentStyles>
368	<LoadMore {...userOrganizesGroupsLoadMoreProps} />
369	</>
370	})
371	}
372
373	const bioSectionTabs: Array<UserProfileTabType> = []	×
374	if (user.biography?.html \|\| user.howOthersCanHelpMe?.html \|\| user.howICanHelpOthers?.html) {	×
375	bioSectionTabs.push({	×
376	id: 'bio',
377	label: 'Bio',
378	body: <>	×
379	{user.biography?.html && <ContentStyles contentType="post">	×
380	<ContentItemBody
381	dangerouslySetInnerHTML={{__html: user.biography.html }}
382	description={`user ${user._id} bio`}
383	nofollow={userKarma < nofollowKarmaThreshold.get()}
384	/>
385	</ContentStyles>}	×
386	{user.howOthersCanHelpMe?.html && <>	×
387	<div className={classes.sectionSubHeadingRow}>
388	<Typography variant="headline" className={classes.sectionSubHeading}>How others can help me</Typography>
389	</div>
390	<ContentStyles contentType="post">
391	<ContentItemBody dangerouslySetInnerHTML={{__html: user.howOthersCanHelpMe.html }} nofollow={userKarma < nofollowKarmaThreshold.get()}/>
392	</ContentStyles>
393	</>}	×
394	{user.howICanHelpOthers?.html && <>	×
395	<div className={classes.sectionSubHeadingRow}>
396	<Typography variant="headline" className={classes.sectionSubHeading}>How I can help others</Typography>
397	</div>
398	<ContentStyles contentType="post">
399	<ContentItemBody dangerouslySetInnerHTML={{__html: user.howICanHelpOthers.html }} nofollow={userKarma < nofollowKarmaThreshold.get()}/>
400	</ContentStyles>
401	</>}
402	</>,
403	collapsable: true
404	})
405	}
406	if (user.organizerOfGroupIds?.length \|\| user.programParticipation?.length) {	×
407	bioSectionTabs.push({	×
408	id: 'participation',
409	label: 'Participation',
410	count: (user.organizerOfGroupIds?.length \|\| 0) + (user.programParticipation?.length \|\| 0),	×
411	body: <>
412	<ContentStyles contentType="post">
413	<ul>
414	{user.organizerOfGroups?.map(group => {	×
415	return <li key={group._id}>	×
416	Organizer of <Link to={`/groups/${group._id}`}>
417	{group.name}
418	</Link>
419	</li>
420	})}
421	{user.programParticipation?.map(participation => {	×
422	const label = PROGRAM_PARTICIPATION.find(program => program.value === participation)?.label	×
423	if (!label) return null	×
424	return <li key={participation}>	×
425	{label}
426	</li>
427	})}
428	</ul>
429	</ContentStyles>
430	</>
431	})
432	}
433
434	const commentsSectionTabs: Array<UserProfileTabType> = []	×
435	if (user.commentCount) {	×
436	commentsSectionTabs.push({	×
437	id: 'comments',
438	label: 'Comments',
439	count: user.commentCount,
440	body: <AnalyticsContext pageSectionContext="commentsSection">
441	<RecentComments
442	terms={{view: 'profileRecentComments', authorIsUnreviewed: null, limit: 10, userId: user._id}}
443	showPinnedOnProfile
444	/>
445	</AnalyticsContext>
446	})
447	}
448	if (user.tagRevisionCount) {	×
449	commentsSectionTabs.push({	×
450	id: 'tagRevisions',
451	label: `${taggingNameIsSet.get() ? taggingNameCapitalSetting.get() : 'Wiki'} contributions`,	×
452	count: user.tagRevisionCount,
453	body: <AnalyticsContext listContext="userPageWiki">
454	<TagEditsByUser userId={user._id} limit={10} />
455	</AnalyticsContext>
456	})
457	}
458
459	return <div>	×
460	<HeadTags
461	description={metaDescription}
462	noIndex={(!userPostsCount && !user.commentCount) \|\| user.karma <= 0 \|\| user.noindex}	×
463	image={user.profileImageId && `https://res.cloudinary.com/cea/image/upload/c_crop,g_custom,q_auto,f_auto/${user.profileImageId}.jpg`}	×
464	structuredData={getUserStructuredData(user)}
465	useSmallImage
466	/>
467	<AnalyticsContext pageContext="userPage">
468	<SingleColumnSection>
469	<div className={classNames(classes.section, classes.mainSection)}>
470	{isEAForum && userCanEditUser(currentUser, user) &&	×
471	<div className={classes.editProfile}>
472	<Button
473	type="submit"
474	href={`/profile/${user.slug}/edit`}
475	className={classes.editProfileButton}
476	>
477	Edit public profile
478	</Button>
479	</div>
480	}
481	<EAUsersProfileImage user={user} />
482	<Typography variant="headline" className={classNames(classes.username, {[classes.deletedUsername]: user.deleted})}>
483	<DisplayNameWithMarkers name={displayName} />{user.deleted && <span className={classes.accountDeletedText}>(account deleted)</span>}	×
484	</Typography>
485	{(user.jobTitle \|\| user.organization) && <ContentStyles contentType="comment" className={classes.roleAndOrg}>	×
486	{user.jobTitle} {user.organization ? `@ ${user.organization}` : ''}	×
487	</ContentStyles>}
488	<EAUsersMetaInfo user={user} />	×
489	{currentUser?._id !== user._id && <div className={classes.btns}>	×
490	<NewConversationButton
491	user={user}
492	currentUser={currentUser}
493	>
494	<a tabIndex={0} className={classes.messageBtn}>
495	Message
496	</a>
497	</NewConversationButton>
498	<UserNotifyDropdown user={user} />
499	</div>}	×
500
501	{(user.profileTags?.length ?? 0) > 0 &&	×
502	<div className={classes.interests}>
503	<div>Interests:</div>
504	{user.profileTags.map((tag) =>
505	<FooterTag key={tag._id} tag={tag} neverCoreStyling hideIcon />	×
506	)}
507	</div>
508	}
509
510	<EAUsersProfileLinks user={user} />
511	</div>	×
512
513	{userCanDo(currentUser, 'posts.moderate.all') && <div className={classes.sunshineSection}>
514	<SunshineNewUsersProfileInfo userId={user._id} />
515	</div>}
516
517	{(ownPage \|\| currentUser?.isAdmin) && (draftsSectionExpanded ?	×
518	<EAUsersProfileTabbedSection tabs={privateSectionTabs} id="drafts" /> :	×
519	<Button color="primary"
520	onClick={() => setDraftsSectionExpanded(true)}	×
521	className={classes.showSectionBtn}
522	>
523	Click to view drafts
524	</Button>
525	)}
526
527	<EAUsersProfileTabbedSection tabs={bioSectionTabs} id="bio" />
528
529	{!!(userPostsCount \|\| user.postCount) && <div className={classes.section} id="posts">	×
530	<div className={classes.sectionHeadingRow}>
531	<Typography variant="headline" className={classes.sectionHeading}>
532	Posts <div className={classes.sectionHeadingCount}>{(userPostsCount \|\| user.postCount)}</div>	×
533	</Typography>
534	<SortButton onClick={() => setShowPostSettings(!showPostSettings)}	×
535	label={`Sorted by ${ SORT_ORDER_OPTIONS[currentSorting].label }`} />
536	</div>
537	{showPostSettings && <PostsListSettings	×
538	hidden={false}
539	currentSorting={currentSorting}
540	currentFilter={currentFilter}
541	currentShowLowKarma={currentShowLowKarma}
542	currentIncludeEvents={currentIncludeEvents}
543	currentHideCommunity={currentHideCommunity}
544	/>}
545	<AnalyticsContext listContext="userPagePosts">
546	<ProfileShortform user={user} />
547	<PostsList2 terms={postTerms} boxShadow={false} hideAuthor hideShortform />
548	</AnalyticsContext>
549	</div>}
550
551	{!!user.sequenceCount && <div className={classes.section} id="sequences">	×
552	<div className={classes.sectionHeadingRow}>
553	<Typography variant="headline" className={classes.sectionHeading}>
554	Sequences <div className={classes.sectionHeadingCount}>{user.sequenceCount}</div>
555	</Typography>
556	</div>
557	<SequencesGridWrapper terms={{view: "userProfile", userId: user._id, limit: 9}} showLoadMore={true} />
558	</div>}
559
560	<EAUsersProfileTabbedSection tabs={commentsSectionTabs} id="contributions" />
561	</SingleColumnSection>
562
563	<ReportUserButton user={user}/>
564	</AnalyticsContext>
565	</div>
566	}
567
568	const FriendlyUsersProfileComponent = registerComponent(	1✔
569	'FriendlyUsersProfile', FriendlyUsersProfile, {styles}
570	);
571
572	declare global {
573	interface ComponentTypes {
574	FriendlyUsersProfile: typeof FriendlyUsersProfileComponent
575	}
576	}

ForumMagnum / ForumMagnum / 10059096302

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