Create Narrative card

src/components/Dashboard.jsx

@@ -9,6 +9,7 @@ import LoadingOverlay from './presentational/LoadingOverlay';
 import Viewport from './Viewport.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';
@@ -104,6 +105,9 @@ class Dashboard extends React.Component {
           app={this.props.app}
           toggle={() => this.props.actions.toggleInfoPopup()}
         />
+        <NarrativeCard
+          onSelect={this.handleSelect}
+        />
         <Notification
           isNotification={this.props.ui.flags.isNotification}
           notifications={this.props.domain.notifications}

src/components/NarrativeCard.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { connect } from 'react-redux'
+
+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 });
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.props.narrative !== null) {
+      const step = this.props.narrative.steps[this.state.step];
+      this.props.onSelect([step.id]);
+    }
+  }
+
+  render() {
+    if (this.props.narrative !== null) {
+      const steps = this.props.narrative.steps;
+      const step = steps[this.state.step];
+
+      return (
+        <div className="narrative-info">
+          <h6>{this.props.narrative.label}</h6>
+          <p>{this.props.narrative.description}</p>
+          <h3>{this.state.step + 1}/{steps.length}. {step.location}</h3>
+          <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>
+        </div>
+      );
+    }
+    return (<div/>);
+  }
+}
+
+function mapStateToProps(state) {
+  console.log(state)
+  return {
+    narrative: state.app.narrative
+  }
+}
+export default connect(mapStateToProps)(NarrativeCard);

src/components/Toolbar.jsx

@@ -34,19 +34,27 @@ class Toolbar extends React.Component {
     if (this.props.features.USE_SEARCH) {
       return (
         <TabPanel>
-            <Search
-              language={this.props.language}
-              tags={this.props.tags}
-              categories={this.props.categories}
-              tagFilters={this.props.tagFilters}
-              categoryFilters={this.props.categoryFilters}
-              filter={this.props.filter}
-            />
+          <Search
+            language={this.props.language}
+            tags={this.props.tags}
+            categories={this.props.categories}
+            tagFilters={this.props.tagFilters}
+            categoryFilters={this.props.categoryFilters}
+            filter={this.props.filter}
+          />
         </TabPanel>
       )
     }
   }
 
+  goToNarrative(narrative) {
+    this.setState({
+      tabNum: -1
+    }, () => {
+      this.props.actions.updateNarrative(narrative);
+    });
+  }
+
   renderToolbarNarrativePanel() {
     return (
       <TabPanel>
@@ -55,7 +63,7 @@ class Toolbar extends React.Component {
         {this.props.narratives.map((narr) => {
           return (
             <div className="panel-action action">
-              <button style={{ backgroundColor: '#000' }}>
+              <button style={{ backgroundColor: '#000' }} onClick={() => { this.goToNarrative(narr); }}>
                 <p>{narr.label}</p>
                 <p><small>{narr.description}</small></p>
               </button>

src/components/ToolbarBottomActions.jsx

@@ -48,7 +48,6 @@ class ToolbarBottomActions extends React.Component {
   render() {
     return (
       <div className="bottom-actions">
-        <button onClick={() => { this.toggleGuidedMode(); }}>Toggle mode</button>
         {/*}{this.renderMapActions()}
         <div className="bottom-action-block">
           <button className="action-button tiny default" onClick={() => { this.toggleLanguage()}}>