From 13515aed432862ff518a9b5228ef164c26a1e67b Mon Sep 17 00:00:00 2001 From: Berke Aras Date: Sat, 1 May 2021 17:21:13 +0200 Subject: [PATCH] Fix issues --- package.json | 1 + .../_Header_Searchfield/debounce.js | 34 +++++++++ src/components/_Header_Searchfield/index.jsx | 69 ++++++++++++++++--- yarn.lock | 10 ++- 4 files changed, 102 insertions(+), 12 deletions(-) create mode 100644 src/components/_Header_Searchfield/debounce.js diff --git a/package.json b/package.json index f241e01..c209f40 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "focus-trap-react": "^8.5.0", "linkifyjs": "^2.1.9", "react": "^17.0.1", + "react-debounce-input": "^3.2.3", "react-dom": "^17.0.1", "react-feather": "^2.0.9", "react-infinite-scroll-component": "^6.0.0", diff --git a/src/components/_Header_Searchfield/debounce.js b/src/components/_Header_Searchfield/debounce.js new file mode 100644 index 0000000..3c7d9dd --- /dev/null +++ b/src/components/_Header_Searchfield/debounce.js @@ -0,0 +1,34 @@ +import React, { useState, useEffect } from 'react' + +// Our hook +export default function useDebounce(value, delay) { + // State and setters for debounced value + const [debouncedValue, setDebouncedValue] = useState(value) + + useEffect( + () => { + // Set debouncedValue to value (passed in) after the specified delay + const handler = setTimeout(() => { + setDebouncedValue(value) + }, delay) + + // Return a cleanup function that will be called every time ... + // ... useEffect is re-called. useEffect will only be re-called ... + // ... if value changes (see the inputs array below). + // This is how we prevent debouncedValue from changing if value is ... + // ... changed within the delay period. Timeout gets cleared and restarted. + // To put it in context, if the user is typing within our app's ... + // ... search box, we don't want the debouncedValue to update until ... + // ... they've stopped typing for more than 500ms. + return () => { + clearTimeout(handler) + } + }, + // Only re-call effect if value changes + // You could also add the "delay" var to inputs array if you ... + // ... need to be able to change that dynamically. + [value] + ) + + return debouncedValue +} diff --git a/src/components/_Header_Searchfield/index.jsx b/src/components/_Header_Searchfield/index.jsx index ff5d9d5..8e1d013 100644 --- a/src/components/_Header_Searchfield/index.jsx +++ b/src/components/_Header_Searchfield/index.jsx @@ -1,26 +1,48 @@ import React, { useState, useEffect } from 'react' -import { Input, Form } from 'semantic-ui-react' import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom' +import { DebounceInput } from 'react-debounce-input' + +// Icons import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { library } from '@fortawesome/fontawesome-svg-core' import { faUser, faUsers, faCalendarDay, faHashtag } from '@fortawesome/free-solid-svg-icons' -import './style.scss' library.add(faUsers) library.add(faCalendarDay) library.add(faHashtag) +import './style.scss' + const SearchField = () => { const [searchQuery, setSearchQuery] = useState('') const [userResult, setUserResult] = useState([]) const [topicResult, setTopicResult] = useState([]) + const [popularTopics, setPopularTopics] = useState([]) const [isLoadingResults, setIsLoadingResults] = useState(false) - const searchQueryChangeHandler = (event) => { - setSearchQuery(event.target.value) + useEffect(() => { + var tokenHeaders = new Headers() + tokenHeaders.append('Authorization', 'Bearer ' + localStorage.getItem('token')) + var requestOptions = { + method: 'GET', + headers: tokenHeaders, + redirect: 'follow', + } + // eslint-disable-next-line no-undef + fetch(process.env.REACT_APP_API_URL + '/api/sidebar/popular', requestOptions) + .then((response) => response.json()) + .then((result) => { + setPopularTopics(result) + }) + .catch((error) => console.log('error', error)) + }, []) + + const searchQueryChangeHandler = () => { + let inputValue = document.querySelector('.SearchField input').value.trim() + setSearchQuery(inputValue) const controller = new AbortController() const { signal } = controller - if (event.target.value == '') { + if (inputValue == '' || inputValue.length < 3) { setUserResult([]) setTopicResult([]) setIsLoadingResults(false) @@ -40,7 +62,7 @@ const SearchField = () => { setIsLoadingResults(true) // eslint-disable-next-line no-undef - fetch(process.env.REACT_APP_API_URL + '/api/search?query=' + event.target.value, requestOptions, { signal }) + fetch(process.env.REACT_APP_API_URL + '/api/search?query=' + encodeURIComponent(inputValue), requestOptions, { signal }) .then((response) => response.json()) .then((result) => { let userResult = result[0] @@ -75,8 +97,20 @@ const SearchField = () => { return (
-
- + { + e.preventDefault() + searchQueryChangeHandler() + }} + > + {isLoadingResults && } @@ -89,16 +123,16 @@ const SearchField = () => { return (
  • - {user.name} Rechtsabteilung + {user.name} {(user.user_department !== null || user.user_department !== '') && {user.user_department}}
    • ) })} )} - {topicResult.length > 0 && ( + {topicResult.length > 0 ? ( - Topics + Popular topics {topicResult.map((topic) => { return (
  • @@ -109,6 +143,19 @@ const SearchField = () => { ) })} + ) : ( + + Popular topics + {popularTopics.map((topic) => { + return ( +
  • + + {topic.topic} + +
    • + ) + })} +     )}
    diff --git a/yarn.lock b/yarn.lock index fff5e8a..4cb3ec0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7675,7 +7675,7 @@ lodash.clonedeep@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8= -lodash.debounce@^4.0.8: +lodash.debounce@^4, lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= @@ -9852,6 +9852,14 @@ react-app-polyfill@^2.0.0: regenerator-runtime "^0.13.7" whatwg-fetch "^3.4.1" +react-debounce-input@^3.2.3: + version "3.2.3" + resolved "https://registry.yarnpkg.com/react-debounce-input/-/react-debounce-input-3.2.3.tgz#9e8c69771a621c81e8fe36b45ade49a95059cd87" + integrity sha512-7Bfjm9sxrtgB+IsSrdXoo4CVqKg7CbWC68dNhr8q7ZmY6C0AqtR524//SenHQWT+eeSG9DmSLWNWCUFSyaaWSQ== + dependencies: + lodash.debounce "^4" + prop-types "^15.7.2" + react-dev-utils@^11.0.1: version "11.0.4" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"