Refactored to pass down methods as props. Added CSS pointer

src/actions/index.js

@@ -246,24 +246,10 @@ export function updateNarrative (narrative) {
   }
 }
 
-export const INCREMENT_NARRATIVE_CURRENT = 'INCREMENT_NARRATIVE_CURRENT'
-export function incrementNarrativeCurrent () {
+export const SELECT_NARRATIVE_IDX = 'SELECT_NARRATIVE_IDX'
+export function selectNarrativeIdx (idx) {
   return {
-    type: INCREMENT_NARRATIVE_CURRENT
-  }
-}
-
-export const DECREMENT_NARRATIVE_CURRENT = 'DECREMENT_NARRATIVE_CURRENT'
-export function decrementNarrativeCurrent () {
-  return {
-    type: DECREMENT_NARRATIVE_CURRENT
-  }
-}
-
-export const SELECT_NARRATIVE_EVENT = 'SELECT_NARRATIVE_EVENT'
-export function selectNarrativeEvent (idx) {
-  return {
-    type: SELECT_NARRATIVE_EVENT,
+    type: SELECT_NARRATIVE_IDX,
     idx
   }
 }

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)

src/reducers/app.js

@@ -9,9 +9,7 @@ import {
   UPDATE_TIMERANGE,
   UPDATE_DIMENSIONS,
   UPDATE_NARRATIVE,
-  INCREMENT_NARRATIVE_CURRENT,
-  DECREMENT_NARRATIVE_CURRENT,
-  SELECT_NARRATIVE_EVENT,
+  SELECT_NARRATIVE_IDX,
   UPDATE_SOURCE,
   TOGGLE_LANGUAGE,
   TOGGLE_SITES,
@@ -99,29 +97,7 @@ function updateNarrative (appState, action) {
   }
 }
 
-function incrementNarrativeCurrent (appState, action) {
-  appState.narrativeState.current += 1
-
-  return {
-    ...appState,
-    narrativeState: {
-      current: appState.narrativeState.current
-    }
-  }
-}
-
-function decrementNarrativeCurrent (appState, action) {
-  appState.narrativeState.current -= 1
-
-  return {
-    ...appState,
-    narrativeState: {
-      current: appState.narrativeState.current
-    }
-  }
-}
-
-function selectNarrativeEvent (appState, action) {
+function selectNarrativeIdx (appState, action) {
   appState.narrativeState.current = action.idx
 
   return {
@@ -257,12 +233,8 @@ function app (appState = initial.app, action) {
       return updateDimensions(appState, action)
     case UPDATE_NARRATIVE:
       return updateNarrative(appState, action)
-    case INCREMENT_NARRATIVE_CURRENT:
-      return incrementNarrativeCurrent(appState, action)
-    case DECREMENT_NARRATIVE_CURRENT:
-      return decrementNarrativeCurrent(appState, action)
-    case SELECT_NARRATIVE_EVENT:
-      return selectNarrativeEvent(appState, action)
+    case SELECT_NARRATIVE_IDX:
+      return selectNarrativeIdx(appState, action)
     case UPDATE_SOURCE:
       return updateSource(appState, action)
     /* toggles */

src/scss/card.scss

@@ -16,6 +16,7 @@
   &:hover {
     background: $lightwhite;
     transition: background-color 0.4s;
+    cursor: pointer;
   }
 
   h4 {