Grading/feedback PR [DO NOT MERGE]

README.md

@@ -1,5 +1,7 @@
 # Secret Spots
 
+// initial commit 
+
 **Author**: Steele Walston, Jen Lipton, Henry Oliveira, Keli Hansen
 **Version**: 1.0.0
 

index.html

@@ -82,6 +82,7 @@ <h3>Note:</h3>
                     <input type="checkbox" id="filter-authour" name="filter-by-author" value="filter-by-author">
                     <label for="filter-by-author">Show only my spots</label>
                 </form>
+            </div>
         </section>
 
         <section id="auth-view" class="view">

scripts/app.js

@@ -40,9 +40,7 @@
         Spot.fetchAll().then(next);
     };
 
-    page('*', (ctx, next) => {
-        resetView();
-
+    const resetAddLink = (ctx) => {
         $('#add-link').off('click');
         if (ctx.pathname === '/map') {
             $('#add-link').on('click', (event)=>{
@@ -58,7 +56,13 @@
                 page('/map?add');
             });
         }
+    };
 
+    page('*', (ctx, next) => {
+        // keep "scale" the same. now a list of actions.
+        // versus two functions calls and one inline action.
+        resetView();
+        resetAddLink(ctx);
         displayUser();
         next();
     });

scripts/models/map.js

@@ -11,6 +11,7 @@
     Map.infoWindow = null; //define in outer scope to avoid duplicates
 
     Map.initMap = () => {
+        // Another option here would be to try browser geolocation...
         const center = { lat: 45.519900, lng: -122.678316 };
 
         Map.mapObject = new google.maps.Map(document.getElementById('map'), {

scripts/models/spots.js

@@ -4,10 +4,14 @@
 
     function Spot(data) {
         Object.keys(data).map(key => this[key] = data[key]);
+        // something like this. I would rename for template use
+        this.displayDate = formatDate(this.date);
     }
 
     Spot.all = [];
 
+    // take a look at .toLocaleString() for built in formatting...
+
     function formatDate(date) {
         const formattedDate = new Date(Date.parse(date));
         const monthNames = [
@@ -39,7 +43,7 @@
         return $.getJSON(`${API_URL}/spots/${id}`)
             .then(data => {
                 Spot.detail = new Spot(data);
-                Spot.detail.date = formatDate(Spot.detail.date);
+                // moved the date format to model...
             });
 
     };

scripts/views/map-view.js

@@ -27,7 +27,9 @@
     };
 
     let autocomplete = {};
-    let place = {};
+    // try not to use variables like this to pass state around, 
+    // see if you can pass explicitly instead.
+    // let place = {};
 
     mapView.initForm = () => {
         $('#form-view').hide();
@@ -48,21 +50,24 @@
     const onAutocomplete = () => {
         $('#form-view').slideDown(200);
 
-        place = autocomplete.getPlace();
-        place = {
-            name : place.name,
-            address : place.formatted_address,
-            lat : place.geometry.location.lat(),
-            lng : place.geometry.location.lng()
+        const autoPlace = autocomplete.getPlace();
+        const place = {
+            name : autoPlace.name,
+            address : autoPlace.formatted_address,
+            lat : autoPlace.geometry.location.lat(),
+            lng : autoPlace.geometry.location.lng()
         };
 
-        fillInForm();
-        mapSearch();
+        fillInForm(place);
+        mapSearch(place);
     };
 
     const submitHandler = (e) => {
         e.preventDefault();
 
+        // replacing place.lat and place.lng 
+        // would come from form[2].value
+
         const data = {
             name : $('input[name=name]').val(),
             address : $('input[name=address]').val(),
@@ -98,7 +103,6 @@
             const marker = new google.maps.Marker({
                 position: new google.maps.LatLng(spot.lat, spot.lng),
                 icon: markerSVG,
-
                 name: spot.name,
                 id: spot.spot_id
             });
@@ -122,13 +126,13 @@
                 if (Map.tempMarker) Map.tempMarker.setMap(null);
 
                 marker.setAnimation(google.maps.Animation.BOUNCE);
-                setTimeout(function(){ marker.setAnimation(null); }, 375);
+                setTimeout(() => marker.setAnimation(null), 375);
 
             });
         });
     };
 
-    const fillInForm = () => {
+    const fillInForm = (place) => {
 
         const form = $('#add-spot input');
 
@@ -137,7 +141,7 @@
         form[2].value = `${place.lat} ${place.lng}`;
     };
 
-    const mapSearch = () => {
+    const mapSearch = (place) => {
         Map.tempMarker = new google.maps.Marker({
             position: new google.maps.LatLng(place.lat, place.lng),
             map: Map.mapObject,