Page MenuHomePhabricator
Files F3496525

D4310.id13625.diff
No OneTemporary
Actions

D4310.id13625.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
@@ -1,5 +1,5 @@
.container {
- height: 580px;
+ height: 625px;
display: flex;
flex-direction: column;
}
@@ -8,6 +8,7 @@
display: flex;
flex-wrap: wrap;
gap: 6px;
+ margin: 8px;
}
.userRowsContainer {
@@ -15,6 +16,7 @@
display: flex;
flex-direction: column;
flex: 1;
+ margin-bottom: 8px;
}
.addUserButton {
@@ -34,3 +36,8 @@
overflow: hidden;
text-overflow: ellipsis;
}
+
+.buttons {
+ display: flex;
+ justify-content: space-between;
+}
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,24 +2,49 @@
import * as React from 'react';
+import {
+ updateRelationships,
+ updateRelationshipsActionTypes,
+} from 'lib/actions/relationship-actions.js';
import { searchUsers } from 'lib/actions/user-actions.js';
+import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { userStoreSearchIndex as userStoreSearchIndexSelector } from 'lib/selectors/user-selectors.js';
-import type { UserRelationshipStatus } from 'lib/types/relationship-types.js';
+import type {
+ UserRelationshipStatus,
+ RelationshipAction,
+} from 'lib/types/relationship-types.js';
import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
-import { useServerCall } from 'lib/utils/action-utils.js';
+import {
+ useDispatchActionPromise,
+ useServerCall,
+} from 'lib/utils/action-utils.js';
+import Button from '../../components/button.react.js';
import Label from '../../components/label.react.js';
import { useSelector } from '../../redux/redux-utils.js';
import AddUsersListItem from './add-users-list-item.react.js';
import css from './add-users-list.css';
+const loadingStatusSelector = createLoadingStatusSelector(
+ updateRelationshipsActionTypes,
+);
+
type Props = {
+searchText: string,
+excludedStatuses?: $ReadOnlySet<UserRelationshipStatus>,
+ +closeModal: () => void,
+ +confirmButtonLabel: string,
+ +relationshipAction: RelationshipAction,
};
function AddUsersList(props: Props): React.Node {
- const { searchText, excludedStatuses = new Set() } = props;
+ const {
+ searchText,
+ excludedStatuses = new Set(),
+ closeModal,
+ confirmButtonLabel,
+ relationshipAction,
+ } = props;
const userStoreSearchIndex = useSelector(userStoreSearchIndexSelector);
const [userStoreSearchResults, setUserStoreSearchResults] = React.useState<
@@ -157,10 +182,42 @@
)),
[filteredUsers, selectUser],
);
+
+ const callUpdateRelationships = useServerCall(updateRelationships);
+ const dispatchActionPromise = useDispatchActionPromise();
+ const confirmSelection = React.useCallback(async () => {
+ await dispatchActionPromise(
+ updateRelationshipsActionTypes,
+ callUpdateRelationships({
+ action: relationshipAction,
+ userIDs: [...pendingUserIDs],
+ }),
+ );
+ closeModal();
+ }, [
+ callUpdateRelationships,
+ dispatchActionPromise,
+ closeModal,
+ pendingUserIDs,
+ relationshipAction,
+ ]);
+ const loadingStatus = useSelector(loadingStatusSelector);
+
return (
<div className={css.container}>
{userTags}
<div className={css.userRowsContainer}>{userRows}</div>
+ <div className={css.buttons}>
+ <Button variant="secondary" onClick={closeModal}>
+ Cancel
+ </Button>
+ <Button
+ onClick={confirmSelection}
+ disabled={pendingUserIDs.size === 0 || loadingStatus === 'loading'}
+ >
+ {confirmButtonLabel}
+ </Button>
+ </div>
</div>
);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Dec 20, 1:01 PM (19 h, 11 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2681797
Default Alt Text
D4310.id13625.diff (3 KB)

Event Timeline