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 @@ -5,6 +5,7 @@ import { View, Text } from 'react-native'; import { addKeyserverActionType } from 'lib/actions/keyserver-actions.js'; +import { useIsKeyserverURLValid } from 'lib/shared/keyserver-utils.js'; import type { KeyserverInfo } from 'lib/types/keyserver-types.js'; import { defaultConnectionInfo } from 'lib/types/socket-types.js'; import { useDispatch } from 'lib/utils/redux-utils.js'; @@ -32,12 +33,22 @@ const styles = useStyles(unboundStyles); const [urlInput, setUrlInput] = React.useState(''); + const [showErrorMessage, setShowErrorMessage] = React.useState(false); - const onPressSave = React.useCallback(() => { + const isKeyserverURLValidCallback = useIsKeyserverURLValid(urlInput); + + const onPressSave = React.useCallback(async () => { + setShowErrorMessage(false); if (!currentUserID || !urlInput) { return; } + const isKeyserverURLValid = await isKeyserverURLValidCallback(); + if (!isKeyserverURLValid) { + setShowErrorMessage(true); + return; + } + const newKeyserverInfo: KeyserverInfo = { cookie: null, updatesCurrentAsOf: 0, @@ -56,7 +67,7 @@ }); goBack(); - }, [currentUserID, dispatch, goBack, urlInput]); + }, [currentUserID, dispatch, goBack, isKeyserverURLValidCallback, urlInput]); React.useEffect(() => { setOptions({ @@ -72,6 +83,19 @@ [], ); + const errorMessage = React.useMemo(() => { + if (!showErrorMessage) { + return null; + } + + return ( + + Cannot connect to keyserver. Please check the URL or your connection and + try again. + + ); + }, [showErrorMessage, styles.errorMessage]); + return ( KEYSERVER URL @@ -87,6 +111,7 @@ autoCorrect={false} /> + {errorMessage} ); } @@ -120,6 +145,11 @@ paddingVertical: 0, borderBottomColor: 'transparent', }, + errorMessage: { + marginTop: 8, + marginHorizontal: 16, + color: 'redText', + }, }; export default AddKeyserver;