Differential D7978 Diff 27063 native/community-creation/community-configuration.react.js

Changeset View

Standalone View

native/community-creation/community-configuration.react.js

// @flow		// @flow

import * as React from 'react';		import * as React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';		import { Text, TouchableOpacity, View } from 'react-native';

		import { newThread, newThreadActionTypes } from 'lib/actions/thread-actions.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 type { CommunityCreationNavigationProp } from './community-creation-navigator.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 RegistrationContainer from '../account/registration/registration-container.react.js';
import RegistrationContentContainer from '../account/registration/registration-content-container.react.js';		import RegistrationContentContainer from '../account/registration/registration-content-container.react.js';
import {		import {
ThreadSettingsCategoryFooter,		ThreadSettingsCategoryFooter,
ThreadSettingsCategoryHeader,		ThreadSettingsCategoryHeader,
} from '../chat/settings/thread-settings-category.react.js';		} from '../chat/settings/thread-settings-category.react.js';
import CommIcon from '../components/comm-icon.react.js';		import CommIcon from '../components/comm-icon.react.js';
import Pill from '../components/pill.react.js';		import Pill from '../components/pill.react.js';
import TextInput from '../components/text-input.react.js';		import TextInput from '../components/text-input.react.js';
		import { useCalendarQuery } from '../navigation/nav-selectors.js';
import { type NavigationRoute } from '../navigation/route-names.js';		import { type NavigationRoute } from '../navigation/route-names.js';
import { useColors, useStyles } from '../themes/colors.js';		import { useColors, useStyles } from '../themes/colors.js';

type Props = {		type Props = {
+navigation: CommunityCreationNavigationProp<'CommunityConfiguration'>,		+navigation: CommunityCreationNavigationProp<'CommunityConfiguration'>,
+route: NavigationRoute<'CommunityConfiguration'>,		+route: NavigationRoute<'CommunityConfiguration'>,
};		};
// eslint-disable-next-line no-unused-vars		// eslint-disable-next-line no-unused-vars
function CommunityConfiguration(props: Props): React.Node {		function CommunityConfiguration(props: Props): React.Node {
const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
const colors = useColors();		const colors = useColors();

		const dispatchActionPromise = useDispatchActionPromise();

		const callNewThread = useServerCall(newThread);
		const calendarQueryFunc = useCalendarQuery();

const cloudIcon = (		const cloudIcon = (
<CommIcon		<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 callCreateNewCommunity = React.useCallback(async () => {
		const calendarQuery = calendarQueryFunc();
		const newThreadResult: NewThreadResult = await callNewThread({
		name: pendingCommunityName,
		type: announcementSetting
		? threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT
		: threadTypes.COMMUNITY_ROOT,
		calendarQuery,
		});
		return newThreadResult;
		}, [
		announcementSetting,
		calendarQueryFunc,
		callNewThread,
		pendingCommunityName,
		]);

		const createNewCommunity = React.useCallback(async () => {
		const newThreadResultPromise = callCreateNewCommunity();
		dispatchActionPromise(newThreadActionTypes, newThreadResultPromise);
		await newThreadResultPromise;
		}, [callCreateNewCommunity, dispatchActionPromise]);

const onCheckBoxPress = React.useCallback(() => {		const onCheckBoxPress = React.useCallback(() => {
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 20 Lines • Show All 46 Lines • ▼ Show 20 Lines	<RegistrationContainer>
onPress={onCheckBoxPress}		onPress={onCheckBoxPress}
style={styles.enumCheckBoxContainer}		style={styles.enumCheckBoxContainer}
activeOpacity={0.4}		activeOpacity={0.4}
>		>
<View style={styles.enumCheckBox}>{checkBoxFill}</View>		<View style={styles.enumCheckBox}>{checkBoxFill}</View>
</TouchableOpacity>		</TouchableOpacity>
</View>		</View>
<ThreadSettingsCategoryFooter type="full" />		<ThreadSettingsCategoryFooter type="full" />
		<RegistrationButtonContainer>
		<RegistrationButton
		onPress={createNewCommunity}
		label="Create Community"
		/>
		</RegistrationButtonContainer>
</RegistrationContentContainer>		</RegistrationContentContainer>
</RegistrationContainer>		</RegistrationContainer>
);		);
}		}

const unboundStyles = {		const unboundStyles = {
keyserverRowContainer: {		keyserverRowContainer: {
flexDirection: 'row',		flexDirection: 'row',
▲ Show 20 Lines • Show All 91 Lines • Show Last 20 Lines