Page MenuHomePhabricator
Files F3393975

D3674.id11475.diff
No OneTemporary
Actions

D3674.id11475.diff
View Options

diff --git a/web/settings/relationship/user-list.css b/web/settings/relationship/user-list.css
new file mode 100644
--- /dev/null
+++ b/web/settings/relationship/user-list.css
@@ -0,0 +1,3 @@
+.container {
+ overflow: auto;
+}
diff --git a/web/settings/relationship/user-list.react.js b/web/settings/relationship/user-list.react.js
new file mode 100644
--- /dev/null
+++ b/web/settings/relationship/user-list.react.js
@@ -0,0 +1,55 @@
+// @flow
+
+import * as React from 'react';
+
+import { userStoreSearchIndex as userStoreSearchIndexSelector } from 'lib/selectors/user-selectors';
+import type { AccountUserInfo } from 'lib/types/user-types';
+
+import { useSelector } from '../../redux/redux-utils';
+import css from './user-list.css';
+
+export type UserRowProps = {
+ +userInfo: AccountUserInfo,
+};
+
+type UserListProps = {
+ +userRowComponent: React.ComponentType<UserRowProps>,
+ +filterUser: (userInfo: AccountUserInfo) => boolean,
+ +usersComparator: (user1: AccountUserInfo, user2: AccountUserInfo) => number,
+ +searchText: string,
+};
+
+export function UserList(props: UserListProps): React.Node {
+ const { userRowComponent, filterUser, usersComparator, searchText } = props;
+ const userInfos = useSelector(state => state.userStore.userInfos);
+ const userStoreSearchIndex = useSelector(userStoreSearchIndexSelector);
+
+ const searchResult = React.useMemo(
+ () => userStoreSearchIndex.getSearchResults(searchText),
+ [searchText, userStoreSearchIndex],
+ );
+
+ const users = React.useMemo(() => {
+ const userIDs = searchText ? searchResult : Object.keys(userInfos);
+ const unfilteredUserInfos = [];
+ for (const id of userIDs) {
+ const { username, relationshipStatus } = userInfos[id];
+ if (!username) {
+ continue;
+ }
+ unfilteredUserInfos.push({
+ id,
+ username,
+ relationshipStatus,
+ });
+ }
+ return unfilteredUserInfos.filter(filterUser).sort(usersComparator);
+ }, [filterUser, searchResult, searchText, userInfos, usersComparator]);
+
+ const userRows = React.useMemo(() => {
+ const UserRow = userRowComponent;
+ return users.map(user => <UserRow userInfo={user} key={user.id} />);
+ }, [users, userRowComponent]);
+
+ return <div className={css.container}>{userRows}</div>;
+}

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 1, 4:46 PM (20 h, 45 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2605612
Default Alt Text
D3674.id11475.diff (2 KB)

Event Timeline