diff --git a/src/common/routesRegexp.js b/src/common/routesRegexp.js index 113497ec5..f4128765b 100644 --- a/src/common/routesRegexp.js +++ b/src/common/routesRegexp.js @@ -12,8 +12,8 @@ const routesRegexp = { urlParamsNames: ['addonTransportUrl', 'type', 'catalogId'] }, library: { - regexp: /^\/library(?:\/([^/]*))?$/, - urlParamsNames: ['type'] + regexp: /^\/library(?:\/([^/]*)\/([^/]*))?$/, + urlParamsNames: ['type', 'sort'] }, search: { regexp: /^\/search$/, diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js index d3c081646..378612678 100644 --- a/src/routes/Library/Library.js +++ b/src/routes/Library/Library.js @@ -7,8 +7,8 @@ const useSelectableInputs = require('./useSelectableInputs'); const useItemOptions = require('./useItemOptions'); const styles = require('./styles'); -const Library = ({ urlParams, queryParams }) => { - const library = useLibrary(urlParams, queryParams); +const Library = ({ urlParams }) => { + const library = useLibrary(urlParams); const [typeSelect, sortPropSelect] = useSelectableInputs(library); const [options, optionOnSelect] = useItemOptions(); return ( @@ -73,8 +73,8 @@ const Library = ({ urlParams, queryParams }) => { Library.propTypes = { urlParams: PropTypes.exact({ type: PropTypes.string, - }), - queryParams: PropTypes.instanceOf(URLSearchParams) + sort: PropTypes.string + }) }; module.exports = Library; diff --git a/src/routes/Library/useLibrary.js b/src/routes/Library/useLibrary.js index b2426e055..69c63f56e 100644 --- a/src/routes/Library/useLibrary.js +++ b/src/routes/Library/useLibrary.js @@ -46,20 +46,17 @@ const onNewLibraryState = (library) => { } }; -const useLibrary = (urlParams, queryParams) => { +const useLibrary = (urlParams) => { const { core } = useServices(); const loadLibraryAction = React.useMemo(() => { - if (typeof urlParams.type === 'string') { + if (typeof urlParams.type === 'string' && typeof urlParams.sort === 'string') { return { action: 'Load', args: { load: 'LibraryFiltered', args: { type_name: urlParams.type, - sort_prop: queryParams.has('sort_prop') ? - queryParams.get('sort_prop') - : - null + sort_prop: urlParams.sort } } }; @@ -82,7 +79,7 @@ const useLibrary = (urlParams, queryParams) => { }; } } - }, [urlParams, queryParams]); + }, [urlParams]); return useModelState({ model: 'library', action: loadLibraryAction, diff --git a/src/routes/Library/useSelectableInputs.js b/src/routes/Library/useSelectableInputs.js index 601ce9731..645db1457 100644 --- a/src/routes/Library/useSelectableInputs.js +++ b/src/routes/Library/useSelectableInputs.js @@ -16,13 +16,7 @@ const mapSelectableInputs = (library) => { options: library.type_names .map((type) => ({ label: type, value: type })), onSelect: (event) => { - const queryParams = new URLSearchParams( - library.selected !== null ? - [['sort_prop', library.selected.sort_prop]] - : - [] - ); - window.location.replace(`#/library/${encodeURIComponent(event.value)}?${queryParams.toString()}`); + window.location.replace(`#/library/${encodeURIComponent(event.value)}/${encodeURIComponent(library.selected.sort_prop)}`); } }; const sortPropSelect = { @@ -33,9 +27,8 @@ const mapSelectableInputs = (library) => { [], options: SORT_PROP_OPTIONS, onSelect: (event) => { - const queryParams = new URLSearchParams([['sort_prop', event.value]]); if (library.selected !== null) { - window.location.replace(`#/library/${encodeURIComponent(library.selected.type_name)}?${queryParams.toString()}`); + window.location.replace(`#/library/${encodeURIComponent(library.selected.type_name)}/${encodeURIComponent(event.value)}`); } } };