LoginGate: move to be a function component.

src/LoginGate.tsx

@@ -81,24 +81,18 @@ function EncryptionPart(props: { credentials: CredentialsType }) {
   );
 }
 
-
-class LoginGate extends React.Component {
-  public props: {
+interface PropsType {
   credentials: CredentialsType;
-  };
+}
 
-  constructor(props: any) {
-    super(props);
-    this.onFormSubmit = this.onFormSubmit.bind(this);
-  }
+export default function LoginGate(props: PropsType) {
 
-  public onFormSubmit(username: string, password: string, serviceApiUrl?: string) {
+  function onFormSubmit(username: string, password: string, serviceApiUrl?: string) {
     serviceApiUrl = serviceApiUrl ? serviceApiUrl : C.serviceApiBase;
     store.dispatch<any>(fetchCredentials(username, password, serviceApiUrl));
   }
 
-  public render() {
-    if (this.props.credentials.value === null) {
+  if (props.credentials.value === null) {
     const style = {
       isSafe: {
         textDecoration: 'none',
@@ -114,9 +108,9 @@ class LoginGate extends React.Component {
       <Container style={{ maxWidth: '30rem' }}>
         <h2>Please Log In</h2>
         <LoginForm
-            onSubmit={this.onFormSubmit}
-            error={this.props.credentials.error}
-            loading={this.props.credentials.fetching}
+          onSubmit={onFormSubmit}
+          error={props.credentials.error}
+          loading={props.credentials.fetching}
         />
         <hr style={style.divider} />
         <ExternalLink style={style.isSafe} href="https://www.etesync.com/faq/#signed-pages">
@@ -133,16 +127,13 @@ class LoginGate extends React.Component {
         </ul>
       </Container>
     );
-    } else if (this.props.credentials.value.encryptionKey === null) {
+  } else if (props.credentials.value.encryptionKey === null) {
     return (
-        <EncryptionPart credentials={this.props.credentials} />
+      <EncryptionPart credentials={props.credentials} />
     );
   }
 
   return (
-      <SyncGate etesync={this.props.credentials.value} />
+    <SyncGate etesync={props.credentials.value} />
   );
-  }
 }
-
-export default LoginGate;