Save seen listings in localStorage

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) {
-    marker.marker.setIcon(component.hoveredMarkerIcon());
+    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);
-      marker.marker.setIcon(component.defaultMarkerIcon());
+
+      if (seen) {
+        marker.marker.setIcon(component.visitedMarkerIcon());
+      } else {
+        marker.marker.setIcon(component.defaultMarkerIcon());
+      }
     } , 710);
   }