From 808013e4e0c015ca9851f224fcc33448305a77f9 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 23 May 2019 16:02:17 +0300
Subject: [PATCH] MainNavBar component implemented

---
 src/common/MainNavBar/MainNavBar.js | 26 ++++++++++++++++++++++++++
 src/common/MainNavBar/index.js      |  3 +++
 src/common/index.js                 |  2 ++
 src/routes/Board/Board.js           | 15 ++-------------
 src/routes/Discover/Discover.js     | 15 ++-------------
 src/routes/Library/Library.js       | 14 ++------------
 src/routes/Search/Search.js         | 14 ++------------
 7 files changed, 39 insertions(+), 50 deletions(-)
 create mode 100644 src/common/MainNavBar/MainNavBar.js
 create mode 100644 src/common/MainNavBar/index.js

diff --git a/src/common/MainNavBar/MainNavBar.js b/src/common/MainNavBar/MainNavBar.js
new file mode 100644
index 000000000..b2963ee1b
--- /dev/null
+++ b/src/common/MainNavBar/MainNavBar.js
@@ -0,0 +1,26 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const NavBar = require('../NavBar');
+
+const tabs = [
+    { label: 'Board', icon: 'ic_board', href: '#/' },
+    { label: 'Discover', icon: 'ic_discover', href: '#/discover' },
+    { label: 'Library', icon: 'ic_library', href: '#/library' },
+    { label: 'Calendar', icon: 'ic_calendar', href: '#/calendar' },
+];
+
+const MainNavBar = ({ className }) => (
+    <NavBar
+        className={className}
+        backButton={false}
+        tabs={tabs}
+        searchBar={true}
+        userMenu={true}
+    />
+);
+
+MainNavBar.propTypes = {
+    className: PropTypes.string
+};
+
+module.exports = MainNavBar;
diff --git a/src/common/MainNavBar/index.js b/src/common/MainNavBar/index.js
new file mode 100644
index 000000000..5f79eaf54
--- /dev/null
+++ b/src/common/MainNavBar/index.js
@@ -0,0 +1,3 @@
+const MainNavBar = require('./MainNavBar');
+
+module.exports = MainNavBar;
diff --git a/src/common/index.js b/src/common/index.js
index 7a2d5b0a7..f3dbf36e7 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -1,6 +1,7 @@
 const Checkbox = require('./Checkbox');
 const ColorPicker = require('./ColorPicker');
 const Loader = require('./Loader');
+const MainNavBar = require('./MainNavBar');
 const MetaItem = require('./MetaItem');
 const NavBar = require('./NavBar');
 const Popup = require('./Popup');
@@ -13,6 +14,7 @@ module.exports = {
     Checkbox,
     ColorPicker,
     Loader,
+    MainNavBar,
     MetaItem,
     NavBar,
     Popup,
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 4e76254ab..d809e2562 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -2,7 +2,7 @@ const React = require('react');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const { Input } = require('stremio-navigation')
-const { MetaItem, NavBar } = require('stremio-common');
+const { MetaItem, MainNavBar } = require('stremio-common');
 const withGroups = require('./withGroups');
 const styles = require('./styles');
 
@@ -38,18 +38,7 @@ class Board extends React.PureComponent {
     render() {
         return (
             <div className={styles['board-container']}>
-                <NavBar
-                    className={styles['nav-bar']}
-                    backButton={false}
-                    tabs={[
-                        { label: 'Board', icon: 'ic_board', href: '#/' },
-                        { label: 'Discover', icon: 'ic_discover', href: '#/discover' },
-                        { label: 'Library', icon: 'ic_library', href: '#/library' },
-                        { label: 'Calendar', icon: 'ic_calendar', href: '#/calendar' },
-                    ]}
-                    searchBar={true}
-                    userMenu={true}
-                />
+                <MainNavBar className={styles['nav-bar']} />
                 <div className={styles['board-content']} tabIndex={-1}>
                     {
                         this.props.groups.length > 0 ?
diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index 388d9371c..fcd4229de 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -2,7 +2,7 @@ const React = require('react');
 const classnames = require('classnames');
 const { Input } = require('stremio-navigation');
 const Icon = require('stremio-icons/dom');
-const { NavBar, MetaItem, Popup, useBinaryState } = require('stremio-common');
+const { MainNavBar, MetaItem, Popup, useBinaryState } = require('stremio-common');
 const useCatalog = require('./useCatalog');
 const styles = require('./styles');
 
@@ -22,18 +22,7 @@ const Discover = ({ urlParams }) => {
     }, [urlParams.type, urlParams.catalog]);
     return (
         <div className={styles['discover-container']}>
-            <NavBar
-                className={styles['nav-bar']}
-                backButton={false}
-                tabs={[
-                    { label: 'Board', icon: 'ic_board', href: '#/' },
-                    { label: 'Discover', icon: 'ic_discover', href: '#/discover' },
-                    { label: 'Library', icon: 'ic_library', href: '#/library' },
-                    { label: 'Calendar', icon: 'ic_calendar', href: '#/calendar' },
-                ]}
-                searchBar={true}
-                userMenu={true}
-            />
+            <MainNavBar className={styles['nav-bar']} />
             {
                 typeof urlParams.type === 'string' || typeof urlParams.catalog === 'string' ?
                     <div className={styles['discover-content']}>
diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index b60d92bab..82100ae31 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -1,22 +1,12 @@
 const React = require('react');
-const { NavBar } = require('stremio-common');
+const { MainNavBar } = require('stremio-common');
 const styles = require('./styles');
 
 class Library extends React.Component {
     render() {
         return (
             <div className={styles['library-container']}>
-                <NavBar
-                    backButton={false}
-                    tabs={[
-                        { label: 'Board', icon: 'ic_board', href: '#/' },
-                        { label: 'Discover', icon: 'ic_discover', href: '#/discover' },
-                        { label: 'Library', icon: 'ic_library', href: '#/library' },
-                        { label: 'Calendar', icon: 'ic_calendar', href: '#/calendar' },
-                    ]}
-                    searchBar={true}
-                    userMenu={true}
-                />
+                <MainNavBar />
                 <div className={styles['library-content']} />
             </div>
         );
diff --git a/src/routes/Search/Search.js b/src/routes/Search/Search.js
index ceea48b52..4480b28a0 100644
--- a/src/routes/Search/Search.js
+++ b/src/routes/Search/Search.js
@@ -1,22 +1,12 @@
 const React = require('react');
-const { NavBar } = require('stremio-common');
+const { MainNavBar } = require('stremio-common');
 const styles = require('./styles');
 
 class Search extends React.Component {
     render() {
         return (
             <React.Fragment>
-                <NavBar
-                    backButton={false}
-                    tabs={[
-                        { label: 'Board', icon: 'ic_board', href: '#/' },
-                        { label: 'Discover', icon: 'ic_discover', href: '#/discover' },
-                        { label: 'Library', icon: 'ic_library', href: '#/library' },
-                        { label: 'Calendar', icon: 'ic_calendar', href: '#/calendar' },
-                    ]}
-                    searchBar={true}
-                    userMenu={true}
-                />
+                <MainNavBar />
                 <div className={styles['search-container']} />
             </React.Fragment>
         );