Library sort param moved from query params to url params

This commit is contained in:
NikolaBorislavovHristov 2019-12-16 17:21:09 +02:00
parent 1096d62dec
commit 8a9dae6ddc
4 changed files with 12 additions and 22 deletions

View file

@ -12,8 +12,8 @@ const routesRegexp = {
urlParamsNames: ['addonTransportUrl', 'type', 'catalogId'] urlParamsNames: ['addonTransportUrl', 'type', 'catalogId']
}, },
library: { library: {
regexp: /^\/library(?:\/([^/]*))?$/, regexp: /^\/library(?:\/([^/]*)\/([^/]*))?$/,
urlParamsNames: ['type'] urlParamsNames: ['type', 'sort']
}, },
search: { search: {
regexp: /^\/search$/, regexp: /^\/search$/,

View file

@ -7,8 +7,8 @@ const useSelectableInputs = require('./useSelectableInputs');
const useItemOptions = require('./useItemOptions'); const useItemOptions = require('./useItemOptions');
const styles = require('./styles'); const styles = require('./styles');
const Library = ({ urlParams, queryParams }) => { const Library = ({ urlParams }) => {
const library = useLibrary(urlParams, queryParams); const library = useLibrary(urlParams);
const [typeSelect, sortPropSelect] = useSelectableInputs(library); const [typeSelect, sortPropSelect] = useSelectableInputs(library);
const [options, optionOnSelect] = useItemOptions(); const [options, optionOnSelect] = useItemOptions();
return ( return (
@ -73,8 +73,8 @@ const Library = ({ urlParams, queryParams }) => {
Library.propTypes = { Library.propTypes = {
urlParams: PropTypes.exact({ urlParams: PropTypes.exact({
type: PropTypes.string, type: PropTypes.string,
}), sort: PropTypes.string
queryParams: PropTypes.instanceOf(URLSearchParams) })
}; };
module.exports = Library; module.exports = Library;

View file

@ -46,20 +46,17 @@ const onNewLibraryState = (library) => {
} }
}; };
const useLibrary = (urlParams, queryParams) => { const useLibrary = (urlParams) => {
const { core } = useServices(); const { core } = useServices();
const loadLibraryAction = React.useMemo(() => { const loadLibraryAction = React.useMemo(() => {
if (typeof urlParams.type === 'string') { if (typeof urlParams.type === 'string' && typeof urlParams.sort === 'string') {
return { return {
action: 'Load', action: 'Load',
args: { args: {
load: 'LibraryFiltered', load: 'LibraryFiltered',
args: { args: {
type_name: urlParams.type, type_name: urlParams.type,
sort_prop: queryParams.has('sort_prop') ? sort_prop: urlParams.sort
queryParams.get('sort_prop')
:
null
} }
} }
}; };
@ -82,7 +79,7 @@ const useLibrary = (urlParams, queryParams) => {
}; };
} }
} }
}, [urlParams, queryParams]); }, [urlParams]);
return useModelState({ return useModelState({
model: 'library', model: 'library',
action: loadLibraryAction, action: loadLibraryAction,

View file

@ -16,13 +16,7 @@ const mapSelectableInputs = (library) => {
options: library.type_names options: library.type_names
.map((type) => ({ label: type, value: type })), .map((type) => ({ label: type, value: type })),
onSelect: (event) => { onSelect: (event) => {
const queryParams = new URLSearchParams( window.location.replace(`#/library/${encodeURIComponent(event.value)}/${encodeURIComponent(library.selected.sort_prop)}`);
library.selected !== null ?
[['sort_prop', library.selected.sort_prop]]
:
[]
);
window.location.replace(`#/library/${encodeURIComponent(event.value)}?${queryParams.toString()}`);
} }
}; };
const sortPropSelect = { const sortPropSelect = {
@ -33,9 +27,8 @@ const mapSelectableInputs = (library) => {
[], [],
options: SORT_PROP_OPTIONS, options: SORT_PROP_OPTIONS,
onSelect: (event) => { onSelect: (event) => {
const queryParams = new URLSearchParams([['sort_prop', event.value]]);
if (library.selected !== null) { 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)}`);
} }
} }
}; };