From 7011d09b4b40038daa74a986588eb6f8f7ec67ec Mon Sep 17 00:00:00 2001
From: David Stensland <me@terite.com>
Date: Sat, 24 Feb 2024 12:18:10 -0800
Subject: [PATCH] use LinkButton in SearchSuggestions

---
 src/components/search/SearchSuggestions.tsx | 40 ++++++++++-----------
 1 file changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/components/search/SearchSuggestions.tsx b/src/components/search/SearchSuggestions.tsx
index fb9c8ac5d9..b8e63bd42a 100644
--- a/src/components/search/SearchSuggestions.tsx
+++ b/src/components/search/SearchSuggestions.tsx
@@ -1,17 +1,19 @@
-import React, { type FC } from 'react';
-import { useSearchSuggestions } from 'hooks/searchHook';
+import React, { FunctionComponent, useEffect, useState } from 'react';
+
 import Loading from 'components/loading/LoadingComponent';
 import { appRouter } from '../router/appRouter';
-import globalize from '../../lib/globalize';
-import LinkButton from 'elements/emby-button/LinkButton';
+import { useSearchSuggestions } from 'hooks/searchHook/useSearchSuggestions';
+import globalize from 'lib/globalize';
+import LinkButton from '../../elements/emby-button/LinkButton';
+
 import '../../elements/emby-button/emby-button';
 
-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 }) => {
+    const { isLoading, data: suggestions } = useSearchSuggestions(parentId || undefined);
 
     if (isLoading) return <Loading />;
 
@@ -27,19 +29,13 @@ const SearchSuggestions: FC<SearchSuggestionsProps> = ({ parentId }) => {
             </div>
 
             <div className='searchSuggestionsList padded-left padded-right'>
-                {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>
+                {suggestions?.map(item => (
+                    <LinkButton key={item.Id}
+                        className='button-link'
+                        style={{ display: 'inline-block', padding: '0.5em 1em' }}
+                        href={appRouter.getRouteUrl(item)}>
+                        {item.Name}
+                    </LinkButton>
                 ))}
             </div>
         </div>