9455300984

Committed 10 Jun 2024 08:45PM UTC coverage: 31.869% (-0.01%) from 31.88%

Build # 9455300984

Build Type

Pull #9386

github

Committed by

darkruby501

Commit Message

slight fixes

Pull Request Pull Request #9386: Clean Up ManageSubscriptions page

Run Details

4815 of 39358 branches covered (12.23%)

Branch coverage included in aggregate %.

3 of 7 new or added lines in 1 file covered. (42.86%)

100 existing lines in 8 files now uncovered.

27991 of 63581 relevant lines covered (44.02%)

180.04 hits per line

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

22.97

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

import React, { useRef, 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';
import CloseIcon from '@material-ui/icons/Close';
import { PopperPlacementType } from '@material-ui/core/Popper';
import { useCurrentUser } from '../common/withUser';
import Paper from '@material-ui/core/Paper';

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: 32,
  },
  titleRow: {
    display: "flex",
    flexDirection: "row-reverse",
    justifyContent: "space-between",
    alignItems: "flex-start",
    marginBottom: 5,
  },
  titleAndManageLink: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    flexGrow: 1
  },
  sectionTitle: {
    ...theme.typography.postStyle,
    display: "block",
    fontSize: "1.5rem",
    flexGrow: 1,
    [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,
    }
  },
  userSubscribeCards: {
    display: "flex",
    flexWrap: "wrap",
    overflow: "hidden",
    alignContent: "start",
    gap: "6px",
    height: 180,
    marginTop: 8,
  },
  suggestedUserListItem: {
    transition: "all .5s ease-out",
    listStyle: "none",
    height: 85,
    minWidth: 145,
    flexGrow: 1,
    flexBasis: 145,
    ['@media(max-width: 500px)']: {
      minWidth: 98,
      flexBasis: 98,
    },
  },
  removedSuggestedUserListItem: {
    width: 0,
    opacity: 0,
  },
  suggestedUser: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    background: theme.palette.grey[100],
    gap: "4px",
    height: "100%",
    borderRadius: 4,
    padding: 8,
  },
  buttonUserInfo: {
    display: "flex",
    flexDirection: "column",
  },
  subscribeButton: {
    display: "flex",
    padding: 5,
    borderRadius: 4,
    alignItems: "center",
    justifyContent: "center",
    ...theme.typography.commentStyle,
    fontSize: "0.9rem",
    cursor: "pointer",
  },
  followButton: {
    width: 70,
    color: theme.palette.grey['A400'],
    background: theme.palette.grey[300],
    '&:hover': {
      color: theme.palette.grey['A700'],
    }
  },
  buttonDisplayNameAndDismiss: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
  },
  dismissButton: {
    width: 16,
    height: 16,
    color: theme.palette.grey[400],
    cursor: "pointer",
    '&:hover': {
      color: theme.palette.grey[900],
    }
  },
  buttonDisplayName: {
    ...theme.typography.commentStyle,
    fontSize: "1rem",
    width: "100%",
    marginBottom: 4,
  },
  buttonMetaInfo: {
    color: theme.palette.grey[600],
    fontSize: "0.8rem",
  },
  buttonInfo: {
    "&&": {
      fontSize: "0.8rem",
      marginRight: 6,
      color: theme.palette.grey[600],
    }
  },
  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: "1lh",
    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],
    }
  },
  followUserSearchButton: {
    ...theme.typography.commentStyle,
    color: theme.palette.grey[600],
    display: "inline-block",
    textAlign: "center",
    "@media print": { display: "none" },
  },
  followUserSearchIcon: {
    width: 18,
    marginBottom: -4,
    marginRight: 4,
  },
  hideOnSmallScreens: {
    ['@media(max-width: 500px)']: {
      display: "none",
    }
  }
});


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

  return (<li className={classNames(classes.suggestedUserListItem, { [classes.removedSuggestedUserListItem]: hidden })}>
    <div className={classes.suggestedUser}>
      <div className={classes.buttonUserInfo} >
        <div className={classes.buttonDisplayNameAndDismiss} >
          <div className={classes.buttonDisplayName} >
            <UsersName user={user} className={classes.clampedUserName} hideFollowButton/>
          </div>
          <CloseIcon onClick={() => handleSubscribeOrDismiss(user, true)} className={classes.dismissButton} />
        </div>
        <div className={classes.buttonMetaInfo}>
          <UserMetaInfo 
            user={user} 
            infoClassName={classes.buttonInfo} 
            hideAfKarma 
            hideWikiContribution 
            hideInfoOnSmallScreen
          />
        </div>
      </div>
      <div 
        className={classNames(classes.subscribeButton, classes.followButton)} 
        onClick={() => handleSubscribeOrDismiss(user)}
      >
        Follow
      </div>
    </div>
  </li>);
}


const FollowUserSearchButton = ({onUserSelected, tooltipPlacement = "bottom-end", classes}: {
  onUserSelected: (user: UsersMinimumInfo ) => void,
  tooltipPlacement?: PopperPlacementType,
  classes: ClassesType<typeof styles>,
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const anchorEl = useRef<HTMLAnchorElement|null>(null);
  const currentUser = useCurrentUser();
  const { captureEvent } = useTracking()
  const { LWPopper, FollowUserSearch, LWClickAwayListener, ForumIcon } = Components

  if(!currentUser) {
    return null;
  }

  return <a
    onClick={() => {
      setIsOpen(true);
      captureEvent("followUserSearchClicked")
    }}
    className={classes.followUserSearchButton}
    ref={anchorEl}
  >
      <span className={classes.followUserSearchButton}>
        <ForumIcon icon="Search" className={classes.followUserSearchIcon}/>
      </span>
    <LWPopper
      open={isOpen}
      anchorEl={anchorEl.current}
      placement={tooltipPlacement}
      allowOverflow
    >
      <LWClickAwayListener
        onClickAway={() => setIsOpen(false)}
      >
        <Paper>
          <FollowUserSearch
            currentUser={currentUser}
            onUserSelected={(user: UsersMinimumInfo) => {
              setIsOpen(false);
              onUserSelected(user);
            }}
          />
        </Paper>
      </LWClickAwayListener>
    </LWPopper>
  </a>;
}


export const SuggestedFeedSubscriptions = ({ availableUsers, loadingSuggestedUsers, setAvailableUsers, loadMoreSuggestedUsers, refetchFeed, classes }: {
  availableUsers: UsersMinimumInfo[],
  loadingSuggestedUsers: boolean,
  setAvailableUsers: (updatedUsers: UsersMinimumInfo[]) => void,
  loadMoreSuggestedUsers: () => void,
  refetchFeed: () => void,
  classes: ClassesType<typeof styles>,
}) => {
  const { Loading } = 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});

    if (availableUsers.length < displayedSuggestionLimit + 2) {
      void loadMoreSuggestedUsers();
    }

    // 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>
        <FollowUserSearchButton onUserSelected={subscribeToUser} classes={classes} />
        <Link to="/manageSubscriptions" className={classes.manageSubscriptionsLink}>
          {preferredHeadingCase("Manage")}
          <span className={classes.hideOnSmallScreens}>{preferredHeadingCase(" Subscriptions")}</span>
        </Link>
      </div>
    </div>
    {loadingSuggestedUsers && <Loading />}
    {!loadingSuggestedUsers && <div className={classes.userSubscribeCards}>
      {availableUsers.slice(0, displayedSuggestionLimit).map((user, idx) => <SuggestedFollowCard 
        user={user} 
        key={user._id}
        hidden={idx === hiddenSuggestionIdx}
        handleSubscribeOrDismiss={(user, dismiss) => subscribeToUser(user, idx, dismiss)}
        classes={classes}
      />)}
    </div>}

  </div>;
}

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

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

1	import React, { useRef, 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	import CloseIcon from '@material-ui/icons/Close';	1✔
11	import { PopperPlacementType } from '@material-ui/core/Popper';
12	import { useCurrentUser } from '../common/withUser';	1✔
13	import Paper from '@material-ui/core/Paper';	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	paddingTop: 12,
24	paddingLeft: 16,
25	paddingRight: 16,
26	paddingBottom: 12,
27	marginBottom: 32,
28	},
29	titleRow: {
30	display: "flex",
31	flexDirection: "row-reverse",
32	justifyContent: "space-between",
33	alignItems: "flex-start",
34	marginBottom: 5,
35	},
36	titleAndManageLink: {
37	display: "flex",
38	flexDirection: "row",
39	justifyContent: "space-between",
40	alignItems: "center",
41	flexGrow: 1
42	},
43	sectionTitle: {
44	...theme.typography.postStyle,
45	display: "block",
46	fontSize: "1.5rem",
47	flexGrow: 1,
48	[theme.breakpoints.down('xs')]: {
49	fontSize: "1.3rem",
50	}
51	},
52	manageSubscriptionsLink: {
53	padding: 8,
54	...theme.typography.commentStyle,
55	fontSize: "1rem",
56	opacity: 0.7,
57	'&:hover': {
58	opacity: 1.0,
59	}
60	},
61	hideButton: {
62	...theme.typography.commentStyle,
63	padding: 8,
64	borderRadius: 3,
65	fontSize: "1rem",
66	opacity: 0.7,
67	display: "flex",
68	alignItems: "center",
69	flexWrap: "nowrap",
70	'&:hover': {
71	backgroundColor: theme.palette.grey[200],
72	opacity: 0.7,
73	}
74	},
75	userSubscribeCards: {
76	display: "flex",
77	flexWrap: "wrap",
78	overflow: "hidden",
79	alignContent: "start",
80	gap: "6px",
81	height: 180,
82	marginTop: 8,
83	},
84	suggestedUserListItem: {
85	transition: "all .5s ease-out",
86	listStyle: "none",
87	height: 85,
88	minWidth: 145,
89	flexGrow: 1,
90	flexBasis: 145,
91	['@media(max-width: 500px)']: {
92	minWidth: 98,
93	flexBasis: 98,
94	},
95	},
96	removedSuggestedUserListItem: {
97	width: 0,
98	opacity: 0,
99	},
100	suggestedUser: {
101	display: "flex",
102	flexDirection: "column",
103	justifyContent: "space-between",
104	background: theme.palette.grey[100],
105	gap: "4px",
106	height: "100%",
107	borderRadius: 4,
108	padding: 8,
109	},
110	buttonUserInfo: {
111	display: "flex",
112	flexDirection: "column",
113	},
114	subscribeButton: {
115	display: "flex",
116	padding: 5,
117	borderRadius: 4,
118	alignItems: "center",
119	justifyContent: "center",
120	...theme.typography.commentStyle,
121	fontSize: "0.9rem",
122	cursor: "pointer",
123	},
124	followButton: {
125	width: 70,
126	color: theme.palette.grey['A400'],
127	background: theme.palette.grey[300],
128	'&:hover': {
129	color: theme.palette.grey['A700'],
130	}
131	},
132	buttonDisplayNameAndDismiss: {
133	display: "flex",
134	justifyContent: "space-between",
135	alignItems: "center",
136	},
137	dismissButton: {
138	width: 16,
139	height: 16,
140	color: theme.palette.grey[400],
141	cursor: "pointer",
142	'&:hover': {
143	color: theme.palette.grey[900],
144	}
145	},
146	buttonDisplayName: {
147	...theme.typography.commentStyle,
148	fontSize: "1rem",
149	width: "100%",
150	marginBottom: 4,
151	},
152	buttonMetaInfo: {
153	color: theme.palette.grey[600],
154	fontSize: "0.8rem",
155	},
156	buttonInfo: {
157	"&&": {
158	fontSize: "0.8rem",
159	marginRight: 6,
160	color: theme.palette.grey[600],
161	}
162	},
163	clampedUserName: {
164	// This entire setup allows us to do a graceful truncation after 2 lines (which some longer display names hit)
165	// Browser support is _basically_ good: https://caniuse.com/?search=line-clamp
166	height: "1lh",
167	display: "-webkit-box",
168	overflow: "hidden",
169	textOverflow: "ellipsis",
170	'-webkit-line-clamp': 2,
171	'-webkit-box-orient': "vertical",
172	// Some single-word display names are longer than the width of the container
173	overflowWrap: "break-word",
174	},
175	icon: {
176	width: 17,
177	marginBottom: -3,
178	cursor: "pointer",
179	'&:hover': {
180	backgroundColor: theme.palette.grey[300],
181	}
182	},
183	followUserSearchButton: {
184	...theme.typography.commentStyle,
185	color: theme.palette.grey[600],
186	display: "inline-block",
187	textAlign: "center",
188	"@media print": { display: "none" },
189	},
190	followUserSearchIcon: {
191	width: 18,
192	marginBottom: -4,
193	marginRight: 4,
194	},
195	hideOnSmallScreens: {
196	['@media(max-width: 500px)']: {
197	display: "none",
198	}
199	}
200	});
201
202
203	const SuggestedFollowCard = ({user, handleSubscribeOrDismiss, hidden, classes}: {	1✔
204	user: UsersMinimumInfo,
205	handleSubscribeOrDismiss: (user: UsersMinimumInfo, dismiss?: boolean) => void,
206	hidden?: boolean,
207	classes: ClassesType<typeof styles>,
208	}) => {
209	const { UsersName, UserMetaInfo } = Components;	×
210
211	return (<li className={classNames(classes.suggestedUserListItem, { [classes.removedSuggestedUserListItem]: hidden })}>	×
212	<div className={classes.suggestedUser}>
213	<div className={classes.buttonUserInfo} >
214	<div className={classes.buttonDisplayNameAndDismiss} >
215	<div className={classes.buttonDisplayName} >
216	<UsersName user={user} className={classes.clampedUserName} hideFollowButton/>
217	</div>
218	<CloseIcon onClick={() => handleSubscribeOrDismiss(user, true)} className={classes.dismissButton} />	×
219	</div>
220	<div className={classes.buttonMetaInfo}>
221	<UserMetaInfo
222	user={user}
223	infoClassName={classes.buttonInfo}
224	hideAfKarma
225	hideWikiContribution
226	hideInfoOnSmallScreen
227	/>
228	</div>
229	</div>
230	<div
231	className={classNames(classes.subscribeButton, classes.followButton)}
UNCOV 232	onClick={() => handleSubscribeOrDismiss(user)}	×
233	>
234	Follow
235	</div>
236	</div>
237	</li>);
238	}
239
240
241	const FollowUserSearchButton = ({onUserSelected, tooltipPlacement = "bottom-end", classes}: {	1!
242	onUserSelected: (user: UsersMinimumInfo ) => void,
243	tooltipPlacement?: PopperPlacementType,
244	classes: ClassesType<typeof styles>,
245	}) => {
246	const [isOpen, setIsOpen] = useState(false);	×
247	const anchorEl = useRef<HTMLAnchorElement\|null>(null);	×
248	const currentUser = useCurrentUser();	×
249	const { captureEvent } = useTracking()	×
UNCOV 250	const { LWPopper, FollowUserSearch, LWClickAwayListener, ForumIcon } = Components	×
251
252	if(!currentUser) {	×
UNCOV 253	return null;	×
254	}
255
UNCOV 256	return <a	×
257	onClick={() => {
258	setIsOpen(true);	×
UNCOV 259	captureEvent("followUserSearchClicked")	×
260	}}
261	className={classes.followUserSearchButton}
262	ref={anchorEl}
263	>
264	<span className={classes.followUserSearchButton}>
265	<ForumIcon icon="Search" className={classes.followUserSearchIcon}/>
266	</span>
267	<LWPopper
268	open={isOpen}
269	anchorEl={anchorEl.current}
270	placement={tooltipPlacement}
271	allowOverflow
272	>
273	<LWClickAwayListener
UNCOV 274	onClickAway={() => setIsOpen(false)}	×
275	>
276	<Paper>
277	<FollowUserSearch
278	currentUser={currentUser}
279	onUserSelected={(user: UsersMinimumInfo) => {
280	setIsOpen(false);	×
UNCOV 281	onUserSelected(user);	×
282	}}
283	/>
284	</Paper>
285	</LWClickAwayListener>
286	</LWPopper>
287	</a>;
288	}
289
290
291	export const SuggestedFeedSubscriptions = ({ availableUsers, loadingSuggestedUsers, setAvailableUsers, loadMoreSuggestedUsers, refetchFeed, classes }: {	1✔
292	availableUsers: UsersMinimumInfo[],
293	loadingSuggestedUsers: boolean,
294	setAvailableUsers: (updatedUsers: UsersMinimumInfo[]) => void,
295	loadMoreSuggestedUsers: () => void,
296	refetchFeed: () => void,
297	classes: ClassesType<typeof styles>,
298	}) => {
UNCOV 299	const { Loading } = Components;	×
300
UNCOV 301	const [hiddenSuggestionIdx, setHiddenSuggestionIdx] = useState<number>();	×
302
303	const { captureEvent } = useTracking();	×
UNCOV 304	const { flash } = useMessages();	×
305
UNCOV 306	const displayedSuggestionLimit = 12;	×
307
UNCOV 308	const { create: createSubscription } = useCreate({	×
309	collectionName: 'Subscriptions',
310	fragmentName: 'SubscriptionState',
311	});
312
313	const subscribeToUser = (user: HasIdType & UserDisplayNameInfo, index?: number, dismiss = false) => {	×
UNCOV 314	const newSubscription = {	×
315	state: dismiss ? 'suppressed' : 'subscribed',	×
316	documentId: user._id,
317	collectionName: "Users",
318	type: "newActivityForFeed",
319	} as const;
320
321	void createSubscription({data: newSubscription});	×
UNCOV 322	captureEvent("subscribedToUserFeedActivity", {subscribedUserId: user._id, state: newSubscription.state})	×
323
324	const username = userGetDisplayName(user)	×
325	const successMessage = dismiss ? `Successfully dismissed ${username}` : `Successfully subscribed to ${username}`	×
UNCOV 326	flash({messageString: successMessage});	×
327
328	if (availableUsers.length < displayedSuggestionLimit + 2) {	×
UNCOV 329	void loadMoreSuggestedUsers();	×
330	}
331
332	// This plus the conditional styling on the list items is to allow for a smoother collapse animation
333	// General approach taken from https://css-tricks.com/animation-techniques-for-adding-and-removing-items-from-a-stack/#aa-the-collapse-animation
334	setHiddenSuggestionIdx(index);	×
335	setTimeout(() => {	×
336	setHiddenSuggestionIdx(undefined);	×
UNCOV 337	setAvailableUsers(availableUsers.filter((suggestedUser) => suggestedUser._id !== user._id));	×
338	}, 700);
339	if (!dismiss) {	×
UNCOV 340	void refetchFeed();	×
341	}
342	};
343
UNCOV 344	return <div className={classes.root}>	×
345	<div className={classes.titleRow}>
346	<div className={classes.titleAndManageLink}>
347	<div className={classes.sectionTitle}>
348	Suggested Users for You
349	</div>
350	<FollowUserSearchButton onUserSelected={subscribeToUser} classes={classes} />
351	<Link to="/manageSubscriptions" className={classes.manageSubscriptionsLink}>
352	{preferredHeadingCase("Manage")}
353	<span className={classes.hideOnSmallScreens}>{preferredHeadingCase(" Subscriptions")}</span>
354	</Link>
355	</div>
356	</div>
357	{loadingSuggestedUsers && <Loading />}	×
358	{!loadingSuggestedUsers && <div className={classes.userSubscribeCards}>	×
UNCOV 359	{availableUsers.slice(0, displayedSuggestionLimit).map((user, idx) => <SuggestedFollowCard	×
360	user={user}
361	key={user._id}
362	hidden={idx === hiddenSuggestionIdx}
UNCOV 363	handleSubscribeOrDismiss={(user, dismiss) => subscribeToUser(user, idx, dismiss)}	×
364	classes={classes}
365	/>)}
366	</div>}
367
368	</div>;
369	}
370
371	const SuggestedFeedSubscriptionsComponent = registerComponent('SuggestedFeedSubscriptions', SuggestedFeedSubscriptions, {styles});	1✔
372
373	declare global {
374	interface ComponentTypes {
375	SuggestedFeedSubscriptions: typeof SuggestedFeedSubscriptionsComponent
376	}
377	}

ForumMagnum / ForumMagnum / 9455300984

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