diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js index 7fb4a3572..69429f9d0 100644 --- a/src/routes/Library/Library.js +++ b/src/routes/Library/Library.js @@ -7,12 +7,12 @@ const useLibrary = require('./useLibrary'); const useSelectableInputs = require('./useSelectableInputs'); const styles = require('./styles'); -const Library = ({ model, urlParams, queryParams }) => { +const Library = ({ model, route, urlParams, queryParams }) => { const profile = useProfile(); const library = useLibrary(model, urlParams, queryParams); - const [typeSelect, sortSelect] = useSelectableInputs(library); + const [typeSelect, sortSelect] = useSelectableInputs(route, library); return ( - +
{ profile.auth !== null && library.type_names.length > 0 ? @@ -60,6 +60,7 @@ const Library = ({ model, urlParams, queryParams }) => { Library.propTypes = { model: PropTypes.string, + route: PropTypes.string, urlParams: PropTypes.shape({ type: PropTypes.string }), @@ -67,23 +68,24 @@ Library.propTypes = { }; module.exports = ({ urlParams, queryParams }) => { - const model = React.useMemo(() => { + const [model, route] = React.useMemo(() => { return typeof urlParams.path === 'string' ? urlParams.path.match(routesRegexp.library.regexp) ? - 'library' + ['library', 'library'] : urlParams.path.match(routesRegexp.continuewatching.regexp) ? - 'continue_watching' + ['continue_watching', 'continuewatching'] : - null + [null, null] : - null; + [null, null]; }, [urlParams.path]); if (typeof model === 'string') { return ( diff --git a/src/routes/Library/useSelectableInputs.js b/src/routes/Library/useSelectableInputs.js index 6bea29673..51685d169 100644 --- a/src/routes/Library/useSelectableInputs.js +++ b/src/routes/Library/useSelectableInputs.js @@ -6,7 +6,7 @@ const SORT_OPTIONS = [ { label: 'Watched', value: 'timeswatched' }, ]; -const mapSelectableInputs = (library) => { +const mapSelectableInputs = (route, library) => { const typeSelect = { title: 'Select type', selected: library.selected !== null ? @@ -18,7 +18,7 @@ const mapSelectableInputs = (library) => { onSelect: (event) => { const type = JSON.parse(event.value); const queryParams = new URLSearchParams(library.selected !== null ? [['sort', library.selected.sort]] : []); - window.location.replace(`#/library${type !== null ? `/${encodeURIComponent(type)}` : ''}?${queryParams.toString()}`); + window.location.replace(`#/${route}${type !== null ? `/${encodeURIComponent(type)}` : ''}?${queryParams.toString()}`); } }; const sortSelect = { @@ -31,15 +31,15 @@ const mapSelectableInputs = (library) => { onSelect: (event) => { const type = library.selected !== null ? library.selected.type_name : null; const queryParams = new URLSearchParams([['sort', event.value]]); - window.location.replace(`#/library${type !== null ? `/${encodeURIComponent(type)}` : ''}?${queryParams.toString()}`); + window.location.replace(`#/${route}${type !== null ? `/${encodeURIComponent(type)}` : ''}?${queryParams.toString()}`); } }; return [typeSelect, sortSelect]; }; -const useSelectableInputs = (library) => { +const useSelectableInputs = (route, library) => { const selectableInputs = React.useMemo(() => { - return mapSelectableInputs(library); + return mapSelectableInputs(route, library); }, [library]); return selectableInputs; };