Refactor Search Page

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>