diff --git a/src/actions/index.js b/src/actions/index.js index 24d2a6d..3a5e890 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -220,6 +220,14 @@ export function resetAllFilters() { } } +export const UPDATE_SOURCE = "UPDATE_SOURCE" +export function updateSource(source) { + return { + type: UPDATE_SOURCE, + source + } +} + // UI export const TOGGLE_FETCHING_DOMAIN = 'TOGGLE_FETCHING_DOMAIN' diff --git a/src/components/Card.jsx b/src/components/Card.jsx index 3e6594f..ee269d5 100644 --- a/src/components/Card.jsx +++ b/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 => ( this.props.onViewSource(source)} /> ))} @@ -127,7 +127,7 @@ class Card extends React.Component { return ( this.props.select([event])} + select={(event) => this.props.onSelect([event])} makeTimelabel={(timestamp) => this.makeTimelabel(timestamp)} next={links.next} prev={links.prev} diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx index 4e7f8b0..86d4b0e 100644 --- a/src/components/CardStack.jsx +++ b/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} /> ); }); diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 34c4687..6386c3f 100644 --- a/src/components/Dashboard.jsx +++ b/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 { : '' } this.props.actions.updateSelected([])} diff --git a/src/components/presentational/CardSource.js b/src/components/presentational/CardSource.js index d4e6dce..cde4ca9 100644 --- a/src/components/presentational/CardSource.js +++ b/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 ? : ( -
+
onClickHandler(source)}> {renderIconText(source.type)} @@ -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