Update GoogleLogin to be a functional component

Author: LucasAndrad

src/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import GoogleLogin from './components/GoogleLogin';
+import { GoogleLogin } from './components/GoogleLogin';
 import './App.css';
 
 function App() {

src/components/GoogleLogin.js

@@ -1,75 +1,70 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import { gapi, loadAuth2 } from 'gapi-script'
 
 import UserCard from './UserCard';
 import './GoogleLogin.css';
 
-class GoogleLogin extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            user: null
-        }
-    }
-    async componentDidMount() {
-        let auth2 = await loadAuth2(process.env.REACT_APP_CLIENT_ID, '')
-        if (auth2.isSignedIn.get()) {
-            this.updateUser(auth2.currentUser.get())
-        } else {
-            this.attachSignin(document.getElementById('customBtn'), auth2);
-        }
-    }
-    async componentDidUpdate() {
-        if(!this.state.user) {
-            let auth2 = await loadAuth2(process.env.REACT_APP_CLIENT_ID, '')
-            this.attachSignin(document.getElementById('customBtn'), auth2);
-        }
-    }
-    updateUser(currentUser) {
-        let name = currentUser.getBasicProfile().getName()
-        let profileImg = currentUser.getBasicProfile().getImageUrl()
-        this.setState({
-            user: {
-                name: name,
-                profileImg: profileImg
-            }
-        })
-    }
-    attachSignin(element, auth2) {
-        auth2.attachClickHandler(element, {},
-            (googleUser) => {
-                this.updateUser(googleUser);
-            }, (error) => {
-                console.log(JSON.stringify(error))
-            });
-    }
-    signOut = () => {
-        let auth2 = gapi.auth2.getAuthInstance();
-        auth2.signOut().then(() => {
-            this.setState({ user: null })
-            console.log('User signed out.');
-        });
+export const GoogleLogin  = () => {
+  const [user, setUser] = useState(null);
+
+  useEffect(async () => {
+    const auth2 = await loadAuth2(process.env.REACT_APP_CLIENT_ID, '')
+    if (auth2.isSignedIn.get()) {
+        updateUser(auth2.currentUser.get())
+    } else {
+        attachSignin(document.getElementById('customBtn'), auth2);
     }
-    render() {
-        if(this.state.user) {
-            return (
-                <div className="container">
-                    <UserCard user={this.state.user} />
-                    <div id="" className="btn logout" onClick={this.signOut}>
-                        Logout
-                    </div>
-                </div>
-            );
-        } else {
-            return (
-                <div className="container">
-                    <div id="customBtn" className="btn login">
-                        Login
-                    </div>
-                </div>
-            );
-        }
+  }, []);
+
+  useEffect(async () => {
+    if (!user) {
+      const auth2 = await loadAuth2(process.env.REACT_APP_CLIENT_ID, '')
+      attachSignin(document.getElementById('customBtn'), auth2);
     }
-}
+  }, [user])
+
+  const updateUser = (currentUser) => {
+    const name = currentUser.getBasicProfile().getName();
+    const profileImg = currentUser.getBasicProfile().getImageUrl();
+    setUser({
+      name: name,
+      profileImg: profileImg,
+    });
+  };
+
+  const attachSignin = (element, auth2) => {
+    auth2.attachClickHandler(element, {},
+      (googleUser) => {
+        updateUser(googleUser);
+      }, (error) => {
+      console.log(JSON.stringify(error))
+    });
+  };
 
-export default GoogleLogin;
+  const signOut = () => {
+    const auth2 = gapi.auth2.getAuthInstance();
+    auth2.signOut().then(() => {
+      setUser(null);
+      console.log('User signed out.');
+    });
+  }
+
+  if(user) {
+    return (
+      <div className="container">
+        <UserCard user={user} />
+        <div id="" className="btn logout" onClick={signOut}>
+          Logout
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container">
+      <div id="customBtn" className="btn login">
+        Login
+      </div>
+    </div>
+  );
+}

src/components/UserCard.js

@@ -1,12 +1,12 @@
 import React from 'react';
 
 const UserCard = (props) => {
-    return (
-        <div>
-            <h2>{props.user.name}</h2>
-            <img src={props.user.profileImg} alt="user profile" />
-        </div>
-    );
+  return (
+    <div>
+      <h2>{props.user.name}</h2>
+      <img src={props.user.profileImg} alt="user profile" />
+    </div>
+  );
 }
 
 export default UserCard;