map and cards clickable

src/components/presentational/Map/Events.jsx

@@ -13,7 +13,8 @@ function MapEvents ({
   onSelect,
   svg,
   locations,
-  eventRadius
+  eventRadius,
+  onSelectNarrative 
 }) {
   function getCoordinatesForPercent (radius, percent) {
     const x = radius * Math.cos(2 * Math.PI * percent)
@@ -110,6 +111,9 @@ function MapEvents ({
 
     // in narrative mode, only render events in narrative
     // TODO: move this to a selector
+    // Gets around if block scope
+    var narrativeIdx = false;
+
     if (narrative) {
       const { steps } = narrative
       const onlyIfInNarrative = e => steps.map(s => s.id).includes(e.id)
@@ -117,6 +121,11 @@ function MapEvents ({
 
       if (eventsInNarrative.length <= 0) {
         return null
+      } else {
+        // choose the first event at a given location
+        const locationEventId = eventsInNarrative[0].id;
+        const narrativeIdxObj = steps.find(s => s.id == locationEventId)
+        narrativeIdx = steps.indexOf(narrativeIdxObj)
       }
     }
 
@@ -127,7 +136,7 @@ function MapEvents ({
       </React.Fragment>
     )
 
-    const isSelected = selected.reduce((acc, event) => {
+	  const isSelected = selected.reduce((acc, event) => {
       return acc || (event.latitude === location.latitude && event.longitude === location.longitude)
     }, false)
     
@@ -136,7 +145,7 @@ function MapEvents ({
       <g
         className={`location-event ${narrative ? 'no-hover' : ''}`}
         transform={`translate(${x}, ${y})`}
-        onClick={(!narrative) ? () => onSelect(location.events) : null}
+	      onClick={(!narrative) ? () => onSelect(location.events) : () => {onSelectNarrative(narrativeIdx); onSelect(location.events)}}
       >
         {renderLocationSlicesByCategory(location)}
         {extraRender ? extraRender() : null}