now displays original content when emtpying searchbar. Also switched to using util debounce

This commit is contained in:
reece 2019-10-19 16:24:42 +01:00 committed by Sean Yesmunt
parent a5529f6298
commit 122811d768

View file

@ -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;