From e1905f928d9f16857aca49378e4e896beb992660 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 18 Dec 2019 16:47:07 +0200
Subject: [PATCH] NavTabButton selected by bool prop instead of match against
 location hash

---
 src/common/MainNavBar/MainNavBar.js           | 18 ++++++++++++------
 src/common/NavBar/NavBar.js                   |  6 ++++--
 .../NavBar/NavTabButton/NavTabButton.js       | 19 +++----------------
 src/common/NavBar/NavTabButton/styles.less    |  2 +-
 src/routes/Board/Board.js                     |  2 +-
 src/routes/Discover/Discover.js               |  2 +-
 src/routes/Library/Library.js                 |  2 +-
 7 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/src/common/MainNavBar/MainNavBar.js b/src/common/MainNavBar/MainNavBar.js
index 507f8d229..55bdce638 100644
--- a/src/common/MainNavBar/MainNavBar.js
+++ b/src/common/MainNavBar/MainNavBar.js
@@ -3,17 +3,22 @@ const PropTypes = require('prop-types');
 const NavBar = require('stremio/common/NavBar');
 
 const TABS = [
-    { label: 'Board', icon: 'ic_board', href: '#/' },
-    { label: 'Discover', icon: 'ic_discover', href: '#/discover' },
-    { label: 'Library', icon: 'ic_library', href: '#/library' }
+    { 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' }
 ];
 
-const MainNavBar = React.memo(({ className }) => {
+const MainNavBar = React.memo(({ className, selected }) => {
     return (
         <NavBar
             className={className}
             backButton={false}
-            tabs={TABS}
+            tabs={TABS.map(({ id, label, icon, href }) => ({
+                label,
+                icon,
+                href,
+                selected: id === selected
+            }))}
             searchBar={true}
             addonsButton={true}
             fullscreenButton={true}
@@ -26,7 +31,8 @@ const MainNavBar = React.memo(({ className }) => {
 MainNavBar.displayName = 'MainNavBar';
 
 MainNavBar.propTypes = {
-    className: PropTypes.string
+    className: PropTypes.string,
+    selected: PropTypes.string
 };
 
 module.exports = MainNavBar;
diff --git a/src/common/NavBar/NavBar.js b/src/common/NavBar/NavBar.js
index 92663af21..6fe9859ed 100644
--- a/src/common/NavBar/NavBar.js
+++ b/src/common/NavBar/NavBar.js
@@ -28,13 +28,14 @@ const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addo
             }
             {
                 Array.isArray(tabs) && tabs.length > 0 ?
-                    tabs.slice(0, 4).map(({ href = '', icon = '', label = '', onClick }) => (
+                    tabs.slice(0, 4).map(({ href, icon, label, selected, onClick }, index) => (
                         <NavTabButton
-                            key={`${href}${icon}${label}`}
+                            key={index}
                             className={styles['nav-tab-button']}
                             href={href}
                             icon={icon}
                             label={label}
+                            selected={selected}
                             onClick={onClick}
                         />
                     ))
@@ -88,6 +89,7 @@ NavBar.propTypes = {
         icon: PropTypes.string,
         label: PropTypes.string,
         href: PropTypes.string,
+        selected: PropTypes.bool,
         onClick: PropTypes.func
     })),
     title: PropTypes.string,
diff --git a/src/common/NavBar/NavTabButton/NavTabButton.js b/src/common/NavBar/NavTabButton/NavTabButton.js
index 3af4bd7fb..7a525b868 100644
--- a/src/common/NavBar/NavTabButton/NavTabButton.js
+++ b/src/common/NavBar/NavTabButton/NavTabButton.js
@@ -3,25 +3,11 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const Button = require('stremio/common/Button');
-const routesRegexp = require('stremio/common/routesRegexp');
-const useRouteActive = require('stremio/common/useRouteActive');
 const styles = require('./styles');
 
-const NavTabButton = ({ className, icon, label, href, onClick }) => {
-    const routeRegexp = React.useMemo(() => {
-        if (typeof href === 'string' && href.startsWith('#')) {
-            for (const { regexp } of Object.values(routesRegexp)) {
-                if (href.slice(1).match(regexp)) {
-                    return regexp;
-                }
-            }
-        }
-
-        return null;
-    }, [href]);
-    const routeActive = useRouteActive(routeRegexp);
+const NavTabButton = ({ className, icon, label, href, selected, onClick }) => {
     return (
-        <Button className={classnames(className, styles['nav-tab-button-container'], { 'active': routeActive })} title={label} tabIndex={-1} href={href} onClick={onClick}>
+        <Button className={classnames(className, styles['nav-tab-button-container'], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick}>
             {
                 typeof icon === 'string' && icon.length > 0 ?
                     <Icon className={styles['icon']} icon={icon} />
@@ -43,6 +29,7 @@ NavTabButton.propTypes = {
     icon: PropTypes.string,
     label: PropTypes.string,
     href: PropTypes.string,
+    selected: PropTypes.bool,
     onClick: PropTypes.func
 };
 
diff --git a/src/common/NavBar/NavTabButton/styles.less b/src/common/NavBar/NavTabButton/styles.less
index 8d1ef5e16..6409caa36 100644
--- a/src/common/NavBar/NavTabButton/styles.less
+++ b/src/common/NavBar/NavTabButton/styles.less
@@ -8,7 +8,7 @@
         background-color: var(--color-secondary);
     }
 
-    &:global(.active) {
+    &:global(.selected) {
         background-color: var(--color-background);
     }
 
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 47f293f45..356fab04f 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']} />
+            <MainNavBar className={styles['nav-bar']} selected={'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 4f8358b32..ab6850333 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']} />
+            <MainNavBar className={styles['nav-bar']} selected={'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 378612678..6e48ef47c 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']} />
+            <MainNavBar className={styles['nav-bar']} selected={'library'} />
             <div className={styles['library-content']}>
                 {
                     library.library_state.type === 'Ready' && library.library_state.content.uid !== null && library.type_names.length > 0 ?