Page MenuHomePhorge
Files F32559717

D10822.1767286558.diff
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

D10822.1767286558.diff
View Options

diff --git a/web/settings/relationship/add-users-list.css b/web/settings/relationship/add-users-list.css
--- a/web/settings/relationship/add-users-list.css
+++ b/web/settings/relationship/add-users-list.css
@@ -69,3 +69,9 @@
.selectionText {
color: var(--text-background-secondary-default);
}
+
+.previouslySelectedUsersContainer {
+ border-bottom: 1px solid var(--separator-background-primary-default);
+ padding-bottom: 8px;
+ margin-bottom: 8px;
+}
diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js
--- a/web/settings/relationship/add-users-list.react.js
+++ b/web/settings/relationship/add-users-list.react.js
@@ -2,7 +2,6 @@
import * as React from 'react';
-import { useENSNames } from 'lib/hooks/ens-cache.js';
import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js';
import { useSearchUsers } from 'lib/shared/search-utils.js';
import type { SetState } from 'lib/types/hook-types.js';
@@ -15,6 +14,7 @@
import AddUsersListItem from './add-users-list-item.react.js';
import css from './add-users-list.css';
+import { useSortedENSResolvedUsers } from './user-list-hooks.js';
import Button from '../../components/button.react.js';
import { useSelector } from '../../redux/redux-utils.js';
@@ -90,7 +90,7 @@
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchModeActive]);
- const sortedUsers = React.useMemo(
+ const filteredUsers = React.useMemo(
() =>
Object.keys(mergedUserInfos)
.map(userID => mergedUserInfos[userID])
@@ -100,11 +100,15 @@
(!user.relationshipStatus ||
!excludedStatuses.has(user.relationshipStatus)) &&
!previouslySelectedUsers.has(user.id),
- )
- .sort((user1, user2) => user1.username.localeCompare(user2.username)),
+ ),
[excludedStatuses, mergedUserInfos, viewerID, previouslySelectedUsers],
);
+ const previouslySelectedUsersList = React.useMemo(
+ () => Array.from(previouslySelectedUsers.values()),
+ [previouslySelectedUsers],
+ );
+
const toggleUser = React.useCallback(
(userID: string) => {
setPendingUsersToAdd(pendingUsers => {
@@ -126,7 +130,7 @@
[mergedUserInfos, setPendingUsersToAdd],
);
- const sortedUsersWithENSNames = useENSNames(sortedUsers);
+ const sortedUsersWithENSNames = useSortedENSResolvedUsers(filteredUsers);
const userRows = React.useMemo(
() =>
@@ -141,6 +145,38 @@
[sortedUsersWithENSNames, toggleUser, pendingUsersToAdd],
);
+ const sortedPreviouslySelectedUsersWithENSNames = useSortedENSResolvedUsers(
+ previouslySelectedUsersList,
+ );
+
+ const previouslySelectedUserRows = React.useMemo(() => {
+ if (searchModeActive || previouslySelectedUsers.size === 0) {
+ return null;
+ }
+
+ const sortedPreviouslySelectedUserRows =
+ sortedPreviouslySelectedUsersWithENSNames.map(userInfo => (
+ <AddUsersListItem
+ userInfo={userInfo}
+ key={userInfo.id}
+ onToggleUser={toggleUser}
+ userSelected={pendingUsersToAdd.has(userInfo.id)}
+ />
+ ));
+
+ return (
+ <div className={css.previouslySelectedUsersContainer}>
+ {sortedPreviouslySelectedUserRows}
+ </div>
+ );
+ }, [
+ searchModeActive,
+ previouslySelectedUsers.size,
+ sortedPreviouslySelectedUsersWithENSNames,
+ toggleUser,
+ pendingUsersToAdd,
+ ]);
+
const onClickClearAll = React.useCallback(() => {
setPendingUsersToAdd(new Map());
}, [setPendingUsersToAdd]);
@@ -195,13 +231,21 @@
errors = <div className={css.error}>{errorMessage}</div>;
}
- return (
- <div className={css.container}>
- {listHeader}
- <div className={css.userRowsContainer}>{userRows}</div>
- {errors}
- </div>
+ const addUsersList = React.useMemo(
+ () => (
+ <div className={css.container}>
+ {listHeader}
+ <div className={css.scrollContainer}>
+ {previouslySelectedUserRows}
+ {userRows}
+ </div>
+ {errors}
+ </div>
+ ),
+ [errors, listHeader, userRows, previouslySelectedUserRows],
);
+
+ return addUsersList;
}
export default AddUsersList;

File Metadata

Mime Type
text/plain
Expires
Thu, Jan 1, 4:55 PM (13 h, 38 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5876878
Default Alt Text
D10822.1767286558.diff (4 KB)

Event Timeline