/* Polyfills for IE */
import 'react-app-polyfill/ie11';
import 'core-js/features/array/find';
import 'core-js/features/array/includes';
import 'core-js/features/number/is-nan';

/* App starts here */
import React from "react";
import { withRouter, NavLink, Route, Switch } from "react-router-dom";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";

import "bootstrap/dist/css/bootstrap.min.css";

/* Custom components */

import './modest.css';
import "./App.css";

class Header extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
  }

  render() {
    return (
      <div className="Header">
        <Logo/>
      </div>
    );
  }
}

class Logo extends React.Component {
  render() {
    return <NavLink to="/"><div className="Logo"></div></NavLink>
  }
}

class Footer extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="Footer">
        <div className="Copyright">Copyright 2020 James Ketrenos</div>
      </div>
    );
  }
}


function noChange() {};
  
class App extends React.Component {
  constructor(props) {
    super(props);
  }
    
  componentDidMount() {
    const location = this.props.history.location.pathname;
    console.log(`App.mounted at ${location}`);
  }

  render() {
    console.log("App");
    return (
      <div className="App" ref={ ref => (this.app = ref) }>
        <Header/>
        <div className="Body">
          <div className="Main">
            <Switch>
              <Route path="/identities" render={ (props) => <div {...props}/> }/>
              <Route path="/faces" render={ props => <div {...props}/> }/>
              <Route path="/photos" render={ props => <div {...props}/> }/>
            </Switch>
          </div>
        </div>
        <Footer/>
      </div>
    );
  }
}

export default withRouter(App);