diff --git a/src/components/NarrativeCard.js b/src/components/NarrativeCard.js
index ab3fc87..721f727 100644
--- a/src/components/NarrativeCard.js
+++ b/src/components/NarrativeCard.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
import { connect } from 'react-redux'
import { selectActiveNarrative } from '../selectors'
@@ -8,7 +8,7 @@ function NarrativeCard ({ narrative, methods }) {
return (
@@ -16,15 +16,17 @@ function NarrativeCard ({ narrative, methods }) {
}
function _renderActions(current, steps) {
+ const prevExists = current !== 0
+ const nextExists = current < steps.length - 1
return (
←
+ className={`${prevExists ? '' : 'disabled'} action`}
+ onClick={prevExists ? onPrev : null}>←
= steps.length - 1) ? 'disabled ' : ''} action`}
- onClick={onNext}>→
+ className={`${nextExists ? '' : 'disabled'} action`}
+ onClick={nextExists ? onNext : null}>→
)
@@ -36,7 +38,7 @@ function NarrativeCard ({ narrative, methods }) {
const { steps, current } = narrative
if (steps[current]) {
- const step = steps[current];
+ const step = steps[current]
return (
@@ -49,7 +51,7 @@ function NarrativeCard ({ narrative, methods }) {
{_renderActions(current, steps)}
- );
+ )
} else {
return null
}
@@ -60,4 +62,4 @@ function mapStateToProps(state) {
narrative: selectActiveNarrative(state)
}
}
-export default connect(mapStateToProps)(NarrativeCard);
+export default connect(mapStateToProps)(NarrativeCard)
diff --git a/src/reducers/app.js b/src/reducers/app.js
index d5ef6d1..aed37e2 100644
--- a/src/reducers/app.js
+++ b/src/reducers/app.js
@@ -1,6 +1,6 @@
-import initial from '../store/initial.js';
+import initial from '../store/initial.js'
-import { parseDate } from '../js/utilities.js';
+import { parseDate } from '../js/utilities.js'
import {
UPDATE_HIGHLIGHTED,
@@ -8,6 +8,8 @@ import {
UPDATE_TAGFILTERS,
UPDATE_TIMERANGE,
UPDATE_NARRATIVE,
+ INCREMENT_NARRATIVE_CURRENT,
+ DECREMENT_NARRATIVE_CURRENT,
UPDATE_SOURCE,
RESET_ALLFILTERS,
TOGGLE_LANGUAGE,
@@ -18,18 +20,18 @@ import {
TOGGLE_NOTIFICATIONS,
FETCH_ERROR,
FETCH_SOURCE_ERROR,
-} from '../actions';
+} from '../actions'
function updateHighlighted(appState, action) {
return Object.assign({}, appState, {
highlighted: action.highlighted
- });
+ })
}
function updateSelected(appState, action) {
return Object.assign({}, appState, {
selected: action.selected
- });
+ })
}
function updateNarrative(appState, action) {
@@ -42,27 +44,45 @@ function updateNarrative(appState, action) {
}
}
+function incrementNarrativeCurrent(appState, action) {
+ return {
+ ...appState,
+ narrativeState: {
+ current: appState.narrativeState.current += 1
+ }
+ }
+}
+
+function decrementNarrativeCurrent(appState, action) {
+ return {
+ ...appState,
+ narrativeState: {
+ current: appState.narrativeState.current -= 1
+ }
+ }
+}
+
function updateTagFilters(appState, action) {
- const tagFilters = appState.filters.tags.slice(0);
+ const tagFilters = appState.filters.tags.slice(0)
const nextActiveState = action.tag.active
function traverseNode(node) {
- const tagFilter = tagFilters.find(tF => tF.key === node.key);
- node.active = nextActiveState;
- if (!tagFilter) tagFilters.push(node);
+ const tagFilter = tagFilters.find(tF => tF.key === node.key)
+ node.active = nextActiveState
+ if (!tagFilter) tagFilters.push(node)
if (node && Object.keys(node.children).length > 0) {
- Object.values(node.children).forEach((childNode) => { traverseNode(childNode); });
+ Object.values(node.children).forEach((childNode) => { traverseNode(childNode) })
}
}
- traverseNode(action.tag);
+ traverseNode(action.tag)
return Object.assign({}, appState, {
filters: Object.assign({}, appState.filters, {
tags: tagFilters
})
- });
+ })
}
function updateTimeRange(appState, action) { // XXX
@@ -70,7 +90,7 @@ function updateTimeRange(appState, action) { // XXX
filters: Object.assign({}, appState.filters, {
timerange: action.timerange
}),
- });
+ })
}
function resetAllFilters(appState) { // XXX
@@ -84,26 +104,26 @@ function resetAllFilters(appState) { // XXX
],
}),
selected: [],
- });
+ })
}
function toggleLanguage(appState, action) {
- let otherLanguage = (appState.language === 'es-MX') ? 'en-US' : 'es-MX';
+ let otherLanguage = (appState.language === 'es-MX') ? 'en-US' : 'es-MX'
return Object.assign({}, appState, {
language: action.language || otherLanguage
- });
+ })
}
function toggleMapView(appState, action) {
- const isLayerInView = !appState.views[layer];
- const newViews = {};
- newViews[layer] = isLayerInView;
- const views = Object.assign({}, appState.views, newViews);
+ const isLayerInView = !appState.views[layer]
+ const newViews = {}
+ newViews[layer] = isLayerInView
+ const views = Object.assign({}, appState.views, newViews)
return Object.assign({}, appState, {
filters: Object.assign({}, appState.filters, {
views
})
- });
+ })
}
function updateSource(appState, action) {
@@ -126,7 +146,7 @@ function toggleFetchingDomain(appState, action) {
flags: Object.assign({}, appState.flags, {
isFetchingDomain: !appState.flags.isFetchingDomain
})
- });
+ })
}
function toggleFetchingSources(appState, action) {
@@ -134,7 +154,7 @@ function toggleFetchingSources(appState, action) {
flags: Object.assign({}, appState.flags, {
isFetchingSources: !appState.flags.isFetchingSources
})
- });
+ })
}
function toggleInfoPopup(appState, action) {
@@ -142,7 +162,7 @@ function toggleInfoPopup(appState, action) {
flags: Object.assign({}, appState.flags, {
isInfopopup: !appState.flags.isInfopopup
})
- });
+ })
}
function toggleNotifications(appState, action) {
@@ -150,7 +170,7 @@ function toggleNotifications(appState, action) {
flags: Object.assign({}, appState.flags, {
isNotification: !appState.flags.isNotification
})
- });
+ })
}
function fetchSourceError(appState, action) {
@@ -168,38 +188,42 @@ function fetchSourceError(appState, action) {
function app(appState = initial.app, action) {
switch (action.type) {
case UPDATE_HIGHLIGHTED:
- return updateHighlighted(appState, action);
+ return updateHighlighted(appState, action)
case UPDATE_SELECTED:
- return updateSelected(appState, action);
+ return updateSelected(appState, action)
case UPDATE_TAGFILTERS:
- return updateTagFilters(appState, action);
+ return updateTagFilters(appState, action)
case UPDATE_TIMERANGE:
- return updateTimeRange(appState, action);
+ return updateTimeRange(appState, action)
case UPDATE_NARRATIVE:
- return updateNarrative(appState, action);
+ return updateNarrative(appState, action)
+ case INCREMENT_NARRATIVE_CURRENT:
+ return incrementNarrativeCurrent(appState, action)
+ case DECREMENT_NARRATIVE_CURRENT:
+ return decrementNarrativeCurrent(appState, action)
case UPDATE_SOURCE:
- return updateSource(appState, action);
+ return updateSource(appState, action)
case RESET_ALLFILTERS:
- return resetAllFilters(appState, action);
+ return resetAllFilters(appState, action)
case TOGGLE_LANGUAGE:
- return toggleLanguage(appState, action);
+ return toggleLanguage(appState, action)
case TOGGLE_MAPVIEW:
- return toggleMapView(appState, action);
+ return toggleMapView(appState, action)
case FETCH_ERROR:
- return fetchError(appState, action);
+ return fetchError(appState, action)
case TOGGLE_FETCHING_DOMAIN:
- return toggleFetchingDomain(appState, action);
+ return toggleFetchingDomain(appState, action)
case TOGGLE_FETCHING_SOURCES:
- return toggleFetchingSources(appState, action);
+ return toggleFetchingSources(appState, action)
case TOGGLE_INFOPOPUP:
- return toggleInfoPopup(appState, action);
+ return toggleInfoPopup(appState, action)
case TOGGLE_NOTIFICATIONS:
- return toggleNotifications(appState, action);
+ return toggleNotifications(appState, action)
case FETCH_SOURCE_ERROR:
- return fetchSourceError(appState, action);
+ return fetchSourceError(appState, action)
default:
- return appState;
+ return appState
}
}
-export default app;
+export default app