Page MenuHomePhabricator
Differential D8198

[native] Add error handling to KeyserverSelection
ClosedPublic
Actions

Authored by ashoat on Jun 13 2023, 10:22 AM.
Tags
None
Referenced Files
Unknown Object (File)
Tue, Mar 18, 11:13 AM
Unknown Object (File)
Tue, Mar 18, 11:13 AM
Unknown Object (File)
Tue, Mar 18, 11:13 AM
Unknown Object (File)
Tue, Mar 18, 11:13 AM
Unknown Object (File)
Tue, Mar 18, 11:13 AM
Unknown Object (File)
Tue, Mar 18, 11:12 AM
Unknown Object (File)
Tue, Mar 18, 11:08 AM
Unknown Object (File)
Sat, Feb 22, 5:26 PM
View All Files
Subscribers
tomek

Details

Reviewers
atul
ginsu
Commits
rCOMMc07b9f31f489: [native] Add error handling to KeyserverSelection
Summary

I want to display an error to the user if we aren't able to reach the keyserver that they've selected.

Depends on D8197

Test Plan

First, I overrode defaultURLPrefix in native/utils/url-utils.js to return some random string. That made sure that the "default" of Ashoat's keyserver does not work, and makes it so the registration flow only worked if the user selected a custom keyserver and all of the server calls in the registration flow used that custom keyserver.

Next, I played around with the screen:

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ashoat created this revision.Jun 13 2023, 10:22 AM
Herald added a subscriber: tomek. · View Herald TranscriptJun 13 2023, 10:22 AM
ashoat edited the test plan for this revision. (Show Details)Jun 13 2023, 10:25 AM
ashoat edited the test plan for this revision. (Show Details)
ashoat updated this revision to Diff 27694.Jun 13 2023, 10:28 AM

Minor

Harbormaster completed remote builds in B20217: Diff 27692.Jun 13 2023, 11:03 AM
Harbormaster completed remote builds in B20219: Diff 27694.Jun 13 2023, 11:17 AM
ashoat requested review of this revision.Jun 13 2023, 11:17 AM
ginsu accepted this revision.Jun 13 2023, 12:56 PM

Probably outside the scope of this diff, but might be worth to consider disabling auto correct on the Enter a keyserver RegistrationTextInput in a follow up diff. Would avoid the situation in the demo video where "localhost" => "local host" and I think if people had unique keyserver names in the future, autocorrect here could be annoying in the user experience

This revision is now accepted and ready to land.Jun 13 2023, 12:56 PM
ashoat added a comment.Jun 14 2023, 6:04 AM
In D8198#242231, @ginsu wrote:

Probably outside the scope of this diff, but might be worth to consider disabling auto correct on the Enter a keyserver RegistrationTextInput in a follow up diff. Would avoid the situation in the demo video where "localhost" => "local host" and I think if people had unique keyserver names in the future, autocorrect here could be annoying in the user experience

Good call. I'll do that in D8194

ashoat updated this revision to Diff 27725.Jun 14 2023, 6:09 AM

Disable autoCorrect following @ginsu's feedback in D8198. Also disabled autoCapitalize

ashoat updated this revision to Diff 27726.Jun 14 2023, 6:09 AM

Oops, updated the wrong diff

ashoat mentioned this in D8194: [native] Update KeyserverSelection to take URL instead of username as input.Jun 14 2023, 6:11 AM
This revision was landed with ongoing or failed builds.Jun 14 2023, 6:14 AM
Closed by commit rCOMMc07b9f31f489: [native] Add error handling to KeyserverSelection (authored by ashoat). · Explain Why
This revision was automatically updated to reflect the committed changes.
ashoat added a commit: rCOMMc07b9f31f489: [native] Add error handling to KeyserverSelection.
Harbormaster completed remote builds in B20244: Diff 27726.Jun 14 2023, 6:26 AM
Harbormaster completed remote builds in B20243: Diff 27725.
ginsu mentioned this in D9666: [lib/native] introduce useIsKeyserverURLValid hook.Oct 31 2023, 9:53 PM
ginsu mentioned this in rCOMM232d032138c0: [lib/native] introduce useIsKeyserverURLValid hook.Dec 4 2023, 10:31 PM

Revision Contents
Changeset List

PathSize
native/
account/
registration/
42 lines

Diff 27737

View Options

native/account/registration/keyserver-selection.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { Text } from 'react-native'; import { Text, View } from 'react-native';
import { import {
getVersion, getVersion,
getVersionActionTypes, getVersionActionTypes,
} from 'lib/actions/device-actions.js'; } from 'lib/actions/device-actions.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { import {
useServerCall, useServerCall,
Show All 28 Lines +userSelections: {
+coolOrNerdMode: CoolOrNerdMode, +coolOrNerdMode: CoolOrNerdMode,
}, },
}; };
const getVersionLoadingStatusSelector = createLoadingStatusSelector( const getVersionLoadingStatusSelector = createLoadingStatusSelector(
getVersionActionTypes, getVersionActionTypes,
); );
type KeyserverSelectionError = 'cant_reach_keyserver';
type Props = { type Props = {
+navigation: RegistrationNavigationProp<'KeyserverSelection'>, +navigation: RegistrationNavigationProp<'KeyserverSelection'>,
+route: NavigationRoute<'KeyserverSelection'>, +route: NavigationRoute<'KeyserverSelection'>,
}; };
function KeyserverSelection(props: Props): React.Node { function KeyserverSelection(props: Props): React.Node {
const registrationContext = React.useContext(RegistrationContext); const registrationContext = React.useContext(RegistrationContext);
invariant(registrationContext, 'registrationContext should be set'); invariant(registrationContext, 'registrationContext should be set');
const { cachedSelections, setCachedSelections } = registrationContext; const { cachedSelections, setCachedSelections } = registrationContext;
const initialKeyserverURL = cachedSelections.keyserverURL; const initialKeyserverURL = cachedSelections.keyserverURL;
const [customKeyserver, setCustomKeyserver] = React.useState( const [customKeyserver, setCustomKeyserver] = React.useState(
initialKeyserverURL === defaultURLPrefix ? '' : initialKeyserverURL, initialKeyserverURL === defaultURLPrefix ? '' : initialKeyserverURL,
); );
const customKeyserverTextInputRef = React.useRef(); const customKeyserverTextInputRef = React.useRef();
let initialSelection; let initialSelection;
if (initialKeyserverURL === defaultURLPrefix) { if (initialKeyserverURL === defaultURLPrefix) {
initialSelection = 'ashoat'; initialSelection = 'ashoat';
} else if (initialKeyserverURL) { } else if (initialKeyserverURL) {
initialSelection = 'custom'; initialSelection = 'custom';
} }
const [error, setError] = React.useState<?KeyserverSelectionError>();
const [currentSelection, setCurrentSelection] = const [currentSelection, setCurrentSelection] =
React.useState<?Selection>(initialSelection); React.useState<?Selection>(initialSelection);
const selectAshoat = React.useCallback(() => { const selectAshoat = React.useCallback(() => {
setCurrentSelection('ashoat'); setCurrentSelection('ashoat');
customKeyserverTextInputRef.current?.blur(); customKeyserverTextInputRef.current?.blur();
}, []); if (currentSelection !== 'ashoat') {
setError(undefined);
}
}, [currentSelection]);
const customKeyserverEmpty = !customKeyserver; const customKeyserverEmpty = !customKeyserver;
const selectCustom = React.useCallback(() => { const selectCustom = React.useCallback(() => {
setCurrentSelection('custom'); setCurrentSelection('custom');
if (customKeyserverEmpty) { if (customKeyserverEmpty) {
customKeyserverTextInputRef.current?.focus(); customKeyserverTextInputRef.current?.focus();
} }
}, [customKeyserverEmpty]); if (currentSelection !== 'custom') {
setError(undefined);
}
}, [customKeyserverEmpty, currentSelection]);
const onCustomKeyserverFocus = React.useCallback(() => { const onCustomKeyserverFocus = React.useCallback(() => {
setCurrentSelection('custom'); setCurrentSelection('custom');
setError(undefined);
}, []); }, []);
let keyserverURL; let keyserverURL;
if (currentSelection === 'ashoat') { if (currentSelection === 'ashoat') {
keyserverURL = defaultURLPrefix; keyserverURL = defaultURLPrefix;
} else if (currentSelection === 'custom' && customKeyserver) { } else if (currentSelection === 'custom' && customKeyserver) {
keyserverURL = customKeyserver; keyserverURL = customKeyserver;
} }
Show All 11 Lines const serverCallParamOverride = React.useMemo(
[keyserverURL], [keyserverURL],
); );
const getVersionCall = useServerCall(getVersion, serverCallParamOverride); const getVersionCall = useServerCall(getVersion, serverCallParamOverride);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const { navigate } = props.navigation; const { navigate } = props.navigation;
const { coolOrNerdMode } = props.route.params.userSelections; const { coolOrNerdMode } = props.route.params.userSelections;
const onSubmit = React.useCallback(async () => { const onSubmit = React.useCallback(async () => {
setError(undefined);
if (!keyserverURL) { if (!keyserverURL) {
return; return;
} }
const getVersionPromise = getVersionCall(); const getVersionPromise = getVersionCall();
dispatchActionPromise(getVersionActionTypes, getVersionPromise); dispatchActionPromise(getVersionActionTypes, getVersionPromise);
// We don't care about the result; just need to make sure this doesn't throw // We don't care about the result; just need to make sure this doesn't throw
try {
await getVersionPromise; await getVersionPromise;
} catch {
setError('cant_reach_keyserver');
return;
}
setCachedSelections(oldUserSelections => ({ setCachedSelections(oldUserSelections => ({
...oldUserSelections, ...oldUserSelections,
keyserverURL, keyserverURL,
})); }));
navigate<'ConnectEthereum'>({ navigate<'ConnectEthereum'>({
name: ConnectEthereumRouteName, name: ConnectEthereumRouteName,
params: { userSelections: { coolOrNerdMode, keyserverURL } }, params: { userSelections: { coolOrNerdMode, keyserverURL } },
}); });
}, [ }, [
navigate, navigate,
coolOrNerdMode, coolOrNerdMode,
keyserverURL, keyserverURL,
setCachedSelections, setCachedSelections,
dispatchActionPromise, dispatchActionPromise,
getVersionCall, getVersionCall,
]); ]);
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
let errorText;
if (error === 'cant_reach_keyserver') {
errorText = (
<Text style={styles.errorText}>Can&rsquo;t reach that keyserver :(</Text>
);
}
const colors = useColors(); const colors = useColors();
return ( return (
<RegistrationContainer> <RegistrationContainer>
<RegistrationContentContainer> <RegistrationContentContainer>
<Text style={styles.header}>Select a keyserver to join</Text> <Text style={styles.header}>Select a keyserver to join</Text>
<Text style={styles.body}> <Text style={styles.body}>
Chat communities on Comm are hosted on keyservers, which are Chat communities on Comm are hosted on keyservers, which are
user-operated backends. user-operated backends.
Show All 35 Lines <RegistrationContainer>
returnKeyType="go" returnKeyType="go"
onSubmitEditing={onSubmit} onSubmitEditing={onSubmit}
keyboardType="url" keyboardType="url"
autoCorrect={false} autoCorrect={false}
autoCapitalize="none" autoCapitalize="none"
ref={customKeyserverTextInputRef} ref={customKeyserverTextInputRef}
/> />
</RegistrationTile> </RegistrationTile>
<View style={styles.error}>{errorText}</View>
</RegistrationContentContainer> </RegistrationContentContainer>
<RegistrationButtonContainer> <RegistrationButtonContainer>
<RegistrationButton <RegistrationButton
onPress={onSubmit} onPress={onSubmit}
label="Next" label="Next"
variant={buttonState} variant={buttonState}
/> />
</RegistrationButtonContainer> </RegistrationButtonContainer>
Show All 22 Linesconst unboundStyles = {
tileBody: { tileBody: {
fontFamily: 'Arial', fontFamily: 'Arial',
fontSize: 13, fontSize: 13,
color: 'panelForegroundSecondaryLabel', color: 'panelForegroundSecondaryLabel',
}, },
cloud: { cloud: {
marginRight: 8, marginRight: 8,
}, },
error: {
marginTop: 16,
},
errorText: {
fontFamily: 'Arial',
fontSize: 15,
lineHeight: 20,
color: 'redText',
},
}; };
export default KeyserverSelection; export default KeyserverSelection;