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

Refactor search  page

src/components/search/LiveTVSearchResults.tsx

@@ -1,191 +0,0 @@
-import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
-import type { ApiClient } from 'jellyfin-apiclient';
-import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
-import classNames from 'classnames';
-import React, { type FC, useCallback, useEffect, useState } from 'react';
-import { useDebounceValue } from 'usehooks-ts';
-
-import globalize from '../../scripts/globalize';
-import ServerConnections from '../ServerConnections';
-import SearchResultsRow from './SearchResultsRow';
-
-const CARD_OPTIONS = {
-    preferThumb: true,
-    inheritThumb: false,
-    showParentTitleOrTitle: true,
-    showTitle: false,
-    coverImage: true,
-    overlayMoreButton: true,
-    showAirTime: true,
-    showAirDateTime: true,
-    showChannelName: true
-};
-
-type LiveTVSearchResultsProps = {
-    serverId?: string;
-    parentId?: string | null;
-    collectionType?: string | null;
-    query?: string;
-};
-
-/*
- * React component to display search result rows for live tv library search
- */
-const LiveTVSearchResults: FC<LiveTVSearchResultsProps> = ({ serverId = window.ApiClient.serverId(), parentId, collectionType, query }: LiveTVSearchResultsProps) => {
-    const [ movies, setMovies ] = useState<BaseItemDto[]>([]);
-    const [ episodes, setEpisodes ] = useState<BaseItemDto[]>([]);
-    const [ sports, setSports ] = useState<BaseItemDto[]>([]);
-    const [ kids, setKids ] = useState<BaseItemDto[]>([]);
-    const [ news, setNews ] = useState<BaseItemDto[]>([]);
-    const [ programs, setPrograms ] = useState<BaseItemDto[]>([]);
-    const [ channels, setChannels ] = useState<BaseItemDto[]>([]);
-    const [ debouncedQuery ] = useDebounceValue(query, 500);
-
-    const getDefaultParameters = useCallback(() => ({
-        ParentId: parentId,
-        searchTerm: debouncedQuery,
-        Limit: 24,
-        Fields: 'PrimaryImageAspectRatio,CanDelete,MediaSourceCount',
-        Recursive: true,
-        EnableTotalRecordCount: false,
-        ImageTypeLimit: 1,
-        IncludePeople: false,
-        IncludeMedia: false,
-        IncludeGenres: false,
-        IncludeStudios: false,
-        IncludeArtists: false
-    }), [ parentId, debouncedQuery ]);
-
-    useEffect(() => {
-        const fetchItems = (apiClient: ApiClient, params = {}) => apiClient?.getItems(
-            apiClient?.getCurrentUserId(),
-            {
-                ...getDefaultParameters(),
-                IncludeMedia: true,
-                ...params
-            }
-        );
-
-        // Reset state
-        setMovies([]);
-        setEpisodes([]);
-        setSports([]);
-        setKids([]);
-        setNews([]);
-        setPrograms([]);
-        setChannels([]);
-
-        if (!debouncedQuery || collectionType !== CollectionType.Livetv) {
-            return;
-        }
-
-        const apiClient = ServerConnections.getApiClient(serverId);
-
-        // Movies row
-        fetchItems(apiClient, {
-            IncludeItemTypes: 'LiveTvProgram',
-            IsMovie: true
-        })
-            .then(result => setMovies(result.Items || []))
-            .catch(() => setMovies([]));
-        // Episodes row
-        fetchItems(apiClient, {
-            IncludeItemTypes: 'LiveTvProgram',
-            IsMovie: false,
-            IsSeries: true,
-            IsSports: false,
-            IsKids: false,
-            IsNews: false
-        })
-            .then(result => setEpisodes(result.Items || []))
-            .catch(() => setEpisodes([]));
-        // Sports row
-        fetchItems(apiClient, {
-            IncludeItemTypes: 'LiveTvProgram',
-            IsSports: true
-        })
-            .then(result => setSports(result.Items || []))
-            .catch(() => setSports([]));
-        // Kids row
-        fetchItems(apiClient, {
-            IncludeItemTypes: 'LiveTvProgram',
-            IsKids: true
-        })
-            .then(result => setKids(result.Items || []))
-            .catch(() => setKids([]));
-        // News row
-        fetchItems(apiClient, {
-            IncludeItemTypes: 'LiveTvProgram',
-            IsNews: true
-        })
-            .then(result => setNews(result.Items || []))
-            .catch(() => setNews([]));
-        // Programs row
-        fetchItems(apiClient, {
-            IncludeItemTypes: 'LiveTvProgram',
-            IsMovie: false,
-            IsSeries: false,
-            IsSports: false,
-            IsKids: false,
-            IsNews: false
-        })
-            .then(result => setPrograms(result.Items || []))
-            .catch(() => setPrograms([]));
-        // Channels row
-        fetchItems(apiClient, { IncludeItemTypes: 'TvChannel' })
-            .then(result => setChannels(result.Items || []))
-            .catch(() => setChannels([]));
-    }, [collectionType, debouncedQuery, getDefaultParameters, parentId, serverId]);
-
-    return (
-        <div
-            className={classNames(
-                'searchResults',
-                'padded-bottom-page',
-                'padded-top',
-                { 'hide': !debouncedQuery || collectionType !== CollectionType.Livetv }
-            )}
-        >
-            <SearchResultsRow
-                title={globalize.translate('Movies')}
-                items={movies}
-                cardOptions={{
-                    ...CARD_OPTIONS,
-                    shape: 'overflowPortrait'
-                }}
-            />
-            <SearchResultsRow
-                title={globalize.translate('Episodes')}
-                items={episodes}
-                cardOptions={CARD_OPTIONS}
-            />
-            <SearchResultsRow
-                title={globalize.translate('Sports')}
-                items={sports}
-                cardOptions={CARD_OPTIONS}
-            />
-            <SearchResultsRow
-                title={globalize.translate('Kids')}
-                items={kids}
-                cardOptions={CARD_OPTIONS}
-            />
-            <SearchResultsRow
-                title={globalize.translate('News')}
-                items={news}
-                cardOptions={CARD_OPTIONS}
-            />
-            <SearchResultsRow
-                title={globalize.translate('Programs')}
-                items={programs}
-                cardOptions={CARD_OPTIONS}
-            />
-            <SearchResultsRow
-                title={globalize.translate('Channels')}
-                items={channels}
-                cardOptions={{ shape: 'square' }}
-            />
-        </div>
-    );
-};
-
-export default LiveTVSearchResults;

src/components/search/SearchFields.tsx

@@ -1,25 +1,22 @@
 import React, { type ChangeEvent, type FC, useCallback, useRef } from 'react';
-
 import AlphaPicker from '../alphaPicker/AlphaPickerComponent';
 import Input from 'elements/emby-input/Input';
 import globalize from '../../scripts/globalize';
 import layoutManager from '../layoutManager';
 import browser from '../../scripts/browser';
-
 import 'material-design-icons-iconfont';
-
 import '../../styles/flexstyles.scss';
 import './searchfields.scss';
 
-type SearchFieldsProps = {
+interface SearchFieldsProps {
     query: string,
     onSearch?: (query: string) => void
-};
+}
 
 const SearchFields: FC<SearchFieldsProps> = ({
     onSearch = () => { /* no-op */ },
     query
-}: SearchFieldsProps) => {
+}) => {
     const inputRef = useRef<HTMLInputElement>(null);
 
     const onAlphaPicked = useCallback((e: Event) => {

src/components/search/SearchResults.tsx

@@ -1,388 +1,58 @@
-import type { BaseItemDto, BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
-import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
-import type { ApiClient } from 'jellyfin-apiclient';
-import classNames from 'classnames';
-import React, { type FC, useCallback, useEffect, useState } from 'react';
-import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
-import { useDebounceValue } from 'usehooks-ts';
-
+import React, { type FC } from 'react';
+import { Section, useSearchItems } from 'hooks/searchHook';
 import globalize from '../../scripts/globalize';
-import ServerConnections from '../ServerConnections';
-import SearchResultsRow from './SearchResultsRow';
 import Loading from '../loading/LoadingComponent';
+import SearchResultsRow from './SearchResultsRow';
+import { CardShape } from 'utils/card';
 
-interface ParametersOptions {
-    ParentId?: string | null;
-    searchTerm?: string;
-    Limit?: number;
-    Fields?: string;
-    Recursive?: boolean;
-    EnableTotalRecordCount?: boolean;
-    ImageTypeLimit?: number;
-    IncludePeople?: boolean;
-    IncludeMedia?: boolean;
-    IncludeGenres?: boolean;
-    IncludeStudios?: boolean;
-    IncludeArtists?: boolean;
-    IsMissing?: boolean;
-    IncludeItemTypes?: BaseItemKind;
-    MediaTypes?: string;
-    ExcludeItemTypes?: string;
+interface SearchResultsProps {
+    parentId?: string;
+    collectionType?: string;
+    query?: string;
 }
 
-type SearchResultsProps = {
-    serverId?: string;
-    parentId?: string | null;
-    collectionType?: string | null;
-    query?: string;
-};
-
-const ensureNonNullItems = (result: BaseItemDtoQueryResult) => ({
-    ...result,
-    Items: result.Items || []
-});
-
-const isMovies = (collectionType: string) => collectionType === CollectionType.Movies;
-
-const isMusic = (collectionType: string) => collectionType === CollectionType.Music;
-
-const isTVShows = (collectionType: string) => collectionType === CollectionType.Tvshows;
-
 /*
- * React component to display search result rows for global search and non-live tv library search
+ * React component to display search result rows for global search and library view search
  */
-const SearchResults: FC<SearchResultsProps> = ({ serverId = window.ApiClient.serverId(), parentId, collectionType, query }: SearchResultsProps) => {
-    const [ movies, setMovies ] = useState<BaseItemDto[]>([]);
-    const [ shows, setShows ] = useState<BaseItemDto[]>([]);
-    const [ episodes, setEpisodes ] = useState<BaseItemDto[]>([]);
-    const [ videos, setVideos ] = useState<BaseItemDto[]>([]);
-    const [ programs, setPrograms ] = useState<BaseItemDto[]>([]);
-    const [ channels, setChannels ] = useState<BaseItemDto[]>([]);
-    const [ playlists, setPlaylists ] = useState<BaseItemDto[]>([]);
-    const [ artists, setArtists ] = useState<BaseItemDto[]>([]);
-    const [ albums, setAlbums ] = useState<BaseItemDto[]>([]);
-    const [ songs, setSongs ] = useState<BaseItemDto[]>([]);
-    const [ photoAlbums, setPhotoAlbums ] = useState<BaseItemDto[]>([]);
-    const [ photos, setPhotos ] = useState<BaseItemDto[]>([]);
-    const [ audioBooks, setAudioBooks ] = useState<BaseItemDto[]>([]);
-    const [ books, setBooks ] = useState<BaseItemDto[]>([]);
-    const [ people, setPeople ] = useState<BaseItemDto[]>([]);
-    const [ collections, setCollections ] = useState<BaseItemDto[]>([]);
-    const [ isLoading, setIsLoading ] = useState(false);
-    const [ debouncedQuery ] = useDebounceValue(query, 500);
+const SearchResults: FC<SearchResultsProps> = ({
+    parentId,
+    collectionType,
+    query
+}) => {
+    const { isLoading, data } = useSearchItems(parentId, collectionType, query);
 
-    const getDefaultParameters = useCallback(() => ({
-        ParentId: parentId,
-        searchTerm: debouncedQuery,
-        Limit: 100,
-        Fields: 'PrimaryImageAspectRatio,CanDelete,MediaSourceCount',
-        Recursive: true,
-        EnableTotalRecordCount: false,
-        ImageTypeLimit: 1,
-        IncludePeople: false,
-        IncludeMedia: false,
-        IncludeGenres: false,
-        IncludeStudios: false,
-        IncludeArtists: false
-    }), [ parentId, debouncedQuery ]);
+    if (isLoading) return <Loading />;
 
-    const fetchArtists = useCallback((apiClient: ApiClient, params: ParametersOptions = {}) => (
-        apiClient?.getArtists(
-            apiClient.getCurrentUserId(),
-            {
-                ...getDefaultParameters(),
-                IncludeArtists: true,
-                ...params
-            }
-        ).then(ensureNonNullItems)
-    ), [getDefaultParameters]);
+    if (!data?.length) {
+        return (
+            <div className='noItemsMessage centerMessage'>
+                {globalize.translate('SearchResultsEmpty', query)}
+            </div>
+        );
+    }
 
-    const fetchItems = useCallback(async (apiClient?: ApiClient, params: ParametersOptions = {}) => {
-        if (!apiClient) {
-            console.error('[SearchResults] no apiClient; unable to fetch items');
-            return {
-                Items: []
-            };
-        }
-
-        const options: ParametersOptions = {
-            ...getDefaultParameters(),
-            IncludeMedia: true,
-            ...params
-        };
-
-        if (params.IncludeItemTypes === BaseItemKind.Episode) {
-            const user = await apiClient.getCurrentUser();
-            if (!user?.Configuration?.DisplayMissingEpisodes) {
-                options.IsMissing = false;
-            }
-        }
-
-        return apiClient.getItems(
-            apiClient.getCurrentUserId(),
-            options
-        ).then(ensureNonNullItems);
-    }, [getDefaultParameters]);
-
-    const fetchPeople = useCallback((apiClient: ApiClient, params: ParametersOptions = {}) => (
-        apiClient?.getPeople(
-            apiClient.getCurrentUserId(),
-            {
-                ...getDefaultParameters(),
-                IncludePeople: true,
-                ...params
-            }
-        ).then(ensureNonNullItems)
-    ), [getDefaultParameters]);
-
-    useEffect(() => {
-        if (query) setIsLoading(true);
-    }, [ query ]);
-
-    useEffect(() => {
-        // Reset state
-        setMovies([]);
-        setShows([]);
-        setEpisodes([]);
-        setVideos([]);
-        setPrograms([]);
-        setChannels([]);
-        setPlaylists([]);
-        setArtists([]);
-        setAlbums([]);
-        setSongs([]);
-        setPhotoAlbums([]);
-        setPhotos([]);
-        setAudioBooks([]);
-        setBooks([]);
-        setPeople([]);
-        setCollections([]);
-
-        if (!debouncedQuery) {
-            setIsLoading(false);
-            return;
-        }
-
-        const apiClient = ServerConnections.getApiClient(serverId);
-        const fetchPromises = [];
-
-        // Movie libraries
-        if (!collectionType || isMovies(collectionType)) {
-            fetchPromises.push(
-                // Movies row
-                fetchItems(apiClient, { IncludeItemTypes: 'Movie' })
-                    .then(result => setMovies(result.Items))
-                    .catch(() => setMovies([]))
-            );
-        }
-
-        // TV Show libraries
-        if (!collectionType || isTVShows(collectionType)) {
-            fetchPromises.push(
-                // Shows row
-                fetchItems(apiClient, { IncludeItemTypes: 'Series' })
-                    .then(result => setShows(result.Items))
-                    .catch(() => setShows([])),
-                // Episodes row
-                fetchItems(apiClient, { IncludeItemTypes: 'Episode' })
-                    .then(result => setEpisodes(result.Items))
-                    .catch(() => setEpisodes([]))
-            );
-        }
-
-        // People are included for Movies and TV Shows
-        if (!collectionType || isMovies(collectionType) || isTVShows(collectionType)) {
-            fetchPromises.push(
-                // People row
-                fetchPeople(apiClient)
-                    .then(result => setPeople(result.Items))
-                    .catch(() => setPeople([]))
-            );
-        }
-
-        // Music libraries
-        if (!collectionType || isMusic(collectionType)) {
-            fetchPromises.push(
-                // Playlists row
-                fetchItems(apiClient, { IncludeItemTypes: 'Playlist' })
-                    .then(results => setPlaylists(results.Items))
-                    .catch(() => setPlaylists([])),
-                // Artists row
-                fetchArtists(apiClient)
-                    .then(result => setArtists(result.Items))
-                    .catch(() => setArtists([])),
-                // Albums row
-                fetchItems(apiClient, { IncludeItemTypes: 'MusicAlbum' })
-                    .then(result => setAlbums(result.Items))
-                    .catch(() => setAlbums([])),
-                // Songs row
-                fetchItems(apiClient, { IncludeItemTypes: 'Audio' })
-                    .then(result => setSongs(result.Items))
-                    .catch(() => setSongs([]))
-            );
-        }
-
-        // Other libraries do not support in-library search currently
-        if (!collectionType) {
-            fetchPromises.push(
-                // Videos row
-                fetchItems(apiClient, {
-                    MediaTypes: 'Video',
-                    ExcludeItemTypes: 'Movie,Episode,TvChannel'
-                })
-                    .then(result => setVideos(result.Items))
-                    .catch(() => setVideos([])),
-                // Programs row
-                fetchItems(apiClient, { IncludeItemTypes: 'LiveTvProgram' })
-                    .then(result => setPrograms(result.Items))
-                    .catch(() => setPrograms([])),
-                // Channels row
-                fetchItems(apiClient, { IncludeItemTypes: 'TvChannel' })
-                    .then(result => setChannels(result.Items))
-                    .catch(() => setChannels([])),
-                // Photo Albums row
-                fetchItems(apiClient, { IncludeItemTypes: 'PhotoAlbum' })
-                    .then(result => setPhotoAlbums(result.Items))
-                    .catch(() => setPhotoAlbums([])),
-                // Photos row
-                fetchItems(apiClient, { IncludeItemTypes: 'Photo' })
-                    .then(result => setPhotos(result.Items))
-                    .catch(() => setPhotos([])),
-                // Audio Books row
-                fetchItems(apiClient, { IncludeItemTypes: 'AudioBook' })
-                    .then(result => setAudioBooks(result.Items))
-                    .catch(() => setAudioBooks([])),
-                // Books row
-                fetchItems(apiClient, { IncludeItemTypes: 'Book' })
-                    .then(result => setBooks(result.Items))
-                    .catch(() => setBooks([])),
-                // Collections row
-                fetchItems(apiClient, { IncludeItemTypes: 'BoxSet' })
-                    .then(result => setCollections(result.Items))
-                    .catch(() => setCollections([]))
-            );
-        }
-        Promise.all(fetchPromises)
-            .then(() => {
-                setIsLoading(false); // Set loading to false when all fetch calls are done
-            })
-            .catch((error) => {
-                console.error('An error occurred while fetching data:', error);
-                setIsLoading(false); // Set loading to false even if an error occurs
-            });
-    }, [collectionType, fetchArtists, fetchItems, fetchPeople, debouncedQuery, serverId]);
-
-    const allEmpty = [movies, shows, episodes, videos, programs, channels, playlists, artists, albums, songs, photoAlbums, photos, audioBooks, books, people, collections].every(arr => arr.length === 0);
+    const renderSection = (section: Section, index: number) => {
+        return (
+            <SearchResultsRow
+                key={`${section.title}-${index}`}
+                title={globalize.translate(section.title)}
+                items={section.items}
+                cardOptions={{
+                    shape: CardShape.AutoOverflow,
+                    scalable: true,
+                    showTitle: true,
+                    overlayText: false,
+                    centerText: true,
+                    allowBottomPadding: false,
+                    ...section.cardOptions
+                }}
+            />
+        );
+    };
 
     return (
-        <div
-            className={classNames(
-                'searchResults',
-                'padded-bottom-page',
-                'padded-top',
-                { 'hide': !debouncedQuery || collectionType === CollectionType.Livetv }
-            )}
-        >
-            {isLoading ? (
-                <Loading />
-            ) : (
-                <>
-                    <SearchResultsRow
-                        title={globalize.translate('Movies')}
-                        items={movies}
-                        cardOptions={{ showYear: true }}
-                    />
-                    <SearchResultsRow
-                        title={globalize.translate('Shows')}
-                        items={shows}
-                        cardOptions={{ showYear: true }}
-                    />
-                    <SearchResultsRow
-                        title={globalize.translate('Episodes')}
-                        items={episodes}
-                        cardOptions={{
-                            coverImage: true,
-                            showParentTitle: true
-                        }}
-                    />
-                    <SearchResultsRow
-                        title={globalize.translate('HeaderVideos')}
-                        items={videos}
-                        cardOptions={{ showParentTitle: true }}
-                    />
-                    <SearchResultsRow
-                        title={globalize.translate('Programs')}
-                        items={programs}
-                        cardOptions={{
-                            preferThumb: true,
-                            inheritThumb: false,
-                            showParentTitleOrTitle: true,
-                            showTitle: false,
-                            coverImage: true,
-                            overlayMoreButton: true,
-                            showAirTime: true,
-                            showAirDateTime: true,
-                            showChannelName: true
-                        }}
-                    />
-                    <SearchResultsRow
-                        title={globalize.translate('Channels')}
-                        items={channels}
-                        cardOptions={{ shape: 'square' }}
-                    />
-                    <SearchResultsRow
-                        title={globalize.translate('Playlists')}
-                        items={playlists}
-                    />
-                    <SearchResultsRow
-                        title={globalize.translate('Artists')}
-                        items={artists}
-                        cardOptions={{ coverImage: true }}
-                    />
-                    <SearchResultsRow
-                        title={globalize.translate('Albums')}
-                        items={albums}
-                        cardOptions={{ showParentTitle: true }}
-                    />
-                    <SearchResultsRow
-                        title={globalize.translate('Songs')}
-                        items={songs}
-                        cardOptions={{ showParentTitle: true }}
-                    />
-                    <SearchResultsRow
-                        title={globalize.translate('HeaderPhotoAlbums')}
-                        items={photoAlbums}
-                    />
-                    <SearchResultsRow
-                        title={globalize.translate('Photos')}
-                        items={photos}
-                    />
-                    <SearchResultsRow
-                        title={globalize.translate('HeaderAudioBooks')}
-                        items={audioBooks}
-                    />
-                    <SearchResultsRow
-                        title={globalize.translate('Books')}
-                        items={books}
-                    />
-                    <SearchResultsRow
-                        title={globalize.translate('Collections')}
-                        items={collections}
-                    />
-                    <SearchResultsRow
-                        title={globalize.translate('People')}
-                        items={people}
-                        cardOptions={{ coverImage: true }}
-                    />
-
-                    {allEmpty && debouncedQuery && !isLoading && (
-                        <div className='noItemsMessage centerMessage'>
-                            {globalize.translate('SearchResultsEmpty', debouncedQuery)}
-                        </div>
-                    )}
-                </>
-            )}
-
+        <div className={'searchResults, padded-top, padded-bottom-page'}>
+            {data.map((section, index) => renderSection(section, index))}
         </div>
     );
 };

src/components/search/SearchResultsRow.tsx

@@ -1,8 +1,8 @@
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
-import React, { FunctionComponent, useEffect, useRef } from 'react';
+import React, { type FC, useEffect, useRef } from 'react';
 
 import cardBuilder from '../cardbuilder/cardBuilder';
-
+import type { CardOptions } from 'types/cardOptions';
 import '../../elements/emby-scroller/emby-scroller';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -16,46 +16,18 @@ const createScroller = ({ title = '' }) => ({
 </div>`
 });
 
-type CardOptions = {
-    itemsContainer?: HTMLElement,
-    parentContainer?: HTMLElement,
-    allowBottomPadding?: boolean,
-    centerText?: boolean,
-    coverImage?: boolean,
-    inheritThumb?: boolean,
-    overlayMoreButton?: boolean,
-    overlayText?: boolean,
-    preferThumb?: boolean,
-    scalable?: boolean,
-    shape?: string,
-    showParentTitle?: boolean,
-    showParentTitleOrTitle?: boolean,
-    showAirTime?: boolean,
-    showAirDateTime?: boolean,
-    showChannelName?: boolean,
-    showTitle?: boolean,
-    showYear?: boolean
-};
-
-type SearchResultsRowProps = {
+interface SearchResultsRowProps {
     title?: string;
     items?: BaseItemDto[];
     cardOptions?: CardOptions;
-};
+}
 
-const SearchResultsRow: FunctionComponent<SearchResultsRowProps> = ({ title, items = [], cardOptions = {} }: SearchResultsRowProps) => {
+const SearchResultsRow: FC<SearchResultsRowProps> = ({ title, items = [], cardOptions = {} }) => {
     const element = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         cardBuilder.buildCards(items, {
             itemsContainer: element.current?.querySelector('.itemsContainer'),
-            parentContainer: element.current,
-            shape: 'autooverflow',
-            scalable: true,
-            showTitle: true,
-            overlayText: false,
-            centerText: true,
-            allowBottomPadding: false,
             ...cardOptions
         });
     }, [cardOptions, items]);

src/components/search/SearchSuggestions.tsx

@@ -1,57 +1,19 @@
-import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
-import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
-import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
-import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
-import escapeHtml from 'escape-html';
-import React, { FunctionComponent, useEffect, useState } from 'react';
-
+import React, { type FC } from 'react';
+import { useSearchSuggestions } from 'hooks/searchHook';
+import Loading from 'components/loading/LoadingComponent';
 import { appRouter } from '../router/appRouter';
-import { useApi } from '../../hooks/useApi';
 import globalize from '../../scripts/globalize';
-
+import LinkButton from 'elements/emby-button/LinkButton';
 import '../../elements/emby-button/emby-button';
 
-// There seems to be some compatibility issues here between
-// React and our legacy web components, so we need to inject
-// them as an html string for now =/
-const createSuggestionLink = ({ name, href }: { name: string, href: string }) => ({
-    __html: `<a
-    is='emby-linkbutton'
-    class='button-link'
-    style='display: inline-block; padding: 0.5em 1em;'
-    href='${href}'
->${escapeHtml(name)}</a>`
-});
+interface SearchSuggestionsProps {
+    parentId?: string;
+}
 
-type SearchSuggestionsProps = {
-    parentId?: string | null;
-};
+const SearchSuggestions: FC<SearchSuggestionsProps> = ({ parentId }) => {
+    const { isLoading, data: suggestions } = useSearchSuggestions(parentId);
 
-const SearchSuggestions: FunctionComponent<SearchSuggestionsProps> = ({ parentId }: SearchSuggestionsProps) => {
-    const [ suggestions, setSuggestions ] = useState<BaseItemDto[]>([]);
-    const { api, user } = useApi();
-
-    useEffect(() => {
-        if (api && user?.Id) {
-            getItemsApi(api)
-                .getItems({
-                    userId: user.Id,
-                    sortBy: [ItemSortBy.IsFavoriteOrLiked, ItemSortBy.Random],
-                    includeItemTypes: [BaseItemKind.Movie, BaseItemKind.Series, BaseItemKind.MusicArtist],
-                    limit: 20,
-                    recursive: true,
-                    imageTypeLimit: 0,
-                    enableImages: false,
-                    parentId: parentId || undefined,
-                    enableTotalRecordCount: false
-                })
-                .then(result => setSuggestions(result.data.Items || []))
-                .catch(err => {
-                    console.error('[SearchSuggestions] failed to fetch search suggestions', err);
-                    setSuggestions([]);
-                });
-        }
-    }, [ api, parentId, user ]);
+    if (isLoading) return <Loading />;
 
     return (
         <div
@@ -65,14 +27,19 @@ const SearchSuggestions: FunctionComponent<SearchSuggestionsProps> = ({ parentId
             </div>
 
             <div className='searchSuggestionsList padded-left padded-right'>
-                {suggestions.map(item => (
-                    <div
-                        key={`suggestion-${item.Id}`}
-                        dangerouslySetInnerHTML={createSuggestionLink({
-                            name: item.Name || '',
-                            href: appRouter.getRouteUrl(item)
-                        })}
-                    />
+                {suggestions?.map((item) => (
+                    <div key={`suggestion-${item.Id}`}>
+                        <LinkButton
+                            className='button-link'
+                            href={appRouter.getRouteUrl(item)}
+                            style={{
+                                display: 'inline-block',
+                                padding: '0.5em 1em'
+                            }}
+                        >
+                            {item.Name}
+                        </LinkButton>
+                    </div>
                 ))}
             </div>
         </div>