diff --git a/src/js/components/SearchResults.js b/src/js/components/SearchResults.js index d1ef8cb4d..308c56528 100755 --- a/src/js/components/SearchResults.js +++ b/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 = ({

{!all && ( - + {' '} @@ -55,7 +55,7 @@ const SearchResults = ({ )} {all && ( - + )} @@ -68,7 +68,7 @@ const SearchResults = ({ {type === 'tracks' && ( */} {resultsCount > results.length && ( - )} diff --git a/src/js/components/URILink.js b/src/js/components/URILink.js index 59ca313e3..fd95a6baa 100755 --- a/src/js/components/URILink.js +++ b/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: diff --git a/src/js/util/selectors.js b/src/js/util/selectors.js index a3f707cce..f6528a1a2 100755 --- a/src/js/util/selectors.js +++ b/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( diff --git a/src/js/util/useSearchQuery.js b/src/js/util/useSearchQuery.js new file mode 100644 index 000000000..95d0dee0c --- /dev/null +++ b/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; diff --git a/src/js/views/Search.js b/src/js/views/Search.js index cf50da9b5..0818112fa 100755 --- a/src/js/views/Search.js +++ b/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);