9310421713

Committed 30 May 2024 11:17PM UTC coverage: 31.896% (-0.009%) from 31.905%

Build # 9310421713

Build Type

push

github

Committed by

b0b3rt

Commit Message

Merge branch 'subscribed-feed-launch' of https://github.com/ForumMagnum/ForumMagnum into subscribed-feed-launch

Run Details

4805 of 39280 branches covered (12.23%)

Branch coverage included in aggregate %.

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

99 existing lines in 2 files now uncovered.

27945 of 63399 relevant lines covered (44.08%)

179.57 hits per line

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

24.53

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

import React, { useState } from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { useTracking } from "../../lib/analyticsEvents";
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 classNames from 'classnames';

const styles = (theme: ThemeType) => ({
  root: {
    display: "flex",
    flexDirection: "column",
    width: "100%",
    marginTop: 10,
    background: theme.palette.panelBackground.recentDiscussionThread,
    borderRadius: 3,
    paddingTop: 12,
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 12,
    marginBottom: 10,
    // width: "100%",
  },
  // 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",
    border: theme.palette.border.normal,
    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 = ({ availableUsers, loadingSuggestedUsers, setAvailableUsers, refetchFeed, classes }: {
  availableUsers: UsersMinimumInfo[],
  loadingSuggestedUsers: boolean,
  setAvailableUsers: (updatedUsers: UsersMinimumInfo[]) => void,
  refetchFeed: () => void,
  classes: ClassesType<typeof styles>,
}) => {
  const { Loading, UserSelect } = Components;

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

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

  const displayedSuggestionLimit = 12;

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

  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);
      setAvailableUsers(availableUsers.filter((suggestedUser) => suggestedUser._id !== user._id));
    }, 700);
    if (!dismiss) {
      void refetchFeed();
    }
  };

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

ForumMagnum / ForumMagnum / 9310421713

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