Convert search page to react

package-lock.json

@@ -9504,7 +9504,6 @@
       "version": "15.7.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
       "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -9645,8 +9644,7 @@
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-      "dev": true
     },
     "read-file-stdin": {
       "version": "0.2.1",

package.json

@@ -75,6 +75,7 @@
     "native-promise-only": "^0.8.0-a",
     "page": "^1.11.6",
     "pdfjs-dist": "2.6.347",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "resize-observer-polyfill": "^1.5.1",

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({