Save seen listings in localStorage

web/components/Main.js

@@ -3,8 +3,8 @@ import Filters from './Filters';
 import Listings from './Listings';
 import ListingDetails from './ListingDetails';
 import { pacSelectFirst } from '../helpers/googleMaps';
-import {loadProperties} from '../lib/api'
+import { loadProperties, loadSeen } from '../lib/api'
-import {handleMessage} from '../lib/handlers'
+import { handleMessage } from '../lib/handlers'
 
 class Main extends React.Component {
   constructor(props) {
@@ -121,11 +121,18 @@ class Main extends React.Component {
     return this.markers[index];
   }
 
+  isSeen (id) {
+    const seen = loadSeen();
+    return seen.findIndex(s => s === id) !== -1
+  }
+
   /*
    * Refreshes search
    */
   refreshListings() {
     console.log('refreshListings');
+
+
     const map = this.map;
     const {
       rooms,
@@ -184,20 +191,28 @@ class Main extends React.Component {
             position : myLatLng,
             map      : map,
             title    : prop.title,
-            icon     : this.defaultMarkerIcon(),
+            icon     : this.isSeen(prop._id) ? this.visitedMarkerIcon() : this.defaultMarkerIcon(),
             id       : prop._id
           });
 
           marker.addListener('mouseover', () => {
             if (marker.id !== this.state.listingId) {
+              if (this.isSeen(marker.id)) {
+                marker.setIcon(this.visitedHoveredMarkerIcon());
+              } else {
                 marker.setIcon(this.hoveredMarkerIcon());
               }
+            }
           });
 
           marker.addListener('mouseout', () => {
             if (marker.id !== this.state.listingId) {
+              if (this.isSeen(marker.id)) {
+                marker.setIcon(this.visitedMarkerIcon());
+              } else {
                 marker.setIcon(this.defaultMarkerIcon());
               }
+            }
           });
 
           marker.addListener('click', () => {
@@ -206,7 +221,8 @@ class Main extends React.Component {
               const prevSelected = this.findMarker(this.state.listingId);
               if (prevSelected) {
                 console.log('prevselected', prevSelected);
-                prevSelected.marker.setIcon(this.defaultMarkerIcon());
+                //prevSelected.marker.setIcon(this.defaultMarkerIcon());
+                prevSelected.marker.setIcon(this.visitedMarkerIcon());
               }
             }
 
@@ -262,6 +278,40 @@ class Main extends React.Component {
     return icon;
   }
 
+  /*
+   * Get visited marker icon
+   */
+  visitedMarkerIcon () {
+    const sf     = 0.5;
+    const width  = 48;
+    const height = 64;
+    const icon   = {
+      url        : "static/images/pins_sprite.png",
+      size       : new google.maps.Size(width * sf, height * sf),
+      scaledSize : new google.maps.Size(730 * sf, 102 * sf),
+      origin     : new google.maps.Point(152 * sf, 36 * sf)
+    }
+
+    return icon;
+  }
+
+  /*
+   * Visited hovered marker icon
+   */
+  visitedHoveredMarkerIcon () {
+    const sf     = 0.5;
+    const width  = 61;
+    const height = 82;
+    const icon   = {
+      url        : "static/images/pins_sprite.png",
+      size       : new google.maps.Size(width * sf, height * sf),
+      scaledSize : new google.maps.Size(730 * sf, 102 * sf),
+      origin     : new google.maps.Point(480 * sf, 18 * sf)
+    }
+
+    return icon;
+  }
+
   /*
    * Hovered marker icon
    */

web/lib/api.js

@@ -25,7 +25,16 @@ export const loadProperties = ({
     //credentials: 'include'
   });
 
-  //const body = await res.text();
-  //return JSON.parse(body);
 }
 
+export const markSeen = (id) => {
+  const seen = JSON.parse(window.localStorage.getItem('seen') || '[]');
+  seen.push(id);
+  window.localStorage.setItem('seen', JSON.stringify(seen));
+}
+
+export const loadSeen = (id) => {
+  const seen = JSON.parse(window.localStorage.getItem('seen') || '[]');
+  return seen;
+  //return seen.findIndex(s => s === id) !== -1;
+}

web/lib/handlers.js

@@ -1,3 +1,5 @@
+import { markSeen } from './api';
+
 const setMaxPrice = ({ type, action }, component) => {
   const maxPrice = parseFloat(action.maxPrice);
   component.setState({
@@ -48,6 +50,8 @@ const viewListingDetails = ({ type, action }, component) => {
     listingId: action.id,
     descriptionExpanded: false,
     imageIndex: 0
+  }, () => {
+    markSeen(action.id);
   });
 };
 
@@ -156,11 +160,22 @@ const setCategory = ({type, action}, component) => {
 const onListingMouseOver = ({type, action}, component) => {
   const marker = component.findMarker(action.id);
   if (marker) {
+    const seen = component.isSeen(action.id);
+    if (seen) {
+      marker.marker.setIcon(component.visitedHoveredMarkerIcon());
+    } else {
       marker.marker.setIcon(component.hoveredMarkerIcon());
+    }
+
     marker.marker.setAnimation(google.maps.Animation.BOUNCE);
     setTimeout(() => {
       marker.marker.setAnimation(null);
+
+      if (seen) {
+        marker.marker.setIcon(component.visitedMarkerIcon());
+      } else {
         marker.marker.setIcon(component.defaultMarkerIcon());
+      }
     } , 710);
   }