Issue with the difference between clicking on a card and clicking on the caret (ie is there an onClick functionality for the card?)

src/common/utilities.js

@@ -74,9 +74,10 @@ export function insetSourceFrom (allSources) {
     if (!event.sources) {
       sources = []
     } else {
-      sources = event.sources.map(id => (
-        allSources.hasOwnProperty(id) ? allSources[id] : null
-      ))
+      sources = event.sources.map(src => {
+        const id = typeof src === 'object' ? src.id : src
+        return allSources.hasOwnProperty(id) ? allSources[id] : null
+      })
     }
     return {
       ...event,

src/components/Card.jsx

@@ -13,7 +13,7 @@ class Card extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
-      isOpen: false
+      isOpen: false,
     }
   }
 
@@ -135,17 +135,25 @@ class Card extends React.Component {
 
   render () {
     const { isSelected, idx } = this.props
-
-    return (
+    console.info(this.props)
+    return ( 
       <li
         className={`event-card ${isSelected ? 'selected' : ''}`}
         id={`event-card-${idx}`}
         ref={this.props.innerRef}
-        onClick={this.props.onSelect}
+        onClick={() => {
+          console.info('getting clicked')
+          if (!this.state.isOpen) {
+            const selectedEventFormat = idx > 0 ? [this.props.event] : this.props.event
+            this.props.onSelect(selectedEventFormat, idx)
+          } else {
+            console.info('NOT OPEN')
+          }
+        }}
       >
         {this.renderMain()}
         {this.state.isOpen ? this.renderExtra() : null}
-        {isSelected ? this.renderCaret() : null}
+        {this.renderCaret()}
       </li>
     )
   }

src/components/CardStack.jsx

@@ -59,6 +59,7 @@ class CardStack extends React.Component {
     return events.map((event, idx) => {
       const thisRef = React.createRef()
       this.refs[idx] = thisRef
+
       return (<Card
         event={event}
         ref={thisRef}
@@ -71,7 +72,8 @@ class CardStack extends React.Component {
         getCategoryLabel={this.props.getCategoryLabel}
         onViewSource={this.props.onViewSource}
         onHighlight={this.props.onHighlight}
-        onSelect={() => this.props.onSelect(idx)}
+        onSelect={this.props.onSelect}
+        idx={idx}
         features={this.props.features}
       />)
     })
@@ -79,6 +81,7 @@ class CardStack extends React.Component {
 
   renderSelectedCards () {
     const { selected } = this.props
+
     if (selected.length > 0) {
       return this.renderCards(selected)
     }

src/components/Layout.js

@@ -83,6 +83,7 @@ class Dashboard extends React.Component {
   }
 
   handleSelect (selected, axis) {
+    console.info(selected)
     const matchedEvents = []
     const TIMELINE_AXIS = 0
     if (axis === TIMELINE_AXIS) {
@@ -97,7 +98,9 @@ class Dashboard extends React.Component {
         ptr >= 0 &&
         (events[idx].datetime).getTime() === (events[ptr].datetime).getTime()
       ) {
-          matchedEvents.push(events[ptr])
+          if (events[ptr].id !== selected.id) {
+            matchedEvents.push(events[ptr])
+          }
           ptr -= 1
       }
       // check events after
@@ -107,15 +110,16 @@ class Dashboard extends React.Component {
         ptr < events.length &&
         (events[idx].datetime).getTime() === (events[ptr].datetime).getTime()
       ) {
+        if (events[ptr].id !== selected.id) {
           matchedEvents.push(events[ptr])
-          ptr += 1
+        }
+        ptr += 1
       }
-    } else { // Map...
+    } else { // Map..
       const std = { ...selected }
       delete std.sources
       Object.values(std).forEach(ev => matchedEvents.push(ev))
     }
-    console.info(matchedEvents)
     this.props.actions.updateSelected(matchedEvents)
   }
 
@@ -371,7 +375,8 @@ export default connect(
   state => ({
     ...state,
     narrativeIdx: selectors.selectNarrativeIdx(state),
-    narratives: selectors.selectNarratives(state)
+    narratives: selectors.selectNarratives(state),
+    selected: selectors.selectSelected(state)
   }),
   mapDispatchToProps
 )(Dashboard)

src/selectors/index.js

@@ -267,7 +267,6 @@ export const selectSelected = createSelector(
     if (selected.length === 0) {
       return []
     }
-
     return selected.map(insetSourceFrom(sources))
   }
 )

src/store/initial.js

@@ -29,7 +29,7 @@ const initial = {
    */
   app: {
     errors: {
-      source: null
+      source: false
     },
     highlighted: null,
     selected: [],