starting routes, yikes

.gitignore

@@ -22,4 +22,6 @@
 
 # Ignore JS dependencies and bundled assets
 bundle.js
-bundle.map.js
+bundle.map.js
+# Ignore application configuration
+/config/application.yml

Gemfile

@@ -35,6 +35,7 @@ gem 'jbuilder', '~> 2.5'
 gem 'bootsnap', '>= 1.1.0', require: false
 gem 'bcrypt'
 gem 'jquery-rails'
+gem 'figaro'
 
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console

Gemfile.lock

@@ -88,6 +88,8 @@ GEM
     erubi (1.9.0)
     execjs (2.7.0)
     ffi (1.13.1)
+    figaro (1.2.0)
+      thor (>= 0.14.0, < 2)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
     i18n (1.8.5)
@@ -116,7 +118,7 @@ GEM
     mini_portile2 (2.4.0)
     minitest (5.14.2)
     msgpack (1.3.3)
-    nio4r (2.5.3)
+    nio4r (2.5.4)
     nokogiri (1.10.10)
       mini_portile2 (~> 2.4.0)
     pg (1.2.3)
@@ -158,7 +160,7 @@ GEM
     rb-fsevent (0.10.4)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    regexp_parser (1.7.1)
+    regexp_parser (1.8.0)
     ruby_dep (1.5.0)
     rubyzip (2.3.0)
     sass (3.7.4)
@@ -217,6 +219,7 @@ DEPENDENCIES
   capybara (>= 2.15)
   chromedriver-helper
   coffee-rails (~> 4.2)
+  figaro
   jbuilder (~> 2.5)
   jquery-rails
   listen (>= 3.0.5, < 3.2)

app/assets/stylesheets/application.scss

@@ -43,7 +43,7 @@
     display:flex;
     width: 100%;
     margin:0;
-
+    flex-direction: column;
 }
 
 

app/assets/stylesheets/footer.css

@@ -1,7 +1,7 @@
 .footer{
     width:100%;
     display:flex;
-    height:20%;
+    height:15%;
     margin-top: auto;
     background:	rgb(36, 36, 40);
     position:fixed;

app/assets/stylesheets/map.css

@@ -0,0 +1,19 @@
+.map{
+
+    width:100%;
+    height:600px;
+    visibility: visible;
+}
+
+.route_show_container{
+    display:flex;
+    flex-direction: row;
+    width:100%;
+    justify-content: baseline;
+}
+
+.sidebar{
+    width:15%;
+}
+
+

app/assets/stylesheets/navbar.css

@@ -5,6 +5,7 @@
 }
 .nav-bar{
     width:90%;
+    height:40px;
 }
 .innerbar{
     margin:0;

app/views/layouts/application.html.erb

@@ -5,6 +5,7 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <%= favicon_link_tag asset_path('favicon.png') %>
+    <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=#{ENV['MAPS_API_KEY']}" %>
     <%= stylesheet_link_tag    'application', media: 'all' %>
     <%= javascript_include_tag 'application' %>
   </head>

frontend/components/App.jsx

@@ -4,6 +4,7 @@ import NavBar from './nav_bar/nav_bar_container';
 import Splash from './splash/splash_container';
 import LoginForm from './session_form/login_form_container';
 import Footer from './footer/footer';
+import RouteShow from './routes/routes_show_form';
 import SignUpFormContainer from './session_form/signup_form_container';
 import { AuthRoute, ProtectedRoute } from '../util/route_util';
 const App = () => (
@@ -16,6 +17,7 @@ const App = () => (
     <AuthRoute exact path="/" component={Splash} />
     <AuthRoute exact path="/signup" component={SignUpFormContainer} />
     <AuthRoute exact path="/login" component={LoginForm} />
+    <AuthRoute exact path='/show' component={RouteShow} />
     </Switch>
 
   </div>

frontend/components/nav_bar/nav_bar.jsx

@@ -9,7 +9,7 @@ export default ({ currentUser, logout }) => {
     <nav>
       <h2>
         <p>Hello, {currentUser.username}</p>
-        <button onClick= {logout}>Logout</button>
+        <button onClick= {this.props.logout}>Logout</button>
       </h2>
     </nav>
   ) : (
@@ -24,7 +24,6 @@ export default ({ currentUser, logout }) => {
 
   return (
       <nav className='nav-bar'>
-        {console.log(location.pathname)}
         {display}
       </nav>
   );

frontend/components/routes/routes_show_form.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import MarkerManager from '../../util/marker_manager';
+
+
+const myLatlng = { lat: 40.6602, lng: -73.9690 };
+
+const getCoordsObj = latLng =>({
+    lat: latLng.lat(),
+    lng: latLng.lng()
+});
+
+class RouteShow extends React.Component{
+
+    componentDidMount(){
+
+        this.map = new google.maps.Map(
+            this.mapdiv,
+            {zoom:14, center: myLatlng}
+        );
+        const map = this.map;
+        new google.maps.Marker({
+            position: myLatlng,
+            map, 
+            title: 'Thanks Gaylynn'
+        });
+        this.MarkerManager = new MarkerManager(this.map);
+        this.setState({});
+        // add event listener here
+    }
+    handleClick(){
+
+    }
+
+    // registerListeners() {
+    //     google.maps.event.addListener(this.map, 'idle', () => {
+    //       const { north, south, east, west } = this.map.getBounds().toJSON();
+    //       const bounds = {
+    //         northEast: { lat:north, lng: east },
+    //         southWest: { lat: south, lng: west } };
+    //       this.props.updateFilter('bounds', bounds);
+    //     });
+    //     google.maps.event.addListener(this.map, 'click', (event) => {
+    //       const coords = getCoordsObj(event.latLng);
+    //       this.handleClick(coords);
+    //     });
+    //   }
+
+    render(){
+
+        return(
+            <div className='route_show_container'>
+                <div className='sidebar'>
+                    <h1>this will be the sidebar</h1>
+                </div>
+                <div className='map' ref={(el)=> this.mapdiv = el }>
+
+                </div>
+            </div>
+
+        )
+    }
+}
+
+export default RouteShow;

frontend/util/marker_manager.js

@@ -0,0 +1,39 @@
+class MarkerManager {
+    constructor(map, handleClick){
+      this.map = map;
+      this.handleClick = handleClick;
+      this.markers = {};
+    }
+
+    updateMarkers(benches){
+      const benchesObj = {};
+      benches.forEach(bench => benchesObj[bench.id] = bench);
+
+      benches
+        .filter(bench => !this.markers[bench.id])
+        .forEach(newBench => this.createMarkerFromBench(newBench, this.handleClick))
+
+      Object.keys(this.markers)
+        .filter(benchId => !benchesObj[benchId])
+        .forEach((benchId) => this.removeMarker(this.markers[benchId]))
+    }
+
+    createMarkerFromBench(bench) {
+      const position = new google.maps.LatLng(bench.lat, bench.lng);
+      const marker = new google.maps.Marker({
+        position,
+        map: this.map,
+        benchId: bench.id
+      });
+
+      marker.addListener('click', () => this.handleClick(bench));
+      this.markers[marker.benchId] = marker;
+    }
+
+    removeMarker(marker) {
+      this.markers[marker.benchId].setMap(null);
+      delete this.markers[marker.benchId];
+    }
+  }
+
+  export default MarkerManager;