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

Fix weird navigation when changing query param

Browse source
This commit is contained in:
Bill Thornton 2024-02-16 20:22:15 -05:00
parent 2d667cabba
commit eaab0364d7
1 changed files with 23 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/apps/stable/routes/search.tsx
View file

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