diff --git a/native/community-creation/community-configuration.react.js b/native/community-creation/community-configuration.react.js index 60417c960..6405ae906 100644 --- a/native/community-creation/community-configuration.react.js +++ b/native/community-creation/community-configuration.react.js @@ -1,267 +1,270 @@ // @flow import * as React from 'react'; import { Text, TouchableOpacity, View } from 'react-native'; import { newThread, newThreadActionTypes } from 'lib/actions/thread-actions.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, useServerCall, } from 'lib/utils/action-utils.js'; import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js'; import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js'; import RegistrationButtonContainer from '../account/registration/registration-button-container.react.js'; import RegistrationButton from '../account/registration/registration-button.react.js'; import RegistrationContainer from '../account/registration/registration-container.react.js'; import RegistrationContentContainer from '../account/registration/registration-content-container.react.js'; import { ThreadSettingsCategoryFooter, ThreadSettingsCategoryHeader, } from '../chat/settings/thread-settings-category.react.js'; import CommIcon from '../components/comm-icon.react.js'; import TextInput from '../components/text-input.react.js'; import { useCalendarQuery } from '../navigation/nav-selectors.js'; import { CommunityCreationMembersRouteName, type NavigationRoute, } from '../navigation/route-names.js'; import { useSelector } from '../redux/redux-utils.js'; import { useColors, useStyles } from '../themes/colors.js'; type Props = { +navigation: CommunityCreationNavigationProp<'CommunityConfiguration'>, +route: NavigationRoute<'CommunityConfiguration'>, }; const createNewCommunityLoadingStatusSelector = createLoadingStatusSelector(newThreadActionTypes); // eslint-disable-next-line no-unused-vars function CommunityConfiguration(props: Props): React.Node { const styles = useStyles(unboundStyles); const colors = useColors(); const { navigate } = props.navigation; const dispatchActionPromise = useDispatchActionPromise(); const callNewThread = useServerCall(newThread); const calendarQueryFunc = useCalendarQuery(); const createNewCommunityLoadingStatus: LoadingStatus = useSelector( createNewCommunityLoadingStatusSelector, ); const [pendingCommunityName, setPendingCommunityName] = React.useState(''); const [announcementSetting, setAnnouncementSetting] = React.useState(false); const [errorMessage, setErrorMessage] = React.useState(); const onChangePendingCommunityName = React.useCallback(newValue => { setErrorMessage(); setPendingCommunityName(newValue); }, []); 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(); dispatchActionPromise(newThreadActionTypes, newThreadResultPromise); - await newThreadResultPromise; + const newThreadResult = await newThreadResultPromise; navigate<'CommunityCreationMembers'>({ name: CommunityCreationMembersRouteName, - params: { announcement: announcementSetting }, + params: { + announcement: announcementSetting, + threadID: newThreadResult.newThreadID, + }, }); }, [ announcementSetting, callCreateNewCommunity, dispatchActionPromise, navigate, ]); const onCheckBoxPress = React.useCallback(() => { setErrorMessage(); setAnnouncementSetting(!announcementSetting); }, [announcementSetting]); let checkBoxFill; if (announcementSetting) { checkBoxFill = ; } return ( Name You may edit your community’s image and name later. Announcement root Make it so that only admins can post to the root channel of the community. {checkBoxFill} {errorMessage} ); } const unboundStyles = { containerPaddingOverride: { padding: 0, }, communityNameRow: { backgroundColor: 'panelForeground', flexDirection: 'row', paddingHorizontal: 24, paddingVertical: 8, }, communityNameLabel: { color: 'panelForegroundTertiaryLabel', fontSize: 16, width: 96, }, communityNamePendingValue: { color: 'panelForegroundSecondaryLabel', flex: 1, fontFamily: 'Arial', fontSize: 16, margin: 0, paddingLeft: 4, paddingRight: 0, paddingVertical: 0, borderBottomColor: 'transparent', }, communityNameNoticeContainer: { display: 'flex', flexDirection: 'row', justifyContent: 'center', }, communityNameNoticeText: { color: 'panelForegroundTertiaryLabel', }, enumCell: { flexDirection: 'row', height: 96, backgroundColor: 'panelForeground', }, enumIcon: { padding: 16, }, enumInfoContainer: { flex: 1, flexDirection: 'column', justifyContent: 'space-evenly', padding: 8, }, enumInfoName: { color: 'panelForegroundLabel', fontSize: 18, lineHeight: 24, }, enumInfoDescription: { color: 'panelForegroundSecondaryLabel', lineHeight: 18, }, enumCheckBoxContainer: { padding: 22, justifyContent: 'center', alignItems: 'center', }, enumCheckBox: { height: 32, width: 32, borderRadius: 3.5, borderWidth: 1, borderColor: 'panelSecondaryForegroundBorder', justifyContent: 'center', alignItems: 'center', }, enumCheckBoxFill: { height: 20, width: 20, borderRadius: 2.1875, backgroundColor: 'panelForegroundSecondaryLabel', }, errorMessageContainer: { alignItems: 'center', }, errorMessageText: { color: 'redText', }, }; export default CommunityConfiguration; diff --git a/native/community-creation/community-creation-members.react.js b/native/community-creation/community-creation-members.react.js index af6226bd5..576a0f306 100644 --- a/native/community-creation/community-creation-members.react.js +++ b/native/community-creation/community-creation-members.react.js @@ -1,133 +1,134 @@ // @flow import * as React from 'react'; import { userInfoSelectorForPotentialMembers, userSearchIndexForPotentialMembers, } from 'lib/selectors/user-selectors.js'; import { getPotentialMemberItems } from 'lib/shared/search-utils.js'; import { threadTypes } from 'lib/types/thread-types-enum.js'; import type { AccountUserInfo } from 'lib/types/user-types.js'; import CommunityCreationContentContainer from './community-creation-content-container.react.js'; import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js'; import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js'; import RegistrationContainer from '../account/registration/registration-container.react.js'; import LinkButton from '../components/link-button.react.js'; import { createTagInput } from '../components/tag-input.react.js'; import UserList from '../components/user-list.react.js'; import type { NavigationRoute } from '../navigation/route-names.js'; import { ChatThreadListRouteName } from '../navigation/route-names.js'; import { useSelector } from '../redux/redux-utils.js'; export type CommunityCreationMembersScreenParams = { +announcement: boolean, + +threadID: string, }; const TagInput = createTagInput(); const tagInputProps = { placeholder: 'username', autoFocus: true, returnKeyType: 'go', }; const tagDataLabelExtractor = (userInfo: AccountUserInfo) => userInfo.username; type Props = { +navigation: CommunityCreationNavigationProp<'CommunityCreationMembers'>, +route: NavigationRoute<'CommunityCreationMembers'>, }; function CommunityCreationMembers(props: Props): React.Node { const { announcement } = props.route.params; const { navigation } = props; const { setOptions } = navigation; const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers); const userSearchIndex = useSelector(userSearchIndexForPotentialMembers); const [usernameInputText, setUsernameInputText] = React.useState(''); const [selectedUsers, setSelectedUsers] = React.useState< $ReadOnlyArray, >([]); const selectedUserIDs = React.useMemo( () => selectedUsers.map(userInfo => userInfo.id), [selectedUsers], ); const exitCommunityCreationFlow = React.useCallback(() => { navigation.navigate(ChatThreadListRouteName); }, [navigation]); React.useEffect(() => { setOptions({ // eslint-disable-next-line react/display-name headerRight: () => ( ), }); }, [exitCommunityCreationFlow, selectedUserIDs.length, setOptions]); const userSearchResults = React.useMemo( () => getPotentialMemberItems( usernameInputText, otherUserInfos, userSearchIndex, selectedUserIDs, null, null, announcement ? threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT : threadTypes.COMMUNITY_ROOT, ), [ announcement, otherUserInfos, selectedUserIDs, userSearchIndex, usernameInputText, ], ); const onSelectUser = React.useCallback( userID => { if (selectedUserIDs.some(existingUserID => userID === existingUserID)) { return; } setSelectedUsers(oldUserInfoInputArray => [ ...oldUserInfoInputArray, otherUserInfos[userID], ]); setUsernameInputText(''); }, [otherUserInfos, selectedUserIDs], ); const tagInputRef = React.useRef(); return ( ); } export default CommunityCreationMembers;