From 35f6944310114c360b04769037c02467b63a64e7 Mon Sep 17 00:00:00 2001
From: Bill Thornton <billt2006@gmail.com>
Date: Mon, 7 Jun 2021 11:55:01 -0400
Subject: [PATCH] Fix code smells and dependency issue

---
 .../alphaPicker/AlphaPickerComponent.js          |  4 ----
 src/components/search/LiveTVSearchResults.js     | 10 +++++-----
 src/components/search/SearchResults.js           | 16 ++++++++--------
 src/components/search/SearchResultsRow.js        |  3 +++
 src/components/search/SearchSuggestions.js       |  2 ++
 5 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/components/alphaPicker/AlphaPickerComponent.js b/src/components/alphaPicker/AlphaPickerComponent.js
index 717b9f969..ae325c24f 100644
--- a/src/components/alphaPicker/AlphaPickerComponent.js
+++ b/src/components/alphaPicker/AlphaPickerComponent.js
@@ -21,10 +21,6 @@ const AlphaPickerComponent = ({ onAlphaPicked = () => {} }) => {
         };
     }, []);
 
-    useEffect(() => {
-
-    }, [ alphaPicker ]);
-
     return (
         <div
             ref={element}
diff --git a/src/components/search/LiveTVSearchResults.js b/src/components/search/LiveTVSearchResults.js
index c4ffa6a51..bae0b2961 100644
--- a/src/components/search/LiveTVSearchResults.js
+++ b/src/components/search/LiveTVSearchResults.js
@@ -18,8 +18,10 @@ const CARD_OPTIONS = {
     showChannelName: true
 };
 
+/*
+ * React component to display search result rows for live tv library search
+ */
 const LiveTVSearchResults = ({ serverId, parentId, collectionType, query }) => {
-    const [ apiClient, setApiClient ] = useState();
     const [ movies, setMovies ] = useState([]);
     const [ episodes, setEpisodes ] = useState([]);
     const [ sports, setSports ] = useState([]);
@@ -55,10 +57,6 @@ const LiveTVSearchResults = ({ serverId, parentId, collectionType, query }) => {
 
     const isLiveTV = () => collectionType === 'livetv';
 
-    useEffect(() => {
-        if (serverId) setApiClient(ServerConnections.getApiClient(serverId));
-    }, [ serverId ]);
-
     useEffect(() => {
         // Reset state
         setMovies([]);
@@ -70,6 +68,8 @@ const LiveTVSearchResults = ({ serverId, parentId, collectionType, query }) => {
         setVideos([]);
 
         if (query && isLiveTV()) {
+            const apiClient = ServerConnections.getApiClient(serverId);
+
             // Movies row
             fetchItems(apiClient, {
                 IncludeItemTypes: 'LiveTvProgram',
diff --git a/src/components/search/SearchResults.js b/src/components/search/SearchResults.js
index daf32d477..7aaa55b50 100644
--- a/src/components/search/SearchResults.js
+++ b/src/components/search/SearchResults.js
@@ -6,8 +6,10 @@ import globalize from '../../scripts/globalize';
 import ServerConnections from '../ServerConnections';
 import SearchResultsRow from './SearchResultsRow';
 
-const SearchResultsComponent = ({ serverId, parentId, collectionType, query }) => {
-    const [ apiClient, setApiClient ] = useState();
+/*
+ * React component to display search result rows for global search and non-live tv library search
+ */
+const SearchResults = ({ serverId, parentId, collectionType, query }) => {
     const [ movies, setMovies ] = useState([]);
     const [ shows, setShows ] = useState([]);
     const [ episodes, setEpisodes ] = useState([]);
@@ -71,10 +73,6 @@ const SearchResultsComponent = ({ serverId, parentId, collectionType, query }) =
 
     const isTVShows = () => collectionType === 'tvshows' || collectionType === 'tv';
 
-    useEffect(() => {
-        if (serverId) setApiClient(ServerConnections.getApiClient(serverId));
-    }, [ serverId ]);
-
     useEffect(() => {
         // Reset state
         setMovies([]);
@@ -93,6 +91,8 @@ const SearchResultsComponent = ({ serverId, parentId, collectionType, query }) =
         setPeople([]);
 
         if (query) {
+            const apiClient = ServerConnections.getApiClient(serverId);
+
             // Movie libraries
             if (!collectionType || isMovies()) {
                 // Movies row
@@ -248,11 +248,11 @@ const SearchResultsComponent = ({ serverId, parentId, collectionType, query }) =
     );
 };
 
-SearchResultsComponent.propTypes = {
+SearchResults.propTypes = {
     serverId: PropTypes.string,
     parentId: PropTypes.string,
     collectionType: PropTypes.string,
     query: PropTypes.string
 };
 
-export default SearchResultsComponent;
+export default SearchResults;
diff --git a/src/components/search/SearchResultsRow.js b/src/components/search/SearchResultsRow.js
index df40154cb..3667d8486 100644
--- a/src/components/search/SearchResultsRow.js
+++ b/src/components/search/SearchResultsRow.js
@@ -3,6 +3,9 @@ import React, { useEffect, useRef } from 'react';
 
 import cardBuilder from '../cardbuilder/cardBuilder';
 
+import '../../elements/emby-scroller/emby-scroller';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+
 // 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 =/
diff --git a/src/components/search/SearchSuggestions.js b/src/components/search/SearchSuggestions.js
index 23fab5cf1..fbfd2de8a 100644
--- a/src/components/search/SearchSuggestions.js
+++ b/src/components/search/SearchSuggestions.js
@@ -5,6 +5,8 @@ import { appRouter } from '../appRouter';
 import globalize from '../../scripts/globalize';
 import ServerConnections from '../ServerConnections';
 
+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 =/