Page MenuHomePhabricator
Files F3300659

D10937.id37199.diff
No OneTemporary
Actions

D10937.id37199.diff
View Options

diff --git a/web/settings/relationship/add-friends-modal.react.js b/web/settings/relationship/add-friends-modal.react.js
--- a/web/settings/relationship/add-friends-modal.react.js
+++ b/web/settings/relationship/add-friends-modal.react.js
@@ -8,6 +8,7 @@
} from 'lib/types/relationship-types.js';
import AddUsersListModal from './add-users-list-modal.react.js';
+import { AddUsersListProvider } from './add-users-list-provider.react.js';
const excludedStatuses = new Set([
userRelationshipStatus.FRIEND,
@@ -18,14 +19,21 @@
]);
function AddFriendsModal(): React.Node {
- return (
- <AddUsersListModal
- name="Add friends"
- excludedStatuses={excludedStatuses}
- confirmButtonContent="Send friend requests"
- relationshipAction={relationshipActions.FRIEND}
- />
+ const addFriendsModal = React.useMemo(
+ () => (
+ <AddUsersListProvider>
+ <AddUsersListModal
+ name="Add friends"
+ excludedStatuses={excludedStatuses}
+ confirmButtonContent="Send friend requests"
+ relationshipAction={relationshipActions.FRIEND}
+ />
+ </AddUsersListProvider>
+ ),
+ [],
);
+
+ return addFriendsModal;
}
export default AddFriendsModal;
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
@@ -12,10 +12,10 @@
UserRelationshipStatus,
RelationshipAction,
} from 'lib/types/relationship-types.js';
-import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
import { useLegacyAshoatKeyserverCall } from 'lib/utils/action-utils.js';
import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
+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 type { ButtonColor } from '../../components/button.react.js';
@@ -47,23 +47,16 @@
const { popModal } = useModalContext();
- const [pendingUsersToAdd, setPendingUsersToAdd] = React.useState<
- $ReadOnlyMap<string, GlobalAccountUserInfo>,
- >(new Map());
-
- const [errorMessage, setErrorMessage] = React.useState('');
+ const { pendingUsersToAdd, setErrorMessage } = useAddUsersListContext();
const addUsersListChildGenerator = React.useCallback(
(searchText: string) => (
<AddUsersList
searchText={searchText}
excludedStatuses={excludedStatuses}
- pendingUsersToAdd={pendingUsersToAdd}
- setPendingUsersToAdd={setPendingUsersToAdd}
- errorMessage={errorMessage}
/>
),
- [excludedStatuses, pendingUsersToAdd, errorMessage],
+ [excludedStatuses],
);
const callUpdateRelationships =
@@ -85,10 +78,11 @@
throw e;
}
}, [
+ setErrorMessage,
callUpdateRelationships,
- popModal,
relationshipAction,
pendingUsersToAdd,
+ popModal,
]);
const confirmSelection = React.useCallback(
diff --git a/web/settings/relationship/add-users-list-provider.react.js b/web/settings/relationship/add-users-list-provider.react.js
new file mode 100644
--- /dev/null
+++ b/web/settings/relationship/add-users-list-provider.react.js
@@ -0,0 +1,63 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import type { SetState } from 'lib/types/hook-types.js';
+import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
+
+export type AddUsersListContextType = {
+ +pendingUsersToAdd: $ReadOnlyMap<string, GlobalAccountUserInfo>,
+ +setPendingUsersToAdd: SetState<$ReadOnlyMap<string, GlobalAccountUserInfo>>,
+ +previouslySelectedUsers: $ReadOnlyMap<string, GlobalAccountUserInfo>,
+ +setPreviouslySelectedUsers: SetState<
+ $ReadOnlyMap<string, GlobalAccountUserInfo>,
+ >,
+ +errorMessage: string,
+ +setErrorMessage: SetState<string>,
+};
+
+const AddUsersListContext = React.createContext<?AddUsersListContextType>();
+
+type Props = {
+ +children: React.Node,
+};
+
+function AddUsersListProvider(props: Props): React.Node {
+ const { children } = props;
+
+ const [pendingUsersToAdd, setPendingUsersToAdd] = React.useState<
+ $ReadOnlyMap<string, GlobalAccountUserInfo>,
+ >(new Map());
+ const [previouslySelectedUsers, setPreviouslySelectedUsers] = React.useState<
+ $ReadOnlyMap<string, GlobalAccountUserInfo>,
+ >(new Map());
+ const [errorMessage, setErrorMessage] = React.useState<string>('');
+
+ const contextValue = React.useMemo(
+ () => ({
+ pendingUsersToAdd,
+ setPendingUsersToAdd,
+ previouslySelectedUsers,
+ setPreviouslySelectedUsers,
+ errorMessage,
+ setErrorMessage,
+ }),
+ [pendingUsersToAdd, previouslySelectedUsers, errorMessage],
+ );
+
+ return (
+ <AddUsersListContext.Provider value={contextValue}>
+ {children}
+ </AddUsersListContext.Provider>
+ );
+}
+
+function useAddUsersListContext(): AddUsersListContextType {
+ const addUsersListContext = React.useContext(AddUsersListContext);
+
+ invariant(addUsersListContext, 'addUsersListContext should be set');
+ return addUsersListContext;
+}
+
+export { AddUsersListProvider, useAddUsersListContext };
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,11 +3,11 @@
import * as React from 'react';
import { useSortedENSResolvedUsers } from 'lib/hooks/ens-cache.js';
-import type { SetState } from 'lib/types/hook-types.js';
import type { UserRelationshipStatus } from 'lib/types/relationship-types.js';
import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
import AddUsersListItem 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';
@@ -15,26 +15,21 @@
type Props = {
+searchText: string,
+excludedStatuses?: $ReadOnlySet<UserRelationshipStatus>,
- +pendingUsersToAdd: $ReadOnlyMap<string, GlobalAccountUserInfo>,
- +setPendingUsersToAdd: SetState<$ReadOnlyMap<string, GlobalAccountUserInfo>>,
- +errorMessage: string,
};
function AddUsersList(props: Props): React.Node {
+ const { searchText, excludedStatuses = new Set() } = props;
+
const {
- searchText,
- excludedStatuses = new Set(),
pendingUsersToAdd,
setPendingUsersToAdd,
+ previouslySelectedUsers,
+ setPreviouslySelectedUsers,
errorMessage,
- } = props;
+ } = useAddUsersListContext();
const searchModeActive = searchText.length > 0;
- const [previouslySelectedUsers, setPreviouslySelectedUsers] = React.useState<
- $ReadOnlyMap<string, GlobalAccountUserInfo>,
- >(new Map());
-
React.useEffect(() => {
setPreviouslySelectedUsers(pendingUsersToAdd);
@@ -46,7 +41,6 @@
useUserRelationshipUserInfos({
searchText,
excludedStatuses,
- previouslySelectedUsers,
});
const previouslySelectedUsersList = React.useMemo(
diff --git a/web/settings/relationship/add-users-utils.js b/web/settings/relationship/add-users-utils.js
--- a/web/settings/relationship/add-users-utils.js
+++ b/web/settings/relationship/add-users-utils.js
@@ -12,12 +12,12 @@
} from 'lib/types/user-types.js';
import { values } from 'lib/utils/objects.js';
+import { useAddUsersListContext } from './add-users-list-provider.react.js';
import { useSelector } from '../../redux/redux-utils.js';
type UseUserRelationshipUserInfosParams = {
+searchText: string,
+excludedStatuses: $ReadOnlySet<UserRelationshipStatus>,
- +previouslySelectedUsers: $ReadOnlyMap<string, GlobalAccountUserInfo>,
};
function useUserRelationshipUserInfos(
@@ -30,7 +30,9 @@
GlobalAccountUserInfo | AccountUserInfo,
>,
} {
- const { searchText, excludedStatuses, previouslySelectedUsers } = params;
+ const { searchText, excludedStatuses } = params;
+
+ const { previouslySelectedUsers } = useAddUsersListContext();
const viewerID = useSelector(state => state.currentUserInfo?.id);
const userInfos = useSelector(state => state.userStore.userInfos);
diff --git a/web/settings/relationship/block-users-modal.react.js b/web/settings/relationship/block-users-modal.react.js
--- a/web/settings/relationship/block-users-modal.react.js
+++ b/web/settings/relationship/block-users-modal.react.js
@@ -10,6 +10,7 @@
} from 'lib/types/relationship-types.js';
import AddUsersListModal from './add-users-list-modal.react.js';
+import { AddUsersListProvider } from './add-users-list-provider.react.js';
import { buttonThemes } from '../../components/button.react.js';
const excludedStatuses = new Set([
@@ -18,22 +19,32 @@
]);
function BlockUsersModal(): React.Node {
- const buttonContent = (
- <div>
- <FontAwesomeIcon icon={faUserShield} />
- {' Block users'}
- </div>
+ const buttonContent = React.useMemo(
+ () => (
+ <div>
+ <FontAwesomeIcon icon={faUserShield} />
+ {' Block users'}
+ </div>
+ ),
+ [],
);
- return (
- <AddUsersListModal
- name="Block users"
- excludedStatuses={excludedStatuses}
- confirmButtonContent={buttonContent}
- confirmButtonColor={buttonThemes.danger}
- relationshipAction={relationshipActions.BLOCK}
- />
+ const blockUsersModal = React.useMemo(
+ () => (
+ <AddUsersListProvider>
+ <AddUsersListModal
+ name="Block users"
+ excludedStatuses={excludedStatuses}
+ confirmButtonContent={buttonContent}
+ confirmButtonColor={buttonThemes.danger}
+ relationshipAction={relationshipActions.BLOCK}
+ />
+ </AddUsersListProvider>
+ ),
+ [buttonContent],
);
+
+ return blockUsersModal;
}
export default BlockUsersModal;

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 18, 8:36 PM (19 h, 42 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2535839
Default Alt Text
D10937.id37199.diff (9 KB)

Event Timeline