map and cards clickable

src/components/CardStack.jsx

@@ -1,6 +1,8 @@
 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'
@@ -8,6 +10,7 @@ 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()
@@ -61,6 +64,7 @@ class CardStack extends React.Component {
       this.refs[idx] = thisRef
       return (<Card
         event={event}
+	idx={idx} 
         ref={thisRef}
         sourceError={this.props.sourceError}
         language={this.props.language}
@@ -74,10 +78,15 @@ class CardStack extends React.Component {
         onHighlight={this.props.onHighlight}
         onSelect={this.props.onSelect}
         features={this.props.features}
+        onClick={this.onCardClick} 
       />)
     })
   }
 
+  onCardClick (idx) {
+    this.props.actions.selectNarrativeEvent(idx) 
+  }
+
   renderSelectedCards () {
     const { selected } = this.props
     if (selected.length > 0) {
@@ -126,7 +135,7 @@ class CardStack extends React.Component {
   renderNarrativeContent () {
     return (
       <div id='card-stack-content' className='card-stack-content'
-        ref={this.refCardStackContent}
+	      ref={this.refCardStackContent}
       >
         <ul>
           {this.renderNarrativeCards()}
@@ -185,4 +194,10 @@ function mapStateToProps (state) {
   }
 }
 
-export default connect(mapStateToProps)(CardStack)
+function mapDispatchToProps (dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch)
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CardStack)