mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-21 07:32:02 +00:00
Library sort param moved from query params to url params
This commit is contained in:
parent
1096d62dec
commit
8a9dae6ddc
4 changed files with 12 additions and 22 deletions
|
|
@ -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$/,
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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)}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue