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

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

Browse source
This commit is contained in:
reece 2019-10-19 16:24:42 +01:00 • committed by Sean Yesmunt
parent a5529f6298
commit 122811d768
1 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -22,7 +22,7 @@ import { Form, FormField } from 'component/common/form';
import ClaimPreview from 'component/claimPreview'; import ClaimPreview from 'component/claimPreview';
import Icon from 'component/common/icon'; import Icon from 'component/common/icon';
import HelpLink from 'component/common/help-link'; import HelpLink from 'component/common/help-link';
import { debounce } from 'lodash'; import debounce from 'util/debounce';
import { DEBOUNCE_WAIT_DURATION_MS } from 'constants/search'; import { DEBOUNCE_WAIT_DURATION_MS } from 'constants/search';
const PAGE_VIEW_QUERY = `view`; const PAGE_VIEW_QUERY = `view`;
@ -84,7 +84,7 @@ function ChannelPage(props: Props) {
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [searchResults, setSearchResults] = useState(undefined); const [searchResults, setSearchResults] = useState(undefined);
// passing callback to useState ensures it's only set on initial render. Without this, the debouncing wont work. // 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; const claimId = claim.claim_id;
// If a user changes tabs, update the url so it stays on the same page if they refresh. // 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() { function handleSearch() {
const fetchUrl = generateFetchUrl(); performSearch(searchQuery);
performSearch(fetchUrl);
} }
function generateFetchUrl() { function updateResults(query) {
return `${LIGHTHOUSE_URL}?s=${encodeURIComponent(searchQuery)}&channel_id=${encodeURIComponent(claim.claim_id)}`; // 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) { function getResults(fetchUrl) {
@ -130,10 +137,13 @@ function ChannelPage(props: Props) {
}); });
} }
React.useEffect(() => {
handleSearch();
}, [searchQuery]);
function handleInputChange(e) { function handleInputChange(e) {
const { value } = e.target; const { value } = e.target;
setSearchQuery(value); setSearchQuery(value);
handleSearch();
} }
let channelIsBlackListed = false; let channelIsBlackListed = false;