From 9ca0a8fddca5b05fc049b9efae17d73ac2a5844c Mon Sep 17 00:00:00 2001 From: Sol Date: Tue, 4 Aug 2020 19:01:15 +0100 Subject: [PATCH 1/9] initial search bar feature added on new branch --- src/actions/index.js | 8 +++ src/components/Layout.js | 17 +++++++ src/components/Map.jsx | 1 + src/components/Search.jsx | 67 +++++++++++++++++++++++++ src/components/SearchRow.jsx | 39 +++++++++++++++ src/reducers/app.js | 12 ++++- src/scss/search.scss | 97 ++++++++++++++++++++++++++++++++++++ 7 files changed, 240 insertions(+), 1 deletion(-) create mode 100644 src/components/Search.jsx create mode 100644 src/components/SearchRow.jsx create mode 100644 src/scss/search.scss diff --git a/src/actions/index.js b/src/actions/index.js index 1ddd64a..36c2463 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -334,6 +334,14 @@ export function toggleCover () { } } +export const UPDATE_SEARCH_QUERY = 'UPDATE_SEARCH_QUERY' +export function updateSearchQuery (searchQuery) { + return { + type: UPDATE_SEARCH_QUERY, + searchQuery + } +} + // ERRORS export const FETCH_SOURCE_ERROR = 'FETCH_SOURCE_ERROR' diff --git a/src/components/Layout.js b/src/components/Layout.js index 37ba4fd..4a1eaaa 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -21,6 +21,7 @@ import TemplateCover from './TemplateCover' import colors from '../common/global' import { binarySearch, insetSourceFrom, findDescriptionInFilterTree } from '../common/utilities' import { isMobile } from 'react-device-detect' +import Search from './Search.jsx' class Dashboard extends React.Component { constructor (props) { @@ -35,6 +36,11 @@ class Dashboard extends React.Component { this.getCategoryColor = this.getCategoryColor.bind(this) this.findEventIdx = this.findEventIdx.bind(this) this.onKeyDown = this.onKeyDown.bind(this) +<<<<<<< HEAD +======= + this.selectNarrativeStep = this.selectNarrativeStep.bind(this) + this.updateSearchQuery = this.updateSearchQuery.bind(this) +>>>>>>> 575b8f5... initial search bar feature added } componentDidMount () { @@ -226,6 +232,11 @@ 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 @@ -312,6 +323,12 @@ class Dashboard extends React.Component { notifications={domain.notifications} onToggle={actions.markNotificationsRead} /> + {app.source ? ( this.alignLayers()) map.on('zoomstart', () => { if (this.svgRef.current !== null) this.svgRef.current.classList.add('hide') }) diff --git a/src/components/Search.jsx b/src/components/Search.jsx new file mode 100644 index 0000000..dcc6498 --- /dev/null +++ b/src/components/Search.jsx @@ -0,0 +1,67 @@ +import React from 'react' + +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) + } + + componentDidUpdate (prevProps, prevState) { + if (prevProps.queryString !== this.props.queryString) { + this.updateSearchQueryResults (this.props.queryString) + } + } + + 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 + }) + } + + render () { + return ( +
+
+ search +
+
+
+ + close +
+
+ {this.state.searchResults.map(result => { + return + })} +
+
+
+ ) + } +} + +export default Search; diff --git a/src/components/SearchRow.jsx b/src/components/SearchRow.jsx new file mode 100644 index 0000000..b5018f8 --- /dev/null +++ b/src/components/SearchRow.jsx @@ -0,0 +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 {parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? {part} : part)}; + } + + 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 ( +
+
+
+ location_on +

{getHighlightedText(location, query)}

+
+
+ event +

{getHighlightedText(date, query)}

+
+
+

{getShortDescription(description, query).map(match => { + return {getHighlightedText(match, query)}...

 + })}

+
+ ) +} + +export default SearchRow diff --git a/src/reducers/app.js b/src/reducers/app.js index 4c960dd..d4f88a2 100644 --- a/src/reducers/app.js +++ b/src/reducers/app.js @@ -22,7 +22,8 @@ import { FETCH_ERROR, FETCH_SOURCE_ERROR, SET_LOADING, - SET_NOT_LOADING + SET_NOT_LOADING, + UPDATE_SEARCH_QUERY } from '../actions' function updateHighlighted (appState, action) { @@ -229,6 +230,13 @@ function setNotLoading (appState) { } } +function updateSearchQuery (appState, action) { + return { + ...appState, + searchQuery: action.searchQuery + } +} + function app (appState = initial.app, action) { switch (action.type) { case UPDATE_HIGHLIGHTED: @@ -275,6 +283,8 @@ function app (appState = initial.app, action) { return setLoading(appState) case SET_NOT_LOADING: return setNotLoading(appState) + case UPDATE_SEARCH_QUERY: + return updateSearchQuery(appState, action) default: return appState } diff --git a/src/scss/search.scss b/src/scss/search.scss new file mode 100644 index 0000000..deac6ee --- /dev/null +++ b/src/scss/search.scss @@ -0,0 +1,97 @@ +#search-bar-icon-container { + position: absolute; + background-color: black; + color: #a0a0a0; + border: #a0a0a0 solid 0.1px; + top: 10px; + margin-left: 10px; + height: 24px; + padding: 10px; + &:hover { + cursor: pointer; + color: white; + } +} + +.search-bar-overlay { + background-color: black; + height: 100vh; + width: 400px; + position: absolute; + transition: 0.2s ease; +} + +.search-bar-input { + width: 300px; + margin: 20px; + line-height: 40px; + font-size: 15px; + color: gray; + padding-left: 15px; + background: black; + border: 1px solid #a0a0a0; + &:focus { + outline: none; + } +} + +#close-search-overlay { + color: #a0a0a0; + vertical-align: middle; + font-size: 30px; + transition: 0.2s ease; + &:hover { + color: white; + cursor: pointer; + } +} + +.folded { + left: -400px; + transition: 0.2s ease; +} + +.search-outer-container { + position: absolute; + left: 110px; + &.narrative-mode { + left: 0; + } +} + +.search-row { + color: white; + padding-left: 10px; + padding-right: 10px; + padding-top: 10px; + padding-bottom: 10px; + background-color: grey; + border-bottom: 1px white solid; + border-top: 1px white solid; +} + +.search-row > p { + margin: 0; +} + +.search-results { + height: calc(100% - 332px); + overflow: auto; +} + +div.location-date-container { + margin-top: 10px; + margin-bottom: 10px; +} + +div.location-date-container > div { + width: 50%; + display: inline-block; + vertical-align: top; +} + +div.location-date-container > div > p { + display: inline; + line-height: 24px; + vertical-align: top; +} \ No newline at end of file From eec9c444a3753e976a5760af2a7ad5d80d7fea9f Mon Sep 17 00:00:00 2001 From: Sol Date: Tue, 4 Aug 2020 19:10:12 +0100 Subject: [PATCH 2/9] bug fixes --- src/components/Layout.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/Layout.js b/src/components/Layout.js index 4a1eaaa..01938ca 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -36,11 +36,7 @@ class Dashboard extends React.Component { this.getCategoryColor = this.getCategoryColor.bind(this) this.findEventIdx = this.findEventIdx.bind(this) this.onKeyDown = this.onKeyDown.bind(this) -<<<<<<< HEAD -======= - this.selectNarrativeStep = this.selectNarrativeStep.bind(this) this.updateSearchQuery = this.updateSearchQuery.bind(this) ->>>>>>> 575b8f5... initial search bar feature added } componentDidMount () { From 6d590c283dc2116b7a5fa70e5be4355d6276eb48 Mon Sep 17 00:00:00 2001 From: Sol Date: Tue, 4 Aug 2020 19:31:50 +0100 Subject: [PATCH 3/9] lint fixes --- src/components/Layout.js | 2 +- src/components/Search.jsx | 100 +++++++++++++++++------------------ src/components/SearchRow.jsx | 58 ++++++++++---------- 3 files changed, 80 insertions(+), 80 deletions(-) diff --git a/src/components/Layout.js b/src/components/Layout.js index 01938ca..dcbe4be 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -230,7 +230,7 @@ class Dashboard extends React.Component { } updateSearchQuery (e) { - let queryString = e.target.value; + let queryString = e.target.value this.props.actions.updateSearchQuery(queryString) } render () { diff --git a/src/components/Search.jsx b/src/components/Search.jsx index dcc6498..cd11be6 100644 --- a/src/components/Search.jsx +++ b/src/components/Search.jsx @@ -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 ( -
-
- search -
-
-
- - close -
-
- {this.state.searchResults.map(result => { - return - })} -
-
-
- ) - } + render () { + return ( +
+
+ search +
+
+
+ + close +
+
+ {this.state.searchResults.map(result => { + return + })} +
+
+
+ ) + } } export default Search; diff --git a/src/components/SearchRow.jsx b/src/components/SearchRow.jsx index b5018f8..54808fe 100644 --- a/src/components/SearchRow.jsx +++ b/src/components/SearchRow.jsx @@ -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 {parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? {part} : part)}; - } + 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 { parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? {part} : part) } + } - 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 ( -
-
-
- location_on -

{getHighlightedText(location, query)}

-
-
- event -

{getHighlightedText(date, query)}

-
-
-

{getShortDescription(description, query).map(match => { - return {getHighlightedText(match, query)}...

 - })}

+ return ( +
+
+
+ location_on +

{getHighlightedText(location, query)}

- ) +
+ event +

{getHighlightedText(date, query)}

+
+
+

{getShortDescription(description, query).map(match => { + return {getHighlightedText(match, query)}...
 + })}

+
+ ) } export default SearchRow From ef936cf7ebc427636bfb6a66f0b858b6670a2d13 Mon Sep 17 00:00:00 2001 From: Sol Date: Tue, 4 Aug 2020 19:34:47 +0100 Subject: [PATCH 4/9] more lint fixes --- src/components/Search.jsx | 8 ++++---- src/components/SearchRow.jsx | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Search.jsx b/src/components/Search.jsx index cd11be6..dbcc360 100644 --- a/src/components/Search.jsx +++ b/src/components/Search.jsx @@ -5,10 +5,10 @@ import '../scss/search.scss' import SearchRow from './SearchRow.jsx' class Search extends React.Component { - constructor(props) { + constructor (props) { super(props) this.state = { - isFolded : true, + isFolded: true, searchResults: [], queryString: '' } @@ -55,7 +55,7 @@ class Search extends React.Component {
{this.state.searchResults.map(result => { - return + return })}
@@ -64,4 +64,4 @@ class Search extends React.Component { } } -export default Search; +export default Search diff --git a/src/components/SearchRow.jsx b/src/components/SearchRow.jsx index 54808fe..675f991 100644 --- a/src/components/SearchRow.jsx +++ b/src/components/SearchRow.jsx @@ -1,9 +1,9 @@ import React from 'react' const SearchRow = ({ description, category, location, date, query }) => { - function getHighlightedText(text, highlight) { + function getHighlightedText (text, highlight) { // Split text on highlight term, include term itself into parts, ignore case - const parts = text.split(new RegExp(`(${highlight})`, 'gi')); + const parts = text.split(new RegExp(`(${highlight})`, 'gi')) return { parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? {part} : part) } } From 4820b8835c2c62c07e1fa781c01da27a238f25a2 Mon Sep 17 00:00:00 2001 From: Sol Date: Tue, 4 Aug 2020 21:02:32 +0100 Subject: [PATCH 5/9] cards clickability added --- src/components/Layout.js | 2 ++ src/components/Search.jsx | 4 ++-- src/components/SearchRow.jsx | 13 +++++++------ src/scss/search.scss | 27 ++++++++++++++++++++------- 4 files changed, 31 insertions(+), 15 deletions(-) diff --git a/src/components/Layout.js b/src/components/Layout.js index dcbe4be..1e5c02c 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -72,6 +72,7 @@ class Dashboard extends React.Component { } handleSelect (selected, axis) { + console.log(selected) const matchedEvents = [] const TIMELINE_AXIS = 0 if (axis === TIMELINE_AXIS) { @@ -324,6 +325,7 @@ class Dashboard extends React.Component { queryString={app.searchQuery} onQueryUpdate={this.updateSearchQuery} events={domain.events} + onSearchRowClick={this.handleSelect} /> {app.source ? ( - 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 {
{this.state.searchResults.map(result => { - return + return })}
diff --git a/src/components/SearchRow.jsx b/src/components/SearchRow.jsx index 675f991..d3d4784 100644 --- a/src/components/SearchRow.jsx +++ b/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 ( -
+
onSearchRowClick([eventObj])}>
-
- location_on -

{getHighlightedText(location, query)}

-
event

{getHighlightedText(date, query)}

+
+ location_on +

{getHighlightedText(location, query)}

+

{getShortDescription(description, query).map(match => { return {getHighlightedText(match, query)}...
 diff --git a/src/scss/search.scss b/src/scss/search.scss index deac6ee..ecf3072 100644 --- a/src/scss/search.scss +++ b/src/scss/search.scss @@ -60,14 +60,22 @@ } .search-row { - color: white; - padding-left: 10px; - padding-right: 10px; + color: black; + padding-left: 15px; + padding-right: 15px; padding-top: 10px; padding-bottom: 10px; - background-color: grey; - border-bottom: 1px white solid; - border-top: 1px white solid; + background-color: #dfdfdf; + transition: background-color 0.4s; + border-bottom: 1px black solid; + border-top: 1px black solid; + font-size: 14px; + opacity: 0.9; + &:hover { + transition: background-color 0.4s; + background-color: white; + cursor: pointer; + } } .search-row > p { @@ -92,6 +100,11 @@ div.location-date-container > div { div.location-date-container > div > p { display: inline; - line-height: 24px; + line-height: 17px; vertical-align: top; +} + +div.location-date-container > div > i { + font-size: 12px; + margin-right: 5px; } \ No newline at end of file From 48dd776a5623cc077120c7a8d5daf0062bea3edc Mon Sep 17 00:00:00 2001 From: Sol Date: Tue, 4 Aug 2020 21:04:52 +0100 Subject: [PATCH 6/9] lint fixes --- src/components/Search.jsx | 2 +- src/components/SearchRow.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Search.jsx b/src/components/Search.jsx index d846e27..b8a5f6d 100644 --- a/src/components/Search.jsx +++ b/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.toLowerCase().includes(queryString.toLowerCase()) || event.category.toLowerCase().includes(queryString.toLowerCase()) || event.date.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({ diff --git a/src/components/SearchRow.jsx b/src/components/SearchRow.jsx index d3d4784..04a18b2 100644 --- a/src/components/SearchRow.jsx +++ b/src/components/SearchRow.jsx @@ -1,7 +1,7 @@ import React from 'react' const SearchRow = ({ query, eventObj, onSearchRowClick }) => { - const { description, category, location, date } = eventObj + const { description, 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')) From 718e350a3faa26ce50af3764663e7684097cd7c2 Mon Sep 17 00:00:00 2001 From: Sol Abrahams Date: Sat, 5 Sep 2020 21:07:01 +0100 Subject: [PATCH 7/9] requested changes made --- src/components/Layout.js | 7 ----- src/components/Search.jsx | 59 ++++++++++++++++++++++----------------- 2 files changed, 34 insertions(+), 32 deletions(-) diff --git a/src/components/Layout.js b/src/components/Layout.js index 1e5c02c..b32fe32 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -36,7 +36,6 @@ class Dashboard extends React.Component { this.getCategoryColor = this.getCategoryColor.bind(this) this.findEventIdx = this.findEventIdx.bind(this) this.onKeyDown = this.onKeyDown.bind(this) - this.updateSearchQuery = this.updateSearchQuery.bind(this) } componentDidMount () { @@ -72,7 +71,6 @@ class Dashboard extends React.Component { } handleSelect (selected, axis) { - console.log(selected) const matchedEvents = [] const TIMELINE_AXIS = 0 if (axis === TIMELINE_AXIS) { @@ -230,10 +228,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 @@ -323,7 +317,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) From 4dbe70b90d52dcdd668967b9febbf04b9a9aea70 Mon Sep 17 00:00:00 2001 From: Sol Abrahams Date: Thu, 17 Sep 2020 19:27:53 +0100 Subject: [PATCH 8/9] map changed to some --- src/components/Search.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Search.jsx b/src/components/Search.jsx index 5a2d91d..614c9be 100644 --- a/src/components/Search.jsx +++ b/src/components/Search.jsx @@ -39,8 +39,9 @@ class Search extends React.Component { searchResults = [] } else { searchResults = this.props.events.filter(event => - searchAttributes.map(attribute => { event[attribute].toLowerCase().includes(this.props.queryString.toLowerCase()) }) + searchAttributes.some(attribute => event[attribute].toLowerCase().includes(this.props.queryString.toLowerCase())) ) + console.log(searchResults) } return ( From 1c4c6f07a663745eb89f33d7c477d14a7b583a0a Mon Sep 17 00:00:00 2001 From: Sol Abrahams Date: Thu, 17 Sep 2020 19:28:38 +0100 Subject: [PATCH 9/9] console.log removed --- src/components/Search.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Search.jsx b/src/components/Search.jsx index 614c9be..853517c 100644 --- a/src/components/Search.jsx +++ b/src/components/Search.jsx @@ -41,7 +41,6 @@ class Search extends React.Component { searchResults = this.props.events.filter(event => searchAttributes.some(attribute => event[attribute].toLowerCase().includes(this.props.queryString.toLowerCase())) ) - console.log(searchResults) } return (