diff --git a/src/actions/index.js b/src/actions/index.js index b8741df..6bb8f0b 100644 --- a/src/actions/index.js +++ b/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 } } diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx index b6fccdf..f3faf01 100644 --- a/src/components/CardStack.jsx +++ b/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) \ No newline at end of file diff --git a/src/components/Layout.js b/src/components/Layout.js index 37ba4fd..0160a0b 100644 --- a/src/components/Layout.js +++ b/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 }} /> actions.updateSelected([])} getNarrativeLinks={event => this.getNarrativeLinks(event)} getCategoryColor={this.getCategoryColor} + onSelectNarrativeEvent={this.selectNarrativeEvent} /> 0} diff --git a/src/components/Map.jsx b/src/components/Map.jsx index 352c207..8c106c5 100644 --- a/src/components/Map.jsx +++ b/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 ( @@ -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) \ No newline at end of file diff --git a/src/reducers/app.js b/src/reducers/app.js index 499aed0..f9b1cdd 100644 --- a/src/reducers/app.js +++ b/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 */ diff --git a/src/scss/card.scss b/src/scss/card.scss index 4f88028..a2462bf 100644 --- a/src/scss/card.scss +++ b/src/scss/card.scss @@ -16,6 +16,7 @@ &:hover { background: $lightwhite; transition: background-color 0.4s; + cursor: pointer; } h4 {