significantly refactor presentational components

src/components/presentational/Narrative/Adjust.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default ({ isDisabled, direction, onClickHandler }) => {
+  return (
+    <div
+      className={`narrative-adjust ${direction}`}
+      onClick={!isDisabled ? onClickHandler : null}
+    >
+      <i
+        className={`material-icons ${isDisabled ? 'disabled' : ''}`}
+      >
+        {`chevron_${direction}`}
+      </i>
+    </div>
+  )
+}

src/components/presentational/Narrative/Card.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { selectActiveNarrative } from '../../../selectors'
+
+function NarrativeCard ({ narrative }) {
+    // no display if no narrative
+  const { steps, current } = narrative
+
+  if (steps[current]) {
+    const step = steps[current]
+
+    return (
+      <div className='narrative-info'>
+        <div className='narrative-info-header'>
+          <div className='count-container'>
+            <div className='count'>
+              {current + 1}/{steps.length}
+            </div>
+          </div>
+          <div>
+            <h3>{narrative.label}</h3>
+          </div>
+        </div>
+
+        {/* <i className='material-icons left'>location_on</i> */}
+        {/* {_renderActions(current, steps)} */}
+        <div className='narrative-info-desc'>
+          <p>{narrative.description}</p>
+        </div>
+              </div>
+    )
+  } else {
+    return null
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    narrative: selectActiveNarrative(state)
+  }
+}
+export default connect(mapStateToProps)(NarrativeCard)

src/components/presentational/Narrative/Close.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default ({ onClickHandler, closeMsg }) => {
+  return (
+    <div
+      className='narrative-close'
+      onClick={onClickHandler}
+    >
+      <button
+        className='side-menu-burg is-active'
+      >
+        <span></span>
+      </button>
+      <div className='close-text'>{closeMsg}</div>
+    </div>
+  )
+}

src/components/presentational/Narrative/Controls.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import Card from './Card'
+import Adjust from './Adjust'
+import Close from './Close'
+
+export default ({ narrative, methods }) => {
+  if (!narrative) return null
+
+  const { current, steps } = narrative
+  const prevExists = current !== 0
+  const nextExists = current < steps.length - 1
+
+  return (
+    <React.Fragment>
+      <Card narrative={narrative} />
+      <Adjust
+        isDisabled={!prevExists}
+        direction='left'
+        onClickHandler={methods.onPrev}
+      />
+      <Adjust
+        isDisabled={!nextExists}
+        direction='right'
+        onClickHandler={methods.onNext}
+      />
+      <Close
+        onClickHandler={() => methods.onSelectNarrative(null)}
+        closeMsg='-- exit from narrative --'
+      />
+    </React.Fragment>
+  )
+}