Cleanup SearchPage implementation

src/components/pages/SearchPage.js

@@ -1,57 +1,22 @@
 import PropTypes from 'prop-types';
-import React, { useEffect, useRef, useState } from 'react';
-import { Events } from 'jellyfin-apiclient';
+import React, { useState } from 'react';
 
-import SearchFields from '../search/searchfields';
-import SearchResults from '../search/searchresults';
+import SearchFieldsComponent from '../search/SearchFieldsComponent';
+import SearchResultsComponent from '../search/SearchResultsComponent';
 
 const SearchPage = ({ serverId, parentId, collectionType }) => {
-    const [ searchFields, setSearchFields ] = useState(null);
-    const searchFieldsContainer = useRef(null);
-    const [ searchResults, setSearchResults ] = useState(null);
-    const searchResultsContainer = useRef(null);
-
-    useEffect(() => {
-        if (!searchFields) {
-            setSearchFields(
-                new SearchFields({
-                    element: searchFieldsContainer.current
-                })
-            );
-
-            setSearchResults(
-                new SearchResults({
-                    element: searchResultsContainer.current,
-                    serverId: serverId || ApiClient.serverId(),
-                    parentId,
-                    collectionType
-                })
-            );
-        }
-
-        return () => {
-            searchFields?.destroy();
-            searchResults?.destroy();
-        };
-    }, []);
-
-    useEffect(() => {
-        if (searchFields) {
-            Events.on(searchFields, 'search', (e, value) => {
-                searchResults.search(value);
-            });
-        }
-    }, [ searchFields ]);
+    const [ query, setQuery ] = useState(null);
 
     return (
         <>
-            <div
-                className='padded-left padded-right searchFields'
-                ref={searchFieldsContainer}
+            <SearchFieldsComponent
+                onSearch={setQuery}
             />
-            <div
-                className='searchResults padded-bottom-page padded-top'
-                ref={searchResultsContainer}
+            <SearchResultsComponent
+                serverId={serverId || ApiClient.serverId()}
+                parentId={parentId}
+                collectionType={collectionType}
+                query={query}
             />
         </>
     );

src/components/search/SearchFieldsComponent.js

@@ -0,0 +1,41 @@
+import { Events } from 'jellyfin-apiclient';
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+
+import SearchFields from './searchfields';
+
+const SearchFieldsComponent = ({ onSearch = () => {} }) => {
+    const [ searchFields, setSearchFields ] = useState(null);
+    const searchFieldsElement = useRef(null);
+
+    useEffect(() => {
+        setSearchFields(
+            new SearchFields({ element: searchFieldsElement.current })
+        );
+
+        return () => {
+            searchFields?.destroy();
+        };
+    }, []);
+
+    useEffect(() => {
+        if (searchFields) {
+            Events.on(searchFields, 'search', (e, value) => {
+                onSearch(value);
+            });
+        }
+    }, [ searchFields ]);
+
+    return (
+        <div
+            className='padded-left padded-right searchFields'
+            ref={searchFieldsElement}
+        />
+    );
+};
+
+SearchFieldsComponent.propTypes = {
+    onSearch: PropTypes.func
+};
+
+export default SearchFieldsComponent;

src/components/search/SearchResultsComponent.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+
+import SearchResults from './searchresults';
+
+const SearchResultsComponent = ({ serverId, parentId, collectionType, query }) => {
+    const [ searchResults, setSearchResults ] = useState(null);
+    const searchResultsElement = useRef(null);
+
+    useEffect(() => {
+        setSearchResults(
+            new SearchResults({
+                element: searchResultsElement.current,
+                serverId: serverId || ApiClient.serverId(),
+                parentId,
+                collectionType
+            })
+        );
+
+        return () => {
+            searchResults?.destroy();
+        };
+    }, []);
+
+    useEffect(() => {
+        searchResults?.search(query);
+    }, [ query ]);
+
+    return (
+        <div
+            className='searchResults padded-bottom-page padded-top'
+            ref={searchResultsElement}
+        />
+    );
+};
+
+SearchResultsComponent.propTypes = {
+    serverId: PropTypes.string,
+    parentId: PropTypes.string,
+    collectionType: PropTypes.string,
+    query: PropTypes.string
+};
+
+export default SearchResultsComponent;