text: import React, { Component, Fragment } from "react";
  import { Link } from "react-router-dom";
  import { Nav, Navbar, NavItem } from "react-bootstrap";
  import { LinkContainer } from "react-router-bootstrap";
  import { Auth } from "aws-amplify";
  import styled from 'styled-components';
  
  import Routes from "../Routes";
  import "./App.css";
  
  const FooterContainer = styled.div`
    font-size: smaller;
    text-align: center;
  `;
  
  function Footer() {
    return (
      <FooterContainer>
        Icons made by <a href="https://www.flaticon.com/authors/popcorns-arts" title="Icon Pond">Icon Pond</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank"  rel="noopener noreferrer">CC 3.0 BY</a>
      </FooterContainer>
    )
  }
  
  class App extends Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
        isAuthenticated: false,
        isAuthenticating: true
      };;    
    }
  
    async componentDidMount() {
      try {
        var user = await Auth.currentAuthenticatedUser()
        console.log('user', user);
        await Auth.currentSession();
  
        this.userHasAuthenticated(true);
      }
      catch(e) {
        alert(e);
        if (e !== 'No current user') {
          alert(e);
        }
      }
    
      this.setState({ isAuthenticating: false });
    }  
  
    userHasAuthenticated = authenticated => {
      this.setState({ isAuthenticated: authenticated });
    }
  
    render() {
      
      const childProps = {
        isAuthenticated: this.state.isAuthenticated,
        userHasAuthenticated: this.userHasAuthenticated
      };
  
      return (
        !this.state.isAuthenticating &&
        <div className="App container">
          <Navbar fluid collapseOnSelect>
            <Navbar.Header>
              <Navbar.Brand>
                <Link to="/">VideoChat</Link>
              </Navbar.Brand>
              <Navbar.Toggle />
            </Navbar.Header>
            <Navbar.Collapse>
              <Nav pullRight>
                {this.state.isAuthenticated
                  ? <NavItem onClick={this.handleLogout}>Logout</NavItem>
                  : <Fragment>
                      <LinkContainer to="/signup">
                        <NavItem>Signup</NavItem>
                      </LinkContainer>
                      <LinkContainer to="/login">
                        <NavItem>Login</NavItem>
                      </LinkContainer>
                    </Fragment>
                }
              </Nav>
            </Navbar.Collapse>
          </Navbar>
          <Routes childProps={childProps} />
          <Footer />
        </div>
      );
    }
  }
  
  export default App;