From 7dbfce62b6debd2a18abc17c7633767ca6988af8 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 18 Dec 2019 16:59:24 +0200
Subject: [PATCH] useRouteActive dropped

---
 src/common/MainNavBar/MainNavBar.js      | 18 ++++++---------
 src/common/NavBar/NavBar.js              | 21 +++++++++---------
 src/common/NavBar/SearchBar/SearchBar.js | 28 +++++++++++-------------
 src/common/index.js                      |  2 --
 src/common/useRouteActive.js             | 14 ------------
 src/routes/Board/Board.js                |  2 +-
 src/routes/Discover/Discover.js          |  2 +-
 src/routes/Library/Library.js            |  2 +-
 src/routes/Search/Search.js              |  2 +-
 9 files changed, 35 insertions(+), 56 deletions(-)
 delete mode 100644 src/common/useRouteActive.js

diff --git a/src/common/MainNavBar/MainNavBar.js b/src/common/MainNavBar/MainNavBar.js
index 55bdce638..afbbce27b 100644
--- a/src/common/MainNavBar/MainNavBar.js
+++ b/src/common/MainNavBar/MainNavBar.js
@@ -3,22 +3,18 @@ const PropTypes = require('prop-types');
 const NavBar = require('stremio/common/NavBar');
 
 const TABS = [
-    { id: 'board', label: 'Board', icon: 'ic_board', href: '#/' },
-    { id: 'discover', label: 'Discover', icon: 'ic_discover', href: '#/discover' },
-    { id: 'library', label: 'Library', icon: 'ic_library', href: '#/library' }
+    { route: 'board', label: 'Board', icon: 'ic_board', href: '#/' },
+    { route: 'discover', label: 'Discover', icon: 'ic_discover', href: '#/discover' },
+    { route: 'library', label: 'Library', icon: 'ic_library', href: '#/library' }
 ];
 
-const MainNavBar = React.memo(({ className, selected }) => {
+const MainNavBar = React.memo(({ className, route }) => {
     return (
         <NavBar
             className={className}
+            route={route}
             backButton={false}
-            tabs={TABS.map(({ id, label, icon, href }) => ({
-                label,
-                icon,
-                href,
-                selected: id === selected
-            }))}
+            tabs={TABS}
             searchBar={true}
             addonsButton={true}
             fullscreenButton={true}
@@ -32,7 +28,7 @@ MainNavBar.displayName = 'MainNavBar';
 
 MainNavBar.propTypes = {
     className: PropTypes.string,
-    selected: PropTypes.string
+    route: PropTypes.string
 };
 
 module.exports = MainNavBar;
diff --git a/src/common/NavBar/NavBar.js b/src/common/NavBar/NavBar.js
index 6fe9859ed..c6ca83ac2 100644
--- a/src/common/NavBar/NavBar.js
+++ b/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, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
+const NavBar = React.memo(({ className, route, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
@@ -28,15 +28,15 @@ const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addo
             }
             {
                 Array.isArray(tabs) && tabs.length > 0 ?
-                    tabs.slice(0, 4).map(({ href, icon, label, selected, onClick }, index) => (
+                    tabs.slice(0, 4).map((tab, index) => (
                         <NavTabButton
                             key={index}
                             className={styles['nav-tab-button']}
-                            href={href}
-                            icon={icon}
-                            label={label}
-                            selected={selected}
-                            onClick={onClick}
+                            selected={tab.route === route}
+                            href={tab.href}
+                            icon={tab.icon}
+                            label={tab.label}
+                            onClick={tab.onClick}
                         />
                     ))
                     :
@@ -46,7 +46,7 @@ const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addo
                 searchBar ?
                     <React.Fragment>
                         <div className={styles['spacing']} />
-                        <SearchBar className={styles['search-bar']} />
+                        <SearchBar className={styles['search-bar']} active={route === 'search'} />
                         <div className={styles['spacing']} />
                     </React.Fragment>
                     :
@@ -84,12 +84,13 @@ NavBar.displayName = 'NavBar';
 
 NavBar.propTypes = {
     className: PropTypes.string,
+    route: PropTypes.string,
     backButton: PropTypes.bool,
     tabs: PropTypes.arrayOf(PropTypes.shape({
-        icon: PropTypes.string,
+        route: PropTypes.string,
         label: PropTypes.string,
+        icon: PropTypes.string,
         href: PropTypes.string,
-        selected: PropTypes.bool,
         onClick: PropTypes.func
     })),
     title: PropTypes.string,
diff --git a/src/common/NavBar/SearchBar/SearchBar.js b/src/common/NavBar/SearchBar/SearchBar.js
index 2097c79af..84a264bae 100644
--- a/src/common/NavBar/SearchBar/SearchBar.js
+++ b/src/common/NavBar/SearchBar/SearchBar.js
@@ -6,44 +6,41 @@ const Icon = require('stremio-icons/dom');
 const { useRouteFocused } = require('stremio-router');
 const Button = require('stremio/common/Button');
 const TextInput = require('stremio/common/TextInput');
-const routesRegexp = require('stremio/common/routesRegexp');
 const useLocationHash = require('stremio/common/useLocationHash');
-const useRouteActive = require('stremio/common/useRouteActive');
 const styles = require('./styles');
 
-const SearchBar = ({ className }) => {
+const SearchBar = ({ className, active }) => {
     const locationHash = useLocationHash();
     const routeFocused = useRouteFocused();
-    const routeActive = useRouteActive(routesRegexp.search.regexp);
     const searchInputRef = React.useRef(null);
     const query = React.useMemo(() => {
-        if (routeActive) {
+        if (active) {
             const { search: locationSearch } = UrlUtils.parse(locationHash.slice(1));
             const queryParams = new URLSearchParams(locationSearch);
             return queryParams.has('search') ? queryParams.get('search') : '';
         }
 
         return '';
-    }, [routeActive, locationHash]);
+    }, [active, locationHash]);
     const searchBarOnClick = React.useCallback(() => {
-        if (!routeActive) {
+        if (!active) {
             window.location = '#/search';
         }
-    }, [routeActive]);
+    }, [active]);
     const queryInputOnSubmit = React.useCallback(() => {
-        if (routeActive) {
+        if (active) {
             window.location.replace(`#/search?search=${searchInputRef.current.value}`);
         }
-    }, [routeActive]);
+    }, [active]);
     React.useEffect(() => {
-        if (routeActive && routeFocused) {
+        if (active && routeFocused) {
             searchInputRef.current.focus();
         }
-    }, [routeActive, routeFocused, query]);
+    }, [active, routeFocused, query]);
     return (
-        <label className={classnames(className, styles['search-bar-container'], { 'active': routeActive })} onClick={searchBarOnClick}>
+        <label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={searchBarOnClick}>
             {
-                routeActive ?
+                active ?
                     <TextInput
                         key={query}
                         ref={searchInputRef}
@@ -67,7 +64,8 @@ const SearchBar = ({ className }) => {
 };
 
 SearchBar.propTypes = {
-    className: PropTypes.string
+    className: PropTypes.string,
+    active: PropTypes.bool
 };
 
 module.exports = SearchBar;
diff --git a/src/common/index.js b/src/common/index.js
index 7fedd9f36..232efbfe8 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -25,7 +25,6 @@ const useInLibrary = require('./useInLibrary');
 const useLiveRef = require('./useLiveRef');
 const useLocationHash = require('./useLocationHash');
 const useModelState = require('./useModelState');
-const useRouteActive = require('./useRouteActive');
 const useSpreadState = require('./useSpreadState');
 const useUser = require('./useUser');
 
@@ -57,7 +56,6 @@ module.exports = {
     useLiveRef,
     useLocationHash,
     useModelState,
-    useRouteActive,
     useSpreadState,
     useUser
 };
diff --git a/src/common/useRouteActive.js b/src/common/useRouteActive.js
deleted file mode 100644
index 1fde72466..000000000
--- a/src/common/useRouteActive.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const React = require('react');
-const UrlUtils = require('url');
-const useLocationHash = require('stremio/common/useLocationHash');
-
-const useRouteActive = (routeRegexp) => {
-    const locationHash = useLocationHash();
-    const active = React.useMemo(() => {
-        const { pathname } = UrlUtils.parse(locationHash.slice(1));
-        return typeof pathname === 'string' && routeRegexp instanceof RegExp && !!pathname.match(routeRegexp);
-    }, [locationHash, routeRegexp]);
-    return active;
-};
-
-module.exports = useRouteActive;
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 356fab04f..6209f077a 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -11,7 +11,7 @@ const Board = () => {
     const [options, optionOnSelect] = useItemOptions();
     return (
         <div className={styles['board-container']}>
-            <MainNavBar className={styles['nav-bar']} selected={'board'} />
+            <MainNavBar className={styles['nav-bar']} route={'board'} />
             <div className={styles['board-content']}>
                 {
                     continueWatching.lib_items.length > 0 ?
diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index ab6850333..17f407876 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -45,7 +45,7 @@ const Discover = ({ urlParams, queryParams }) => {
     }, [urlParams, queryParams]);
     return (
         <div className={styles['discover-container']}>
-            <MainNavBar className={styles['nav-bar']} selected={'discover'} />
+            <MainNavBar className={styles['nav-bar']} route={'discover'} />
             <div className={styles['discover-content']}>
                 <div className={styles['selectable-inputs-container']}>
                     {selectInputs.map((selectInput, index) => (
diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index 6e48ef47c..8667c67ae 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -13,7 +13,7 @@ const Library = ({ urlParams }) => {
     const [options, optionOnSelect] = useItemOptions();
     return (
         <div className={styles['library-container']}>
-            <MainNavBar className={styles['nav-bar']} selected={'library'} />
+            <MainNavBar className={styles['nav-bar']} route={'library'} />
             <div className={styles['library-content']}>
                 {
                     library.library_state.type === 'Ready' && library.library_state.content.uid !== null && library.type_names.length > 0 ?
diff --git a/src/routes/Search/Search.js b/src/routes/Search/Search.js
index a860bce47..c5d7a9ed3 100644
--- a/src/routes/Search/Search.js
+++ b/src/routes/Search/Search.js
@@ -9,7 +9,7 @@ const Search = ({ queryParams }) => {
     const search = useSearch(queryParams);
     return (
         <div className={styles['search-container']}>
-            <MainNavBar className={styles['nav-bar']} />
+            <MainNavBar className={styles['nav-bar']} route={'search'} />
             <div className={styles['search-content']}>
                 {
                     search.selected === null || search.selected.extra.every(([name]) => name !== 'search') ?