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

Merge pull request #5607 from grafixeyehero/Refactor-Search--Page

Browse source 
Refactor search  page
This commit is contained in:
Bill Thornton 2024-07-15 15:44:42 -04:00 • committed by GitHub
commit 0dfc09529a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 654 additions and 684 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,24 +1,25 @@
import React, { type FC, useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import Page from 'components/Page';
import SearchFields from 'components/search/SearchFields';
import SearchResults from 'components/search/SearchResults';
import SearchSuggestions from 'components/search/SearchSuggestions';
import LiveTVSearchResults from 'components/search/LiveTVSearchResults';
import { useDebounceValue } from 'usehooks-ts';
import { usePrevious } from 'hooks/usePrevious';
import globalize from 'scripts/globalize';
import Page from 'components/Page';
import SearchFields from 'components/search/SearchFields';
import SearchSuggestions from 'components/search/SearchSuggestions';
import SearchResults from 'components/search/SearchResults';
const COLLECTION_TYPE_PARAM = 'collectionType';
const PARENT_ID_PARAM = 'parentId';
const QUERY_PARAM = 'query';
const SERVER_ID_PARAM = 'serverId';
const Search: FC = () => {
const [ searchParams, setSearchParams ] = useSearchParams();
const [searchParams, setSearchParams] = useSearchParams();
const parentIdQuery = searchParams.get(PARENT_ID_PARAM) || undefined;
const collectionTypeQuery = searchParams.get(COLLECTION_TYPE_PARAM) || undefined;
const urlQuery = searchParams.get(QUERY_PARAM) || '';
const [ query, setQuery ] = useState(urlQuery);
const [query, setQuery] = useState(urlQuery);
const prevQuery = usePrevious(query, '');
const [debouncedQuery] = useDebounceValue(query, 500);
useEffect(() => {
if (query !== prevQuery) {
@ -49,23 +50,17 @@ const Search: FC = () => {
className='mainAnimatedPage libraryPage allLibraryPage noSecondaryNavPage'
>
<SearchFields query={query} onSearch={setQuery} />
{!query
&& <SearchSuggestions
parentId={searchParams.get(PARENT_ID_PARAM)}
{!query ? (
<SearchSuggestions
parentId={parentIdQuery}
/>
}
<SearchResults
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(SERVER_ID_PARAM) || window.ApiClient.serverId()}
parentId={searchParams.get(PARENT_ID_PARAM)}
collectionType={searchParams.get(COLLECTION_TYPE_PARAM)}
query={query}
/>
) : (
<SearchResults
parentId={parentIdQuery}
collectionType={collectionTypeQuery}
query={debouncedQuery}
/>
)}
</Page>
);
};