mirror of
https://github.com/bellingcat/ukraine-timemap.git
synced 2026-06-11 21:08:36 +03:00
lint fixes
This commit is contained in:
@@ -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 () {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user