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

src/ui/page/channel/view.jsx

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