1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

Fix weird navigation when changing query param

This commit is contained in:
Bill Thornton 2024-02-16 20:22:15 -05:00
parent 2d667cabba
commit eaab0364d7

View file

@ -9,25 +9,36 @@ import LiveTVSearchResults from 'components/search/LiveTVSearchResults';
import { usePrevious } from 'hooks/usePrevious';
import globalize from 'scripts/globalize';
const COLLECTION_TYPE_PARAM = 'collectionType';
const PARENT_ID_PARAM = 'parentId';
const QUERY_PARAM = 'query';
const SERVER_ID_PARAM = 'serverId';
const Search: FC = () => {
const navigate = useNavigate();
const [ searchParams, setSearchParams ] = useSearchParams();
const urlQuery = searchParams.get('query') || '';
const urlQuery = searchParams.get(QUERY_PARAM) || '';
const [ query, setQuery ] = useState(urlQuery);
const prevQuery = usePrevious(query, '');
useEffect(() => {
if (query !== prevQuery) {
if (query === '' && urlQuery !== '') {
// The query input has been cleared; navigate back to the search landing page
navigate(-1);
// The query input has been cleared; remove the url param
searchParams.delete(QUERY_PARAM);
setSearchParams(searchParams, { replace: true });
} else if (query !== urlQuery) {
// Update the query url param value
searchParams.set('query', query);
setSearchParams(searchParams, { replace: !!urlQuery });
searchParams.set(QUERY_PARAM, query);
setSearchParams(searchParams, { replace: true });
}
} else if (query !== urlQuery) {
// Update the query if the query url param has changed
if (!urlQuery) {
searchParams.delete(QUERY_PARAM);
setSearchParams(searchParams, { replace: true });
}
setQuery(urlQuery);
}
}, [query, prevQuery, navigate, searchParams, setSearchParams, urlQuery]);
@ -41,19 +52,19 @@ const Search: FC = () => {
<SearchFields query={query} onSearch={setQuery} />
{!query
&& <SearchSuggestions
parentId={searchParams.get('parentId')}
parentId={searchParams.get(PARENT_ID_PARAM)}
/>
}
<SearchResults
serverId={searchParams.get('serverId') || window.ApiClient.serverId()}
parentId={searchParams.get('parentId')}
collectionType={searchParams.get('collectionType')}
serverId={searchParams.get(SERVER_ID_PARAM) || window.ApiClient.serverId()}
parentId={searchParams.get(PARENT_ID_PARAM)}
collectionType={searchParams.get(COLLECTION_TYPE_PARAM)}
query={query}
/>
<LiveTVSearchResults
serverId={searchParams.get('serverId') || window.ApiClient.serverId()}
parentId={searchParams.get('parentId')}
collectionType={searchParams.get('collectionType')}
serverId={searchParams.get(SERVER_ID_PARAM) || window.ApiClient.serverId()}
parentId={searchParams.get(PARENT_ID_PARAM)}
collectionType={searchParams.get(COLLECTION_TYPE_PARAM)}
query={query}
/>
</Page>