text: import React from "react";
  import { connect } from "react-redux";
  import { signIn, signOut } from "../actions";
  
  class GoogleAuth extends React.Component {
      componentDidMount() {
          window.gapi.load("client:auth2", () => {
              window.gapi.client
                  .init({
                      clientId:
                          "927229141218-646ovgd928nr41ehsk23kc5ek7bbkj6g.apps.googleusercontent.com",
                      scope: "email"
                  })
                  .then(() => {
                      this.auth = window.gapi.auth2.getAuthInstance();
                      this.onAuthChange(this.auth.isSignedIn.get());
                      this.auth.isSignedIn.listen(this.onAuthChange);
                  });
          });
      }
  
      // Helper
      onAuthChange = isSignedIn => {
          if (isSignedIn) {
              this.props.signIn(this.auth.currentUser.get().getId());
          } else {
              this.props.signOut();
          }
      };
  
      onSignInClick = () => {
          this.auth.signIn();
      };
  
      OnSignOutClick = () => {
          this.auth.signOut();
      };
  
      // Helper
      renderAuthbutton() {
          if (this.props.isSignedIn === null) {
              return null;
          } else if (this.props.isSignedIn) {
              return (
                  <button
                      onClick={this.OnSignOutClick}
                      className="ui red google button"
                  >
                      <i className="google icon" />
                      Sign Out
                  </button>
              );
          } else {
              return (
                  <button
                      onClick={this.onSignInClick}
                      className="ui red google button"
                  >
                      <i className="google icon" />
                      Sign In with Google
                  </button>
              );
          }
      }
  
      render() {
          return <div>{this.renderAuthbutton()}</div>;
      }
  }
  
  const mapStateToProps = state => {
      return { isSignedIn: state.auth.isSignedIn };
  };
  
  export default connect(
      mapStateToProps,
      { signIn, signOut }
  )(GoogleAuth);
  