import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";

import Login from "./Auth/Login";
import Register from "./Auth/Register";
import About from "./Static/About";
import Footer from "./Static/Footer";
import Home from "./Static/Home";
import NoMatch from "./Static/NoMatch";
import Navbar from "./Navbar";

class App extends Component {
  render() {
    const footSmash = {
      display: "flex",
      minHeight: "calc(100vh - 1px)",
      flexDirection: "column"
    };
    return (
      <div>
        <Navbar />
        <div style={footSmash}>
          <div style={{ flex: "1" }}>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/auth/login" component={Login} />
              <Route path="/auth/register" component={Register} />
              <Route component={NoMatch} />
            </Switch>
          </div>
          <Footer />
        </div>
      </div>
    );
  }
}

export default App;