narrative movement fully redux-ized

src/components/Dashboard.jsx

@@ -1,31 +1,33 @@
-import React from 'react';
+import React from 'react'
 
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-import * as actions from '../actions';
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import * as actions from '../actions'
 
-import SourceOverlay from './SourceOverlay.jsx';
-import LoadingOverlay from './presentational/LoadingOverlay';
-import Map from './Map.jsx';
-import Toolbar from './Toolbar.jsx';
-import CardStack from './CardStack.jsx';
-import NarrativeCard from './NarrativeCard.js';
-import InfoPopUp from './InfoPopup.jsx';
-import Timeline from './Timeline.jsx';
-import Notification from './Notification.jsx';
+import SourceOverlay from './SourceOverlay.jsx'
+import LoadingOverlay from './presentational/LoadingOverlay'
+import Map from './Map.jsx'
+import Toolbar from './Toolbar.jsx'
+import CardStack from './CardStack.jsx'
+import NarrativeCard from './NarrativeCard.js'
+import InfoPopUp from './InfoPopup.jsx'
+import Timeline from './Timeline.jsx'
+import Notification from './Notification.jsx'
 
-import { parseDate } from '../js/utilities';
+import { parseDate } from '../js/utilities'
 
 import { injectNarrative } from '../js/utilities'
 
 class Dashboard extends React.Component {
   constructor(props) {
-    super(props);
+    super(props)
 
     this.handleViewSource = this.handleViewSource.bind(this)
-    this.handleHighlight = this.handleHighlight.bind(this);
-    this.handleSelect = this.handleSelect.bind(this);
-    this.getCategoryColor = this.getCategoryColor.bind(this);
+    this.handleHighlight = this.handleHighlight.bind(this)
+    this.setNarrative = this.setNarrative.bind(this)
+    this.moveInNarrative = this.moveInNarrative.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.getCategoryColor = this.getCategoryColor.bind(this)
 
     this.eventsById = {}
   }
@@ -33,18 +35,18 @@ class Dashboard extends React.Component {
   componentDidMount() {
     if (!this.props.app.isMobile) {
       this.props.actions.fetchDomain()
-        .then(domain => this.props.actions.updateDomain(domain));
+        .then(domain => this.props.actions.updateDomain(domain))
     }
   }
 
   handleHighlight(highlighted) {
-    this.props.actions.updateHighlighted((highlighted) ? highlighted : null);
+    this.props.actions.updateHighlighted((highlighted) ? highlighted : null)
   }
 
   getEventById(eventId) {
-    if (this.eventsById[eventId]) return this.eventsById[eventId];
-    this.eventsById[eventId] = this.props.domain.events.find(ev => ev.id === eventId);
-    return this.eventsById[eventId];
+    if (this.eventsById[eventId]) return this.eventsById[eventId]
+    this.eventsById[eventId] = this.props.domain.events.find(ev => ev.id === eventId)
+    return this.eventsById[eventId]
   }
 
   handleViewSource(source) {
@@ -53,7 +55,7 @@ class Dashboard extends React.Component {
 
   handleSelect(selected) {
     if (selected) {
-      let eventsToSelect = selected.map(event => this.getEventById(event.id));
+      let eventsToSelect = selected.map(event => this.getEventById(event.id))
       eventsToSelect = eventsToSelect.sort((a, b) => parseDate(a.timestamp) - parseDate(b.timestamp))
 
       this.props.actions.updateSelected(eventsToSelect)
@@ -65,9 +67,29 @@ class Dashboard extends React.Component {
   }
 
   getNarrativeLinks(event) {
-    const narrative = this.props.domain.narratives.find(nv => nv.id === event.narrative);
-    if (narrative) return narrative.byId[event.id];
-    return null;
+    const narrative = this.props.domain.narratives.find(nv => nv.id === event.narrative)
+    if (narrative) return narrative.byId[event.id]
+    return null
+  }
+
+  setNarrative(narrative) {
+    // only handleSelect if narrative is not null
+    if (!!narrative)
+      this.handleSelect([ narrative.steps[0] ])
+    this.props.actions.updateNarrative(narrative)
+  }
+  moveInNarrative(amt) {
+    const { current } = this.props.app.narrativeState
+    const { narrative } = this.props.app
+
+    if (amt === 1) {
+      this.handleSelect([ narrative.steps[current + 1] ])
+      this.props.actions.incrementNarrativeCurrent()
+    }
+    if (amt === -1) {
+      this.handleSelect([ narrative.steps[current - 1] ])
+      this.props.actions.decrementNarrativeCurrent()
+    }
   }
 
   render() {
@@ -78,14 +100,14 @@ class Dashboard extends React.Component {
           isNarrative={!!app.narrative}
           methods={{
             onFilter: actions.updateTagFilters,
-            onSelectNarrative: actions.updateNarrative
+            onSelectNarrative: this.setNarrative
           }}
         />
         <Map
           mapId='map'
           methods={{
             onSelect: this.handleSelect,
-            onSelectNarrative: actions.updateNarrative,
+            onSelectNarrative: this.setNarrative,
             getCategoryColor: this.getCategoryColor,
           }}
         />
@@ -98,10 +120,9 @@ class Dashboard extends React.Component {
         />
         <NarrativeCard
           methods={{
-            onNext: actions.incrementNarrativeCurrent,
-            onPrev: actions.decrementNarrativeCurrent,
-            onSelect: this.handleSelect,
-            onSelectNarrative: actions.updateNarrative
+            onNext: () => this.moveInNarrative(1),
+            onPrev: () => this.moveInNarrative(-1),
+            onSelectNarrative: this.setNarrative
           }}
         />
         <CardStack
@@ -136,14 +157,14 @@ class Dashboard extends React.Component {
           language={app.language}
         />
       </div>
-    );
+    )
   }
 }
 
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch)
-  };
+  }
 }
 
 function injectSource(id) {
@@ -159,4 +180,4 @@ function injectSource(id) {
 export default connect(
   state => state,
   mapDispatchToProps,
-)(Dashboard);
+)(Dashboard)