Fix code smells and dependency issue

src/components/alphaPicker/AlphaPickerComponent.js

@@ -21,10 +21,6 @@ const AlphaPickerComponent = ({ onAlphaPicked = () => {} }) => {
         };
     }, []);
 
-    useEffect(() => {
-
-    }, [ alphaPicker ]);
-
     return (
         <div
             ref={element}

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',

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;

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 =/

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 =/