9978865299

Committed 17 Jul 2024 05:36PM UTC coverage: 31.911% (+0.06%) from 31.853%

Build # 9978865299

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9473 from ForumMagnum/people-directory-mobile-styles

[EA] People directory mobile styles

Run Details

4907 of 40344 branches covered (12.16%)

Branch coverage included in aggregate %.

57 of 107 new or added lines in 35 files covered. (53.27%)

1 existing line in 1 file now uncovered.

28712 of 65010 relevant lines covered (44.17%)

180.24 hits per line

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

24.53

/packages/lesswrong/components/peopleDirectory/PeopleDirectoryCard.tsx

import React from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import { useCurrentUser } from "../common/withUser";
import { textCellStyles } from "./PeopleDirectoryTextCell";
import { formatStat } from "../users/EAUserTooltipContent";
import { CAREER_STAGES } from "@/lib/collections/users/schema";
import { InteractionWrapper, useClickableCell } from "../common/useClickableCell";
import { userGetProfileUrl } from "@/lib/collections/users/helpers";
import classNames from "classnames";
import moment from "moment";

const styles = (theme: ThemeType) => ({
  root: {
    cursor: "pointer",
    display: "flex",
    flexDirection: "column",
    gap: "8px",
    padding: 12,
    "&:hover": {
      background: theme.palette.grey[30],
    },
  },
  firstItem: {
    borderTopLeftRadius: theme.borderRadius.default,
    borderTopRightRadius: theme.borderRadius.default,
  },
  lastItem: {
    borderBottomLeftRadius: theme.borderRadius.default,
    borderBottomRightRadius: theme.borderRadius.default,
  },
  borderTop: {
    borderTop: `1px solid ${theme.palette.grey[300]}`,
  },
  main: {
    display: "flex",
    alignItems: "center",
    gap: "8px",
  },
  nameSection: {
    flexGrow: 1,
  },
  name: {
    fontSize: 16,
    fontWeight: 700,
  },
  createdAt: {
    ...textCellStyles(theme),
    color: theme.palette.grey[600],
    whiteSpace: "nowrap",
  },
  message: {
    marginRight: 8,
    color: theme.palette.grey[600],
    "&:hover": {
      color: theme.palette.grey[1000],
    },
  },
  role: {
    ...textCellStyles(theme),
  },
  bio: {
    ...textCellStyles(theme),
    color: theme.palette.grey[600],
  },
  meta: {
    display: "flex",
    flexWrap: "wrap",
    gap: "12px",
    height: 19,
    overflow: "hidden",
  },
  stat: {
    ...textCellStyles(theme),
    color: theme.palette.grey[600],
    display: "flex",
    alignItems: "center",
    gap: "4px",
    whiteSpace: "nowrap",
  },
  statIcon: {
    fontSize: 18,
  },
});

const PeopleDirectoryCard = ({user, isFirst, isLast, classes}: {
  user: SearchUser,
  isFirst?: boolean,
  isLast?: boolean,
  classes: ClassesType<typeof styles>,
}) => {
  const currentUser = useCurrentUser();
  const isCurrentUser = user._id === currentUser?._id;

  const {onClick} = useClickableCell({
    href: user ? `${userGetProfileUrl(user)}?from=people_directory` : "#",
    ignoreLinks: true,
    openInNewTab: true,
  });

  const careerStage = user.careerStage?.[0]
    ? CAREER_STAGES.find(({value}) => value === user.careerStage?.[0])
    : null;

  const {UsersProfileImage, NewConversationButton, ForumIcon} = Components;
  return (
    <div
      onClick={onClick}
      className={classNames(
        classes.root,
        isFirst && classes.firstItem,
        isLast && classes.lastItem,
        !isFirst && classes.borderTop,
      )}
    >
      <div className={classes.main}>
        <UsersProfileImage user={user} size={32} />
        <div className={classes.nameSection}>
          <div className={classes.name}>
            {user.displayName}
          </div>
          <div className={classes.createdAt}>
            Joined {moment(user.createdAt).fromNow()} ago
          </div>
        </div>
        {!isCurrentUser &&
          <InteractionWrapper className={classes.message}>
            <NewConversationButton
              currentUser={currentUser}
              user={user}
              from="people_directory"
              openInNewTab
            >
              <ForumIcon icon="Envelope" />
            </NewConversationButton>
          </InteractionWrapper>
        }
      </div>
      {(user.jobTitle || user.organization) &&
        <div className={classes.role}>
          {user.jobTitle}
          {user.jobTitle && user.organization ? " @ " : ""}
          {user.organization}
        </div>
      }
      {user.bio &&
        <div className={classes.bio}>
          {user.bio}
        </div>
      }
      <div className={classes.meta}>
        <div className={classes.stat}>
          <ForumIcon icon="Star" className={classes.statIcon} />
          {formatStat(user.karma ?? 0)}
        </div>
        {careerStage &&
          <div className={classes.stat}>
            <ForumIcon icon={careerStage.icon} className={classes.statIcon} />
            {careerStage.label}
          </div>
        }
        {user.mapLocationAddress &&
          <div className={classes.stat}>
            <ForumIcon icon="MapPin" className={classes.statIcon} />
            {user.mapLocationAddress}
          </div>
        }
      </div>
    </div>
  );
}

const PeopleDirectoryCardComponent = registerComponent(
  "PeopleDirectoryCard",
  PeopleDirectoryCard,
  {styles},
);

declare global {
  interface ComponentTypes {
    PeopleDirectoryCard: typeof PeopleDirectoryCardComponent
  }
}

1	import React from "react";	1✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import { useCurrentUser } from "../common/withUser";	1✔
4	import { textCellStyles } from "./PeopleDirectoryTextCell";	1✔
5	import { formatStat } from "../users/EAUserTooltipContent";	1✔
6	import { CAREER_STAGES } from "@/lib/collections/users/schema";	1✔
7	import { InteractionWrapper, useClickableCell } from "../common/useClickableCell";	1✔
8	import { userGetProfileUrl } from "@/lib/collections/users/helpers";	1✔
9	import classNames from "classnames";	1✔
10	import moment from "moment";	1✔
11
12	const styles = (theme: ThemeType) => ({	1✔
13	root: {
14	cursor: "pointer",
15	display: "flex",
16	flexDirection: "column",
17	gap: "8px",
18	padding: 12,
19	"&:hover": {
20	background: theme.palette.grey[30],
21	},
22	},
23	firstItem: {
24	borderTopLeftRadius: theme.borderRadius.default,
25	borderTopRightRadius: theme.borderRadius.default,
26	},
27	lastItem: {
28	borderBottomLeftRadius: theme.borderRadius.default,
29	borderBottomRightRadius: theme.borderRadius.default,
30	},
31	borderTop: {
32	borderTop: `1px solid ${theme.palette.grey[300]}`,
33	},
34	main: {
35	display: "flex",
36	alignItems: "center",
37	gap: "8px",
38	},
39	nameSection: {
40	flexGrow: 1,
41	},
42	name: {
43	fontSize: 16,
44	fontWeight: 700,
45	},
46	createdAt: {
47	...textCellStyles(theme),
48	color: theme.palette.grey[600],
49	whiteSpace: "nowrap",
50	},
51	message: {
52	marginRight: 8,
53	color: theme.palette.grey[600],
54	"&:hover": {
55	color: theme.palette.grey[1000],
56	},
57	},
58	role: {
59	...textCellStyles(theme),
60	},
61	bio: {
62	...textCellStyles(theme),
63	color: theme.palette.grey[600],
64	},
65	meta: {
66	display: "flex",
67	flexWrap: "wrap",
68	gap: "12px",
69	height: 19,
70	overflow: "hidden",
71	},
72	stat: {
73	...textCellStyles(theme),
74	color: theme.palette.grey[600],
75	display: "flex",
76	alignItems: "center",
77	gap: "4px",
78	whiteSpace: "nowrap",
79	},
80	statIcon: {
81	fontSize: 18,
82	},
83	});
84
85	const PeopleDirectoryCard = ({user, isFirst, isLast, classes}: {	1✔
86	user: SearchUser,
87	isFirst?: boolean,
88	isLast?: boolean,
89	classes: ClassesType<typeof styles>,
90	}) => {
NEW 91	const currentUser = useCurrentUser();	×
NEW 92	const isCurrentUser = user._id === currentUser?._id;	×
93
NEW 94	const {onClick} = useClickableCell({	×
95	href: user ? `${userGetProfileUrl(user)}?from=people_directory` : "#",	×
96	ignoreLinks: true,
97	openInNewTab: true,
98	});
99
NEW 100	const careerStage = user.careerStage?.[0]	×
NEW 101	? CAREER_STAGES.find(({value}) => value === user.careerStage?.[0])	×
102	: null;
103
NEW 104	const {UsersProfileImage, NewConversationButton, ForumIcon} = Components;	×
NEW 105	return (	×
106	<div
107	onClick={onClick}
108	className={classNames(
109	classes.root,
110	isFirst && classes.firstItem,	×
111	isLast && classes.lastItem,	×
112	!isFirst && classes.borderTop,	×
113	)}
114	>
115	<div className={classes.main}>
116	<UsersProfileImage user={user} size={32} />
117	<div className={classes.nameSection}>
118	<div className={classes.name}>
119	{user.displayName}
120	</div>
121	<div className={classes.createdAt}>
122	Joined {moment(user.createdAt).fromNow()} ago
123	</div>
124	</div>
125	{!isCurrentUser &&	×
126	<InteractionWrapper className={classes.message}>
127	<NewConversationButton
128	currentUser={currentUser}
129	user={user}
130	from="people_directory"
131	openInNewTab
132	>
133	<ForumIcon icon="Envelope" />
134	</NewConversationButton>
135	</InteractionWrapper>
136	}
137	</div>
138	{(user.jobTitle \|\| user.organization) &&	×
139	<div className={classes.role}>
140	{user.jobTitle}
141	{user.jobTitle && user.organization ? " @ " : ""}	×
142	{user.organization}
143	</div>
144	}
145	{user.bio &&	×
146	<div className={classes.bio}>
147	{user.bio}
148	</div>
149	}
150	<div className={classes.meta}>
151	<div className={classes.stat}>
152	<ForumIcon icon="Star" className={classes.statIcon} />
153	{formatStat(user.karma ?? 0)}	×
154	</div>
155	{careerStage &&	×
156	<div className={classes.stat}>
157	<ForumIcon icon={careerStage.icon} className={classes.statIcon} />
158	{careerStage.label}
159	</div>
160	}
161	{user.mapLocationAddress &&	×
162	<div className={classes.stat}>
163	<ForumIcon icon="MapPin" className={classes.statIcon} />
164	{user.mapLocationAddress}
165	</div>
166	}
167	</div>
168	</div>
169	);
170	}
171
172	const PeopleDirectoryCardComponent = registerComponent(	1✔
173	"PeopleDirectoryCard",
174	PeopleDirectoryCard,
175	{styles},
176	);
177
178	declare global {
179	interface ComponentTypes {
180	PeopleDirectoryCard: typeof PeopleDirectoryCardComponent
181	}
182	}

ForumMagnum / ForumMagnum / 9978865299

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