diff --git a/src/common/MainNavBar/MainNavBar.js b/src/common/MainNavBar/MainNavBar.js index afbbce27b..e3ce70436 100644 --- a/src/common/MainNavBar/MainNavBar.js +++ b/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 ( { +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 ?
- +
: @@ -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, diff --git a/src/common/NavBar/SearchBar/SearchBar.js b/src/common/NavBar/SearchBar/SearchBar.js index 84a264bae..126f3b0cf 100644 --- a/src/common/NavBar/SearchBar/SearchBar.js +++ b/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 (