add console logs for debugging

Author: idanlo

src/lib/ApiRequest/ApiRequest.js

@@ -2,21 +2,22 @@ import PropTypes from 'prop-types';
 import useApiRequest from './useApiRequest';
 
 function ApiRequest(props) {
-    const { data, loading, error } = useApiRequest(props.url, props.options);
-    return props.children(data, loading, error);
+  console.log('[ApiRequest]', props);
+  const { data, loading, error } = useApiRequest(props.url, props.options);
+  return props.children(data, loading, error);
 }
 
 ApiRequest.propTypes = {
-    /** Options object */
-    options: PropTypes.object,
-    /** url to fetch from (HTTP request) */
-    url: PropTypes.string.isRequired,
-    /** Process spotify data with render props using props.children as a function */
-    children: PropTypes.func.isRequired
+  /** Options object */
+  options: PropTypes.object,
+  /** url to fetch from (HTTP request) */
+  url: PropTypes.string.isRequired,
+  /** Process spotify data with render props using props.children as a function */
+  children: PropTypes.func.isRequired
 };
 
 ApiRequest.defaultProps = {
-    options: {}
+  options: {}
 };
 
 export default ApiRequest;

src/lib/ApiRequest/useApiRequest.js

@@ -9,6 +9,7 @@ function useApiRequest(url, options = {}) {
   const token = React.useContext(SpotifyApiContext);
 
   React.useEffect(() => {
+    console.log('[useApiRequest]', url, options);
     async function loadData() {
       try {
         setLoading(true);
@@ -29,7 +30,8 @@ function useApiRequest(url, options = {}) {
     }
 
     loadData();
-  }, [url, options.ids, options.q, options, token]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url, options.ids, options.q, token]);
 
   return { data, loading, error };
 }

src/lib/Search/Search.js

@@ -9,49 +9,50 @@ import ApiRequest from '../ApiRequest/ApiRequest';
  * @example ../../docs/Search/Search.md
  */
 function Search(props) {
-    const url = 'https://api.spotify.com/v1/search';
-    const options = { ...props.options };
-    const type = [];
-    if (props.album) type.push('album');
-    if (props.artist) type.push('artist');
-    if (props.playlist) type.push('playlist');
-    if (props.track) type.push('track');
-    options.type = type.join(',');
-    options.q = props.query;
+  const url = 'https://api.spotify.com/v1/search';
+  const options = { ...props.options };
+  const type = [];
+  if (props.album) type.push('album');
+  if (props.artist) type.push('artist');
+  if (props.playlist) type.push('playlist');
+  if (props.track) type.push('track');
+  options.type = type.join(',');
+  options.q = props.query;
+  console.log('[Search]', props);
 
-    return (
-        <ApiRequest url={url} options={options}>
-            {(data, loading, error) => {
-                return props.children(data, loading, error);
-            }}
-        </ApiRequest>
-    );
+  return (
+    <ApiRequest url={url} options={options}>
+      {(data, loading, error) => {
+        return props.children(data, loading, error);
+      }}
+    </ApiRequest>
+  );
 }
 
 Search.propTypes = {
-    /** Search query keywords and optional field filters and operators. */
-    query: PropTypes.string.isRequired,
-    /** Get results for albums */
-    album: PropTypes.bool,
-    /** Get results for artists */
-    artist: PropTypes.bool,
-    /** Get results for playlists */
-    playlist: PropTypes.bool,
-    /** Get results for tracks */
-    track: PropTypes.bool,
-    /** Options object */
-    options: PropTypes.shape({
-        market: PropTypes.string,
-        limit: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        include_external: PropTypes.string
-    }),
-    /** Process spotify data with render props using props.children as a function */
-    children: PropTypes.func.isRequired
+  /** Search query keywords and optional field filters and operators. */
+  query: PropTypes.string.isRequired,
+  /** Get results for albums */
+  album: PropTypes.bool,
+  /** Get results for artists */
+  artist: PropTypes.bool,
+  /** Get results for playlists */
+  playlist: PropTypes.bool,
+  /** Get results for tracks */
+  track: PropTypes.bool,
+  /** Options object */
+  options: PropTypes.shape({
+    market: PropTypes.string,
+    limit: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    include_external: PropTypes.string
+  }),
+  /** Process spotify data with render props using props.children as a function */
+  children: PropTypes.func.isRequired
 };
 
 Search.defaultProps = {
-    options: {}
+  options: {}
 };
 
 export default Search;

src/lib/Search/useSearch.js

@@ -5,16 +5,17 @@ import useApiRequest from '../ApiRequest/useApiRequest';
  * @param {Object} options - Options object
  */
 function useSearch(query, options) {
-    const url = 'https://api.spotify.com/v1/search';
-    const type = [];
-    if (options.album) type.push('album');
-    if (options.artist) type.push('artist');
-    if (options.playlist) type.push('playlist');
-    if (options.track) type.push('track');
-    const optionsObj = { q: query, type: type.join(','), ...options };
-    const { data, loading, error } = useApiRequest(url, optionsObj);
+  const url = 'https://api.spotify.com/v1/search';
+  const type = [];
+  if (options.album) type.push('album');
+  if (options.artist) type.push('artist');
+  if (options.playlist) type.push('playlist');
+  if (options.track) type.push('track');
+  const optionsObj = { q: query, type: type.join(','), ...options };
+  const { data, loading, error } = useApiRequest(url, optionsObj);
+  console.log('[useSearch]', query, options);
 
-    return { data, loading, error };
+  return { data, loading, error };
 }
 
 export default useSearch;