Merge branch 'master' into single-user

Author: christophermcintosh

.eslintrc.json

@@ -0,0 +1,9 @@
+{
+	"root": true,
+	"parser": "babel-eslint",
+	"extends": "fullstack",
+	"rules": {
+		"semi": 0,
+		"new-cap": [1, { "capIsNewExceptions": ["Router"] }]
+	}
+}

.firebaserc

@@ -2,4 +2,4 @@
   "projects": {
     "mapit": "map-it-fsa"
   }
-}
+}

App.jsx

@@ -1,22 +1,23 @@
 import React, { Component } from "react";
 import { Route, Switch } from "react-router-dom";
-import GoogleMap from "./GoogleMap";
+import Map from './components/maps/Map';
 import Login from "./Login";
 import Sidebar from "./Sidebar";
 import SingleUser from "./SingleUser";
-import { GoogleApiWrapper } from "google-maps-react";
 import firebase, { auth } from "~/fire";
 import NavBar from "./Navbar";
 import NewMap from "./NewMap";
 import CircularLoad from "./CircularProgress";
-import FollowingUsers from "./FollowingUsers"
+import FollowingUsers from "./FollowingUsers";
 import FollowersUsers from "./FollowersUsers";
-import CreatedMap from './components/CreatedMap'
-import AllMaps from './components/AllMaps'
+import CreatedMap from "./components/CreatedMap";
+import AllMaps from "./components/AllMaps";
+import MapView from "./components/MapView"
 
 const db = firebase.firestore();
+const maps = db.collection('maps')
 
-class App extends Component {
+export default class App extends Component {
   constructor() {
     super();
     this.state = {
@@ -114,7 +115,8 @@ class App extends Component {
 
   render() {
     const { user, documentId, numFollowers, numFollowing } = this.state;
-    if (this.state.loading === true) return <CircularLoad size={200} color={`secondary`} />;
+    if (this.state.loading === true)
+      return <CircularLoad size={200} color={`secondary`} />;
     if (!user) return <Login user={user} />;
     return (
       <div>
@@ -132,19 +134,15 @@ class App extends Component {
           <div className="col-2">
             <Switch>
               <Route
-                exact
-                path="/"
+                exact path="/"
                 render={() => (
-                  <GoogleMap
-                    google={{
-                      ...this.props.google,
-                      loc: { lat: 20, lng: -70 },
-                      user: user
-                    }}
+                  <Map
+                    google={this.props.google}
+                    defaultCenter={{lat: 20, lng: -70}}
+                    defaultZoom={10}
                   />
                 )}
               />
-              )} />
               <Route
                 exact
                 path="/following/:userId"
@@ -172,31 +170,18 @@ class App extends Component {
                 path="/newmap/:id"
                 render={() => <NewMap google={this.props.google} />}
               />
-              <Route 
-                exact path="/allmaps/:uid"
+              <Route
+                exact
+                path="/allmaps/:uid"
                 render={() => <AllMaps signedInUser={user} />}
               />
               <Route
                 exact
                 path="/map/:id"
-                render={() => (
-                  <CreatedMap
-                    google={this.props.google}
-                    followerUserId={this.state.user.uid}
-                  />
-                )}
-              />
-              <Route
-                path="/"
-                render={() => (
-                  <GoogleMap
-                    google={{
-                      ...this.props.google,
-                      loc: { lat: 20, lng: -70 },
-                      user: user
-                    }}
-                  />
-                )}
+                component={
+                  ({match: {params: {id}}}) =>
+                    <MapView of={maps.doc(id)} />
+                }
               />
               )} />
             </Switch>
@@ -206,7 +191,3 @@ class App extends Component {
     );
   }
 }
-
-export default GoogleApiWrapper({
-  apiKey: "AIzaSyBNO9SHxnyzMG6J1FCDYcle7DjXMjg6jBU"
-})(App);

GoogleMap.jsx

@@ -39,7 +39,8 @@ class GoogleMap extends Component {
     if (e.target.name === "title") {
       title = e.target.value;
     } else if (e.target.name === "tags") {
-      tags = e.target.value.split(" ").map(tag => tag.toLowerCase().replace(/^#/, ""));
+      tags = e.target.value.split(" ").filter(x => x).map(tag => tag.toLowerCase().replace(/^#/, ""));
+      console.log('tags -->', tags)
     }
   };
 
@@ -57,11 +58,6 @@ class GoogleMap extends Component {
   }
 
   createNewMap() {
-    // let center = {
-    //   lat: this.map.getCenter().lat(),
-    //   lng: this.map.getCenter().lng()
-    // };
-
     this.setState({center:{
       lat: this.map.getCenter().lat(),
       lng: this.map.getCenter().lng()
@@ -73,7 +69,8 @@ class GoogleMap extends Component {
         center: this.state.center,
         uid: this.props.google.user.uid,
         places: {},
-        title: title
+        title: title,
+        tags: {...tags.map(tag => ( { [tag]: true } ))}
       })
       .then(map => {
         let mapId = map.id;
@@ -145,6 +142,9 @@ class GoogleMap extends Component {
         }
       );
       this.map = new maps.Map(node, mapConfig); // creates a new Google map on the specified node (ref='map') with the specified configuration set above.
+
+      this.map.addListener('click', this.mapWasClicked)
+
       const service = new google.maps.places.PlacesService(this.map);
       const defaultBounds = new google.maps.LatLngBounds(
         new google.maps.LatLng(-33.8902, 151.1759),
@@ -159,6 +159,10 @@ class GoogleMap extends Component {
     }
   }
 
+  mapWasClicked = (event) => {
+    console.log('EVENT!!!! 🏳️‍🌈 -->', event.latLng);
+  }
+
   render() {
     const { classes } = this.props;
     const { openNewForm, centerMap } = this.state;

SearchBar.jsx

@@ -28,18 +28,17 @@ class SearchBar extends Component {
   }
 
   render() {
-    
-
     return (
-          <form onSubmit={this.handleSubmit}>
-            <input className='google-map-input' name="displayName" type='text' placeholder='Search Users' />
-          </form>
-          
-    
+      <form onSubmit={this.handleSubmit}>
+        <input
+          className="google-map-input"
+          name="displayName"
+          type="text"
+          placeholder="Search Users"
+        />
+      </form>
     );
   }
 }
 
 export default withRouter(SearchBar);
-
-// <input type="text" name="displayName" />

babel.config.js

@@ -4,10 +4,13 @@ const babel = module.exports = env => ({
   loader: 'babel-loader',
   options: {
     presets: [
-      ['env', {modules: false}],
+      ['env', {
+        modules: false,
+        targets: 'last 2 versions',
+      }],
       'stage-2',
       'react',
     ],
     plugins: isHot(env) && ['react-hot-loader/babel']
   }
-})
+})