cards clickability added

src/components/Layout.js

@@ -71,6 +71,7 @@ class Dashboard extends React.Component {
   }
 
   handleSelect (selected, axis) {
+    console.log(selected)
     const matchedEvents = []
     const TIMELINE_AXIS = 0
     if (axis === TIMELINE_AXIS) {
@@ -337,6 +338,7 @@ class Dashboard extends React.Component {
           queryString={app.searchQuery}
           onQueryUpdate={this.updateSearchQuery}
           events={domain.events}
+          onSearchRowClick={this.handleSelect}
         />
         {app.source ? (
           <MediaOverlay

src/components/Search.jsx

@@ -34,7 +34,7 @@ class Search extends React.Component {
       searchResults = []
     } else {
       searchResults = this.props.events.filter(event =>
-        event.description.toLowerCase().includes(queryString.toLowerCase()) || event.location.includes(queryString) || event.category.includes(queryString)
+        event.description.toLowerCase().includes(queryString.toLowerCase()) || event.location.toLowerCase().includes(queryString.toLowerCase()) || event.category.toLowerCase().includes(queryString.toLowerCase()) || event.date.includes(queryString) 
       )
     }
     this.setState({
@@ -55,7 +55,7 @@ class Search extends React.Component {
           </div>
           <div class='search-results'>
             {this.state.searchResults.map(result => {
-              return <SearchRow query={this.props.queryString} category={result.category} location={result.location} date={result.date} description={result.description} />
+              return <SearchRow onSearchRowClick={this.props.onSearchRowClick} eventObj={result} query={this.props.queryString} />
             })}
           </div>
         </div>

src/components/SearchRow.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
-const SearchRow = ({ description, category, location, date, query }) => {
+const SearchRow = ({ query, eventObj, onSearchRowClick }) => {
+  const { description, category, location, date } = eventObj
   function getHighlightedText (text, highlight) {
     // Split text on highlight term, include term itself into parts, ignore case
     const parts = text.split(new RegExp(`(${highlight})`, 'gi'))
@@ -18,16 +19,16 @@ const SearchRow = ({ description, category, location, date, query }) => {
   }
 
   return (
-    <div className='search-row'>
+    <div className='search-row' onClick={() => onSearchRowClick([eventObj])}>
       <div className='location-date-container'>
-        <div className='location-container'>
-          <i className='material-icons'>location_on</i>
-          <p>{getHighlightedText(location, query)}</p>
-        </div>
         <div className='date-container'>
           <i className='material-icons'>event</i>
           <p>{getHighlightedText(date, query)}</p>
         </div>
+        <div className='location-container'>
+          <i className='material-icons'>location_on</i>
+          <p>{getHighlightedText(location, query)}</p>
+        </div>
       </div>
       <p>{getShortDescription(description, query).map(match => {
         return <span>{getHighlightedText(match, query)}...<br /></span>