Changeset View
Changeset View
Standalone 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 |