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:
parent
2d667cabba
commit
eaab0364d7
1 changed files with 23 additions and 12 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue