WIP: simplify narratives selection

src/components/Dashboard.jsx

@@ -25,9 +25,6 @@ class Dashboard extends React.Component {
     this.handleViewSource = this.handleViewSource.bind(this)
     this.handleHighlight = this.handleHighlight.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
-    this.handleSelectNarrative = this.handleSelectNarrative.bind(this);
-    this.handleTagFilter = this.handleTagFilter.bind(this);
-    this.updateTimerange = this.updateTimerange.bind(this);
     this.getCategoryColor = this.getCategoryColor.bind(this);
 
     this.eventsById = {}
@@ -63,18 +60,6 @@ class Dashboard extends React.Component {
     }
   }
 
-  handleSelectNarrative(narrative) {
-    this.props.actions.updateNarrative(narrative);
-  }
-
-  handleTagFilter(tag) {
-    this.props.actions.updateTagFilters(tag);
-  }
-
-  updateTimerange(timeRange) {
-    this.props.actions.updateTimeRange(timeRange);
-  }
-
   getCategoryColor(category='other') {
     return this.props.ui.style.categories[category] || this.props.ui.style.categories['other']
   }
@@ -90,30 +75,32 @@ class Dashboard extends React.Component {
       <div>
         <Toolbar
           isNarrative={!!this.props.app.narrative}
-          onFilter={this.handleTagFilter}
-          onSelectNarrative={this.handleSelectNarrative}
-          actions={this.props.actions}
+          methods={{
+            onFilter: this.props.actions.updateTagFilters,
+            onSelectNarrative: this.props.actions.updateNarrative
+          }}
         />
         <Map
           mapId='map'
           methods={{
             onSelect: this.handleSelect,
-            onSelectNarrative: this.handleSelectNarrative,
+            onSelectNarrative: this.props.actions.updateNarrative,
             getCategoryColor: this.getCategoryColor,
           }}
         />
         <Timeline
           methods={{
             onSelect: this.handleSelect,
-            onUpdateTimerange: this.updateTimerange,
+            onUpdateTimerange: this.props.actions.updateTimeRange,
             getCategoryColor: category => this.getCategoryColor(category)
           }}
         />
         <NarrativeCard
           onSelect={this.handleSelect}
-          onSelectNarrative={this.handleSelectNarrative}
+          onSelectNarrative={this.props.actions.updateNarrative}
         />
         <CardStack
+          isNarrative={!!this.props.app.narrative}
           onViewSource={this.handleViewSource}
           onSelect={this.handleSelect}
           onHighlight={this.handleHighlight}

src/components/MapEvents.jsx

@@ -33,14 +33,15 @@ class MapEvents extends React.Component {
     })
 
     if (this.props.narrative) {
-      const { byId } = this.props.narrative
-      const eventsInNarrative = events.filter(e => byId.hasOwnProperty(e.id))
-      if (eventsInNarrative.length <= 0) {
-        styleProps = {
-          ...styleProps,
-          fillOpacity: 0.1
-        }
-      }
+      // TODO: logic to display narratives in Map
+      // const { byId } = this.props.narrative
+      // const eventsInNarrative = events.filter(e => byId.hasOwnProperty(e.id))
+      // if (eventsInNarrative.length <= 0) {
+      //   styleProps = {
+      //     ...styleProps,
+      //     fillOpacity: 0.1
+      //   }
+      // }
     }
 
     return (

src/components/MapNarratives.jsx

@@ -74,13 +74,15 @@ class MapNarratives extends React.Component {
   }
 
   renderNarrative(n) {
-    const steps = n.steps.slice(0, n.steps.length - 1);
-
-    return (
-      <g id={`narrative-${n.id.replace(/ /g,"_")}`} className="narrative">
-        {steps.map((s, idx) => this.renderNarrativeStep(n.steps, s, idx, n))}
-      </g>
-    )
+    // TODO: representation for narrative lines
+    // const steps = n.steps.slice(0, n.steps.length - 1);
+    //
+    // return (
+    //   <g id={`narrative-${n.id.replace(/ /g,"_")}`} className="narrative">
+    //     {steps.map((s, idx) => this.renderNarrativeStep(n.steps, s, idx, n))}
+    //   </g>
+    // )
+    return null
   }
 
   render() {

src/components/NarrativeCard.js

@@ -56,11 +56,15 @@ class NarrativeCard extends React.Component {
   }
 
   render() {
+    // no display if no narrative
     if (!this.props.narrative) return null
 
+    console.log(this.props.narrative)
     const { steps, current } = this.props.narrative
+
     if (steps[current]) {
       const step = steps[current];
+      console.log('here')
 
       return (
         <div className='narrative-info'>

src/components/Toolbar.jsx

@@ -5,7 +5,7 @@ import * as selectors from '../selectors'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import Search from './Search.jsx';
 import TagListPanel from './TagListPanel.jsx';
-import ToolbarBottomActions from './ToolbarBottomActions.jsx';
+// import ToolbarBottomActions from './ToolbarBottomActions.jsx';
 import copy from '../js/data/copy.json';
 import { trimAndEllipse } from '../js/utilities.js';
 
@@ -46,8 +46,8 @@ class Toolbar extends React.Component {
   }
 
   goToNarrative(narrative) {
-    this.selectTab(-1) // set all unselected
-    this.props.onSelectNarrative(narrative);
+    this.selectTab(-1) // set all unselected within this component
+    this.props.methods.onSelectNarrative(narrative);
   }
 
   renderToolbarNarrativePanel() {
@@ -112,9 +112,7 @@ class Toolbar extends React.Component {
           {this.renderToolbarTab(0, 'Focus stories')}
           {this.renderToolbarTab(1, 'Explore freely')}
         </div>
-        <ToolbarBottomActions
-          actions={this.props.actions}
-        />
+        {/* <ToolbarBottomActions /> */}
       </div>
     )
   }
@@ -161,9 +159,7 @@ class Toolbar extends React.Component {
           {this.renderToolbarTab(0, 'Narratives')}
           {(isTags) ? this.renderToolbarTab(1, 'Explore by tag') : ''}
         </div>
-        <ToolbarBottomActions
-          actions={this.props.actions}
-        />
+        {/* <ToolbarBottomActions /> */}
       </div>
     )
   }