SmartUrlInput [nfc]: Make controlled by caller

Author: chrisbobbe

src/common/SmartUrlInput.js

@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import React, { useState, useRef, useCallback, useContext } from 'react';
+import React, { useRef, useCallback, useContext } from 'react';
 import type { Node } from 'react';
 import { Platform, TextInput, View, Keyboard } from 'react-native';
 import { useFocusEffect } from '@react-navigation/native';
@@ -28,6 +28,7 @@ type Props = $ReadOnly<{|
 
   style?: ViewStyleProp,
   onChangeText: (value: string) => void,
+  value: string,
   onSubmitEditing: () => Promise<void>,
   enablesReturnKeyAutomatically: boolean,
 |}>;
@@ -76,23 +77,14 @@ function useRn19366Workaround(textInputRef) {
 }
 
 export default function SmartUrlInput(props: Props): Node {
-  const { style, onChangeText, onSubmitEditing, enablesReturnKeyAutomatically } = props;
+  const { style, onChangeText, value, onSubmitEditing, enablesReturnKeyAutomatically } = props;
 
   // We should replace the fixme with
   // `React$ElementRef<typeof TextInput>` when we can. Currently, that
   // would make `.current` be `any(implicit)`, which we don't want;
   // this is probably down to bugs in Flow's special support for React.
   const textInputRef = useRef<$FlowFixMe>();
 
-  /**
-   * The actual input string, exactly as entered by the user,
-   * without modifications by autocomplete.
-   *
-   * Prepopulates with "https://", because not everyone has memorized that
-   * sequence of characters.
-   */
-  const [value, setValue] = useState<string>('https://');
-
   const themeContext = useContext(ThemeContext);
 
   // When the route is focused in the navigation, focus the input.
@@ -107,14 +99,6 @@ export default function SmartUrlInput(props: Props): Node {
     }, []),
   );
 
-  const handleChange = useCallback(
-    (_value: string) => {
-      setValue(_value);
-      onChangeText(_value);
-    },
-    [onChangeText],
-  );
-
   if (Platform.OS === 'android') {
     // (This eslint-disable is fine; the relevant rule is not to call Hooks
     //   conditionally. But this conditional won't vary in its behavior
@@ -132,7 +116,7 @@ export default function SmartUrlInput(props: Props): Node {
         autoCorrect={false}
         autoCapitalize="none"
         returnKeyType="go"
-        onChangeText={handleChange}
+        onChangeText={onChangeText}
         blurOnSubmit={false}
         keyboardType="url"
         underlineColorAndroid="transparent"

src/start/RealmInputScreen.js

@@ -25,7 +25,11 @@ export default function RealmInputScreen(props: Props): Node {
   const { navigation } = props;
 
   const [progress, setProgress] = useState<boolean>(false);
-  const [realmInputValue, setRealmInputValue] = useState<string>('');
+
+  // Prepopulate with "https://"; not everyone has memorized that sequence
+  // of characters.
+  const [realmInputValue, setRealmInputValue] = useState<string>('https://');
+
   const [error, setError] = useState<string | null>(null);
 
   const tryRealm = useCallback(async () => {
@@ -75,6 +79,7 @@ export default function RealmInputScreen(props: Props): Node {
         style={styles.input}
         navigation={navigation}
         onChangeText={setRealmInputValue}
+        value={realmInputValue}
         onSubmitEditing={tryRealm}
         enablesReturnKeyAutomatically
       />