9308654156

Committed 30 May 2024 08:17PM UTC coverage: 31.96% (+0.06%) from 31.905%

Build # 9308654156

Build Type

push

github

Committed by

b0b3rt

Commit Message

turn suggested users into cards

Run Details

4804 of 39206 branches covered (12.25%)

Branch coverage included in aggregate %.

0 of 4 new or added lines in 1 file covered. (0.0%)

2 existing lines in 1 file now uncovered.

27946 of 63267 relevant lines covered (44.17%)

179.96 hits per line

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

20.99

/packages/lesswrong/components/subscriptions/SuggestedFeedSubscriptions.tsx

import React, { useEffect, useState } from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { useTracking } from "../../lib/analyticsEvents";
import { usePaginatedResolver } from '../hooks/usePaginatedResolver';
import { useMessages } from '../common/withMessages';
import { useCreate } from '../../lib/crud/withCreate';
import { UserDisplayNameInfo, userGetDisplayName } from '../../lib/collections/users/helpers';
import { Link } from '../../lib/reactRouterWrapper';
import { preferredHeadingCase } from '../../themes/forumTheme';
import { HIDE_SUBSCRIBED_FEED_SUGGESTED_USERS } from '../../lib/cookies/cookies';
import { useCookiesWithConsent } from '../hooks/useCookiesWithConsent';
import classNames from 'classnames';
import { apolloSSRFlag } from '@/lib/helpers';

const styles = (theme: ThemeType) => ({
  root: {
    display: "flex",
    flexDirection: "column",
    width: "100%",
    marginTop: 10,
    background: theme.palette.panelBackground.recentDiscussionThread,
    borderRadius: 3,
  },
  widgetOpen: {
    paddingTop: 12,
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 12,
    marginBottom: 10,
    width: "100%",
  },
  widgetClosed: {
    opacity: 0.8,
    background: "none",
    textShadow: `2px 2px 20px ${theme.palette.background.default}`
  },
  titleRow: {
    display: "flex",
    flexDirection: "row-reverse",
    justifyContent: "space-between",
    alignItems: "flex-start",
  },
  titleAndManageLink: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "baseline",
    flexGrow: 1
  },
  sectionTitle: {
    ...theme.typography.postStyle,
    marginBottom: 5,
    display: "block",
    fontSize: "1.5rem",
    [theme.breakpoints.down('xs')]: {
      fontSize: "1.3rem",
    }
  },
  manageSubscriptionsLink: {
    padding: 8,
    ...theme.typography.commentStyle,
    fontSize: "1rem",
    opacity: 0.7,
    '&:hover': {
      opacity: 1.0,
    }
  },
  hideButton: {
    ...theme.typography.commentStyle,
    padding: 8,
    borderRadius: 3,
    fontSize: "1rem",
    opacity: 0.7,
    display: "flex",
    alignItems: "center",
    flexWrap: "nowrap",
    '&:hover': {
      backgroundColor: theme.palette.grey[200],
      opacity: 0.7,
    }
  },
  userSubscribeButtons: {
    display: "flex",
    flexWrap: "wrap",
    overflow: "hidden",
    alignContent: "start",
    gap: "4px",
    height: 164,
    ['@media(max-width: 409px)']: {
      width: 302,
    },
  },
  suggestedUserListItem: {
    transition: "all .5s ease-out",
    listStyle: "none",
    height: 80,
    width: 118,
    ['@media(max-width: 409px)']: {
      width: 98,
    },
  },
  removedSuggestedUserListItem: {
    width: 0,
    opacity: 0,
  },
  suggestedUser: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: "4px",
    background: theme.palette.grey[400],
    height: "100%",
    borderRadius: 4,
    padding: 5,
  },
  suggestedUserButtons: {
    display: "flex",
    gap: "4px",
  },
  subscribeButton: {
    display: "flex",
    padding: 5,
    borderRadius: 4,
    alignItems: "center",
    justifyContent: "center",
    ...theme.typography.commentStyle,
    fontSize: "0.8rem",
    opacity: 0.9,
    background: theme.palette.grey[200],
    cursor: "pointer",
    width: 52,
    ['@media(max-width: 409px)']: {
      width: 42,
    },
  },
  buttonDisplayName: {
    ...theme.typography.commentStyle,
    width: "100%",
    flexGrow: 1,
  },
  clampedUserName: {
    // This entire setup allows us to do a graceful truncation after 2 lines (which some longer display names hit)
    // Browser support is _basically_ good: https://caniuse.com/?search=line-clamp
    height: "2lh",
    display: "-webkit-box",
    overflow: "hidden",
    textOverflow: "ellipsis",
    '-webkit-line-clamp': 2,
    '-webkit-box-orient': "vertical",
    // Some single-word display names are longer than the width of the container
    overflowWrap: "break-word",
  },
  icon: {
    width: 17,
    marginBottom: -3,
    cursor: "pointer",
    '&:hover': {
      backgroundColor: theme.palette.grey[300],
    }
  }
});


const SubscriptionButton = ({user, handleSubscribeOrDismiss, hidden, classes}: {
  user: UsersMinimumInfo, 
  handleSubscribeOrDismiss: (user: UsersMinimumInfo, dismiss?: boolean) => void,
  hidden?: boolean,
  classes: ClassesType<typeof styles>,
}) => {
  const { UsersName } = Components;

  return (<li className={classNames(classes.suggestedUserListItem, { [classes.removedSuggestedUserListItem]: hidden })}>
    <div className={classes.suggestedUser}>
      <div className={classes.buttonDisplayName} >
        <UsersName user={user} className={classes.clampedUserName} />
      </div>
      <div className={classes.suggestedUserButtons}>
        <div className={classes.subscribeButton}>
          <div onClick={() => handleSubscribeOrDismiss(user)}>
            Follow
          </div>
        </div>
        <div className={classes.subscribeButton}>
          <div onClick={() => handleSubscribeOrDismiss(user, true)}>
            Dismiss
          </div>
        </div>
      </div>
    </div>
  </li>);
}

export const SuggestedFeedSubscriptions = ({refetchFeed, classes}: {
  refetchFeed: () => void,
  classes: ClassesType<typeof styles>,
}) => {
  const { Loading, UserSelect } = Components;

  const [cookies, setCookie] = useCookiesWithConsent([HIDE_SUBSCRIBED_FEED_SUGGESTED_USERS])
  const [widgetOpen, setWidgetOpen] = useState(cookies[HIDE_SUBSCRIBED_FEED_SUGGESTED_USERS] !== "true");

  const [suggestedUsers, setSuggestedUsers] = useState<UsersMinimumInfo[]>();
  const [hiddenSuggestionIdx, setHiddenSuggestionIdx] = useState<number>();

  const { captureEvent } = useTracking();
  const { flash } = useMessages();

  const toggleWidgetOpen = () => {
    setWidgetOpen(!widgetOpen);
    setCookie(HIDE_SUBSCRIBED_FEED_SUGGESTED_USERS, widgetOpen ? "true" : "false")
  }

  const { results, loading } = usePaginatedResolver({
    fragmentName: "UsersMinimumInfo",
    resolverName: "SuggestedFeedSubscriptionUsers",
    limit: 15,
    itemsPerPage: 10,
    ssr: apolloSSRFlag(false),
  });

  const displayedSuggestionLimit = 12;

  const { create: createSubscription } = useCreate({
    collectionName: 'Subscriptions',
    fragmentName: 'SubscriptionState',
  });

  useEffect(() => {
    setSuggestedUsers(results);
  }, [results]);

  const availableUsers = suggestedUsers ?? results ?? [];

  const subscribeToUser = (user: HasIdType & UserDisplayNameInfo, index?: number, dismiss = false) => {
    const newSubscription = {
      state: dismiss ? 'suppressed' : 'subscribed',
      documentId: user._id,
      collectionName: "Users",
      type: "newActivityForFeed",
    } as const;

    void createSubscription({data: newSubscription});
    captureEvent("subscribedToUserFeedActivity", {subscribedUserId: user._id, state: newSubscription.state})
    
    const username = userGetDisplayName(user)
    const successMessage = dismiss ? `Successfully dismissed ${username}` : `Successfully subscribed to ${username}`
    flash({messageString: successMessage});

    // This plus the conditional styling on the list items is to allow for a smoother collapse animation
    // General approach taken from https://css-tricks.com/animation-techniques-for-adding-and-removing-items-from-a-stack/#aa-the-collapse-animation
    setHiddenSuggestionIdx(index);
    setTimeout(() => {
      setHiddenSuggestionIdx(undefined);
      setSuggestedUsers(availableUsers.filter((suggestedUser) => suggestedUser._id !== user._id));
    }, 700);
    if (!dismiss) {
      void refetchFeed();
    }
  };

  return <div className={classNames(classes.root, {[classes.widgetOpen]: widgetOpen, [classes.widgetClosed]: !widgetOpen})}>
    <div className={classes.titleRow}>
      <div className={classes.hideButton} onClick={toggleWidgetOpen}>
        {widgetOpen ? "Hide" : "Show Suggested Users"}
      </div>
      {widgetOpen && <div className={classes.titleAndManageLink}>
        <div className={classes.sectionTitle}>
          Suggested Users for You
        </div>
        <Link to="/manageSubscriptions" className={classes.manageSubscriptionsLink}>
          {preferredHeadingCase("Manage Subscriptions")}
        </Link>
      </div>}
    </div>
    {widgetOpen && loading && <Loading />}
    {widgetOpen && !loading && <div className={classes.userSubscribeButtons}>
      {availableUsers.slice(0, displayedSuggestionLimit).map((user, idx) => <SubscriptionButton 
        user={user} 
        key={user._id}
        hidden={idx === hiddenSuggestionIdx}
        handleSubscribeOrDismiss={(user, dismiss) => subscribeToUser(user, idx, dismiss)}
        classes={classes}
      />)}
    </div>}
    {widgetOpen && <UserSelect value={null} setValue={(_, user) => user && subscribeToUser(user)} label='Subscribe to user' />}
  </div>;
}

const SuggestedFeedSubscriptionsComponent = registerComponent('SuggestedFeedSubscriptions', SuggestedFeedSubscriptions, {styles});

declare global {
  interface ComponentTypes {
    SuggestedFeedSubscriptions: typeof SuggestedFeedSubscriptionsComponent
  }
}

1	import React, { useEffect, useState } from 'react';	3✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
3	import { useTracking } from "../../lib/analyticsEvents";	1✔
4	import { usePaginatedResolver } from '../hooks/usePaginatedResolver';	1✔
5	import { useMessages } from '../common/withMessages';	1✔
6	import { useCreate } from '../../lib/crud/withCreate';	1✔
7	import { UserDisplayNameInfo, userGetDisplayName } from '../../lib/collections/users/helpers';	1✔
8	import { Link } from '../../lib/reactRouterWrapper';	1✔
9	import { preferredHeadingCase } from '../../themes/forumTheme';	1✔
10	import { HIDE_SUBSCRIBED_FEED_SUGGESTED_USERS } from '../../lib/cookies/cookies';	1✔
11	import { useCookiesWithConsent } from '../hooks/useCookiesWithConsent';	1✔
12	import classNames from 'classnames';	1✔
13	import { apolloSSRFlag } from '@/lib/helpers';	1✔
14
15	const styles = (theme: ThemeType) => ({	1✔
16	root: {
17	display: "flex",
18	flexDirection: "column",
19	width: "100%",
20	marginTop: 10,
21	background: theme.palette.panelBackground.recentDiscussionThread,
22	borderRadius: 3,
23	},
24	widgetOpen: {
25	paddingTop: 12,
26	paddingLeft: 16,
27	paddingRight: 16,
28	paddingBottom: 12,
29	marginBottom: 10,
30	width: "100%",
31	},
32	widgetClosed: {
33	opacity: 0.8,
34	background: "none",
35	textShadow: `2px 2px 20px ${theme.palette.background.default}`
36	},
37	titleRow: {
38	display: "flex",
39	flexDirection: "row-reverse",
40	justifyContent: "space-between",
41	alignItems: "flex-start",
42	},
43	titleAndManageLink: {
44	display: "flex",
45	flexDirection: "row",
46	justifyContent: "space-between",
47	alignItems: "baseline",
48	flexGrow: 1
49	},
50	sectionTitle: {
51	...theme.typography.postStyle,
52	marginBottom: 5,
53	display: "block",
54	fontSize: "1.5rem",
55	[theme.breakpoints.down('xs')]: {
56	fontSize: "1.3rem",
57	}
58	},
59	manageSubscriptionsLink: {
60	padding: 8,
61	...theme.typography.commentStyle,
62	fontSize: "1rem",
63	opacity: 0.7,
64	'&:hover': {
65	opacity: 1.0,
66	}
67	},
68	hideButton: {
69	...theme.typography.commentStyle,
70	padding: 8,
71	borderRadius: 3,
72	fontSize: "1rem",
73	opacity: 0.7,
74	display: "flex",
75	alignItems: "center",
76	flexWrap: "nowrap",
77	'&:hover': {
78	backgroundColor: theme.palette.grey[200],
79	opacity: 0.7,
80	}
81	},
82	userSubscribeButtons: {
83	display: "flex",
84	flexWrap: "wrap",
85	overflow: "hidden",
86	alignContent: "start",
87	gap: "4px",
88	height: 164,
89	['@media(max-width: 409px)']: {
90	width: 302,
91	},
92	},
93	suggestedUserListItem: {
94	transition: "all .5s ease-out",
95	listStyle: "none",
96	height: 80,
97	width: 118,
98	['@media(max-width: 409px)']: {
99	width: 98,
100	},
101	},
102	removedSuggestedUserListItem: {
103	width: 0,
104	opacity: 0,
105	},
106	suggestedUser: {
107	display: "flex",
108	flexDirection: "column",
109	alignItems: "center",
110	gap: "4px",
111	background: theme.palette.grey[400],
112	height: "100%",
113	borderRadius: 4,
114	padding: 5,
115	},
116	suggestedUserButtons: {
117	display: "flex",
118	gap: "4px",
119	},
120	subscribeButton: {
121	display: "flex",
122	padding: 5,
123	borderRadius: 4,
124	alignItems: "center",
125	justifyContent: "center",
126	...theme.typography.commentStyle,
127	fontSize: "0.8rem",
128	opacity: 0.9,
129	background: theme.palette.grey[200],
130	cursor: "pointer",
131	width: 52,
132	['@media(max-width: 409px)']: {
133	width: 42,
134	},
135	},
136	buttonDisplayName: {
137	...theme.typography.commentStyle,
138	width: "100%",
139	flexGrow: 1,
140	},
141	clampedUserName: {
142	// This entire setup allows us to do a graceful truncation after 2 lines (which some longer display names hit)
143	// Browser support is _basically_ good: https://caniuse.com/?search=line-clamp
144	height: "2lh",
145	display: "-webkit-box",
146	overflow: "hidden",
147	textOverflow: "ellipsis",
148	'-webkit-line-clamp': 2,
149	'-webkit-box-orient': "vertical",
150	// Some single-word display names are longer than the width of the container
151	overflowWrap: "break-word",
152	},
153	icon: {
154	width: 17,
155	marginBottom: -3,
156	cursor: "pointer",
157	'&:hover': {
158	backgroundColor: theme.palette.grey[300],
159	}
160	}
161	});
162
163
164	const SubscriptionButton = ({user, handleSubscribeOrDismiss, hidden, classes}: {	1✔
165	user: UsersMinimumInfo,
166	handleSubscribeOrDismiss: (user: UsersMinimumInfo, dismiss?: boolean) => void,
167	hidden?: boolean,
168	classes: ClassesType<typeof styles>,
169	}) => {
NEW 170	const { UsersName } = Components;	×
171
172	return (<li className={classNames(classes.suggestedUserListItem, { [classes.removedSuggestedUserListItem]: hidden })}>	×
173	<div className={classes.suggestedUser}>
174	<div className={classes.buttonDisplayName} >
175	<UsersName user={user} className={classes.clampedUserName} />
176	</div>
177	<div className={classes.suggestedUserButtons}>
178	<div className={classes.subscribeButton}>
NEW 179	<div onClick={() => handleSubscribeOrDismiss(user)}>	×
180	Follow
181	</div>
182	</div>
183	<div className={classes.subscribeButton}>
NEW 184	<div onClick={() => handleSubscribeOrDismiss(user, true)}>	×
185	Dismiss
186	</div>
187	</div>
188	</div>
189	</div>
190	</li>);
191	}
192
193	export const SuggestedFeedSubscriptions = ({refetchFeed, classes}: {	1✔
194	refetchFeed: () => void,
195	classes: ClassesType<typeof styles>,
196	}) => {
197	const { Loading, UserSelect } = Components;	×
198
199	const [cookies, setCookie] = useCookiesWithConsent([HIDE_SUBSCRIBED_FEED_SUGGESTED_USERS])	×
UNCOV 200	const [widgetOpen, setWidgetOpen] = useState(cookies[HIDE_SUBSCRIBED_FEED_SUGGESTED_USERS] !== "true");	×
201
202	const [suggestedUsers, setSuggestedUsers] = useState<UsersMinimumInfo[]>();	×
203	const [hiddenSuggestionIdx, setHiddenSuggestionIdx] = useState<number>();	×
204
205	const { captureEvent } = useTracking();	×
206	const { flash } = useMessages();	×
207
208	const toggleWidgetOpen = () => {	×
209	setWidgetOpen(!widgetOpen);	×
210	setCookie(HIDE_SUBSCRIBED_FEED_SUGGESTED_USERS, widgetOpen ? "true" : "false")	×
211	}
212
213	const { results, loading } = usePaginatedResolver({	×
214	fragmentName: "UsersMinimumInfo",
215	resolverName: "SuggestedFeedSubscriptionUsers",
216	limit: 15,
217	itemsPerPage: 10,
218	ssr: apolloSSRFlag(false),
219	});
220
NEW 221	const displayedSuggestionLimit = 12;	×
222
223	const { create: createSubscription } = useCreate({	×
224	collectionName: 'Subscriptions',
225	fragmentName: 'SubscriptionState',
226	});
227
228	useEffect(() => {	×
229	setSuggestedUsers(results);	×
230	}, [results]);
231
232	const availableUsers = suggestedUsers ?? results ?? [];	×
233
234	const subscribeToUser = (user: HasIdType & UserDisplayNameInfo, index?: number, dismiss = false) => {	×
235	const newSubscription = {	×
236	state: dismiss ? 'suppressed' : 'subscribed',	×
237	documentId: user._id,
238	collectionName: "Users",
239	type: "newActivityForFeed",
240	} as const;
241
242	void createSubscription({data: newSubscription});	×
243	captureEvent("subscribedToUserFeedActivity", {subscribedUserId: user._id, state: newSubscription.state})	×
244
245	const username = userGetDisplayName(user)	×
246	const successMessage = dismiss ? `Successfully dismissed ${username}` : `Successfully subscribed to ${username}`	×
247	flash({messageString: successMessage});	×
248
249	// This plus the conditional styling on the list items is to allow for a smoother collapse animation
250	// General approach taken from https://css-tricks.com/animation-techniques-for-adding-and-removing-items-from-a-stack/#aa-the-collapse-animation
251	setHiddenSuggestionIdx(index);	×
252	setTimeout(() => {	×
253	setHiddenSuggestionIdx(undefined);	×
254	setSuggestedUsers(availableUsers.filter((suggestedUser) => suggestedUser._id !== user._id));	×
255	}, 700);
256	if (!dismiss) {	×
257	void refetchFeed();	×
258	}
259	};
260
261	return <div className={classNames(classes.root, {[classes.widgetOpen]: widgetOpen, [classes.widgetClosed]: !widgetOpen})}>	×
262	<div className={classes.titleRow}>
263	<div className={classes.hideButton} onClick={toggleWidgetOpen}>
264	{widgetOpen ? "Hide" : "Show Suggested Users"}	×
265	</div>
266	{widgetOpen && <div className={classes.titleAndManageLink}>	×
267	<div className={classes.sectionTitle}>
268	Suggested Users for You
269	</div>
270	<Link to="/manageSubscriptions" className={classes.manageSubscriptionsLink}>
271	{preferredHeadingCase("Manage Subscriptions")}
272	</Link>
273	</div>}
274	</div>
275	{widgetOpen && loading && <Loading />}	×
276	{widgetOpen && !loading && <div className={classes.userSubscribeButtons}>	×
UNCOV 277	{availableUsers.slice(0, displayedSuggestionLimit).map((user, idx) => <SubscriptionButton	×
278	user={user}
279	key={user._id}
280	hidden={idx === hiddenSuggestionIdx}
281	handleSubscribeOrDismiss={(user, dismiss) => subscribeToUser(user, idx, dismiss)}	×
282	classes={classes}
283	/>)}
284	</div>}
285	{widgetOpen && <UserSelect value={null} setValue={(_, user) => user && subscribeToUser(user)} label='Subscribe to user' />}	×
286	</div>;
287	}
288
289	const SuggestedFeedSubscriptionsComponent = registerComponent('SuggestedFeedSubscriptions', SuggestedFeedSubscriptions, {styles});	1✔
290
291	declare global {
292	interface ComponentTypes {
293	SuggestedFeedSubscriptions: typeof SuggestedFeedSubscriptionsComponent
294	}
295	}

ForumMagnum / ForumMagnum / 9308654156

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