WIP: increment narrative through redux

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
   }
 }