Page MenuHomePhorge
Files F32558069

D10940.1767261318.diff
No OneTemporary
Actions

Size
7 KB
Referenced Files
None
Subscribers
None

D10940.1767261318.diff
View Options

diff --git a/web/settings/relationship/add-users-list-item.react.js b/web/settings/relationship/add-users-list-item.react.js
--- a/web/settings/relationship/add-users-list-item.react.js
+++ b/web/settings/relationship/add-users-list-item.react.js
@@ -3,19 +3,24 @@
import classnames from 'classnames';
import * as React from 'react';
-import type { AccountUserInfo } from 'lib/types/user-types.js';
-
import css from './add-users-list.css';
import UserAvatar from '../../avatars/user-avatar.react.js';
import Checkbox from '../../components/checkbox.react.js';
-type Props = {
- +userInfo: AccountUserInfo,
+export type BaseAddUserInfo = {
+ +id: string,
+ +username?: ?string,
+ +isViewer?: ?boolean,
+ ...
+};
+
+type Props<T: BaseAddUserInfo> = {
+ +userInfo: T,
+userSelected: boolean,
+onToggleUser: (userID: string) => mixed,
};
-function AddUsersListItem(props: Props): React.Node {
+function AddUsersListItem<T: BaseAddUserInfo>(props: Props<T>): React.Node {
const { userInfo, userSelected, onToggleUser } = props;
const toggleUser = React.useCallback(
diff --git a/web/settings/relationship/add-users-list-modal.react.js b/web/settings/relationship/add-users-list-modal.react.js
--- a/web/settings/relationship/add-users-list-modal.react.js
+++ b/web/settings/relationship/add-users-list-modal.react.js
@@ -18,6 +18,7 @@
import { useAddUsersListContext } from './add-users-list-provider.react.js';
import css from './add-users-list.css';
import AddUsersList from './add-users-list.react.js';
+import { useUserRelationshipUserInfos } from './add-users-utils.js';
import type { ButtonColor } from '../../components/button.react.js';
import Button from '../../components/button.react.js';
import LoadingIndicator from '../../loading-indicator.react.js';
@@ -28,6 +29,36 @@
updateRelationshipsActionTypes,
);
+type AddUsersListModalContentProps = {
+ +searchText: string,
+ +excludedStatuses: $ReadOnlySet<UserRelationshipStatus>,
+};
+
+function AddUsersListModalContent(
+ props: AddUsersListModalContentProps,
+): React.Node {
+ const { searchText, excludedStatuses } = props;
+
+ const { mergedUserInfos, sortedUsersWithENSNames } =
+ useUserRelationshipUserInfos({
+ searchText,
+ excludedStatuses,
+ });
+
+ const addUsersListModalContent = React.useMemo(
+ () => (
+ <AddUsersList
+ searchModeActive={searchText.length > 0}
+ userInfos={mergedUserInfos}
+ sortedUsersWithENSNames={sortedUsersWithENSNames}
+ />
+ ),
+ [mergedUserInfos, searchText.length, sortedUsersWithENSNames],
+ );
+
+ return addUsersListModalContent;
+}
+
type Props = {
+name: string,
+excludedStatuses: $ReadOnlySet<UserRelationshipStatus>,
@@ -51,7 +82,7 @@
const addUsersListChildGenerator = React.useCallback(
(searchText: string) => (
- <AddUsersList
+ <AddUsersListModalContent
searchText={searchText}
excludedStatuses={excludedStatuses}
/>
diff --git a/web/settings/relationship/add-users-list-provider.react.js b/web/settings/relationship/add-users-list-provider.react.js
--- a/web/settings/relationship/add-users-list-provider.react.js
+++ b/web/settings/relationship/add-users-list-provider.react.js
@@ -4,15 +4,14 @@
import * as React from 'react';
import type { SetState } from 'lib/types/hook-types.js';
-import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
+
+import type { BaseAddUserInfo } from './add-users-list-item.react.js';
export type AddUsersListContextType = {
- +pendingUsersToAdd: $ReadOnlyMap<string, GlobalAccountUserInfo>,
- +setPendingUsersToAdd: SetState<$ReadOnlyMap<string, GlobalAccountUserInfo>>,
- +previouslySelectedUsers: $ReadOnlyMap<string, GlobalAccountUserInfo>,
- +setPreviouslySelectedUsers: SetState<
- $ReadOnlyMap<string, GlobalAccountUserInfo>,
- >,
+ +pendingUsersToAdd: $ReadOnlyMap<string, BaseAddUserInfo>,
+ +setPendingUsersToAdd: SetState<$ReadOnlyMap<string, BaseAddUserInfo>>,
+ +previouslySelectedUsers: $ReadOnlyMap<string, BaseAddUserInfo>,
+ +setPreviouslySelectedUsers: SetState<$ReadOnlyMap<string, BaseAddUserInfo>>,
+errorMessage: string,
+setErrorMessage: SetState<string>,
};
@@ -27,10 +26,10 @@
const { children } = props;
const [pendingUsersToAdd, setPendingUsersToAdd] = React.useState<
- $ReadOnlyMap<string, GlobalAccountUserInfo>,
+ $ReadOnlyMap<string, BaseAddUserInfo>,
>(new Map());
const [previouslySelectedUsers, setPreviouslySelectedUsers] = React.useState<
- $ReadOnlyMap<string, GlobalAccountUserInfo>,
+ $ReadOnlyMap<string, BaseAddUserInfo>,
>(new Map());
const [errorMessage, setErrorMessage] = React.useState<string>('');
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
@@ -3,22 +3,25 @@
import * as React from 'react';
import { useSortedENSResolvedUsers } from 'lib/hooks/ens-cache.js';
-import type { UserRelationshipStatus } from 'lib/types/relationship-types.js';
-import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
+import { stringForUser } from 'lib/shared/user-utils.js';
-import AddUsersListItem from './add-users-list-item.react.js';
+import AddUsersListItem, {
+ type BaseAddUserInfo,
+} from './add-users-list-item.react.js';
import { useAddUsersListContext } from './add-users-list-provider.react.js';
import css from './add-users-list.css';
-import { useUserRelationshipUserInfos } from './add-users-utils.js';
import Button from '../../components/button.react.js';
-type Props = {
- +searchText: string,
- +excludedStatuses?: $ReadOnlySet<UserRelationshipStatus>,
+type Props<T: BaseAddUserInfo> = {
+ +searchModeActive: boolean,
+ +userInfos: {
+ [string]: T,
+ },
+ +sortedUsersWithENSNames: $ReadOnlyArray<T>,
};
-function AddUsersList(props: Props): React.Node {
- const { searchText, excludedStatuses = new Set() } = props;
+function AddUsersList<T: BaseAddUserInfo>(props: Props<T>): React.Node {
+ const { searchModeActive, userInfos, sortedUsersWithENSNames } = props;
const {
pendingUsersToAdd,
@@ -28,8 +31,6 @@
errorMessage,
} = useAddUsersListContext();
- const searchModeActive = searchText.length > 0;
-
React.useEffect(() => {
setPreviouslySelectedUsers(pendingUsersToAdd);
@@ -37,12 +38,6 @@
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchModeActive]);
- const { mergedUserInfos, sortedUsersWithENSNames } =
- useUserRelationshipUserInfos({
- searchText,
- excludedStatuses,
- });
-
const previouslySelectedUsersList = React.useMemo(
() => Array.from(previouslySelectedUsers.values()),
[previouslySelectedUsers],
@@ -58,10 +53,9 @@
}
if (!previouslySelectedUsers.has(userID)) {
- const newPendingUser: GlobalAccountUserInfo = {
+ const newPendingUser: BaseAddUserInfo = {
id: userID,
- username: mergedUserInfos[userID].username,
- avatar: mergedUserInfos[userID].avatar,
+ username: stringForUser(userInfos[userID]),
};
newPendingUsers.set(userID, newPendingUser);
@@ -75,7 +69,7 @@
return newPendingUsers;
});
},
- [mergedUserInfos, setPendingUsersToAdd, previouslySelectedUsers],
+ [userInfos, setPendingUsersToAdd, previouslySelectedUsers],
);
const userRows = React.useMemo(

File Metadata

Mime Type
text/plain
Expires
Thu, Jan 1, 9:55 AM (6 h, 40 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5875683
Default Alt Text
D10940.1767261318.diff (7 KB)

Event Timeline