Clean up renders for CardStack

src/components/Card.jsx

@@ -25,10 +25,10 @@ class Card extends React.Component {
     this.setState({
       isHighlighted: !this.state.isHighlighted
     }, () => {
-      if (this.state.isHighlighted) {
+      if (!this.state.isHighlighted) {
         this.props.highlight(this.props.event);
       } else {
-        this.props.highlight();
+        this.props.highlight(null);
       }
     });
   }

src/components/CardStack.jsx

@@ -14,16 +14,12 @@ class CardStack extends React.Component {
   renderCards() {
     if (this.props.selected.length > 0) {
       return this.props.selected.map((event) => {
-        // if event has property 'name', update with event details
-        const shouldCardUpdate = (event.name);
-
         return (
           <Card
             event={event}
-            shouldCardUpdate={shouldCardUpdate}
             language={this.props.language}
             tools={this.props.tools}
-            isLoading={this.props.isFetchingEvents}
+            isLoading={this.props.isLoading}
             getNarrativeLinks={this.props.getNarrativeLinks}
             getCategoryGroup={this.props.getCategoryGroup}
             getCategoryGroupColor={this.props.getCategoryGroupColor}
@@ -48,52 +44,45 @@ class CardStack extends React.Component {
     return '';
   }
 
-  renderIsLoading() {
+  renderCardStackHeader() {
+    const header_lang = copy[this.props.language].cardstack.header;
+
     return (
-      <div id="card-stack" className={`card-stack ${this.props.isCardstack ? '' : ' folded'}`}>
-        <div
-          id='card-stack-header'
-          className='card-stack-header'
-          onClick={() => this.props.toggle('TOGGLE_CARDSTACK')}
-        >
-          <button className="side-menu-burg is-active"><span></span></button>
-          <p className="header-copy top">{copy[this.props.language].loading}</p>
-        </div>
-        <div id="card-stack-content" className="card-stack-content">
-          <ul>
-            <Card
-              language={this.props.language}
-              isLoading={true}
-            />
-          </ul>
-        </div>
+      <div
+        id='card-stack-header'
+        className='card-stack-header'
+        onClick={() => this.props.toggle('TOGGLE_CARDSTACK')}
+      >
+        <button className="side-menu-burg is-active"><span></span></button>
+        <p className="header-copy top">
+          {(this.props.isLoading)
+            ? copy[this.props.language].loading
+            : `${this.props.selected.length} ${header_lang}`}
+        </p>
+        {(this.props.isLoading) ? '' : this.renderLocation()}
       </div>
     )
   }
 
-  render() {
-    const header_lang = copy[this.props.language].cardstack.header;
+  renderCardStackContent() {
+    return (
+      <div id="card-stack-content" className="card-stack-content">
+        <ul>
+          {(this.props.isLoading)
+            ? <Card language={this.props.language} isLoading={true} />
+            : this.renderCards()
+          }
+        </ul>
+      </div>
+    );
+  }
 
-    if (this.props.isFetchingEvents) {
-      return this.renderIsLoading();
-      
-    } else if (this.props.selected.length > 0) {
+  render() {
+    if (this.props.selected.length > 0) {
       return (
         <div id="card-stack" className={`card-stack ${this.props.isCardstack ? '' : ' folded'}`}>
-          <div
-            id='card-stack-header'
-            className='card-stack-header'
-            onClick={() => this.props.toggle('TOGGLE_CARDSTACK')}
-          >
-            <button className="side-menu-burg is-active"><span></span></button>
-            <p className="header-copy top">{`${this.props.selected.length} ${header_lang}`}</p>
-            {this.renderLocation()}
-          </div>
-          <div id="card-stack-content" className="card-stack-content">
-            <ul>
-              {this.renderCards()}
-            </ul>
-          </div>
+          {this.renderCardStackHeader()}
+          {this.renderCardStackContent()}
         </div>
       );
     }

src/components/Dashboard.jsx

@@ -37,17 +37,24 @@ class Dashboard extends React.Component {
 
   handleSelect(selected) {
     if (selected) {
+      let eventsToSelect = selected.map(eventId => this.props.domain.events[eventId]);
       const parser = this.props.ui.tools.parser;
 
-      const enhanceEvent = (ev) => {
-        return Object.assign({}, ev, this.props.domain.events[ev.id]);
+      eventsToSelect = eventsToSelect.sort((a, b) => {
+        return parser(a.timestamp) - parser(b.timestamp);
+      });
+
+      if (eventsToSelect.every(event => (event))) {
+        this.props.actions.updateSelected(eventsToSelect);
       }
 
       // Now fetch detail data for each event
       // Add transmitter and receiver data for coevents
       this.props.actions.fetchEvents(selected)
         .then((events) => {
-          let eventsSelected = events.map(enhanceEvent);
+          let eventsSelected = events.map(ev => {
+            return Object.assign({}, ev, this.props.domain.events[ev.id]);
+          });
 
           eventsSelected = eventsSelected.sort((a, b) => {
             return parser(a.timestamp) - parser(b.timestamp);
@@ -108,7 +115,6 @@ class Dashboard extends React.Component {
   }
 
   render() {
-    console.log(this.props)
     return (
       <div>
         <Viewport
@@ -157,7 +163,7 @@ class Dashboard extends React.Component {
           language={this.props.app.language}
           tools={this.props.ui.tools}
           isCardstack={this.props.ui.flags.isCardstack}
-          isFetchingEvents={this.props.ui.flags.isFetchingEvents}
+          isLoading={this.props.ui.flags.isFetchingEvents}
 
           select={this.handleSelect}
           highlight={this.handleHighlight}

src/components/Viewport.jsx

@@ -13,7 +13,7 @@ class Viewport extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.map.update(this.props.domain, this.props.app);
+    this.map.update(nextProps.domain, nextProps.app);
   }
 
   render() {