mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-30 12:05:39 -05:00
fix: make search working
This commit is contained in:
193
client/package-lock.json
generated
193
client/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -48,7 +48,6 @@ export const reducer = handleActions(
|
||||
indexName: payload
|
||||
}),
|
||||
[types.updateSearchQuery]: (state, { payload }) => {
|
||||
console.log('query payload', payload);
|
||||
return {
|
||||
...state,
|
||||
query: payload
|
||||
|
||||
@@ -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
|
||||
</label>
|
||||
<SearchBox
|
||||
onChange={this.handleChange}
|
||||
onSubmit={this.handleSearch}
|
||||
showLoadingIndicator={true}
|
||||
translations={{ placeholder }}
|
||||
|
||||
@@ -1,47 +1,46 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
connectStateResults,
|
||||
connectAutoComplete
|
||||
} from 'react-instantsearch-dom';
|
||||
import { connectStateResults, connectHits } from 'react-instantsearch-dom';
|
||||
import isEmpty from 'lodash/isEmpty';
|
||||
import Suggestion from './SearchSuggestion';
|
||||
|
||||
const CustomHits = connectAutoComplete(
|
||||
({ hits, currentRefinement, handleSubmit }) => {
|
||||
const defaultHit = [
|
||||
{
|
||||
objectID: `default-hit-${currentRefinement}`,
|
||||
_highlightResult: {
|
||||
query: {
|
||||
value:
|
||||
'Search for "<ais-highlight-0000000000>' +
|
||||
currentRefinement +
|
||||
'</ais-highlight-0000000000>"'
|
||||
}
|
||||
const CustomHits = connectHits(({ hits, currentRefinement, handleSubmit }) => {
|
||||
const defaultHit = [
|
||||
{
|
||||
objectID: `default-hit-${currentRefinement}`,
|
||||
query: currentRefinement,
|
||||
_highlightResult: {
|
||||
query: {
|
||||
value:
|
||||
'Search for "<ais-highlight-0000000000>' +
|
||||
currentRefinement +
|
||||
'</ais-highlight-0000000000>"'
|
||||
}
|
||||
}
|
||||
];
|
||||
return (
|
||||
<div className='ais-Hits'>
|
||||
<ul className='ais-Hits-list'>
|
||||
{defaultHit.concat(hits).map(hit => (
|
||||
<li
|
||||
className='ais-Hits-item'
|
||||
data-fccobjectid={hit.objectID}
|
||||
key={hit.objectID}
|
||||
>
|
||||
<Suggestion handleSubmit={handleSubmit} hit={hit} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
];
|
||||
return (
|
||||
<div className='ais-Hits'>
|
||||
<ul className='ais-Hits-list'>
|
||||
{defaultHit.concat(hits).map(hit => (
|
||||
<li
|
||||
className='ais-Hits-item'
|
||||
data-fccobjectid={hit.objectID}
|
||||
key={hit.objectID}
|
||||
>
|
||||
<Suggestion handleSubmit={handleSubmit} hit={hit} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const SearchHits = connectStateResults(({ handleSubmit, searchState }) => {
|
||||
return isEmpty(searchState) || !searchState.query ? null : (
|
||||
<CustomHits handleSubmit={handleSubmit} />
|
||||
<CustomHits
|
||||
currentRefinement={searchState.query}
|
||||
handleSubmit={handleSubmit}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@@ -5,7 +5,11 @@ import { isEmpty } from 'lodash';
|
||||
|
||||
const Suggestion = ({ handleSubmit, hit }) => {
|
||||
return isEmpty(hit) || isEmpty(hit.objectID) ? null : (
|
||||
<div className='fcc_suggestion_item' onClickCapture={handleSubmit}>
|
||||
<a
|
||||
className='fcc_suggestion_item'
|
||||
href='/search'
|
||||
onClick={e => handleSubmit(e, hit.query)}
|
||||
>
|
||||
<span className='hit-name'>
|
||||
{hit.objectID.includes('default-hit-') ? (
|
||||
<Highlight attribute='query' hit={hit} tagName='strong' />
|
||||
@@ -13,7 +17,7 @@ const Suggestion = ({ handleSubmit, hit }) => {
|
||||
<Highlight attribute='query' hit={hit} />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -57,6 +57,7 @@
|
||||
justify-content: center;
|
||||
}
|
||||
.fcc_suggestion_item {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user