searchbar uses query prop instead of parsing hash

src/common/MainNavBar/MainNavBar.js

@@ -8,11 +8,12 @@ const TABS = [
     { route: 'library', label: 'Library', icon: 'ic_library', href: '#/library' }
 ];
 
-const MainNavBar = React.memo(({ className, route }) => {
+const MainNavBar = React.memo(({ className, route, query }) => {
     return (
         <NavBar
             className={className}
             route={route}
+            query={query}
             backButton={false}
             tabs={TABS}
             searchBar={true}
@@ -28,7 +29,8 @@ MainNavBar.displayName = 'MainNavBar';
 
 MainNavBar.propTypes = {
     className: PropTypes.string,
-    route: PropTypes.string
+    route: PropTypes.string,
+    query: PropTypes.string
 };
 
 module.exports = MainNavBar;

src/common/NavBar/NavBar.js

@@ -9,7 +9,7 @@ const NotificationsMenu = require('./NotificationsMenu');
 const NavMenu = require('./NavMenu');
 const styles = require('./styles');
 
-const NavBar = React.memo(({ className, route, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
+const NavBar = React.memo(({ className, route, query, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
@@ -46,7 +46,7 @@ const NavBar = React.memo(({ className, route, backButton, tabs, title, searchBa
                 searchBar ?
                     <React.Fragment>
                         <div className={styles['spacing']} />
-                        <SearchBar className={styles['search-bar']} active={route === 'search'} />
+                        <SearchBar className={styles['search-bar']} query={query} active={route === 'search'} />
                         <div className={styles['spacing']} />
                     </React.Fragment>
                     :
@@ -85,6 +85,7 @@ NavBar.displayName = 'NavBar';
 NavBar.propTypes = {
     className: PropTypes.string,
     route: PropTypes.string,
+    query: PropTypes.string,
     backButton: PropTypes.bool,
     tabs: PropTypes.arrayOf(PropTypes.shape({
         route: PropTypes.string,

src/common/NavBar/SearchBar/SearchBar.js

@@ -1,42 +1,30 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const UrlUtils = require('url');
 const Icon = require('stremio-icons/dom');
 const { useRouteFocused } = require('stremio-router');
 const Button = require('stremio/common/Button');
 const TextInput = require('stremio/common/TextInput');
-const useLocationHash = require('stremio/common/useLocationHash');
 const styles = require('./styles');
 
-const SearchBar = ({ className, active }) => {
-    const locationHash = useLocationHash();
+const SearchBar = ({ className, query, active }) => {
     const routeFocused = useRouteFocused();
     const searchInputRef = React.useRef(null);
-    const query = React.useMemo(() => {
-        if (active) {
-            const { search: locationSearch } = UrlUtils.parse(locationHash.slice(1));
-            const queryParams = new URLSearchParams(locationSearch);
-            return queryParams.has('search') ? queryParams.get('search') : '';
-        }
-
-        return '';
-    }, [active, locationHash]);
     const searchBarOnClick = React.useCallback(() => {
         if (!active) {
             window.location = '#/search';
         }
     }, [active]);
     const queryInputOnSubmit = React.useCallback(() => {
-        if (active) {
+        if (searchInputRef.current !== null) {
             window.location.replace(`#/search?search=${searchInputRef.current.value}`);
         }
-    }, [active]);
+    }, []);
     React.useEffect(() => {
-        if (active && routeFocused) {
+        if (routeFocused && active) {
             searchInputRef.current.focus();
         }
-    }, [active, routeFocused, query]);
+    }, [routeFocused, active, query]);
     return (
         <label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={searchBarOnClick}>
             {
@@ -65,6 +53,7 @@ const SearchBar = ({ className, active }) => {
 
 SearchBar.propTypes = {
     className: PropTypes.string,
+    query: PropTypes.string,
     active: PropTypes.bool
 };
 

src/routes/Search/Search.js

@@ -9,7 +9,22 @@ const Search = ({ queryParams }) => {
     const search = useSearch(queryParams);
     return (
         <div className={styles['search-container']}>
-            <MainNavBar className={styles['nav-bar']} route={'search'} />
+            <MainNavBar
+                className={styles['nav-bar']}
+                query={
+                    search.selected !== null ?
+                        search.selected.extra.reduce((query, [name, value]) => {
+                            if (name === 'search') {
+                                return value;
+                            }
+
+                            return query;
+                        }, null)
+                        :
+                        null
+                }
+                route={'search'}
+            />
             <div className={styles['search-content']}>
                 {
                     search.selected === null || search.selected.extra.every(([name]) => name !== 'search') ?