Differential D7980 Diff 27065 native/community-creation/community-configuration.react.js

Changeset 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',
		},
		atulAuthorUnsubmitted Done Inline Actions Styling here was to match what we currently have in the app. Made a note in Linear that we should consistently display error states/messages: https://linear.app/comm/issue/DES-89/ensure-consistent-forminput-styling-throughout-designs#comment-0dd7aa2f atul: Styling here was to match what we currently have in the app. Made a note in Linear that we…
};		};

export default CommunityConfiguration;		export default CommunityConfiguration;