diff --git a/src/components/Layout.js b/src/components/Layout.js index 79b5317..a496f98 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -71,7 +71,6 @@ class Dashboard extends React.Component { } handleSelect (selected, axis) { - console.log(selected) const matchedEvents = [] const TIMELINE_AXIS = 0 if (axis === TIMELINE_AXIS) { @@ -243,10 +242,6 @@ class Dashboard extends React.Component { } } - updateSearchQuery (e) { - let queryString = e.target.value - this.props.actions.updateSearchQuery(queryString) - } render () { const { actions, app, domain, ui, features } = this.props @@ -336,7 +331,6 @@ class Dashboard extends React.Component { diff --git a/src/components/Search.jsx b/src/components/Search.jsx index b8a5f6d..5a2d91d 100644 --- a/src/components/Search.jsx +++ b/src/components/Search.jsx @@ -1,5 +1,9 @@ import React from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import * as actions from '../actions' + import '../scss/search.scss' import SearchRow from './SearchRow.jsx' @@ -7,19 +11,12 @@ import SearchRow from './SearchRow.jsx' class Search extends React.Component { constructor (props) { super(props) + this.state = { - isFolded: true, - searchResults: [], - queryString: '' + isFolded: true } this.onButtonClick = this.onButtonClick.bind(this) - this.updateSearchQueryResults = this.updateSearchQueryResults.bind(this) - } - - componentDidUpdate (prevProps, prevState) { - if (prevProps.queryString !== this.props.queryString) { - this.updateSearchQueryResults(this.props.queryString) - } + this.updateSearchQuery = this.updateSearchQuery.bind(this) } onButtonClick () { @@ -28,21 +25,24 @@ class Search extends React.Component { }) } - updateSearchQueryResults (queryString) { - let searchResults - if (queryString === '') { - searchResults = [] - } else { - searchResults = this.props.events.filter(event => - event.description.toLowerCase().includes(queryString.toLowerCase()) || event.location.toLowerCase().includes(queryString.toLowerCase()) || event.category.toLowerCase().includes(queryString.toLowerCase()) || event.date.includes(queryString) - ) - } - this.setState({ - searchResults: searchResults - }) + updateSearchQuery (e) { + let queryString = e.target.value + this.props.actions.updateSearchQuery(queryString) } render () { + let searchResults + + const searchAttributes = ['description', 'location', 'category', 'date'] + + if (!this.props.queryString) { + searchResults = [] + } else { + searchResults = this.props.events.filter(event => + searchAttributes.map(attribute => { event[attribute].toLowerCase().includes(this.props.queryString.toLowerCase()) }) + ) + } + return (
@@ -50,11 +50,11 @@ class Search extends React.Component {
- + close
- {this.state.searchResults.map(result => { + {searchResults.map(result => { return })}
@@ -64,4 +64,13 @@ class Search extends React.Component { } } -export default Search +function mapDispatchToProps (dispatch) { + return { + actions: bindActionCreators(actions, dispatch) + } +} + +export default connect( + state => state, + mapDispatchToProps +)(Search)