refactor login and delete logout

ANovaBerkeley · Feb 12, 2021 · 94fb3fc · 94fb3fc
1 parent b7ad0bb
commit 94fb3fc
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 71 deletions.
diff --git a/client/src/components/LogOut.js b/client/src/components/LogOut.js
diff --git a/client/src/components/Login.js b/client/src/components/Login.js
@@ -1,4 +1,5 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
+import { Redirect } from 'react-router';
 import axios from 'axios';
 import { Form } from 'antd';
 import { getAnovaToken } from '../utils/utils';
@@ -7,74 +8,69 @@ import '../stylesheets/Login.css';
 import { GoogleLogin } from 'react-google-login';
 import { withRouter } from 'react-router-dom';
 
-class Login extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      errorMsg: '',
-      redirect: false,
-    };
-  }
+const Login = props => {
+  const { history } = props;
+
+  const [errorMsg, setErrorMsg] = useState('');
+  const [redirect, setRedirect] = useState(false);
 
-  clientId = '128601698558-80ae6kq3v7p8iuknfpkqu6bsfg05vgra.apps.googleusercontent.com'; // Put client ID here
+  const clientId =
+    '128601698558-80ae6kq3v7p8iuknfpkqu6bsfg05vgra.apps.googleusercontent.com'; // Put client ID here
 
-  onSuccess = res => {
+  const onSuccess = res => {
     axios
       .post('/api/v1/auth/login', {
         googleToken: res.tokenId,
       })
       .then(res => {
         localStorage.setItem('anovaToken', res.data.token);
-        this.props.history.push('/SiteLessons');
+        history.push('/SiteLessons');
       })
       .catch(err => {
-        this.setState({ errorMsg: 'Email not registered.' });
+        setErrorMsg('Email not registered.');
       });
   };
 
-  onFailure = res => {
+  const onFailure = res => {
     console.log('Login failed: res:', res);
   };
 
-  componentDidMount() {
+  useEffect(() => {
     if (getAnovaToken() !== null) {
-      this.setState({ redirect: true });
+      setRedirect(true);
     }
-  }
+  }, []);
 
-  render() {
-    const { redirect } = this.state;
-    if (redirect) {
-      this.props.history.push('/profile');
-    }
-    return (
-      <div className="loginContainer">
-        <div className="loginBox">
-          <img alt={'ANova Logo'} src={ANovaLogo} className="log_logo" />
-          <div className="login-title">
-            <div className="anova">ANova </div>
-            <div className="labs">Labs </div>
-          </div>
-          <Form onSubmit={this._submit} className="login-form">
-            <div className="error">{this.state.errorMsg}</div>
-            <Form.Item className="login-field-container">
-              <GoogleLogin
-                className="login-google"
-                clientId={this.clientId}
-                buttonText="Login"
-                onSuccess={this.onSuccess}
-                onFailure={this.onFailure}
-                cookiePolicy={'single_host_origin'}
-                isSignedIn={false}
-              />
-            </Form.Item>
-            <Form.Item className="login-field-container">
-              <a href="./SignUp">Register here!</a>
-            </Form.Item>
-          </Form>
+  if (redirect) {
+    return <Redirect to="/Profile" />;
+  }
+  return (
+    <div className="loginContainer">
+      <div className="loginBox">
+        <img alt={'ANova Logo'} src={ANovaLogo} className="log_logo" />
+        <div className="login-title">
+          <div className="anova">ANova </div>
+          <div className="labs">Labs </div>
         </div>
+        <Form className="login-form">
+          <div className="error">{errorMsg}</div>
+          <Form.Item className="login-field-container">
+            <GoogleLogin
+              className="login-google"
+              clientId={clientId}
+              buttonText="Login"
+              onSuccess={onSuccess}
+              onFailure={onFailure}
+              cookiePolicy={'single_host_origin'}
+              isSignedIn={false}
+            />
+          </Form.Item>
+          <Form.Item className="login-field-container">
+            <a href="./SignUp">Register here!</a>
+          </Form.Item>
+        </Form>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 export default withRouter(Login);