LoginForm: migrate to functional component.

src/components/LoginForm.tsx

@@ -20,51 +20,21 @@ interface FormErrors {
   errorServer?: string;
 }
 
-class LoginForm extends React.PureComponent {
-  public state: {
-    showAdvanced: boolean;
-    errors: FormErrors;
-
-    server: string;
-    username: string;
-    password: string;
-  };
-
-  public props: {
+interface PropsType {
   onSubmit: (username: string, password: string, serviceApiUrl?: string) => void;
   loading?: boolean;
   error?: Error;
-  };
-
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      showAdvanced: false,
-      errors: {},
-      server: "",
-      username: "",
-      password: "",
-    };
-    this.generateEncryption = this.generateEncryption.bind(this);
-    this.toggleAdvancedSettings = this.toggleAdvancedSettings.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-  }
+}
 
-  public handleInputChange(event: React.ChangeEvent<any>) {
-    const name = event.target.name;
-    const value = event.target.value;
-    this.setState({
-      [name]: value,
-    });
-  }
+export default function LoginForm(props: PropsType) {
+  const [username, setUsername] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [server, setServer] = React.useState("");
+  const [showAdvanced, setShowAdvanced] = React.useState(false);
+  const [errors, setErrors] = React.useState<FormErrors>({});
 
-  public generateEncryption(e: any) {
+  function generateEncryption(e: React.FormEvent<any>) {
     e.preventDefault();
-    const server = this.state.showAdvanced ? this.state.server : undefined;
-
-    const username = this.state.username;
-    const password = this.state.password;
-
     const errors: FormErrors = {};
     const fieldRequired = "This field is required!";
     if (!username) {
@@ -75,26 +45,21 @@ class LoginForm extends React.PureComponent {
     }
 
     if (process.env.NODE_ENV !== "development") {
-      if (this.state.showAdvanced && !this.state.server.startsWith("https://")) {
+      if (showAdvanced && !server.startsWith("https://")) {
         errors.errorServer = "Server URI must start with https://";
       }
     }
 
     if (Object.keys(errors).length) {
-      this.setState({ errors });
+      setErrors(errors);
       return;
     } else {
-      this.setState({ errors: {} });
-    }
-
-    this.props.onSubmit(username, password, server);
+      setErrors({});
     }
 
-  public toggleAdvancedSettings() {
-    this.setState({ showAdvanced: !this.state.showAdvanced });
+    props.onSubmit(username, password, (showAdvanced) ? server : undefined);
   }
 
-  public render() {
   const styles = {
     form: {
     },
@@ -110,26 +75,31 @@ class LoginForm extends React.PureComponent {
     },
   };
 
+  function handleInputChange(func: (value: string) => void) {
+    return (event: React.ChangeEvent<any>) => {
+      func(event.target.value);
+    };
+  }
+
   let advancedSettings = null;
-    if (this.state.showAdvanced) {
+  if (showAdvanced) {
     advancedSettings = (
       <React.Fragment>
         <TextField
           type="url"
           style={styles.textField}
-            error={!!this.state.errors.errorServer}
-            helperText={this.state.errors.errorServer}
+          error={!!errors.errorServer}
+          helperText={errors.errorServer}
           label="Server"
-            name="server"
-            value={this.state.server}
-            onChange={this.handleInputChange}
+          value={server}
+          onChange={handleInputChange(setServer)}
         />
         <br />
       </React.Fragment>
     );
   }
 
-    if (this.props.loading) {
+  if (props.loading) {
     return (
       <div style={{ textAlign: "center" }}>
         <LoadingIndicator />
@@ -140,28 +110,27 @@ class LoginForm extends React.PureComponent {
 
   return (
     <React.Fragment>
-        {(this.props.error) && (<div>Error! {this.props.error.message}</div>)}
-        <form style={styles.form} onSubmit={this.generateEncryption}>
+      {(props.error) && (<div>Error! {props.error.message}</div>)}
+      <form style={styles.form} onSubmit={generateEncryption}>
         <TextField
           type="text"
           style={styles.textField}
-            error={!!this.state.errors.errorEmail}
-            helperText={this.state.errors.errorEmail}
+          error={!!errors.errorEmail}
+          helperText={errors.errorEmail}
           label="Username"
-            name="username"
-            value={this.state.username}
-            onChange={this.handleInputChange}
+          value={username}
+          onChange={handleInputChange(setUsername)}
         />
         <br />
         <TextField
           type="password"
           style={styles.textField}
-            error={!!this.state.errors.errorPassword}
-            helperText={this.state.errors.errorPassword}
+          error={!!errors.errorPassword}
+          helperText={errors.errorPassword}
           label="Password"
           name="password"
-            value={this.state.password}
-            onChange={this.handleInputChange}
+          value={password}
+          onChange={handleInputChange(setPassword)}
         />
         <div style={styles.forgotPassword}>
           <ExternalLink href={C.forgotPassword}>Forgot password?</ExternalLink>
@@ -171,8 +140,8 @@ class LoginForm extends React.PureComponent {
             control={
               <Switch
                 color="primary"
-                  checked={this.state.showAdvanced}
-                  onChange={this.toggleAdvancedSettings}
+                checked={showAdvanced}
+                onChange={() => setShowAdvanced(!showAdvanced)}
               />
             }
             label="Advanced settings"
@@ -185,15 +154,12 @@ class LoginForm extends React.PureComponent {
             variant="contained"
             type="submit"
             color="secondary"
-              disabled={this.props.loading}
+            disabled={props.loading}
           >
-              {this.props.loading ? "Loading…" : "Log In"}
+            {props.loading ? "Loading…" : "Log In"}
           </Button>
         </div>
       </form>
     </React.Fragment>
   );
-  }
 }
-
-export default LoginForm;