diff --git a/web/sidebar/community-creation/community-creation-members-modal.css b/web/sidebar/community-creation/community-creation-members-modal.css
--- a/web/sidebar/community-creation/community-creation-members-modal.css
+++ b/web/sidebar/community-creation/community-creation-members-modal.css
@@ -2,5 +2,5 @@
display: flex;
flex-direction: column;
overflow: hidden;
- margin: 16px;
+ height: 60vh;
}
diff --git a/web/sidebar/community-creation/community-creation-members-modal.react.js b/web/sidebar/community-creation/community-creation-members-modal.react.js
--- a/web/sidebar/community-creation/community-creation-members-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-members-modal.react.js
@@ -2,38 +2,111 @@
import * as React from 'react';
+import {
+ changeThreadSettingsActionTypes,
+ useChangeThreadSettings,
+} from 'lib/actions/thread-actions.js';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
+
import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js';
import css from './community-creation-members-modal.css';
+import Button from '../../components/button.react.js';
import Search from '../../components/search.react.js';
import Modal from '../../modals/modal.react.js';
import { AddMembersList } from '../../modals/threads/members/add-members-modal.react.js';
+import {
+ useAddUsersListContext,
+ AddUsersListProvider,
+} from '../../settings/relationship/add-users-list-provider.react.js';
+
+const subheader = ;
type Props = {
+threadID: string,
+onClose: () => void,
};
-function CommunityCreationMembersModal(props: Props): React.Node {
+function CommunityCreationMembersModalContent(props: Props): React.Node {
const { threadID, onClose } = props;
+
+ const { pendingUsersToAdd } = useAddUsersListContext();
+
const [searchText, setSearchText] = React.useState('');
+ const dispatchActionPromise = useDispatchActionPromise();
+ const callChangeThreadSettings = useChangeThreadSettings();
+
+ const addUsers = React.useCallback(() => {
+ void dispatchActionPromise(
+ changeThreadSettingsActionTypes,
+ callChangeThreadSettings({
+ threadID,
+ changes: { newMemberIDs: Array.from(pendingUsersToAdd.keys()) },
+ }),
+ );
+ onClose();
+ }, [
+ callChangeThreadSettings,
+ dispatchActionPromise,
+ onClose,
+ pendingUsersToAdd,
+ threadID,
+ ]);
+
+ const primaryButton = React.useMemo(
+ () => (
+
+ ),
+ [addUsers, pendingUsersToAdd.size],
+ );
+
return (
-
);
}
+function CommunityCreationMembersModal(props: Props): React.Node {
+ const { threadID } = props;
+
+ const { popModal } = useModalContext();
+
+ const communityCreationMembersModal = React.useMemo(
+ () => (
+
+
+
+ ),
+ [popModal, threadID],
+ );
+
+ return communityCreationMembersModal;
+}
+
export default CommunityCreationMembersModal;