LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

onchange now triggers searching, it is also debounced

Browse source
This commit is contained in:
reece 2019-10-19 14:43:16 +01:00 committed by Sean Yesmunt
parent 92b558cfe8
commit c6b25894d7
1 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/ui/page/channel/view.jsx
View file

@ -22,6 +22,8 @@ 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_WAIT_DURATION_MS } from 'constants/search';
const PAGE_VIEW_QUERY = `view`;
const ABOUT_PAGE = `about`;
@ -81,6 +83,8 @@ function ChannelPage(props: Props) {
const [coverPreview, setCoverPreview] = useState(cover);
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 claimId = claim.claim_id;
// If a user changes tabs, update the url so it stays on the same page if they refresh.
@ -104,9 +108,15 @@ function ChannelPage(props: Props) {
}
function handleSearch() {
const fetchUrl = `${LIGHTHOUSE_URL}?s=${encodeURIComponent(searchQuery)}&channel_id=${encodeURIComponent(
claim.claim_id
)}`;
const fetchUrl = generateFetchUrl();
performSearch(fetchUrl);
}
function generateFetchUrl() {
return `${LIGHTHOUSE_URL}?s=${encodeURIComponent(searchQuery)}&channel_id=${encodeURIComponent(claim.claim_id)}`;
}
function getResults(fetchUrl) {
fetch(fetchUrl)
.then(res => res.json())
.then(results => {
@ -123,6 +133,7 @@ function ChannelPage(props: Props) {
function handleInputChange(e) {
const { value } = e.target;
setSearchQuery(value);
handleSearch();
}
let channelIsBlackListed = false;