redux action infrastructure

src/components/Card.jsx

@@ -30,9 +30,9 @@ class Card extends React.Component {
       isHighlighted: !this.state.isHighlighted
     }, () => {
       if (!this.state.isHighlighted) {
-        this.props.highlight(this.props.event);
+        this.props.onHighlight(this.props.event);
       } else {
-        this.props.highlight(null);
+        this.props.onHighlight(null);
       }
     });
   }
@@ -101,8 +101,8 @@ class Card extends React.Component {
         {this.props.event.sources.map(source => (
           <CardSource
             isLoading={this.props.isLoading}
-            language={this.props.language}
             source={source}
+            onClickHandler={source => this.props.onViewSource(source)}
           />
         ))}
       </div>
@@ -127,7 +127,7 @@ class Card extends React.Component {
 
       return (
         <CardNarrative
-          select={(event) => this.props.select([event])}
+          select={(event) => this.props.onSelect([event])}
           makeTimelabel={(timestamp) => this.makeTimelabel(timestamp)}
           next={links.next}
           prev={links.prev}

src/components/CardStack.jsx

@@ -27,8 +27,9 @@ class CardStack extends React.Component {
             getCategoryGroup={this.props.getCategoryGroup}
             getCategoryColor={this.props.getCategoryColor}
             getCategoryLabel={this.props.getCategoryLabel}
-            highlight={this.props.onHighlight}
-            select={this.props.onSelect}
+            onViewSource={this.props.onViewSource}
+            onHighlight={this.props.onHighlight}
+            onSelect={this.props.onSelect}
           />
         );
       });

src/components/Dashboard.jsx

@@ -19,6 +19,7 @@ class Dashboard extends React.Component {
   constructor(props) {
     super(props);
 
+    this.handleViewSource = this.handleViewSource.bind(this)
     this.handleHighlight = this.handleHighlight.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
     this.handleSelectNarrative = this.handleSelectNarrative.bind(this);
@@ -46,6 +47,11 @@ class Dashboard extends React.Component {
     return this.eventsById[eventId];
   }
 
+  handleViewSource(source) {
+    console.log('handleViewSource: to implement in Dashboard.jsx')
+    this.props.actions.updateSource(source)
+  }
+
   handleSelect(selected) {
     if (selected) {
       let eventsToSelect = selected.map(event => this.getEventById(event.id));
@@ -108,6 +114,7 @@ class Dashboard extends React.Component {
             : ''
         }
         <CardStack
+          onViewSource={this.handleViewSource}
           onSelect={this.handleSelect}
           onHighlight={this.handleHighlight}
           onToggleCardstack={() => this.props.actions.updateSelected([])}

src/components/presentational/CardSource.js

@@ -1,9 +1,10 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Spinner from './Spinner'
 
 import copy from '../../js/data/copy.json'
 
-const CardSource = ({ source, language, isLoading, error }) => {
+const CardSource = ({ source, isLoading, onClickHandler }) => {
 
   function renderIconText(type) {
     switch(type) {
@@ -29,7 +30,7 @@ const CardSource = ({ source, language, isLoading, error }) => {
       {isLoading
           ? <Spinner/>
           : (
-            <div className="source-row">
+            <div className="source-row" onClick={() => onClickHandler(source)}>
               <i className="material-icons source-icon">
                 {renderIconText(source.type)}
               </i>
@@ -40,4 +41,13 @@ const CardSource = ({ source, language, isLoading, error }) => {
   )
 }
 
+CardSource.propTypes = {
+  source: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    type: PropTypes.string
+  }),
+  isLoading: PropTypes.bool,
+  onClickHandler: PropTypes.func.isRequired,
+}
+
 export default CardSource