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;