RealmInputScreen [nfc]: Convert to function component

Author: chrisbobbe

src/start/RealmInputScreen.js

@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React, { useState, useCallback } from 'react';
 import type { Node } from 'react';
 import { Keyboard } from 'react-native';
 
@@ -21,12 +21,6 @@ type Props = $ReadOnly<{|
   route: RouteProp<'realm-input', {| initial: boolean | void |}>,
 |}>;
 
-type State = {|
-  realmInputValue: string,
-  error: string | null,
-  progress: boolean,
-|};
-
 const urlFromInputValue = (realmInputValue: string): URL | void => {
   const withScheme = /^https?:\/\//.test(realmInputValue)
     ? realmInputValue
@@ -35,86 +29,79 @@ const urlFromInputValue = (realmInputValue: string): URL | void => {
   return tryParseUrl(withScheme);
 };
 
-export default class RealmInputScreen extends PureComponent<Props, State> {
-  state: State = {
-    progress: false,
-    realmInputValue: '',
-    error: null,
-  };
-
-  tryRealm: () => Promise<void> = async () => {
-    const { realmInputValue } = this.state;
+export default function RealmInputScreen(props: Props): Node {
+  const [progress, setProgress] = useState<boolean>(false);
+  const [realmInputValue, setRealmInputValue] = useState<string>('');
+  const [error, setError] = useState<string | null>(null);
 
+  const tryRealm = useCallback(async () => {
     const parsedRealm = urlFromInputValue(realmInputValue);
     if (!parsedRealm) {
-      this.setState({ error: 'Please enter a valid URL' });
+      setError('Please enter a valid URL');
       return;
     }
     if (parsedRealm.username !== '') {
-      this.setState({ error: 'Please enter the server URL, not your email' });
+      setError('Please enter the server URL, not your email');
       return;
     }
 
-    this.setState({
-      progress: true,
-      error: null,
-    });
+    setProgress(true);
+    setError(null);
     try {
       const serverSettings: ApiResponseServerSettings = await api.getServerSettings(parsedRealm);
       NavigationService.dispatch(navigateToAuth(serverSettings));
       Keyboard.dismiss();
     } catch (err) {
-      this.setState({ error: 'Cannot connect to server' });
+      setError('Cannot connect to server');
       /* eslint-disable no-console */
       console.warn('RealmInputScreen: failed to connect to server:', err);
       console.warn(err.stack);
     } finally {
-      this.setState({ progress: false });
+      setProgress(false);
     }
-  };
+  }, [realmInputValue]);
 
-  handleRealmChange: string => void = value => this.setState({ realmInputValue: value });
+  const handleRealmChange = useCallback(value => {
+    setRealmInputValue(value);
+  }, []);
 
-  render(): Node {
-    const { navigation } = this.props;
-    const { progress, error, realmInputValue } = this.state;
+  const { navigation } = props;
 
-    const styles = {
-      input: { marginTop: 16, marginBottom: 8 },
-      hintText: { paddingLeft: 2, fontSize: 12 },
-      button: { marginTop: 8 },
-    };
+  const styles = {
+    input: { marginTop: 16, marginBottom: 8 },
+    hintText: { paddingLeft: 2, fontSize: 12 },
+    button: { marginTop: 8 },
+  };
 
-    return (
-      <Screen
-        title="Welcome"
-        canGoBack={!this.props.route.params.initial}
-        padding
-        centerContent
-        keyboardShouldPersistTaps="always"
-        shouldShowLoadingBanner={false}
-      >
-        <ZulipTextIntl text="Enter your Zulip server URL:" />
-        <SmartUrlInput
-          style={styles.input}
-          navigation={navigation}
-          onChangeText={this.handleRealmChange}
-          onSubmitEditing={this.tryRealm}
-          enablesReturnKeyAutomatically
-        />
-        {error !== null ? (
-          <ErrorMsg error={error} />
-        ) : (
-          <ZulipTextIntl text="e.g. zulip.example.com" style={styles.hintText} />
-        )}
-        <ZulipButton
-          style={styles.button}
-          text="Enter"
-          progress={progress}
-          onPress={this.tryRealm}
-          disabled={urlFromInputValue(realmInputValue) === undefined}
-        />
-      </Screen>
-    );
-  }
+  return (
+    <Screen
+      title="Welcome"
+      canGoBack={!props.route.params.initial}
+      padding
+      centerContent
+      keyboardShouldPersistTaps="always"
+      shouldShowLoadingBanner={false}
+    >
+      <ZulipTextIntl text="Enter your Zulip server URL:" />
+      <SmartUrlInput
+        style={styles.input}
+        navigation={navigation}
+        onChangeText={handleRealmChange}
+        onSubmitEditing={tryRealm}
+        enablesReturnKeyAutomatically
+      />
+      {error !== null ? (
+        <ErrorMsg error={error} />
+      ) : (
+        <ZulipTextIntl text="e.g. zulip.example.com" style={styles.hintText} />
+      )}
+      <ZulipButton
+        style={styles.button}
+        text="Enter"
+        progress={progress}
+        onPress={tryRealm}
+        disabled={urlFromInputValue(realmInputValue) === undefined}
+      />
+    </Screen>
+  );
 }