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;