chore: AuthenticationProvider component to function

app/scenes/Login/AuthenticationProvider.tsx

@@ -1,13 +1,13 @@
 import { EmailIcon } from "outline-icons";
 import * as React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import AuthLogo from "~/components/AuthLogo";
 import ButtonLarge from "~/components/ButtonLarge";
 import InputLarge from "~/components/InputLarge";
 import { client } from "~/utils/ApiClient";
 
-type Props = WithTranslation & {
+type Props = {
   id: string;
   name: string;
   authUrl: string;
@@ -15,111 +15,91 @@ type Props = WithTranslation & {
   onEmailSuccess: (email: string) => void;
 };
 
-type State = {
-  showEmailSignin: boolean;
-  isSubmitting: boolean;
-  email: string;
-};
+function AuthenticationProvider(props: Props) {
+  const { t } = useTranslation();
+  const [showEmailSignin, setShowEmailSignin] = React.useState(false);
+  const [isSubmitting, setSubmitting] = React.useState(false);
+  const [email, setEmail] = React.useState("");
+  const { isCreate, id, name, authUrl } = props;
 
-class AuthenticationProvider extends React.Component<Props, State> {
-  state = {
-    showEmailSignin: false,
-    isSubmitting: false,
-    email: "",
+  const handleChangeEmail = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(event.target.value);
   };
 
-  handleChangeEmail = (event: React.ChangeEvent<HTMLInputElement>) => {
-    this.setState({
-      email: event.target.value,
-    });
-  };
-
-  handleSubmitEmail = async (event: React.SyntheticEvent<HTMLFormElement>) => {
+  const handleSubmitEmail = async (
+    event: React.SyntheticEvent<HTMLFormElement>
+  ) => {
     event.preventDefault();
 
-    if (this.state.showEmailSignin && this.state.email) {
-      this.setState({
-        isSubmitting: true,
-      });
+    if (showEmailSignin && email) {
+      setSubmitting(true);
 
       try {
         const response = await client.post(event.currentTarget.action, {
-          email: this.state.email,
+          email,
         });
 
         if (response.redirect) {
           window.location.href = response.redirect;
         } else {
-          this.props.onEmailSuccess(this.state.email);
+          props.onEmailSuccess(email);
         }
       } finally {
-        this.setState({
-          isSubmitting: false,
-        });
+        setSubmitting(false);
       }
     } else {
-      this.setState({
-        showEmailSignin: true,
-      });
+      setShowEmailSignin(true);
     }
   };
 
-  render() {
-    const { isCreate, id, name, authUrl, t } = this.props;
-
-    if (id === "email") {
-      if (isCreate) {
-        return null;
-      }
-
-      return (
-        <Wrapper key="email">
-          <Form
-            method="POST"
-            action="/auth/email"
-            onSubmit={this.handleSubmitEmail}
-          >
-            {this.state.showEmailSignin ? (
-              <>
-                <InputLarge
-                  type="email"
-                  name="email"
-                  placeholder="me@domain.com"
-                  value={this.state.email}
-                  onChange={this.handleChangeEmail}
-                  disabled={this.state.isSubmitting}
-                  autoFocus
-                  required
-                  short
-                />
-                <ButtonLarge type="submit" disabled={this.state.isSubmitting}>
-                  {t("Sign In")} →
-                </ButtonLarge>
-              </>
-            ) : (
-              <ButtonLarge type="submit" icon={<EmailIcon />} fullwidth>
-                {t("Continue with Email")}
-              </ButtonLarge>
-            )}
-          </Form>
-        </Wrapper>
-      );
+  if (id === "email") {
+    if (isCreate) {
+      return null;
     }
 
     return (
-      <Wrapper key={id}>
-        <ButtonLarge
-          onClick={() => (window.location.href = authUrl)}
-          icon={<AuthLogo providerName={id} />}
-          fullwidth
-        >
-          {t("Continue with {{ authProviderName }}", {
-            authProviderName: name,
-          })}
-        </ButtonLarge>
+      <Wrapper>
+        <Form method="POST" action="/auth/email" onSubmit={handleSubmitEmail}>
+          {showEmailSignin ? (
+            <>
+              <InputLarge
+                type="email"
+                name="email"
+                placeholder="me@domain.com"
+                value={email}
+                onChange={handleChangeEmail}
+                disabled={isSubmitting}
+                autoFocus
+                required
+                short
+              />
+              <ButtonLarge type="submit" disabled={isSubmitting}>
+                {t("Sign In")} →
+              </ButtonLarge>
+            </>
+          ) : (
+            <ButtonLarge type="submit" icon={<EmailIcon />} fullwidth>
+              {t("Continue with Email")}
+            </ButtonLarge>
+          )}
+        </Form>
       </Wrapper>
     );
   }
+
+  return (
+    <Wrapper>
+      <ButtonLarge
+        onClick={() => (window.location.href = authUrl)}
+        icon={<AuthLogo providerName={id} />}
+        fullwidth
+      >
+        {t("Continue with {{ authProviderName }}", {
+          authProviderName: name,
+        })}
+      </ButtonLarge>
+    </Wrapper>
+  );
 }
 
 const Wrapper = styled.div`
@@ -132,4 +112,4 @@ const Form = styled.form`
   justify-content: space-between;
 `;
 
-export default withTranslation()(AuthenticationProvider);
+export default AuthenticationProvider;