From 3552fd392a3da8ea61891cf07f87024d8968cfec Mon Sep 17 00:00:00 2001 From: Valeriy Date: Sun, 5 May 2019 21:12:18 +0300 Subject: [PATCH] fix: make search working --- client/package-lock.json | 193 +++++------------- client/package.json | 3 +- .../components/search/WithInstantSearch.js | 4 + client/src/components/search/redux/index.js | 1 - .../components/search/searchBar/SearchBar.js | 38 +++- .../components/search/searchBar/SearchHits.js | 69 +++---- .../search/searchBar/SearchSuggestion.js | 8 +- .../components/search/searchBar/searchbar.css | 1 + 8 files changed, 124 insertions(+), 193 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index b21b80e98b2..69019b184b8 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1686,12 +1686,12 @@ "integrity": "sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw==" }, "algoliasearch": { - "version": "3.30.0", - "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-3.30.0.tgz", - "integrity": "sha512-FuinyPgNn0MeAHm9pan6rLgY6driY3mcTo4AWNBMY1MUReeA5PQA8apV/3SNXqA5bbsuvMvmA0ZrVzrOmEeQTA==", + "version": "3.32.1", + "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-3.32.1.tgz", + "integrity": "sha512-NaaHMboU9tKwrU3aim7LlzSDqKb+1TGaC+Lx3NOttSnuMHbPpaf+7LtJL4KlosbRWEwqb9t5wSYMVDrPTH2dNA==", "requires": { "agentkeepalive": "^2.2.0", - "debug": "^2.6.8", + "debug": "^2.6.9", "envify": "^4.0.0", "es6-promise": "^4.1.0", "events": "^1.1.0", @@ -1723,14 +1723,13 @@ } }, "algoliasearch-helper": { - "version": "2.26.1", - "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-2.26.1.tgz", - "integrity": "sha512-fQBZZXC3rac4wadRj5wA/gxy88Twb+GQF3n8foew8SAsqe9Q59PFq1y3j08pr6eNSRYkZJV7qMpe7ox5D27KOw==", + "version": "2.27.0", + "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-2.27.0.tgz", + "integrity": "sha512-ly815eMqpoLbb5zMMzzWyg3GcdSG5gEDE+jR/DLAPFTyYJW1XKpeWCenflqvUVl3akN9R/ctGF2vao2da6pBDA==", "requires": { "events": "^1.1.1", "lodash": "^4.17.5", - "qs": "^6.5.1", - "util": "^0.10.3" + "qs": "^6.5.1" } }, "alphanum-sort": { @@ -5674,9 +5673,9 @@ } }, "es6-promise": { - "version": "4.2.4", - "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.4.tgz", - "integrity": "sha512-/NdNZVJg+uZgtm9eS3O6lrOLYmQag2DjdEXuPaHlZ6RuVqgqaVZfgYCepEIKsLqwdQArOPtC3XzRLqGGfT8KQQ==" + "version": "4.2.6", + "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.6.tgz", + "integrity": "sha512-aRVgGdnmW2OiySVPUC9e6m+plolMAJKjZnQlCwNSuK5yQ0JN61DZSO1X1Ufd1foqWRAlig0rhduTCHe7sVtK5Q==" }, "es6-promisify": { "version": "6.0.1", @@ -6829,14 +6828,6 @@ "debug": "^3.1.0" } }, - "for-each": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", - "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==", - "requires": { - "is-callable": "^1.1.3" - } - }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -11052,11 +11043,6 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=" }, - "is-function": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz", - "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=" - }, "is-generator-fn": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-1.0.0.tgz", @@ -14477,15 +14463,6 @@ } } }, - "parse-headers": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.1.tgz", - "integrity": "sha1-aug6eqJanZtwCswoaYzR8e1+lTY=", - "requires": { - "for-each": "^0.3.2", - "trim": "0.0.1" - } - }, "parse-json": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz", @@ -15588,9 +15565,9 @@ "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=" }, "qs": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", - "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==" + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz", + "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==" }, "query-string": { "version": "6.4.2", @@ -15998,27 +15975,6 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-3.0.0.tgz", "integrity": "sha512-XzgvowFrwDo6TWcpJ/WTiarb9UI6lhA4PMzS7n1joK3sHfBBBOQHUc0U4u57D6DWO9vHv6lVSWx2Q/Ymfyv4hw==" }, - "react-freecodecamp-search": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/react-freecodecamp-search/-/react-freecodecamp-search-2.0.2.tgz", - "integrity": "sha1-L94Q9aRLGqFeamuPky1kNesoTzI=", - "requires": { - "query-string": "^6.0.0", - "react-instantsearch": "^5.0.1", - "rxjs": "^5.5.7", - "xhr": "^2.4.1" - }, - "dependencies": { - "rxjs": { - "version": "5.5.12", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz", - "integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==", - "requires": { - "symbol-observable": "1.0.1" - } - } - } - }, "react-ga": { "version": "2.5.7", "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-2.5.7.tgz", @@ -16089,57 +16045,36 @@ } } }, - "react-instantsearch": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/react-instantsearch/-/react-instantsearch-5.4.0.tgz", - "integrity": "sha512-FiOWhelRYpmpWpByGzXAqYxUF5dOa72Jqtfa6cY0BiTh98NBhVl8qXsfg1nmMNssWafzrqR/Dqfru6hLuUSqKg==", + "react-instantsearch-core": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-instantsearch-core/-/react-instantsearch-core-5.5.0.tgz", + "integrity": "sha512-HtI4YczsAfW6aZgINaYM/De5sZHotzoLhTsCp+FsOELnDx8/SiQY6+fUrBS7tPIRAf/25ljbQmY7Giddtci2YQ==", "requires": { "@babel/runtime": "^7.1.2", - "react-instantsearch-core": "^5.4.0", - "react-instantsearch-dom": "^5.4.0", - "react-instantsearch-native": "^5.4.0" + "algoliasearch-helper": "^2.26.0", + "lodash": "^4.17.4", + "prop-types": "^15.5.10" }, "dependencies": { "@babel/runtime": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz", - "integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==", + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.4.tgz", + "integrity": "sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg==", "requires": { - "regenerator-runtime": "^0.12.0" - } - }, - "react-instantsearch-core": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/react-instantsearch-core/-/react-instantsearch-core-5.4.0.tgz", - "integrity": "sha512-nAY3ElSfYITNKLClcdxuB9/XAQN5Gwsfd0WPWym12IrTUE74gHg3gM7EolKAWV1Qx2Cdw7vdNgQqcgD4SH/2lA==", - "requires": { - "@babel/runtime": "^7.1.2", - "algoliasearch-helper": "^2.26.0", - "lodash": "^4.17.4", - "prop-types": "^15.5.10" - } - }, - "react-instantsearch-native": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/react-instantsearch-native/-/react-instantsearch-native-5.4.0.tgz", - "integrity": "sha512-2H4C88S8a2utLPKWLLe/97bZQycJAv0iY7VxhaxG0HHed8pRNM2PKvI1ltYQekfgtFDCo0H7+SzNBY5X6b3Slw==", - "requires": { - "@babel/runtime": "^7.1.2", - "algoliasearch": "^3.27.1", - "react-instantsearch-core": "^5.4.0" + "regenerator-runtime": "^0.13.2" } }, "regenerator-runtime": { - "version": "0.12.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", - "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==" + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz", + "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==" } } }, "react-instantsearch-dom": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/react-instantsearch-dom/-/react-instantsearch-dom-5.4.0.tgz", - "integrity": "sha512-FzbbIzF7BxpTfsXYFeX1rvJN1pv/VnokVE6ih42JncUABB/ESvi21sh6L33QWp68RjFIisdCr7ONu6Q5FUhjCw==", + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-instantsearch-dom/-/react-instantsearch-dom-5.5.0.tgz", + "integrity": "sha512-92LJAbIekB6Ktb8w0n28X+S1QcKXTfg6Fks2kP+XvD455JkpuW/e2on93B5FATgrQePqHHR1rZdbYqIRhEcj8g==", "requires": { "@babel/runtime": "^7.1.2", "algoliasearch": "^3.27.1", @@ -16147,32 +16082,21 @@ "classnames": "^2.2.5", "lodash": "^4.17.4", "prop-types": "^15.5.10", - "react-instantsearch-core": "^5.4.0" + "react-instantsearch-core": "^5.5.0" }, "dependencies": { "@babel/runtime": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz", - "integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==", + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.4.tgz", + "integrity": "sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg==", "requires": { - "regenerator-runtime": "^0.12.0" - } - }, - "react-instantsearch-core": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/react-instantsearch-core/-/react-instantsearch-core-5.4.0.tgz", - "integrity": "sha512-nAY3ElSfYITNKLClcdxuB9/XAQN5Gwsfd0WPWym12IrTUE74gHg3gM7EolKAWV1Qx2Cdw7vdNgQqcgD4SH/2lA==", - "requires": { - "@babel/runtime": "^7.1.2", - "algoliasearch-helper": "^2.26.0", - "lodash": "^4.17.4", - "prop-types": "^15.5.10" + "regenerator-runtime": "^0.13.2" } }, "regenerator-runtime": { - "version": "0.12.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", - "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==" + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz", + "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==" } } }, @@ -16593,11 +16517,18 @@ } }, "reduce": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/reduce/-/reduce-1.0.1.tgz", - "integrity": "sha1-FPouX/H8VgcDoCDLtfuqtpFWWAQ=", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/reduce/-/reduce-1.0.2.tgz", + "integrity": "sha512-xX7Fxke/oHO5IfZSk77lvPa/7bjMh9BuCk4OOoX5XTXrM7s0Z+MkPfSDfz0q7r91BhhGSs8gii/VEN/7zhCPpQ==", "requires": { - "object-keys": "~1.0.0" + "object-keys": "^1.1.0" + }, + "dependencies": { + "object-keys": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", + "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==" + } } }, "reduce-reducers": { @@ -18357,11 +18288,6 @@ } } }, - "symbol-observable": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz", - "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=" - }, "symbol-tree": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz", @@ -19551,14 +19477,6 @@ "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" }, - "util": { - "version": "0.10.4", - "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", - "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==", - "requires": { - "inherits": "2.0.3" - } - }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -20598,17 +20516,6 @@ "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz", "integrity": "sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=" }, - "xhr": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.5.0.tgz", - "integrity": "sha512-4nlO/14t3BNUZRXIXfXe+3N6w3s1KoxcJUUURctd64BLRe67E4gRwp4PjywtDY72fXpZ1y6Ch0VZQRY/gMPzzQ==", - "requires": { - "global": "~4.3.0", - "is-function": "^1.0.1", - "parse-headers": "^2.0.0", - "xtend": "^4.0.0" - } - }, "xml-name-validator": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz", diff --git a/client/package.json b/client/package.json index e075eccf962..519063e9578 100644 --- a/client/package.json +++ b/client/package.json @@ -15,6 +15,7 @@ "@fortawesome/react-fontawesome": "^0.1.4", "@freecodecamp/react-bootstrap": "^0.32.3", "@reach/router": "^1.2.1", + "algoliasearch": "^3.32.1", "axios": "^0.18.0", "browser-cookies": "^1.2.0", "chai": "^4.2.0", @@ -43,7 +44,7 @@ "react": "^16.8.6", "react-calendar-heatmap": "^1.8.0", "react-dom": "^16.8.6", - "react-freecodecamp-search": "^2.0.2", + "react-instantsearch-dom": "^5.5.0", "react-ga": "^2.5.7", "react-helmet": "^5.2.0", "react-monaco-editor": "^0.25.1", diff --git a/client/src/components/search/WithInstantSearch.js b/client/src/components/search/WithInstantSearch.js index 619e7c9787a..5b580e141b3 100644 --- a/client/src/components/search/WithInstantSearch.js +++ b/client/src/components/search/WithInstantSearch.js @@ -44,6 +44,10 @@ class WithInstantSearch extends Component { if (pathname !== prevPathname || isDropdownEnabled !== enableDropdown) { toggleSearchDropdown(enableDropdown); } + const { query, updateSearchQuery } = this.props; + if (query && pathname !== prevPathname && enableDropdown) { + updateSearchQuery(''); + } } getSearchEnableDropdown = () => !this.props.pathname.startsWith('/search'); diff --git a/client/src/components/search/redux/index.js b/client/src/components/search/redux/index.js index 36ffa195b1d..ffcf545bdba 100644 --- a/client/src/components/search/redux/index.js +++ b/client/src/components/search/redux/index.js @@ -48,7 +48,6 @@ export const reducer = handleActions( indexName: payload }), [types.updateSearchQuery]: (state, { payload }) => { - console.log('query payload', payload); return { ...state, query: payload diff --git a/client/src/components/search/searchBar/SearchBar.js b/client/src/components/search/searchBar/SearchBar.js index 9cecaa6b9db..4aeefc6e44b 100644 --- a/client/src/components/search/searchBar/SearchBar.js +++ b/client/src/components/search/searchBar/SearchBar.js @@ -10,7 +10,8 @@ import { isSearchDropdownEnabledSelector, isSearchBarFocusedSelector, toggleSearchDropdown, - toggleSearchFocused + toggleSearchFocused, + updateSearchQuery } from '../redux'; import SearchHits from './SearchHits'; @@ -21,7 +22,8 @@ const propTypes = { isDropdownEnabled: PropTypes.bool, isSearchFocused: PropTypes.bool, toggleSearchDropdown: PropTypes.func.isRequired, - toggleSearchFocused: PropTypes.func.isRequired + toggleSearchFocused: PropTypes.func.isRequired, + updateSearchQuery: PropTypes.func.isRequired }; const mapStateToProps = createSelector( @@ -34,7 +36,10 @@ const mapStateToProps = createSelector( ); const mapDispatchToProps = dispatch => - bindActionCreators({ toggleSearchDropdown, toggleSearchFocused }, dispatch); + bindActionCreators( + { toggleSearchDropdown, toggleSearchFocused, updateSearchQuery }, + dispatch + ); const placeholder = 'Search 8,000+ lessons, articles, and videos'; @@ -42,10 +47,10 @@ class SearchBar extends Component { constructor(props) { super(props); - this.state = { - dropdownOverride: true - }; this.searchBarRef = React.createRef(); + this.handleChange = this.handleChange.bind(this); + this.handlePageClick = this.handlePageClick.bind(this); + this.handleSearch = this.handleSearch.bind(this); } componentDidMount() { @@ -59,19 +64,29 @@ class SearchBar extends Component { document.removeEventListener('click', this.handlePageClick); } - handlePageClick = e => { + handleChange() { + const { isSearchFocused, toggleSearchFocused } = this.props; + if (!isSearchFocused) { + toggleSearchFocused(true); + } + } + + handlePageClick(e) { const { toggleSearchFocused } = this.props; const isSearchFocusedClick = this.searchBarRef.current.contains(e.target); return toggleSearchFocused(isSearchFocusedClick); - }; + } - handleSearch = e => { + handleSearch(e, query) { e.preventDefault(); - const { toggleSearchDropdown } = this.props; + const { toggleSearchDropdown, updateSearchQuery } = this.props; // disable the search dropdown toggleSearchDropdown(false); + if (query) { + updateSearchQuery(query); + } return navigate('/search'); - }; + } render() { const { isDropdownEnabled, isSearchFocused } = this.props; @@ -86,6 +101,7 @@ class SearchBar extends Component { Search { - const defaultHit = [ - { - objectID: `default-hit-${currentRefinement}`, - _highlightResult: { - query: { - value: - 'Search for "' + - currentRefinement + - '"' - } +const CustomHits = connectHits(({ hits, currentRefinement, handleSubmit }) => { + const defaultHit = [ + { + objectID: `default-hit-${currentRefinement}`, + query: currentRefinement, + _highlightResult: { + query: { + value: + 'Search for "' + + currentRefinement + + '"' } } - ]; - return ( -
-
    - {defaultHit.concat(hits).map(hit => ( -
  • - -
    • - ))} -
-
- ); - } -); + } + ]; + return ( +
+
    + {defaultHit.concat(hits).map(hit => ( +
  • + +
    • + ))} +
+
+ ); +}); const SearchHits = connectStateResults(({ handleSubmit, searchState }) => { return isEmpty(searchState) || !searchState.query ? null : ( - + ); }); diff --git a/client/src/components/search/searchBar/SearchSuggestion.js b/client/src/components/search/searchBar/SearchSuggestion.js index 61b6b8df41a..fd5ec126e44 100644 --- a/client/src/components/search/searchBar/SearchSuggestion.js +++ b/client/src/components/search/searchBar/SearchSuggestion.js @@ -5,7 +5,11 @@ import { isEmpty } from 'lodash'; const Suggestion = ({ handleSubmit, hit }) => { return isEmpty(hit) || isEmpty(hit.objectID) ? null : ( -
+ handleSubmit(e, hit.query)} + > {hit.objectID.includes('default-hit-') ? ( @@ -13,7 +17,7 @@ const Suggestion = ({ handleSubmit, hit }) => { )} -
+ ); }; diff --git a/client/src/components/search/searchBar/searchbar.css b/client/src/components/search/searchBar/searchbar.css index 8ae388a2448..776304583fe 100644 --- a/client/src/components/search/searchBar/searchbar.css +++ b/client/src/components/search/searchBar/searchbar.css @@ -57,6 +57,7 @@ justify-content: center; } .fcc_suggestion_item { + display: block; padding: 1rem; color: #333; }