Merge pull request #261 from mayconbenito/chore/remove-debounce-from-…

…search chore: remove debounce from search
mayconbenito · Oct 16, 2020 · c451087 · c451087
2 parents bed2ec7 + 71b68ce
commit c451087
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 46 deletions.
diff --git a/src/contexts/SearchContext.js b/src/contexts/SearchContext.js
@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
+import isStringEmpty from '../helpers/isStringEmpty';
 import api from '../services/api';
 
 const SearchContext = React.createContext({
@@ -24,27 +25,38 @@ export const SearchProvider = ({ children }) => {
   });
 
   async function handleSearch(searchQuery) {
-    setQuery(searchQuery);
-    const response = await api.get(`/app/search/${searchQuery}`, {
-      params: {
-        limit: 20,
-        type: 'artist,album,track',
-      },
-    });
-
-    setResults(response.data.results);
+    try {
+      const response = await api.get(`/app/search/${searchQuery}`, {
+        params: {
+          limit: 20,
+          type: 'artist,album,track',
+        },
+      });
+
+      setResults(response.data.results);
+      // eslint-disable-next-line no-empty
+    } catch {}
   }
 
   function handleClearSearch() {
     setQuery('');
     setResults({ artists: [], albums: [], tracks: [] });
   }
 
+  useEffect(() => {
+    if (!isStringEmpty(query)) {
+      handleSearch(query);
+    } else {
+      handleClearSearch();
+    }
+  }, [query]);
+
   return (
     <SearchContext.Provider
       value={{
         results,
         query,
+        setQuery,
         handleSearch,
         handleClearSearch,
       }}

diff --git a/src/hooks/useDebounce.js b/src/hooks/useDebounce.js
diff --git a/src/pages/Search/index.js b/src/pages/Search/index.js
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdClear } from 'react-icons/md';
 
@@ -8,7 +8,6 @@ import SmallArtistItem from '../../components/SmallArtistItem';
 import SmallTrackItem from '../../components/SmallTrackItem';
 import SearchContext from '../../contexts/SearchContext';
 import isStringEmpty from '../../helpers/isStringEmpty';
-import useDebounce from '../../hooks/useDebounce';
 import {
   GlobalHeaderContainer,
   Content,
@@ -24,27 +23,16 @@ import {
 function Search({ history }) {
   const { t } = useTranslation();
   const searchContext = useContext(SearchContext);
-  const [query, setQuery] = useState(searchContext.query);
-
-  const debouncedQuery = useDebounce(query, 400);
 
   function handleInput(e) {
-    setQuery(e.target.value);
+    searchContext.setQuery(e.target.value);
   }
 
   function handleClearSearch() {
-    setQuery('');
+    searchContext.setQuery('');
     searchContext.handleClearSearch();
   }
 
-  useEffect(() => {
-    if (!isStringEmpty(debouncedQuery)) {
-      searchContext.handleSearch(query);
-    } else {
-      handleClearSearch();
-    }
-  }, [debouncedQuery]);
-
   return (
     <Content>
       <GlobalHeaderContainer>
@@ -53,13 +41,13 @@ function Search({ history }) {
 
       <SearchInputContainer>
         <SearchInput
-          value={query}
+          value={searchContext.query}
           onChange={handleInput}
           autoFocus
           placeholder={t('search.input')}
         />
 
-        {!isStringEmpty(query) && (
+        {!isStringEmpty(searchContext.query) && (
           <ClearSearchButton onClick={handleClearSearch}>
             <MdClear size={26} color="#d99207" />
           </ClearSearchButton>