Page MenuHomePhabricator
Files F3300214

D10719.diff
No OneTemporary
Actions

D10719.diff
View Options

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
@@ -2,14 +2,29 @@
import * as React from 'react';
+import {
+ updateRelationships,
+ updateRelationshipsActionTypes,
+} from 'lib/actions/relationship-actions.js';
+import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import type {
UserRelationshipStatus,
RelationshipAction,
} from 'lib/types/relationship-types.js';
+import { useLegacyAshoatKeyserverCall } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
+import css from './add-users-list.css';
import AddUsersList from './add-users-list.react.js';
import type { ButtonColor } from '../../components/button.react.js';
+import Button from '../../components/button.react.js';
+import LoadingIndicator from '../../loading-indicator.react.js';
import SearchModal from '../../modals/search-modal.react.js';
+import { useSelector } from '../../redux/redux-utils.js';
+
+const loadingStatusSelector = createLoadingStatusSelector(
+ updateRelationshipsActionTypes,
+);
type Props = {
+closeModal: () => void,
@@ -30,32 +45,87 @@
relationshipAction,
} = props;
+ const [errorMessage, setErrorMessage] = React.useState('');
+
const addUsersListChildGenerator = React.useCallback(
(searchText: string) => (
<AddUsersList
searchText={searchText}
excludedStatuses={excludedStatuses}
- confirmButtonContent={confirmButtonContent}
- confirmButtonColor={confirmButtonColor}
- relationshipAction={relationshipAction}
- closeModal={closeModal}
+ errorMessage={errorMessage}
/>
),
- [
- excludedStatuses,
- confirmButtonContent,
- confirmButtonColor,
- relationshipAction,
- closeModal,
- ],
+ [excludedStatuses, errorMessage],
+ );
+
+ const callUpdateRelationships =
+ useLegacyAshoatKeyserverCall(updateRelationships);
+
+ const dispatchActionPromise = useDispatchActionPromise();
+
+ const updateRelationshipsPromiseCreator = React.useCallback(async () => {
+ try {
+ setErrorMessage('');
+ const result = await callUpdateRelationships({
+ action: relationshipAction,
+ userIDs: [], // TODO: re-add pending users
+ });
+ closeModal();
+ return result;
+ } catch (e) {
+ setErrorMessage('unknown error');
+ throw e;
+ }
+ }, [callUpdateRelationships, closeModal, relationshipAction]);
+
+ const confirmSelection = React.useCallback(
+ () =>
+ dispatchActionPromise(
+ updateRelationshipsActionTypes,
+ updateRelationshipsPromiseCreator(),
+ ),
+ [dispatchActionPromise, updateRelationshipsPromiseCreator],
);
+ const loadingStatus = useSelector(loadingStatusSelector);
+
+ const primaryButton = React.useMemo(() => {
+ let buttonContent = confirmButtonContent;
+
+ if (loadingStatus === 'loading') {
+ buttonContent = (
+ <>
+ <div className={css.hidden}>{confirmButtonContent}</div>
+ <LoadingIndicator status="loading" />
+ </>
+ );
+ }
+
+ return (
+ <Button
+ onClick={confirmSelection}
+ // TODO: re-add 0 users check
+ disabled={true || loadingStatus === 'loading'}
+ variant="filled"
+ buttonColor={confirmButtonColor}
+ >
+ <div className={css.confirmButtonContainer}>{buttonContent}</div>
+ </Button>
+ );
+ }, [
+ confirmButtonColor,
+ confirmButtonContent,
+ confirmSelection,
+ loadingStatus,
+ ]);
+
return (
<SearchModal
name={name}
onClose={closeModal}
size="large"
searchPlaceholder="Search by name"
+ primaryButton={primaryButton}
>
{addUsersListChildGenerator}
</SearchModal>
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
@@ -33,11 +33,6 @@
text-overflow: ellipsis;
}
-.buttons {
- display: flex;
- justify-content: space-between;
-}
-
.confirmButtonContainer {
display: flex;
flex-direction: column;
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,56 +2,29 @@
import * as React from 'react';
-import {
- updateRelationships,
- updateRelationshipsActionTypes,
-} from 'lib/actions/relationship-actions.js';
import { useENSNames } from 'lib/hooks/ens-cache.js';
-import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js';
import { useSearchUsers } from 'lib/shared/search-utils.js';
-import type {
- UserRelationshipStatus,
- RelationshipAction,
-} from 'lib/types/relationship-types.js';
+import type { UserRelationshipStatus } from 'lib/types/relationship-types.js';
import type {
GlobalAccountUserInfo,
AccountUserInfo,
} from 'lib/types/user-types.js';
-import { useLegacyAshoatKeyserverCall } from 'lib/utils/action-utils.js';
import { values } from 'lib/utils/objects.js';
-import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
import AddUsersListItem from './add-users-list-item.react.js';
import css from './add-users-list.css';
-import Button from '../../components/button.react.js';
-import type { ButtonColor } from '../../components/button.react.js';
import Label from '../../components/label.react.js';
-import LoadingIndicator from '../../loading-indicator.react.js';
import { useSelector } from '../../redux/redux-utils.js';
-const loadingStatusSelector = createLoadingStatusSelector(
- updateRelationshipsActionTypes,
-);
-
type Props = {
+searchText: string,
+excludedStatuses?: $ReadOnlySet<UserRelationshipStatus>,
- +closeModal: () => void,
- +confirmButtonContent: React.Node,
- +confirmButtonColor?: ButtonColor,
- +relationshipAction: RelationshipAction,
+ +errorMessage: string,
};
function AddUsersList(props: Props): React.Node {
- const {
- searchText,
- excludedStatuses = new Set(),
- closeModal,
- confirmButtonContent,
- confirmButtonColor,
- relationshipAction,
- } = props;
+ const { searchText, excludedStatuses = new Set(), errorMessage } = props;
const viewerID = useSelector(state => state.currentUserInfo?.id);
const userInfos = useSelector(state => state.userStore.userInfos);
@@ -186,43 +159,6 @@
[filteredUsersWithENSNames, selectUser],
);
- const [errorMessage, setErrorMessage] = React.useState('');
- const callUpdateRelationships =
- useLegacyAshoatKeyserverCall(updateRelationships);
- const dispatchActionPromise = useDispatchActionPromise();
- const updateRelationshipsPromiseCreator = React.useCallback(async () => {
- try {
- setErrorMessage('');
- const result = await callUpdateRelationships({
- action: relationshipAction,
- userIDs: Array.from(pendingUserIDs),
- });
- closeModal();
- return result;
- } catch (e) {
- setErrorMessage('unknown error');
- throw e;
- }
- }, [callUpdateRelationships, closeModal, pendingUserIDs, relationshipAction]);
- const confirmSelection = React.useCallback(
- () =>
- dispatchActionPromise(
- updateRelationshipsActionTypes,
- updateRelationshipsPromiseCreator(),
- ),
- [dispatchActionPromise, updateRelationshipsPromiseCreator],
- );
- const loadingStatus = useSelector(loadingStatusSelector);
- let buttonContent = confirmButtonContent;
- if (loadingStatus === 'loading') {
- buttonContent = (
- <>
- <div className={css.hidden}>{confirmButtonContent}</div>
- <LoadingIndicator status="loading" />
- </>
- );
- }
-
let errors;
if (errorMessage) {
errors = <div className={css.error}>{errorMessage}</div>;
@@ -233,19 +169,6 @@
{userTags}
<div className={css.userRowsContainer}>{userRows}</div>
{errors}
- <div className={css.buttons}>
- <Button variant="outline" onClick={closeModal}>
- Cancel
- </Button>
- <Button
- onClick={confirmSelection}
- disabled={pendingUserIDs.size === 0 || loadingStatus === 'loading'}
- variant="filled"
- buttonColor={confirmButtonColor}
- >
- <div className={css.confirmButtonContainer}>{buttonContent}</div>
- </Button>
- </div>
</div>
);
}

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 18, 6:49 PM (20 h, 21 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2535461
Default Alt Text
D10719.diff (8 KB)

Event Timeline