lint fixes

This commit is contained in:
Sol
2020-08-04 19:31:50 +01:00
committed by Sol Abrahams
parent 9d846c5c4c
commit 1f4f307f0d
3 changed files with 80 additions and 80 deletions

View File

@@ -243,7 +243,7 @@ class Dashboard extends React.Component {
}
updateSearchQuery (e) {
let queryString = e.target.value;
let queryString = e.target.value
this.props.actions.updateSearchQuery(queryString)
}
render () {

View File

@@ -5,63 +5,63 @@ import '../scss/search.scss'
import SearchRow from './SearchRow.jsx'
class Search extends React.Component {
constructor(props) {
super(props)
this.state = {
isFolded : true,
searchResults: [],
queryString: ''
}
this.onButtonClick = this.onButtonClick.bind(this)
this.updateSearchQueryResults = this.updateSearchQueryResults.bind(this)
constructor(props) {
super(props)
this.state = {
isFolded : true,
searchResults: [],
queryString: ''
}
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)
}
componentDidUpdate (prevProps, prevState) {
if (prevProps.queryString !== this.props.queryString) {
this.updateSearchQueryResults(this.props.queryString)
}
}
onButtonClick () {
this.setState(prevState => {
return { isFolded : !prevState.isFolded }
})
}
onButtonClick () {
this.setState(prevState => {
return { isFolded: !prevState.isFolded }
})
}
updateSearchQueryResults (queryString) {
let searchResults
if (queryString === '') {
searchResults = []
} else {
searchResults = this.props.events.filter(event =>
event.description.toLowerCase().includes(queryString.toLowerCase()) || event.location.includes(queryString) || event.category.includes(queryString)
)
}
this.setState({
searchResults: searchResults
})
updateSearchQueryResults (queryString) {
let searchResults
if (queryString === '') {
searchResults = []
} else {
searchResults = this.props.events.filter(event =>
event.description.toLowerCase().includes(queryString.toLowerCase()) || event.location.includes(queryString) || event.category.includes(queryString)
)
}
this.setState({
searchResults: searchResults
})
}
render () {
return (
<div class={'search-outer-container' + (this.props.narrative ? ' narrative-mode ' : '')}>
<div id='search-bar-icon-container' onClick={this.onButtonClick}>
<i className='material-icons'>search</i>
</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' />
<i id='close-search-overlay' className='material-icons' onClick={this.onButtonClick} >close</i>
</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} />
})}
</div>
</div>
</div>
)
}
render () {
return (
<div class={'search-outer-container' + (this.props.narrative ? ' narrative-mode ' : '')}>
<div id='search-bar-icon-container' onClick={this.onButtonClick}>
<i className='material-icons'>search</i>
</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' />
<i id='close-search-overlay' className='material-icons' onClick={this.onButtonClick} >close</i>
</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} />
})}
</div>
</div>
</div>
)
}
}
export default Search;

View File

@@ -1,39 +1,39 @@
import React from 'react'
const SearchRow = ({ description, category, location, date, query }) => {
function getHighlightedText(text, highlight) {
// Split text on highlight term, include term itself into parts, ignore case
const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
return <span>{parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? <span style={{backgroundColor: 'yellow', color: 'black'}}>{part}</span> : part)}</span>;
}
function getHighlightedText(text, highlight) {
// Split text on highlight term, include term itself into parts, ignore case
const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
return <span>{ parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? <span style={{ backgroundColor: 'yellow', color: 'black' }}>{part}</span> : part) }</span>
}
function getShortDescription(text, searchQuery) {
var regexp = new RegExp(`(([^ ]* ){0,6}[a-zA-Z]*${searchQuery.toLowerCase()}[a-zA-Z]*( [^ ]*){0,5})`, 'gm')
let parts = text.toLowerCase().match(regexp)
for (var x=0; x < (parts ? parts.length : 0); x++) {
parts[x] = '...'+parts[x]
}
const firstLine = [text.match('(([^ ]* ){0,10})', 'm')[0]]
return parts || firstLine;
function getShortDescription (text, searchQuery) {
var regexp = new RegExp(`(([^ ]* ){0,6}[a-zA-Z]*${searchQuery.toLowerCase()}[a-zA-Z]*( [^ ]*){0,5})`, 'gm')
let parts = text.toLowerCase().match(regexp)
for (var x = 0; x < (parts ? parts.length : 0); x++) {
parts[x] = '...' + parts[x]
}
const firstLine = [text.match('(([^ ]* ){0,10})', 'm')[0]]
return parts || firstLine
}
return (
<div className='search-row'>
<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>
<p>{getShortDescription(description, query).map(match => {
return <span>{getHighlightedText(match, query)}...<br></br></span>
})}</p>
return (
<div className='search-row'>
<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>
<p>{getShortDescription(description, query).map(match => {
return <span>{getHighlightedText(match, query)}...<br /></span>
})}</p>
</div>
)
}
export default SearchRow