Changeset View
Changeset View
Standalone View
Standalone View
native/community-creation/community-configuration.react.js
Show First 20 Lines • Show All 56 Lines • ▼ Show 20 Lines | <CommIcon | ||||
name="cloud-filled" | name="cloud-filled" | ||||
size={12} | size={12} | ||||
color={colors.panelForegroundLabel} | color={colors.panelForegroundLabel} | ||||
/> | /> | ||||
); | ); | ||||
const [pendingCommunityName, setPendingCommunityName] = React.useState(''); | const [pendingCommunityName, setPendingCommunityName] = React.useState(''); | ||||
const [announcementSetting, setAnnouncementSetting] = React.useState(false); | const [announcementSetting, setAnnouncementSetting] = React.useState(false); | ||||
const [errorMessage, setErrorMessage] = React.useState<?string>(); | |||||
const onChangePendingCommunityName = React.useCallback(newValue => { | |||||
setErrorMessage(); | |||||
setPendingCommunityName(newValue); | |||||
}, []); | |||||
const callCreateNewCommunity = React.useCallback(async () => { | const callCreateNewCommunity = React.useCallback(async () => { | ||||
const calendarQuery = calendarQueryFunc(); | const calendarQuery = calendarQueryFunc(); | ||||
try { | |||||
const newThreadResult: NewThreadResult = await callNewThread({ | const newThreadResult: NewThreadResult = await callNewThread({ | ||||
name: pendingCommunityName, | name: pendingCommunityName, | ||||
type: announcementSetting | type: announcementSetting | ||||
? threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT | ? threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT | ||||
: threadTypes.COMMUNITY_ROOT, | : threadTypes.COMMUNITY_ROOT, | ||||
calendarQuery, | calendarQuery, | ||||
}); | }); | ||||
return newThreadResult; | return newThreadResult; | ||||
} catch (e) { | |||||
setErrorMessage('Community creation failed. Please try again.'); | |||||
throw e; | |||||
} | |||||
}, [ | }, [ | ||||
announcementSetting, | announcementSetting, | ||||
calendarQueryFunc, | calendarQueryFunc, | ||||
callNewThread, | callNewThread, | ||||
pendingCommunityName, | pendingCommunityName, | ||||
]); | ]); | ||||
const createNewCommunity = React.useCallback(async () => { | const createNewCommunity = React.useCallback(async () => { | ||||
setErrorMessage(); | |||||
const newThreadResultPromise = callCreateNewCommunity(); | const newThreadResultPromise = callCreateNewCommunity(); | ||||
dispatchActionPromise(newThreadActionTypes, newThreadResultPromise); | dispatchActionPromise(newThreadActionTypes, newThreadResultPromise); | ||||
await newThreadResultPromise; | await newThreadResultPromise; | ||||
}, [callCreateNewCommunity, dispatchActionPromise]); | }, [callCreateNewCommunity, dispatchActionPromise]); | ||||
const onCheckBoxPress = React.useCallback(() => { | const onCheckBoxPress = React.useCallback(() => { | ||||
setErrorMessage(); | |||||
setAnnouncementSetting(!announcementSetting); | setAnnouncementSetting(!announcementSetting); | ||||
}, [announcementSetting]); | }, [announcementSetting]); | ||||
let checkBoxFill; | let checkBoxFill; | ||||
if (announcementSetting) { | if (announcementSetting) { | ||||
checkBoxFill = <View style={styles.enumCheckBoxFill} />; | checkBoxFill = <View style={styles.enumCheckBoxFill} />; | ||||
} | } | ||||
Show All 12 Lines | <RegistrationContainer> | ||||
<ThreadSettingsCategoryHeader type="full" title="COMMUNITY INFO" /> | <ThreadSettingsCategoryHeader type="full" title="COMMUNITY INFO" /> | ||||
<View style={styles.communityNameRow}> | <View style={styles.communityNameRow}> | ||||
<Text style={styles.communityNameLabel}>Name</Text> | <Text style={styles.communityNameLabel}>Name</Text> | ||||
<TextInput | <TextInput | ||||
style={styles.communityNamePendingValue} | style={styles.communityNamePendingValue} | ||||
placeholder="Community Name" | placeholder="Community Name" | ||||
placeholderTextColor={colors.panelSecondaryForegroundBorder} | placeholderTextColor={colors.panelSecondaryForegroundBorder} | ||||
value={pendingCommunityName} | value={pendingCommunityName} | ||||
onChangeText={setPendingCommunityName} | onChangeText={onChangePendingCommunityName} | ||||
editable={true} | editable={true} | ||||
/> | /> | ||||
</View> | </View> | ||||
<ThreadSettingsCategoryFooter type="full" /> | <ThreadSettingsCategoryFooter type="full" /> | ||||
<View style={styles.communityNameNoticeContainer}> | <View style={styles.communityNameNoticeContainer}> | ||||
<Text style={styles.communityNameNoticeText}> | <Text style={styles.communityNameNoticeText}> | ||||
You may edit your community’s image and name later. | You may edit your community’s image and name later. | ||||
Show All 27 Lines | <RegistrationContainer> | ||||
label="Create Community" | label="Create Community" | ||||
variant={ | variant={ | ||||
createNewCommunityLoadingStatus === 'loading' | createNewCommunityLoadingStatus === 'loading' | ||||
? 'loading' | ? 'loading' | ||||
: 'enabled' | : 'enabled' | ||||
} | } | ||||
/> | /> | ||||
</RegistrationButtonContainer> | </RegistrationButtonContainer> | ||||
<View style={styles.errorMessageContainer}> | |||||
<Text style={styles.errorMessageText}>{errorMessage}</Text> | |||||
</View> | |||||
</RegistrationContentContainer> | </RegistrationContentContainer> | ||||
</RegistrationContainer> | </RegistrationContainer> | ||||
); | ); | ||||
} | } | ||||
const unboundStyles = { | const unboundStyles = { | ||||
keyserverRowContainer: { | keyserverRowContainer: { | ||||
flexDirection: 'row', | flexDirection: 'row', | ||||
▲ Show 20 Lines • Show All 80 Lines • ▼ Show 20 Lines | enumCheckBox: { | ||||
alignItems: 'center', | alignItems: 'center', | ||||
}, | }, | ||||
enumCheckBoxFill: { | enumCheckBoxFill: { | ||||
height: 20, | height: 20, | ||||
width: 20, | width: 20, | ||||
borderRadius: 2.1875, | borderRadius: 2.1875, | ||||
backgroundColor: 'panelForegroundSecondaryLabel', | backgroundColor: 'panelForegroundSecondaryLabel', | ||||
}, | }, | ||||
errorMessageContainer: { | |||||
alignItems: 'center', | |||||
}, | |||||
errorMessageText: { | |||||
color: 'redText', | |||||
}, | |||||
}; | }; | ||||
export default CommunityConfiguration; | export default CommunityConfiguration; |