refactor onselect

src/components/Card.jsx

@@ -172,7 +172,7 @@ class Card extends React.Component {
         className={`event-card ${isSelected ? 'selected' : ''}`}
         id={`event-card-${idx}`}
         ref={this.props.innerRef}
-        onClick={this.props.onClick}
+        onClick={this.props.onSelect}
       >
         {this.renderMain()}
         {this.state.isOpen ? this.renderExtra() : null}

src/components/CardStack.jsx

@@ -72,9 +72,8 @@ class CardStack extends React.Component {
         getCategoryLabel={this.props.getCategoryLabel}
         onViewSource={this.props.onViewSource}
         onHighlight={this.props.onHighlight}
-        onSelect={this.props.onSelect}
+        onSelect={() => this.props.onSelect(idx)}
         features={this.props.features}
-        onClick={() => this.props.onSelectNarrativeStep(idx)}
       />)
     })
   }

src/components/Layout.js

@@ -125,6 +125,7 @@ class Dashboard extends React.Component {
 
   setNarrative (narrative) {
     // only handleSelect if narrative is not null
+    console.log(narrative)
     if (narrative) {
       this.handleSelect([ narrative.steps[0] ])
     }
@@ -259,10 +260,9 @@ class Dashboard extends React.Component {
         <Map
           onKeyDown={this.onKeyDown}
           methods={{
-            onSelect: ev => this.handleSelect(ev, 1),
             onSelectNarrative: this.setNarrative,
             getCategoryColor: this.getCategoryColor,
-            onSelectNarrativeStep: this.selectNarrativeStep
+            onSelect: (app.narrative ? this.selectNarrativeStep : (ev => this.handleSelect(ev, 1)))
           }}
         />
         <Timeline
@@ -276,12 +276,11 @@ class Dashboard extends React.Component {
         <CardStack
           timelineDims={app.timeline.dimensions}
           onViewSource={this.handleViewSource}
-          onSelect={this.handleSelect}
+          onSelect={app.narrative ? this.selectNarrativeStep : this.handleSelect}
           onHighlight={this.handleHighlight}
           onToggleCardstack={() => actions.updateSelected([])}
           getNarrativeLinks={event => this.getNarrativeLinks(event)}
           getCategoryColor={this.getCategoryColor}
-          onSelectNarrativeStep={this.selectNarrativeStep}
         />
         <StateOptions
           showing={features.FILTERS_AS_NARRATIVES && !app.narrative && app.filters.filters.length > 0}

src/components/Map.jsx

@@ -182,7 +182,6 @@ class Map extends React.Component {
         projectPoint={this.projectPoint}
         narrative={this.props.app.narrative}
         styles={this.props.ui.narratives}
-        onSelect={this.props.methods.onSelect}
         onSelectNarrative={this.props.methods.onSelectNarrative}
         features={this.props.features}
       />
@@ -214,7 +213,6 @@ class Map extends React.Component {
         selected={this.props.app.selected}
         narrative={this.props.app.narrative}
         onSelect={this.props.methods.onSelect}
-        onSelectNarrative={this.props.methods.onSelectNarrativeStep}
         getCategoryColor={this.props.methods.getCategoryColor}
         eventRadius={this.props.ui.eventRadius}
       />

src/components/presentational/Map/Events.jsx

@@ -13,8 +13,7 @@ function MapEvents ({
   onSelect,
   svg,
   locations,
-  eventRadius,
-  onSelectNarrative
+  eventRadius
 }) {
   function getCoordinatesForPercent (radius, percent) {
     const x = radius * Math.cos(2 * Math.PI * percent)
@@ -144,7 +143,7 @@ function MapEvents ({
       <g
         className={`location-event ${narrative ? 'no-hover' : ''}`}
         transform={`translate(${x}, ${y})`}
-        onClick={(!narrative) ? () => onSelect(location.events) : () => { onSelectNarrative(narrativeIdx); onSelect(location.events) }}
+        onClick={(!narrative) ? () => onSelect(location.events) : () => { onSelect(narrativeIdx); onSelect(location.events) }}
       >
         {renderLocationSlicesByCategory(location)}
         {extraRender ? extraRender() : null}