Pass narratives with links down to cards and events

src/components/Card.jsx

@@ -137,14 +137,19 @@ class Card extends React.Component {
     </div>);
   }
 
+  getTimeLabel(){
+    const timestamp = this.props.tools.parser(this.props.event.timestamp);
+    const timelabel = this.props.tools.formatterWithYear(timestamp);
+    return timelabel;
+  }
+
   // NB: should be internaionalized.
   renderTimestamp() {
     const daytime_lang = copy[this.props.language].cardstack.timestamp;
     const estimated_lang = copy[this.props.language].cardstack.estimated;
 
     if (isNotNullNorUndefined(this.props.event.timestamp)) {
-      const timestamp = this.props.tools.parser(this.props.event.timestamp);
-      const timelabel = this.props.tools.formatterWithYear(timestamp);
+      const timelabel = this.getTimeLabel();
       return (<div className="event-card-section timestamp">
         <h4>{daytime_lang}</h4>
         {timelabel}
@@ -166,6 +171,27 @@ class Card extends React.Component {
     </div>);
   }
 
+  renderCardLink(event, direction) {
+    if (event !== null) {
+      const timelabel = this.getTimeLabel();
+      return (<a onClick={() => this.props.select([event])}>
+        {`${timelabel} - ${event.location}`}
+      </a>);
+    }
+    return (<a className="disabled">None</a>);
+  }
+
+  renderNarrative() {
+    const links = this.props.getNarrativeLinks(this.props.event);
+    if (links !== null) {
+      return (<div className="event-card-section">
+        <h4>Connected events</h4>
+        <p>Next: {this.renderCardLink(links.next, 'next')}</p>
+        <p>Previous: {this.renderCardLink(links.prev, 'prev')}</p>
+      </div>);
+    }
+  }
+
   renderContent() {
     if (this.state.isFolded) {
       return (<div className="card-bottomhalf folded"></div>);
@@ -176,16 +202,16 @@ class Card extends React.Component {
     } else {
       if (!this.props.event.hasOwnProperty('receiver') && !this.props.event.hasOwnProperty('transmitter')) {
         return (<div className="card-bottomhalf">
-          {this.renderTimestamp()}
           {this.renderLocation()}
           {this.renderTags()}
           {this.renderSource()}
+          {this.renderNarrative()}
         </div>);
       } else {
         return (<div className="card-bottomhalf">
-          {this.renderTimestamp()}
           {this.renderTags()}
           {this.renderSource()}
+          {this.renderNarrative()}
         </div>);
       }
     }

src/components/CardStack.jsx

@@ -25,10 +25,12 @@ class CardStack extends React.Component {
               language={this.props.language}
               tools={this.props.tools}
               isFetchingEvents={this.props.isFetchingEvents}
+              getNarrativeLinks={this.props.getNarrativeLinks}
               getCategoryGroup={this.props.getCategoryGroup}
               getCategoryGroupColor={this.props.getCategoryGroupColor}
               getCategoryLabel={this.props.getCategoryLabel}
               highlight={this.props.highlight}
+              select={this.props.select}              
           />
         );
       });

src/components/Dashboard.jsx

@@ -109,6 +109,12 @@ class Dashboard extends React.Component {
       return label;
     }
 
+    getNarrativeLinks(event) {
+      const narrative = this.props.domain.narratives.find(nv => nv.key === event.narrative);
+      if (narrative) return narrative.byId[event.id];
+      return null;
+    }
+
     renderTool() {
       return (<div>
         <Viewport
@@ -157,8 +163,10 @@ class Dashboard extends React.Component {
           isCardstack={this.props.ui.flags.isCardstack}
           isFetchingEvents={this.props.ui.flags.isFetchingEvents}
 
+          select={this.handleSelect}
           highlight={this.handleHighlight}
           toggle={this.handleToggle}
+          getNarrativeLinks={event => this.getNarrativeLinks(event)}
           getCategoryGroup={category => this.getCategoryGroup(category)}
           getCategoryGroupColor={category => this.getCategoryGroupColor(category)}
           getCategoryLabel={category => this.getCategoryLabel(category)}