[AFP-131 Shaphen Pangburn, Joe Lu]: Complete logout to be in dropdown menu

ecom-web/src/components/Header/header-container.js

 import { connect } from 'react-redux';
 import Header from './header';
-import { fetchUserCart } from '../../actions/cart_actions';
+import { clearUserCart } from '../../actions/cart_actions';
+import { logOut } from '../../actions/session_actions';
 
 const mSTP = state => ({
     user: state.user,
@@ -8,7 +9,8 @@ const mSTP = state => ({
 });
 
 const mDTP = dispatch => ({
-
+    logOut: () => dispatch(logOut()),
+    clearCart: () => dispatch(clearUserCart())
 });
 
 export default connect(mSTP, mDTP)(Header);
\ No newline at end of file

ecom-web/src/components/Header/header.js

@@ -7,13 +7,31 @@ import Session from '../session/session-container'
 import {LinkContainer} from 'react-router-bootstrap'
 import { AiOutlineShoppingCart } from 'react-icons/ai'
 import AnimateOnChange from 'react-animate-on-change'
-
+import { GoogleLogout } from 'react-google-login';
 import './header.css';
 
+const clientId = `${process.env.REACT_APP_GOOGLE_CLIENT_ID}.apps.googleusercontent.com`;
+
 export default class Header extends Component {
     constructor(props) {
         super(props)
-        this.state = {}
+        this.state = {
+            isLoggedIn: true
+        }
+
+        this.logOutSuccess = this.logOutSuccess.bind(this);
+        this.toggleLoggedIn = this.toggleLoggedIn.bind(this);
+    }
+
+    toggleLoggedIn() {
+        const prevState = this.state.isLoggedIn;
+        this.setState({ isLoggedIn: !prevState })
+    }
+
+    logOutSuccess = (response) => {
+        this.props.logOut()
+        this.props.clearCart()
+        this.toggleLoggedIn()
     }
 
     render() {
@@ -39,9 +57,22 @@ export default class Header extends Component {
                                 <NavDropdown className="nav-bar-text" title={"Hello "+userName} id="collasible-nav-dropdown">
                                     <NavDropdown.Item ><NavLink to="/orders">Order History</NavLink></NavDropdown.Item>
                                     <NavDropdown.Item><NavLink to="/product-market">Products</NavLink></NavDropdown.Item>
+                                    <NavDropdown.Item>
+                                        <GoogleLogout
+                                            clientId={clientId}
+                                            buttonText="Logout"
+                                            onLogoutSuccess={this.logOutSuccess}
+                                        >
+                                        </GoogleLogout>
+                                    </NavDropdown.Item>
                                 </NavDropdown>
                             }
-                            <Session className="nav-bar-text"/>
+                            {
+                                this.state.isLoggedIn ? 
+                                <Session className="nav-bar-text" toggleLoggedIn={ this.toggleLoggedIn } />
+                                :
+                                ""
+                            }
                             <LinkContainer to="/cart" >
                                 <Nav.Link to="/cart" className="cart-link" id={this.props.user?.currentUser ? "" : "disabled-cart-link"} disabled={ !this.props.user?.currentUser }>
                                     <AiOutlineShoppingCart fill="#EBEBEB" size={30} />

ecom-web/src/components/session/session.jsx

 import React, { Component } from 'react'
-import { GoogleLogin, GoogleLogout } from 'react-google-login';
+import { GoogleLogin } from 'react-google-login';
 import '../../resources/stylesheets/session.css'
 
 const clientId = `${process.env.REACT_APP_GOOGLE_CLIENT_ID}.apps.googleusercontent.com`;
@@ -14,7 +14,6 @@ export default class Session extends Component {
 
         this.loginSuccess = this.loginSuccess.bind(this)
         this.loginFailed = this.loginFailed.bind(this)
-        this.logOutSuccess = this.logOutSuccess.bind(this)
     }
 
     loginSuccess = (response) => {
@@ -24,7 +23,7 @@ export default class Session extends Component {
         const userResponse = {idToken: tokenId, userId, email, firstName, lastName, accessToken}
         this.props.login(userResponse)
         this.props.addUserImage(imageUrl)
-        this.setState({logIn: true})
+        this.props.toggleLoggedIn()
         
         // try grabbing user cart
         this.props.getUserCart(email)
@@ -41,25 +40,17 @@ export default class Session extends Component {
     loginFailed = (response) => {
         console.log('Login failed: res:', response);
     }
-
-    logOutSuccess = (response) => {
-        this.props.logOut()
-        this.props.clearCart()
-        this.setState({logIn: false})
-    }
     
     render() {
         return (
             <div className="google-login-button">
-                {!this.state.logIn ? 
-                    <GoogleLogin
-                        clientId={clientId}
-                        buttonText="Login"
-                        onSuccess={this.loginSuccess}
-                        onFailure={this.loginFailed}
-                        cookiePolicy={'single_host_origin'}
-                /> : ""
-                }
+                <GoogleLogin
+                    clientId={clientId}
+                    buttonText="Login"
+                    onSuccess={this.loginSuccess}
+                    onFailure={this.loginFailed}
+                    cookiePolicy={'single_host_origin'}
+                />
             </div>
         )
     }