when a location is focused, open the popup for the marker

mattroseman · Jun 21, 2020 · 6c96206 · 6c96206
1 parent 38142b5
commit 6c96206
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 11 deletions.
diff --git a/client/actions/index.js b/client/actions/index.js
@@ -6,12 +6,14 @@ export {
   SET_MAP_MARKERS,
   HIGHLIGHT_MARKER,
   UNHIGHLIGHT_MARKER,
+  FOCUS_LOCATION,
 
   setMapViewport,
   setMapBounds,
   fetchMapMarkers,
   highlightMarker,
   unhighlightMarker,
+  focusLocation,
 } from './map-actions.js';
 
 export {

diff --git a/client/actions/map-actions.js b/client/actions/map-actions.js
@@ -9,6 +9,7 @@ export const REQUEST_SPECIFIC_MOVIE_LOCATION_CLUSTERS = 'REQUEST_SPECIFIC_MOVIE_
 export const SET_MAP_MARKERS = 'SET_MAP_MARKERS';
 export const HIGHLIGHT_MARKER = 'HIGHLIGHT_MARKER';
 export const UNHIGHLIGHT_MARKER = 'UNHIGHLIGHT_MARKER';
+export const FOCUS_LOCATION = 'FOCUS_LOCATION';
 
 /*
  * ACTION CREATORS
@@ -106,3 +107,10 @@ export function unhighlightMarker() {
     type: UNHIGHLIGHT_MARKER
   };
 }
+
+export function focusLocation(movieLocation) {
+  return {
+    type: FOCUS_LOCATION,
+    movieLocation
+  };
+}
diff --git a/client/components/MovieInfo/MovieCard.js b/client/components/MovieInfo/MovieCard.js
@@ -7,7 +7,7 @@ import {
   hideMovieInfo,
   highlightMarker,
   unhighlightMarker,
-  setMapViewport,
+  focusLocation,
 } from '../../actions';
 
 
@@ -30,7 +30,7 @@ export default function MovieCard(props) {
           className='movie-card-location'
           onMouseEnter={() => dispatch(highlightMarker(movieLocation.id))}
           onMouseLeave={() => dispatch(unhighlightMarker())}
-          onClick={() => dispatch(setMapViewport({center: movieLocation.point, zoom: 19}))}
+          onClick={() => dispatch(focusLocation(movieLocation))}
         >
           <h4 className='movie-card-location-name'>{movieLocation.locationString}</h4>
 

diff --git a/client/components/MovieMap/LocationMarker.js b/client/components/MovieMap/LocationMarker.js
@@ -1,14 +1,36 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
 
 import { Marker, Popup } from 'react-leaflet';
 
 
 function LocationMarker(props) {
-  let popup;
+  const marker = useRef(null);
+  const popup = useRef(null);
+
+  useEffect(() => {
+    marker.current.leafletElement.bindPopup(popup.current.leafletElement);
+  }, []);
+
+  // if this location is focused open the popup
+  const focusedLocation = useSelector(state => state.map.focusedLocation);
+  useEffect(() => {
+    // console.log(focusedLocation);
+    if (focusedLocation === props.marker.locations[0].id) {
+      marker.current.leafletElement.openPopup();
+    }
+  }, [focusedLocation]);
+
+  let popupElement;
 
   if (props.marker.locations[0].placeId != null) {
-    popup = (
-      <Popup className="location-marker-popup" autoPan={false}>
+    popupElement = (
+      <Popup
+        ref={popup}
+        className="location-marker-popup"
+        autoPan={false}
+        // TODO onClose={() => dispatch(unfocusLocation())}
+      >
         <div className="location-marker-popup-content">
           <div className="location-marker-popup__location-string">
             {props.marker.locations[0].locationString}
@@ -27,15 +49,21 @@ function LocationMarker(props) {
       </Popup>
     );
   } else {
-    popup = (
-      <Popup className="location-marker-popup" autoPan={false}>
+    popupElement = (
+      <Popup
+        ref={popup}
+        className="location-marker-popup"
+        autoPan={false}
+        // TODO onClose={() => dispatch(unfocusLocation())}
+      >
         {props.marker.locations[0].locationString}
       </Popup>
     );
   }
 
   return (
     <Marker
+      ref={marker}
       position={props.marker.coordinate}
       icon={L.divIcon({
         html: '<i class="fa fa-map-marker fa-3x" aria-hidden="true"></i>',
@@ -44,7 +72,7 @@ function LocationMarker(props) {
       })}
       onClick={() => console.log(props.marker.locations[0].locationString)}
     >
-      {popup}
+      {popupElement}
     </Marker>
   );
 }

diff --git a/client/reducers/map-reducers.js b/client/reducers/map-reducers.js
@@ -26,7 +26,8 @@ export default function map(state=initialState.map, action) {
           count: cluster.numLocations,
           coordinate: cluster.center,
           locations: cluster.locations,
-          highlighted: false
+          highlighted: false,
+          focused: false
         };
       }
 
@@ -58,6 +59,15 @@ export default function map(state=initialState.map, action) {
         ...state,
         highlightedMarker: null
       };
+    case actions.FOCUS_LOCATION:
+      return {
+        ...state,
+        viewport: {
+          center: action.movieLocation.point,
+          zoom: 19
+        },
+        focusedLocation: action.movieLocation.id,
+      };
     default:
       return state;
   }

diff --git a/client/state/initial-state.js b/client/state/initial-state.js
@@ -10,7 +10,8 @@ const initialState = {
     },
     geohashesShowing: [],
     markers: {},
-    highlightedMarker: null
+    highlightedMarker: null,
+    focusedLocation: null,
   },
   movieInfo: {
     showing: false,