now displays original content when emtpying searchbar. Also switched to using util debounce
This commit is contained in:
parent
a5529f6298
commit
122811d768
1 changed files with 17 additions and 7 deletions
|
@ -22,7 +22,7 @@ import { Form, FormField } from 'component/common/form';
|
|||
import ClaimPreview from 'component/claimPreview';
|
||||
import Icon from 'component/common/icon';
|
||||
import HelpLink from 'component/common/help-link';
|
||||
import { debounce } from 'lodash';
|
||||
import debounce from 'util/debounce';
|
||||
import { DEBOUNCE_WAIT_DURATION_MS } from 'constants/search';
|
||||
|
||||
const PAGE_VIEW_QUERY = `view`;
|
||||
|
@ -84,7 +84,7 @@ function ChannelPage(props: Props) {
|
|||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [searchResults, setSearchResults] = useState(undefined);
|
||||
// passing callback to useState ensures it's only set on initial render. Without this, the debouncing wont work.
|
||||
const [performSearch] = useState(() => debounce(getResults, DEBOUNCE_WAIT_DURATION_MS));
|
||||
const [performSearch] = useState(() => debounce(updateResults, DEBOUNCE_WAIT_DURATION_MS));
|
||||
const claimId = claim.claim_id;
|
||||
|
||||
// If a user changes tabs, update the url so it stays on the same page if they refresh.
|
||||
|
@ -108,12 +108,19 @@ function ChannelPage(props: Props) {
|
|||
}
|
||||
|
||||
function handleSearch() {
|
||||
const fetchUrl = generateFetchUrl();
|
||||
performSearch(fetchUrl);
|
||||
performSearch(searchQuery);
|
||||
}
|
||||
|
||||
function generateFetchUrl() {
|
||||
return `${LIGHTHOUSE_URL}?s=${encodeURIComponent(searchQuery)}&channel_id=${encodeURIComponent(claim.claim_id)}`;
|
||||
function updateResults(query) {
|
||||
// In order to display original search results, search results must be set to null. A query of '' should display original results.
|
||||
if (query === '') return setSearchResults(null);
|
||||
|
||||
const url = generateFetchUrl(query);
|
||||
getResults(url);
|
||||
}
|
||||
|
||||
function generateFetchUrl(query) {
|
||||
return `${LIGHTHOUSE_URL}?s=${encodeURIComponent(query)}&channel_id=${encodeURIComponent(claim.claim_id)}`;
|
||||
}
|
||||
|
||||
function getResults(fetchUrl) {
|
||||
|
@ -130,10 +137,13 @@ function ChannelPage(props: Props) {
|
|||
});
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
handleSearch();
|
||||
}, [searchQuery]);
|
||||
|
||||
function handleInputChange(e) {
|
||||
const { value } = e.target;
|
||||
setSearchQuery(value);
|
||||
handleSearch();
|
||||
}
|
||||
|
||||
let channelIsBlackListed = false;
|
||||
|
|
Loading…
Reference in a new issue