Cleanup SearchPage implementation

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;