Convert search page to react

src/components/pages/SearchPage.js

@@ -0,0 +1,66 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import { Events } from 'jellyfin-apiclient';
+
+import SearchFields from '../search/searchfields';
+import SearchResults from '../search/searchresults';
+
+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 ]);
+
+    return (
+        <>
+            <div
+                className='padded-left padded-right searchFields'
+                ref={searchFieldsContainer}
+            />
+            <div
+                className='searchResults padded-bottom-page padded-top'
+                ref={searchResultsContainer}
+            />
+        </>
+    );
+};
+
+SearchPage.propTypes = {
+    serverId: PropTypes.string,
+    parentId: PropTypes.string,
+    collectionType: PropTypes.string
+};
+
+export default SearchPage;