Page MenuHomePhabricator
Differential D7988 Diff 27100 native/community-creation/community-configuration.react.js

Changeset View

Standalone View

View Options

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 { newThread, newThreadActionTypes } from 'lib/actions/thread-actions.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import type { LoadingStatus } from 'lib/types/loading-types.js'; import type { LoadingStatus } from 'lib/types/loading-types.js';
import { threadTypes } from 'lib/types/thread-types-enum.js'; import { threadTypes } from 'lib/types/thread-types-enum.js';
import type { NewThreadResult } from 'lib/types/thread-types.js'; import type { NewThreadResult } from 'lib/types/thread-types.js';
import { import {
useDispatchActionPromise, useDispatchActionPromise,
useServerCall, useServerCall,
} from 'lib/utils/action-utils.js'; } 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 type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js';
import RegistrationButtonContainer from '../account/registration/registration-button-container.react.js'; import RegistrationButtonContainer from '../account/registration/registration-button-container.react.js';
import RegistrationButton from '../account/registration/registration-button.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 TextInput from '../components/text-input.react.js'; import TextInput from '../components/text-input.react.js';
import { useCalendarQuery } from '../navigation/nav-selectors.js'; import { useCalendarQuery } from '../navigation/nav-selectors.js';
import { import {
CommunityCreationMembersRouteName, CommunityCreationMembersRouteName,
type NavigationRoute, type NavigationRoute,
} from '../navigation/route-names.js'; } from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js'; import { useSelector } from '../redux/redux-utils.js';
import { useColors, useStyles } from '../themes/colors.js'; import { useColors, useStyles } from '../themes/colors.js';
Show All 17 Linesfunction CommunityConfiguration(props: Props): React.Node {
const callNewThread = useServerCall(newThread); const callNewThread = useServerCall(newThread);
const calendarQueryFunc = useCalendarQuery(); const calendarQueryFunc = useCalendarQuery();
const createNewCommunityLoadingStatus: LoadingStatus = useSelector( const createNewCommunityLoadingStatus: LoadingStatus = useSelector(
createNewCommunityLoadingStatusSelector, createNewCommunityLoadingStatusSelector,
); );
const cloudIcon = (
<CommIcon
name="cloud-filled"
size={12}
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 [errorMessage, setErrorMessage] = React.useState<?string>();
const onChangePendingCommunityName = React.useCallback(newValue => { const onChangePendingCommunityName = React.useCallback(newValue => {
setErrorMessage(); setErrorMessage();
setPendingCommunityName(newValue); setPendingCommunityName(newValue);
}, []); }, []);
Show All 37 Linesfunction CommunityConfiguration(props: Props): React.Node {
let checkBoxFill; let checkBoxFill;
if (announcementSetting) { if (announcementSetting) {
checkBoxFill = <View style={styles.enumCheckBoxFill} />; checkBoxFill = <View style={styles.enumCheckBoxFill} />;
} }
return ( return (
<RegistrationContainer> <RegistrationContainer>
<RegistrationContentContainer style={styles.containerPaddingOverride}> <RegistrationContentContainer style={styles.containerPaddingOverride}>
<View style={styles.keyserverRowContainer}> <CommunityCreationKeyserverLabel />
<Text style={styles.withinText}>within</Text>
<Pill
label="ashoat"
backgroundColor={colors.codeBackground}
icon={cloudIcon}
/>
</View>
<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}
▲ Show 20 Lines • Show All 45 Lines • ▼ Show 20 Lines <RegistrationContainer>
<Text style={styles.errorMessageText}>{errorMessage}</Text> <Text style={styles.errorMessageText}>{errorMessage}</Text>
</View> </View>
</RegistrationContentContainer> </RegistrationContentContainer>
</RegistrationContainer> </RegistrationContainer>
); );
} }
const unboundStyles = { const unboundStyles = {
keyserverRowContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'panelForeground',
height: 48,
borderColor: 'panelForegroundBorder',
borderBottomWidth: 1,
},
withinText: {
color: 'panelForegroundLabel',
fontSize: 14,
marginRight: 6,
},
containerPaddingOverride: { containerPaddingOverride: {
padding: 0, padding: 0,
}, },
communityNameRow: { communityNameRow: {
backgroundColor: 'panelForeground', backgroundColor: 'panelForeground',
flexDirection: 'row', flexDirection: 'row',
paddingHorizontal: 24, paddingHorizontal: 24,
paddingVertical: 8, paddingVertical: 8,
▲ Show 20 Lines • Show All 77 Lines • Show Last 20 Lines