import React, { Component } from 'react' import Nav from 'react-bootstrap/Nav' import Navbar from 'react-bootstrap/Navbar' import NavDropdown from 'react-bootstrap/NavDropdown' import {NavLink} from 'react-router-dom' 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 = { 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() { let userName if (!!this.props.user?.currentUser){ userName = this.props.user.currentUser.firstName } else{ userName = "Guest" } return ( <div> <Navbar id="header-nav" collapseOnSelect expand="sm" bg="light"> <LinkContainer to="/product-market" > <Navbar.Brand>Ascend</Navbar.Brand> </LinkContainer> <div id="ecom-title">Ecommerce</div> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="ms-auto"> {!this.props.user?.currentUser ? <Navbar.Text className="nav-bar-text-default" id="white-color">Hello Guest</Navbar.Text> : <NavDropdown className="nav-bar-text" title={ <div> <img id="user-image" src={ this.props.image } /> Hello {userName} </div> } id="collasible-nav-dropdown" > <NavDropdown.Item ><NavLink to="/orders">Order History</NavLink></NavDropdown.Item> <NavDropdown.Item> <GoogleLogout clientId={clientId} buttonText="Logout" onLogoutSuccess={this.logOutSuccess} render={props => (<div onClick={props.onClick}>Logout</div>)} > </GoogleLogout> </NavDropdown.Item> </NavDropdown> } { 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} /> </Nav.Link> </LinkContainer> <AnimateOnChange baseClassName="items-in-cart" animationClassName="items-in-cart-animation" animate={ this.props.diff != 0 } > <LinkContainer to="/cart" > <Nav.Link to="/cart" className={ this.props.cartLength > 0 ? "items-in-cart" : "no-show" }>{ this.props.cartLength }</Nav.Link> </LinkContainer> </AnimateOnChange> </Nav> </Navbar.Collapse> </Navbar> </div> ) } }