diff --git a/web/sidebar/community-creation/community-creation-members-modal.css b/web/sidebar/community-creation/community-creation-members-modal.css deleted file mode 100644 index e2e3bbbc1..000000000 --- a/web/sidebar/community-creation/community-creation-members-modal.css +++ /dev/null @@ -1,6 +0,0 @@ -.container { - display: flex; - flex-direction: column; - overflow: hidden; - 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 deleted file mode 100644 index e56a4d8e7..000000000 --- a/web/sidebar/community-creation/community-creation-members-modal.react.js +++ /dev/null @@ -1,112 +0,0 @@ -// @flow - -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 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; diff --git a/web/sidebar/community-creation/community-creation-modal.react.js b/web/sidebar/community-creation/community-creation-modal.react.js index 552ea609b..cef1c23cd 100644 --- a/web/sidebar/community-creation/community-creation-modal.react.js +++ b/web/sidebar/community-creation/community-creation-modal.react.js @@ -1,219 +1,212 @@ // @flow import * as React from 'react'; import { useNewThread, newThreadActionTypes, } from 'lib/actions/thread-actions.js'; import { useModalContext } from 'lib/components/modal-provider.react.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import type { LoadingStatus } from 'lib/types/loading-types.js'; import { threadTypes } from 'lib/types/thread-types-enum.js'; import type { NewThreadResult } from 'lib/types/thread-types.js'; import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js'; import { useDispatch } from 'lib/utils/redux-utils.js'; import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js'; -import CommunityCreationMembersModal from './community-creation-members-modal.react.js'; import css from './community-creation-modal.css'; import UserAvatar from '../../avatars/user-avatar.react.js'; import CommIcon from '../../comm-icon.react.js'; import Button, { buttonThemes } from '../../components/button.react.js'; import EnumSettingsOption from '../../components/enum-settings-option.react.js'; import LoadingIndicator from '../../loading-indicator.react.js'; import Input from '../../modals/input.react.js'; import Modal from '../../modals/modal.react.js'; import { updateNavInfoActionType } from '../../redux/action-types.js'; import { useSelector } from '../../redux/redux-utils.js'; import { nonThreadCalendarQuery } from '../../selectors/nav-selectors.js'; const announcementStatements = [ { statement: `This option sets the community’s root channel to an ` + `announcement channel. Only admins and other admin-appointed ` + `roles can send messages in an announcement channel.`, isStatementValid: true, styleStatementBasedOnValidity: false, }, ]; const communityCreationKeyserverLabel = ; const createNewCommunityLoadingStatusSelector = createLoadingStatusSelector(newThreadActionTypes); function CommunityCreationModal(): React.Node { const modalContext = useModalContext(); const dispatch = useDispatch(); const dispatchActionPromise = useDispatchActionPromise(); const callNewThread = useNewThread(); const calendarQueryFunc = useSelector(nonThreadCalendarQuery); const [errorMessage, setErrorMessage] = React.useState(); const [pendingCommunityName, setPendingCommunityName] = React.useState(''); const onChangePendingCommunityName = React.useCallback( (event: SyntheticEvent) => { setErrorMessage(); setPendingCommunityName(event.currentTarget.value); }, [], ); const [announcementSetting, setAnnouncementSetting] = React.useState(false); const onAnnouncementSelected = React.useCallback(() => { setErrorMessage(); setAnnouncementSetting(!announcementSetting); }, [announcementSetting]); const callCreateNewCommunity = React.useCallback(async () => { const calendarQuery = calendarQueryFunc(); try { const newThreadResult: NewThreadResult = await callNewThread({ name: pendingCommunityName, type: announcementSetting ? threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT : threadTypes.COMMUNITY_ROOT, calendarQuery, }); return newThreadResult; } catch (e) { setErrorMessage('Community creation failed. Please try again.'); throw e; } }, [ announcementSetting, calendarQueryFunc, callNewThread, pendingCommunityName, ]); const createNewCommunity = React.useCallback(async () => { setErrorMessage(); const newThreadResultPromise = callCreateNewCommunity(); void dispatchActionPromise(newThreadActionTypes, newThreadResultPromise); const newThreadResult: NewThreadResult = await newThreadResultPromise; const { newThreadID } = newThreadResult; await dispatch({ type: updateNavInfoActionType, payload: { activeChatThreadID: newThreadID, }, }); modalContext.popModal(); - modalContext.pushModal( - , - ); }, [callCreateNewCommunity, dispatch, dispatchActionPromise, modalContext]); const megaphoneIcon = React.useMemo( () => , [], ); const avatarNodeEnabled = false; let avatarNode; if (avatarNodeEnabled) { avatarNode = (
); } const createNewCommunityLoadingStatus: LoadingStatus = useSelector( createNewCommunityLoadingStatusSelector, ); const buttonContent = React.useMemo(() => { if (createNewCommunityLoadingStatus === 'loading') { return ( ); } else if (errorMessage) { return errorMessage; } else { return 'Create community'; } }, [createNewCommunityLoadingStatus, errorMessage]); const button = React.useMemo( () => ( ), [ buttonContent, createNewCommunity, createNewCommunityLoadingStatus, errorMessage, ], ); return (
{avatarNode}
Community Name
You may edit your community’s image and name later.

Optional settings
); } export default CommunityCreationModal;