Changeset View
Changeset View
Standalone View
Standalone View
native/account/registration/username-selection.react.js
Show All 15 Lines | |||||
import RegistrationButtonContainer from './registration-button-container.react.js'; | import RegistrationButtonContainer from './registration-button-container.react.js'; | ||||
import RegistrationButton from './registration-button.react.js'; | import RegistrationButton from './registration-button.react.js'; | ||||
import RegistrationContainer from './registration-container.react.js'; | import RegistrationContainer from './registration-container.react.js'; | ||||
import RegistrationContentContainer from './registration-content-container.react.js'; | import RegistrationContentContainer from './registration-content-container.react.js'; | ||||
import type { RegistrationNavigationProp } from './registration-navigator.react.js'; | import type { RegistrationNavigationProp } from './registration-navigator.react.js'; | ||||
import RegistrationTextInput from './registration-text-input.react.js'; | import RegistrationTextInput from './registration-text-input.react.js'; | ||||
import type { CoolOrNerdMode } from './registration-types.js'; | import type { CoolOrNerdMode } from './registration-types.js'; | ||||
import type { NavigationRoute } from '../../navigation/route-names.js'; | import { | ||||
type NavigationRoute, | |||||
PasswordSelectionRouteName, | |||||
} from '../../navigation/route-names.js'; | |||||
import { useSelector } from '../../redux/redux-utils.js'; | import { useSelector } from '../../redux/redux-utils.js'; | ||||
import { useStyles } from '../../themes/colors.js'; | import { useStyles } from '../../themes/colors.js'; | ||||
const exactSearchUserLoadingStatusSelector = createLoadingStatusSelector( | const exactSearchUserLoadingStatusSelector = createLoadingStatusSelector( | ||||
exactSearchUserActionTypes, | exactSearchUserActionTypes, | ||||
); | ); | ||||
export type UsernameSelectionParams = { | export type UsernameSelectionParams = { | ||||
+userSelections: { | +userSelections: { | ||||
+coolOrNerdMode: CoolOrNerdMode, | +coolOrNerdMode: CoolOrNerdMode, | ||||
+keyserverUsername: string, | +keyserverUsername: string, | ||||
}, | }, | ||||
}; | }; | ||||
type UsernameError = 'username_invalid' | 'username_taken'; | type UsernameError = 'username_invalid' | 'username_taken'; | ||||
type Props = { | type Props = { | ||||
+navigation: RegistrationNavigationProp<'UsernameSelection'>, | +navigation: RegistrationNavigationProp<'UsernameSelection'>, | ||||
+route: NavigationRoute<'UsernameSelection'>, | +route: NavigationRoute<'UsernameSelection'>, | ||||
}; | }; | ||||
// eslint-disable-next-line no-unused-vars | |||||
function UsernameSelection(props: Props): React.Node { | function UsernameSelection(props: Props): React.Node { | ||||
const [username, setUsername] = React.useState(''); | const [username, setUsername] = React.useState(''); | ||||
const validUsername = username.search(validUsernameRegex) > -1; | const validUsername = username.search(validUsernameRegex) > -1; | ||||
const [usernameError, setUsernameError] = React.useState<?UsernameError>(); | const [usernameError, setUsernameError] = React.useState<?UsernameError>(); | ||||
const styles = useStyles(unboundStyles); | const styles = useStyles(unboundStyles); | ||||
const checkUsernameValidity = React.useCallback(() => { | const checkUsernameValidity = React.useCallback(() => { | ||||
if (validUsername) { | if (validUsername) { | ||||
return true; | return true; | ||||
} | } | ||||
setUsernameError('username_invalid'); | setUsernameError('username_invalid'); | ||||
return false; | return false; | ||||
}, [validUsername]); | }, [validUsername]); | ||||
const exactSearchUserCall = useServerCall(exactSearchUser); | const exactSearchUserCall = useServerCall(exactSearchUser); | ||||
const dispatchActionPromise = useDispatchActionPromise(); | const dispatchActionPromise = useDispatchActionPromise(); | ||||
const { navigate } = props.navigation; | |||||
const { userSelections } = props.route.params; | |||||
const onProceed = React.useCallback(async () => { | const onProceed = React.useCallback(async () => { | ||||
if (!checkUsernameValidity()) { | if (!checkUsernameValidity()) { | ||||
return; | return; | ||||
} | } | ||||
const searchPromise = exactSearchUserCall(username); | const searchPromise = exactSearchUserCall(username); | ||||
dispatchActionPromise(exactSearchUserActionTypes, searchPromise); | dispatchActionPromise(exactSearchUserActionTypes, searchPromise); | ||||
const { userInfo } = await searchPromise; | const { userInfo } = await searchPromise; | ||||
if (userInfo) { | if (userInfo) { | ||||
setUsernameError('username_taken'); | setUsernameError('username_taken'); | ||||
return; | return; | ||||
} | } | ||||
setUsernameError(undefined); | setUsernameError(undefined); | ||||
navigate<'PasswordSelection'>({ | |||||
name: PasswordSelectionRouteName, | |||||
params: { | |||||
userSelections: { | |||||
...userSelections, | |||||
username, | |||||
}, | |||||
}, | |||||
}); | |||||
}, [ | }, [ | ||||
checkUsernameValidity, | checkUsernameValidity, | ||||
username, | username, | ||||
exactSearchUserCall, | exactSearchUserCall, | ||||
dispatchActionPromise, | dispatchActionPromise, | ||||
navigate, | |||||
userSelections, | |||||
]); | ]); | ||||
const exactSearchUserCallLoading = useSelector( | const exactSearchUserCallLoading = useSelector( | ||||
state => exactSearchUserLoadingStatusSelector(state) === 'loading', | state => exactSearchUserLoadingStatusSelector(state) === 'loading', | ||||
); | ); | ||||
let buttonVariant = 'disabled'; | let buttonVariant = 'disabled'; | ||||
if (exactSearchUserCallLoading) { | if (exactSearchUserCallLoading) { | ||||
buttonVariant = 'loading'; | buttonVariant = 'loading'; | ||||
▲ Show 20 Lines • Show All 96 Lines • Show Last 20 Lines |