Refactored to pass down methods as props. Added CSS pointer

src/components/CardStack.jsx

@@ -1,8 +1,6 @@
 import React from 'react'
-import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import * as selectors from '../selectors'
-import * as actions from '../actions'
 
 import Card from './Card.jsx'
 import copy from '../common/data/copy.json'
@@ -10,7 +8,6 @@ import copy from '../common/data/copy.json'
 class CardStack extends React.Component {
   constructor () {
     super()
-    this.onCardClick = this.onCardClick.bind(this)
     this.refs = {}
     this.refCardStack = React.createRef()
     this.refCardStackContent = React.createRef()
@@ -78,15 +75,11 @@ class CardStack extends React.Component {
         onHighlight={this.props.onHighlight}
         onSelect={this.props.onSelect}
         features={this.props.features}
-        onClick={this.onCardClick}
+        onClick={this.props.onSelectNarrativeEvent}
       />)
     })
   }
 
-  onCardClick (idx) {
-    this.props.actions.selectNarrativeEvent(idx)
-  }
-
   renderSelectedCards () {
     const { selected } = this.props
     if (selected.length > 0) {
@@ -194,10 +187,4 @@ function mapStateToProps (state) {
   }
 }
 
-function mapDispatchToProps (dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch)
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(CardStack)
+export default connect(mapStateToProps)(CardStack)

src/components/Layout.js

@@ -35,6 +35,7 @@ class Dashboard extends React.Component {
     this.getCategoryColor = this.getCategoryColor.bind(this)
     this.findEventIdx = this.findEventIdx.bind(this)
     this.onKeyDown = this.onKeyDown.bind(this)
+    this.selectNarrativeEvent = this.selectNarrativeEvent.bind(this)
   }
 
   componentDidMount () {
@@ -178,16 +179,26 @@ class Dashboard extends React.Component {
 
   moveInNarrative (amt) {
     const { current } = this.props.app.narrativeState
+
+    if (amt === 1) {
+      const idx = current + 1
+      this.selectNarrativeEvent(idx)
+    }
+    if (amt === -1) {
+      const idx = current - 1
+      this.selectNarrativeEvent(idx)
+    }
+  }
+
+  selectNarrativeEvent (idx) {
     const { narrative } = this.props.app
     if (narrative === null) return
 
-    if (amt === 1 && current < narrative.steps.length - 1) {
-      this.handleSelect([ narrative.steps[current + 1] ])
-      this.props.actions.incrementNarrativeCurrent()
-    }
-    if (amt === -1 && current > 0) {
-      this.handleSelect([ narrative.steps[current - 1] ])
-      this.props.actions.decrementNarrativeCurrent()
+    if (idx < narrative.steps.length && idx >= 0) {
+      const step = narrative.steps[idx]
+
+      this.handleSelect([step])
+      this.props.actions.selectNarrativeIdx(idx)
     }
   }
 
@@ -264,7 +275,8 @@ class Dashboard extends React.Component {
           methods={{
             onSelect: ev => this.handleSelect(ev, 1),
             onSelectNarrative: this.setNarrative,
-            getCategoryColor: this.getCategoryColor
+            getCategoryColor: this.getCategoryColor,
+            onSelectNarrativeEvent: this.selectNarrativeEvent
           }}
         />
         <Timeline
@@ -283,6 +295,7 @@ class Dashboard extends React.Component {
           onToggleCardstack={() => actions.updateSelected([])}
           getNarrativeLinks={event => this.getNarrativeLinks(event)}
           getCategoryColor={this.getCategoryColor}
+          onSelectNarrativeEvent={this.selectNarrativeEvent}
         />
         <StateOptions
           showing={features.FILTERS_AS_NARRATIVES && !app.narrative && app.filters.filters.length > 0}

src/components/Map.jsx

@@ -2,10 +2,8 @@
 import React from 'react'
 import { Portal } from 'react-portal'
 
-import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import * as selectors from '../selectors'
-import * as actions from '../actions'
 
 import hash from 'object-hash'
 import 'leaflet'
@@ -32,7 +30,6 @@ class Map extends React.Component {
       mapTransformY: 0
     }
     this.styleLocation = this.styleLocation.bind(this)
-    this.onSelectNarrativeEvent = this.onSelectNarrativeEvent.bind(this)
   }
 
   componentDidMount () {
@@ -205,11 +202,6 @@ class Map extends React.Component {
     return [null, null]
   }
 
-  onSelectNarrativeEvent (idx) {
-    console.log(idx)
-    this.props.actions.selectNarrativeEvent(idx)
-  }
-
   renderEvents () {
     return (
       <Events
@@ -222,7 +214,7 @@ class Map extends React.Component {
         selected={this.props.app.selected}
         narrative={this.props.app.narrative}
         onSelect={this.props.methods.onSelect}
-        onSelectNarrative={this.onSelectNarrativeEvent}
+        onSelectNarrative={this.props.methods.onSelectNarrativeEvent}
         getCategoryColor={this.props.methods.getCategoryColor}
         eventRadius={this.props.ui.eventRadius}
       />
@@ -306,10 +298,4 @@ function mapStateToProps (state) {
   }
 }
 
-function mapDispatchToProps (dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch)
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Map)
+export default connect(mapStateToProps)(Map)