import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import Navigation from './Navigation';
import Footer from './Footer';
import Home from './Home';

// Maps
import Pigeon from './maps/Pigeon';
import MapGL from './maps/MapGL';
import Leaflet from './maps/Leaflet';
import Google from './maps/Google';
import Mapbox from './maps/Mapbox';

import Pigeons from './test/Pigeons';
import MapGLs from './test/MapGLs';
import Leaflets from './test/Leaflets';
import Googles from './test/Googles';
import Mapboxes from './test/Mapboxes';


export class App extends React.Component{
  render(){
    return (
      <div>
        <Router>
          <Navigation />
          <div className="wrapper">
            <Switch>
              <Route path="/" exact component={Home} />

              <Route path="/pigeon-maps" exact component={Pigeon} />
              <Route path="/pigeon-maps/test" exact component={Pigeons} />

              <Route path="/map-gl" exact component={MapGL} />
              <Route path="/map-gl/test" exact component={MapGLs} />

              <Route path="/leaflet" exact component={Leaflet} />
              <Route path="/leaflet/test" exact component={Leaflets} />

              <Route path="/google-map" exact component={Google} />
              <Route path="/google-map/test" exact component={Googles} />

              <Route path="/mapbox" exact component={Mapbox} />
              <Route path="/mapbox/test" exact component={Mapboxes} />

            </Switch>
          </div>
          <Footer />
        </Router>
      </div>
    )
  }
}