WIP: increment narrative through redux

src/actions/index.js

@@ -213,6 +213,20 @@ export function updateNarrative(narrative) {
   }
 }
 
+export const INCREMENT_NARRATIVE_CURRENT = 'INCREMENT_NARRATIVE_CURRENT';
+export function incrementNarrativeCurrent() {
+  return {
+    type: INCREMENT_NARRATIVE_CURRENT
+  }
+}
+
+export const DECREMENT_NARRATIVE_CURRENT = 'DECREMENT_NARRATIVE_CURRENT';
+export function decrementNarrativeCurrent() {
+  return {
+    type: DECREMENT_NARRATIVE_CURRENT
+  }
+}
+
 export const RESET_ALLFILTERS = 'RESET_ALLFILTERS'
 export function resetAllFilters() {
   return {

src/components/Dashboard.jsx

@@ -71,64 +71,69 @@ class Dashboard extends React.Component {
   }
 
   render() {
+    const { actions, app, domain, ui } = this.props
     return (
       <div>
         <Toolbar
-          isNarrative={!!this.props.app.narrative}
+          isNarrative={!!app.narrative}
           methods={{
-            onFilter: this.props.actions.updateTagFilters,
-            onSelectNarrative: this.props.actions.updateNarrative
+            onFilter: actions.updateTagFilters,
+            onSelectNarrative: actions.updateNarrative
           }}
         />
         <Map
           mapId='map'
           methods={{
             onSelect: this.handleSelect,
-            onSelectNarrative: this.props.actions.updateNarrative,
+            onSelectNarrative: actions.updateNarrative,
             getCategoryColor: this.getCategoryColor,
           }}
         />
         <Timeline
           methods={{
             onSelect: this.handleSelect,
-            onUpdateTimerange: this.props.actions.updateTimeRange,
+            onUpdateTimerange: actions.updateTimeRange,
             getCategoryColor: category => this.getCategoryColor(category)
           }}
         />
         <NarrativeCard
-          onSelect={this.handleSelect}
-          onSelectNarrative={this.props.actions.updateNarrative}
+          methods={{
+            onNext: actions.incrementNarrativeCurrent,
+            onPrev: actions.decrementNarrativeCurrent,
+            onSelect: this.handleSelect,
+            onSelectNarrative: actions.updateNarrative
+          }}
         />
         <CardStack
-          isNarrative={!!this.props.app.narrative}
+          isNarrative={!!app.narrative}
           onViewSource={this.handleViewSource}
           onSelect={this.handleSelect}
           onHighlight={this.handleHighlight}
-          onToggleCardstack={() => this.props.actions.updateSelected([])}
+          onToggleCardstack={() => actions.updateSelected([])}
           getNarrativeLinks={event => this.getNarrativeLinks(event)}
           getCategoryColor={category => this.getCategoryColor(category)}
         />
         <InfoPopUp
-          ui={this.props.ui}
-          app={this.props.app}
-          toggle={() => this.props.actions.toggleInfoPopup()}
+          ui={ui}
+          app={app}
+          toggle={() => actions.toggleInfoPopup()}
         />
         <Notification
-          isNotification={this.props.app.flags.isNotification}
-          notifications={this.props.domain.notifications}
-          onToggle={this.props.actions.markNotificationsRead}
+          isNotification={app.flags.isNotification}
+          notifications={domain.notifications}
+          onToggle={actions.markNotificationsRead}
         />
-        {this.props.app.source ? (
+        {app.source ? (
           <SourceOverlay
-            source={this.props.app.source}
+            source={app.source}
             onCancel={() => {
-              this.props.actions.updateSource(null)}
+              actions.updateSource(null)}
             }
           />
         ) : null}
         <LoadingOverlay
-          ui={this.props.app.flags.isFetchingDomain}
-          language={this.props.app.language}
+          ui={app.flags.isFetchingDomain}
+          language={app.language}
         />
       </div>
     );
@@ -153,6 +158,5 @@ function injectSource(id) {
 
 export default connect(
   state => state,
-  // injectNarrative(0),
   mapDispatchToProps,
 )(Dashboard);

src/components/NarrativeCard.js

@@ -2,87 +2,56 @@ import React from 'react';
 import { connect } from 'react-redux'
 import { selectActiveNarrative } from '../selectors'
 
-class NarrativeCard extends React.Component {
-
-  constructor() {
-    super();
-
-    this.state = {
-      step: 0
-    }
-  }
-
-  goToPrevKeyFrame() {
-    if (this.state.step > 0) {
-      this.setState({ step: this.state.step - 1 });
-    }
-  }
-
-  goToNextKeyFrame() {
-    if (this.state.step < this.props.narrative.steps.length - 1) {
-      this.setState({ step: this.state.step + 1 });
-    }
-  }
-
-  componentDidMount() {
-    if (!this.props.narrative) return
-
-    const step = this.props.narrative.steps[this.state.step];
-    this.props.onSelect([step]);
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevProps.narrative === this.props.narrative && this.state.step !== prevState.step) {
-      const step = this.props.narrative.steps[this.state.step];
-      this.props.onSelect([step]);
-    } else if (prevProps.narrative !== this.props.narrative && this.props.narrative !== null) {
-      this.setState({
-        step: 0
-      }, () => {
-        const step = this.props.narrative.steps[this.state.step];
-        this.props.onSelect([step]);
-      });
-    }
-  }
-
-  renderClose() {
+function NarrativeCard ({ narrative, methods }) {
+  const { onSelectNarrative, onNext, onPrev  } = methods
+  function renderClose() {
     return (
       <button
         className='side-menu-burg is-active'
-        onClick={() => { this.props.onSelectNarrative(null); }}
+        onClick={() => { onSelectNarrative(null); }}
       >
         <span></span>
       </button>
     )
   }
 
-  render() {
-    // no display if no narrative
-    if (!this.props.narrative) return null
-
-    const { steps, current } = this.props.narrative
-
-    if (steps[current]) {
-      const step = steps[current];
-
-      return (
-        <div className='narrative-info'>
-          {this.renderClose()}
-          <h3>{this.props.narrative.label}</h3>
-          <p>{this.props.narrative.description}</p>
-          <h6>
-            <i className='material-icons left'>location_on</i>
-            {this.state.step + 1}/{steps.length}. {step.location}
-          </h6>
-          <div className='actions'>
-            <div className={`${(!this.state.step) ? 'disabled ' : ''} action`} onClick={() => this.goToPrevKeyFrame()}>&larr;</div>
-            <div className={`${(this.state.step >= this.props.narrative.steps.length - 1) ? 'disabled ' : ''} action`} onClick={() => this.goToNextKeyFrame()}>&rarr;</div>
-          </div>
+  function _renderActions(current, steps) {
+    return (
+      <div className='actions'>
+        <div
+          className={`${(!current) ? 'disabled ' : ''} action`}
+          onClick={onPrev}>&larr;
         </div>
-      );
-    } else {
-      return null
-    }
+        <div
+          className={`${(current >= steps.length - 1) ? 'disabled ' : ''} action`}
+          onClick={onNext}>&rarr;
+        </div>
+      </div>
+    )
+  }
+
+  // no display if no narrative
+  if (!narrative) return null
+
+  const { steps, current } = narrative
+
+  if (steps[current]) {
+    const step = steps[current];
+
+    return (
+      <div className='narrative-info'>
+        {renderClose()}
+        <h3>{narrative.label}</h3>
+        <p>{narrative.description}</p>
+        <h6>
+          <i className='material-icons left'>location_on</i>
+          {current + 1}/{steps.length}. {step.location}
+        </h6>
+        {_renderActions(current, steps)}
+      </div>
+    );
+  } else {
+    return null
   }
 }
 

src/js/utilities.js

@@ -93,21 +93,3 @@ export function injectSource(id) {
     }
   })
 }
-
-/**
- * Debugging function: put in place of a mapStateToProps function to
- * view that narrative modal by default
- */
-export function injectNarrative(idx) {
-  return state => {
-    console.log(state.domain.narratives)
-    return {
-      ...state,
-      app: {
-        ...state.app,
-        narrative: state.domain.narratives.length ? state.domain.narratives[idx] : null
-      }
-    }
-  }
-}
-

src/reducers/app.js

@@ -37,7 +37,7 @@ function updateNarrative(appState, action) {
     ...appState,
     narrative: action.narrative,
     narrativeState: {
-      current: 0
+      current: !!action.narrative ? 0 : null
     }
   }
 }