requested changes made

This commit is contained in:
Sol Abrahams
2020-09-05 21:07:01 +01:00
committed by Sol Abrahams
parent 0602eb1593
commit a1e772b72f
2 changed files with 34 additions and 31 deletions

View File

@@ -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 {
<Search
narrative={app.narrative}
queryString={app.searchQuery}
onQueryUpdate={this.updateSearchQuery}
events={domain.events}
onSearchRowClick={this.handleSelect}
/>

View File

@@ -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 (
<div class={'search-outer-container' + (this.props.narrative ? ' narrative-mode ' : '')}>
<div id='search-bar-icon-container' onClick={this.onButtonClick}>
@@ -50,11 +50,11 @@ class Search extends React.Component {
</div>
<div class={'search-bar-overlay' + (this.state.isFolded ? ' folded' : '')}>
<div class='search-input-container'>
<input class='search-bar-input' value={this.props.queryString} onChange={this.props.onQueryUpdate} type='text' />
<input class='search-bar-input' onChange={this.updateSearchQuery} type='text' />
<i id='close-search-overlay' className='material-icons' onClick={this.onButtonClick} >close</i>
</div>
<div class='search-results'>
{this.state.searchResults.map(result => {
{searchResults.map(result => {
return <SearchRow onSearchRowClick={this.props.onSearchRowClick} eventObj={result} query={this.props.queryString} />
})}
</div>
@@ -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)