diff --git a/native/navigation/header-right-text-button.react.js b/native/navigation/header-right-text-button.react.js --- a/native/navigation/header-right-text-button.react.js +++ b/native/navigation/header-right-text-button.react.js @@ -8,16 +8,18 @@ type Props = { +label: string, +onPress: () => mixed, + +disabled?: boolean, }; function HeaderRightTextButton(props: Props): React.Node { - const { label, onPress } = props; + const { label, onPress, disabled } = props; const styles = useStyles(unboundStyles); + const textStyle = disabled ? styles.disabledTextStyle : styles.textStyle; return ( - - {label} + + {label} ); } @@ -28,6 +30,11 @@ fontSize: 16, marginRight: 10, }, + disabledTextStyle: { + color: 'disabledButtonText', + fontSize: 16, + marginRight: 10, + }, }; export default HeaderRightTextButton; diff --git a/native/profile/add-keyserver.react.js b/native/profile/add-keyserver.react.js --- a/native/profile/add-keyserver.react.js +++ b/native/profile/add-keyserver.react.js @@ -18,6 +18,14 @@ import { useStyles, useColors } from '../themes/colors.js'; import { useStaffCanSee } from '../utils/staff-utils.js'; +type KeyserverCheckStatus = + | { +status: 'inactive' } + | { +status: 'loading' } + | { +status: 'error' }; +const keyserverCheckStatusInactive = { status: 'inactive' }; +const keyserverCheckStatusLoading = { status: 'loading' }; +const keyserverCheckStatusError = { status: 'error' }; + type Props = { +navigation: ProfileNavigationProp<'AddKeyserver'>, +route: NavigationRoute<'AddKeyserver'>, @@ -39,21 +47,24 @@ const [urlInput, setUrlInput] = React.useState( customServer && staffCanSee ? customServer : '', ); - const [showErrorMessage, setShowErrorMessage] = React.useState(false); + const [status, setStatus] = React.useState( + keyserverCheckStatusInactive, + ); const isKeyserverURLValidCallback = useIsKeyserverURLValid(urlInput); const onPressSave = React.useCallback(async () => { - setShowErrorMessage(false); if (!currentUserID || !urlInput) { return; } + setStatus(keyserverCheckStatusLoading); const keyserverVersionData = await isKeyserverURLValidCallback(); if (!keyserverVersionData) { - setShowErrorMessage(true); + setStatus(keyserverCheckStatusError); return; } + setStatus(keyserverCheckStatusInactive); const newKeyserverInfo: KeyserverInfo = defaultKeyserverInfo(urlInput); @@ -68,19 +79,25 @@ goBack(); }, [currentUserID, dispatch, goBack, isKeyserverURLValidCallback, urlInput]); + const buttonDisabled = !urlInput || status.status === 'loading'; React.useEffect(() => { setOptions({ headerRight: () => ( - + ), }); - }, [onPressSave, setOptions, styles.header]); + }, [onPressSave, setOptions, buttonDisabled]); const onChangeText = React.useCallback( (text: string) => setUrlInput(text), [], ); + const showErrorMessage = status.status === 'error'; const errorMessage = React.useMemo(() => { if (!showErrorMessage) { return null;