Experimenting with hook for all search params

src/js/components/SearchResults.js

@@ -9,6 +9,7 @@ import { Grid } from './Grid';
 import { I18n } from '../locale';
 import Button from './Button';
 import { makeSearchResultsSelector, getSortSelector } from '../util/selectors';
+import useSearchQuery from '../util/useSearchQuery';
 
 const SORT_KEY = 'search_results';
 
@@ -16,14 +17,13 @@ const SearchResults = ({
   type,
   all,
 }) => {
-  const { term, providers = '' } = useParams();
+  const { term, providers } = useSearchQuery();
+  const encodedProviders = providers.join(',').replace(/:/g,'');
   const [sortField, sortReverse] = useSelector(
     (state) => getSortSelector(state, SORT_KEY, 'name'),
   );
-  const providersArray = providers.split(',');
-  const searchResultsSelector = makeSearchResultsSelector(providersArray, term, type);
+  const searchResultsSelector = makeSearchResultsSelector(providers, term, type);
   const rawResults = useSelector(searchResultsSelector);
-  console.debug(rawResults, providersArray, term, type)
   const encodedTerm = encodeURIComponent(term);
   let results = [...rawResults];
 
@@ -45,7 +45,7 @@ const SearchResults = ({
       <h4>
         {!all && (
           <span>
-            <URILink uri={`iris:search:all:all:${encodedTerm}`} uriType="search" unencoded>
+            <URILink uri={`iris:search:all:${encodedProviders}:${encodedTerm}`} uriType="search" unencoded>
               <I18n path="search.title" />
             </URILink>
             {' '}
@@ -55,7 +55,7 @@ const SearchResults = ({
           </span>
         )}
         {all && (
-          <URILink uri={`iris:search:${type}:${providers}:${encodedTerm}`} uriType="search" unencoded>
+          <URILink uri={`iris:search:${type}:${encodedProviders}:${encodedTerm}`} uriType="search" unencoded>
             <I18n path={`search.${type}.title`} />
           </URILink>
         )}
@@ -68,7 +68,7 @@ const SearchResults = ({
           {type === 'tracks' && (
             <TrackList
               source={{
-                uri: `iris:search:${type}:${providers}:${encodedTerm}`,
+                uri: `iris:search:${type}:${encodedProviders}:${encodedTerm}`,
                 name: 'Search results',
                 type: 'search',
               }}
@@ -79,7 +79,7 @@ const SearchResults = ({
           {/* <LazyLoadListener enabled={this.props.artists_more && spotify_search_enabled} loadMore={loadMore} /> */}
 
           {resultsCount > results.length && (
-            <Button uri={`iris:search:${type}:${encodedTerm}`} uriType="search" unencoded>
+            <Button uri={`iris:search:${type}:${encodedProviders}:${encodedTerm}`} uriType="search" unencoded>
               <I18n path={`search.${type}.more`} count={resultsCount} />
             </Button>
           )}

src/js/components/URILink.js

@@ -47,7 +47,7 @@ export default memo(({
 
     case 'search':
       var exploded = uri.split(':');
-      to = `/search/${exploded[2]}/${exploded[3]}`;
+      to = `/search/${exploded[2]}/${exploded[3]}/${exploded[4]}`;
       break;
 
     default:

src/js/util/selectors.js

@@ -68,13 +68,13 @@ const makeLibrarySelector = (name, filtered = true) => createSelector(
   },
 );
 
-const makeSearchResultsSelector = (providers = [], term, type) => createSelector(
+const makeSearchResultsSelector = (providers, term, type) => createSelector(
   [getSearchResults],
   (searchResults) => providers.reduce(
-    (acc, curr) => {[
+    (acc, curr) => [
       ...acc,
       ...searchResults[getSearchResultKey({ provider: curr, term, type })] || [],
-    ]}, []),
+    ], []),
   );
 
 const makeProcessProgressSelector = (keys) => createSelector(

src/js/util/useSearchQuery.js

@@ -0,0 +1,25 @@
+import { useParams } from 'react-router';
+import { useSelector } from 'react-redux';
+
+const useSearchQuery = () => {
+  const {
+    term = '',
+    type = 'all',
+    providers: rawProviders = 'all',
+  } = useParams();
+  const allProviders = useSelector((state) => state.mopidy?.uri_schemes || []);
+  const providers = rawProviders == 'all'
+                    ? [...allProviders]
+                    : rawProviders.split(',').filter((str) => allProviders.indexOf(str) > -1);
+  const providersString = providers.join(',').replace(/:/g,'');
+
+  return {
+    term,
+    type,
+    providers,
+    allProviders,
+    providersString,
+  }
+};
+
+export default useSearchQuery;

src/js/views/Search.js

@@ -14,25 +14,23 @@ import {
 } from '../services/ui/actions';
 import { i18n } from '../locale';
 import { getSortSelector } from '../util/selectors';
+import useSearchQuery from '../util/useSearchQuery';
 
 const SORT_KEY = 'search_results';
 
 const Search = () => {
-  const {
-    term,
-    providers: providersString = 'all',
-    type = 'all',
-  } = useParams();
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const lastQuery = useSelector((state) => state.core?.search_results?.query);
+  const {
+    term,
+    type,
+    providers,
+    allProviders,
+    providersString,
+  } = useSearchQuery();
   const [sortField, sortReverse] = useSelector(
     (state) => getSortSelector(state, SORT_KEY, 'name'),
   );
-  const allProviders = useSelector((state) => state.mopidy?.uri_schemes || []);
-  const providers = providersString == 'all'
-                    ? [...allProviders]
-                    : providersString.split(',').filter((str) => allProviders.indexOf(str) > -1);
 
   useEffect(() => {
     dispatch(setWindowTitle('Search'));
@@ -40,13 +38,12 @@ const Search = () => {
   }, []);
 
   useEffect(() => {
-    console.debug(providers, lastQuery?.providers)
-    if (term && type && (term !== lastQuery?.term || providers.length !== lastQuery?.providers?.length)) {
+    if (term) {
       console.debug('STARTING SEARCH', { term, type, providers })
       dispatch(setWindowTitle(i18n('search.title_window', { term: decodeURIComponent(term) })));
       dispatch(startSearch({ term, type, providers }));
     }
-  }, [term, type, providersString])
+  }, [])
 
   const onSubmit = (term) => {
     updateSearchQuery(term, providers);