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;

src/components/reactControllerFactory.js

@@ -7,7 +7,7 @@ export default (view, params, { detail }) => {
     if (detail.options?.pageComponent) {
         import(/* webpackChunkName: "[request]" */ `./pages/${detail.options.pageComponent}`)
             .then(({ default: component }) => {
-                ReactDOM.render(React.createElement(component), view);
+                ReactDOM.render(React.createElement(component, params), view);
             });
     }
 };

src/controllers/search.html

@@ -1,4 +1,2 @@
 <div id="searchPage" data-role="page" class="page libraryPage allLibraryPage noSecondaryNavPage" data-title="${Search}" data-backbutton="true">
-    <div class="padded-left padded-right searchFields"></div>
-    <div class="searchResults padded-bottom-page padded-top"></div>
 </div>

src/controllers/searchpage.js

@@ -1,36 +0,0 @@
-import SearchFields from '../components/search/searchfields';
-import SearchResults from '../components/search/searchresults';
-import { Events } from 'jellyfin-apiclient';
-
-export default function (view, params) {
-    function onSearch(e, value) {
-        self.searchResults.search(value);
-    }
-
-    const self = this;
-    view.addEventListener('viewshow', function () {
-        if (!self.searchFields) {
-            self.searchFields = new SearchFields({
-                element: view.querySelector('.searchFields')
-            });
-            self.searchResults = new SearchResults({
-                element: view.querySelector('.searchResults'),
-                serverId: params.serverId || ApiClient.serverId(),
-                parentId: params.parentId,
-                collectionType: params.collectionType
-            });
-            Events.on(self.searchFields, 'search', onSearch);
-        }
-    });
-    view.addEventListener('viewdestroy', function () {
-        if (self.searchFields) {
-            self.searchFields.destroy();
-            self.searchFields = null;
-        }
-
-        if (self.searchResults) {
-            self.searchResults.destroy();
-            self.searchResults = null;
-        }
-    });
-}

src/scripts/routes.js

@@ -310,7 +310,7 @@ import { appRouter } from '../components/appRouter';
     defineRoute({
         alias: '/search.html',
         path: 'search.html',
-        controller: 'searchpage'
+        pageComponent: 'SearchPage'
     });
 
     defineRoute({