From 0c78313181943f45e8165b9731461c53f1dee0e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriel=20Rodri=CC=81guez=20Alsina?= <grodriguez@keetup.com>
Date: Wed, 4 Jul 2018 19:43:37 -0300
Subject: [PATCH] [chore] Moved the Header / MobileMenuLinks / NavigationLinks
 components to their own files.

---
 src/Header.js          |  66 ++++++++++++++++++++++++
 src/MobileMenuLinks.js |  26 ++++++++++
 src/NavigationLinks.js |  21 ++++++++
 src/index.js           | 112 +++--------------------------------------
 4 files changed, 121 insertions(+), 104 deletions(-)
 create mode 100644 src/Header.js
 create mode 100644 src/MobileMenuLinks.js
 create mode 100644 src/NavigationLinks.js

diff --git a/src/Header.js b/src/Header.js
new file mode 100644
index 0000000..4c970e4
--- /dev/null
+++ b/src/Header.js
@@ -0,0 +1,66 @@
+import React from 'react'
+import Select from 'react-select'
+import logoBase from './images/logos/logo_validators_dapp@2x.png'
+import logoSokol from './images/logos/logo_sokol@2x.png'
+import menuIcon from './images/icons/icon-menu.svg'
+import menuOpenIcon from './images/icons/icon-close.svg'
+import NavigationLinks from './NavigationLinks';
+import MobileMenuLinks from './MobileMenuLinks';
+
+const Header = ({ netId, onChange, injectedWeb3, showMobileMenu, onMenuToggle, baseRootPath, navigationData }) => {
+
+  const headerClassName = netId === '77' ? 'sokol' : '';
+  const logoImageName = netId === '77' ? logoSokol : logoBase;
+
+  let select;
+
+  if (!injectedWeb3) {
+    select = <Select id="netId"
+      value={netId}
+      onChange={onChange}
+      style={{
+        width: '150px',
+      }}
+      wrapperStyle={{
+        width: '150px',
+      }}
+      clearable={false}
+      options={[
+        { value: '77', label: 'Network: Sokol' },
+        { value: '99', label: 'Network: Core' },
+      ]} />
+  }
+  return (
+    <header id="header" className={`header ${headerClassName}`}>
+      { showMobileMenu &&
+        (<div className="header-mobile-menu-container">{ <MobileMenuLinks onMenuToggle={ onMenuToggle } navigationData={ navigationData } /> }</div>)
+      }
+      <div className="container">
+        <a
+          className="header-logo-a"
+          href={ baseRootPath }
+        >
+          <img
+            className="header-logo"
+            src={ logoImageName }
+            alt=""
+          />
+        </a>
+        <div className="links-container">
+          <NavigationLinks navigationData={ navigationData } />
+        </div>
+        <div className="mobile-menu">
+          <img
+            alt=""
+            className={ showMobileMenu ? 'mobile-menu-open-icon' : 'mobile-menu-icon' }
+            onClick={ onMenuToggle }
+            src={ showMobileMenu ? menuOpenIcon : menuIcon }
+          />
+        </div>
+        { select }
+      </div>
+    </header>
+  )
+}
+
+export default Header;
diff --git a/src/MobileMenuLinks.js b/src/MobileMenuLinks.js
new file mode 100644
index 0000000..707da54
--- /dev/null
+++ b/src/MobileMenuLinks.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+
+const MobileMenuLinks = ({ onMenuToggle, navigationData }) => {
+
+  return (
+    <div
+      className="links-container-mobile"
+      onClick={ onMenuToggle }
+    >
+      { navigationData.map((item) =>
+          <NavLink
+            activeClassName="active"
+            className="link"
+            exact
+            to={ item.url }
+          >
+              <i className={`link-icon ${ item.icon }`} /><span className='link-text'>{ item.title }</span>
+          </NavLink>
+        )
+      }
+    </div>
+  );
+}
+
+export default MobileMenuLinks;
diff --git a/src/NavigationLinks.js b/src/NavigationLinks.js
new file mode 100644
index 0000000..9c868eb
--- /dev/null
+++ b/src/NavigationLinks.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+
+const NavigationLinks = ({ navigationData, baseRootPath }) => {
+
+  return (
+    navigationData.map((item, index) =>
+      <NavLink
+        activeClassName="active"
+        className="link"
+        exact
+        key={ index }
+        to={item.url}
+      >
+        <i className={`link-icon ${ item.icon }`} /><span className='link-text'>{item.title}</span>
+    </NavLink>
+  ));
+
+};
+
+export default NavigationLinks;
diff --git a/src/index.js b/src/index.js
index c16d6c9..230f86b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,22 +2,18 @@ import "react-select/dist/react-select.css";
 import AllValidators from './AllValidators'
 import App from './App';
 import Footer from './Footer';
+import Header from './Header';
 import KeysManager from './contracts/KeysManager.contract'
 import Loading from './Loading'
 import Metadata from './contracts/Metadata.contract'
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import Select from 'react-select'
 import createBrowserHistory from 'history/createBrowserHistory'
 import getWeb3, { setWeb3 } from './getWeb3'
 import helpers from './helpers'
 import networkAddresses from './contracts/addresses';
 import registerServiceWorker from './registerServiceWorker';
-import { Router, Route, NavLink } from 'react-router-dom'
-import logoBase from './images/logos/logo_validators_dapp@2x.png'
-import logoSokol from './images/logos/logo_sokol@2x.png'
-import menuIcon from './images/icons/icon-menu.svg'
-import menuOpenIcon from './images/icons/icon-close.svg'
+import { Router, Route } from 'react-router-dom'
 
 const errorMsgNoMetamaskAccount = `Your MetaMask is locked.
 Please choose your voting key in MetaMask and reload the page.
@@ -42,106 +38,12 @@ const navigationData = [
   'url': `${ baseRootPath }/pending-changes`
   }];
 
-const NavigationLinks = () => {
-
-  return (
-    navigationData.map((item, index) =>
-      <NavLink
-        activeClassName="active"
-        className="link"
-        exact
-        key={ index }
-        to={item.url}
-      >
-        <i className={`link-icon ${ item.icon }`} /><span className='link-text'>{item.title}</span>
-    </NavLink>
-  ));
-
-};
-
-const getMobileMenuLinks = (onMenuToggle) => {
-
-  return (
-    <div
-      className="links-container-mobile"
-      onClick={ onMenuToggle }
-    >
-      { navigationData.map((item) =>
-          <NavLink
-            activeClassName="active"
-            className="link"
-            exact
-            to={ item.url }
-          >
-              <i className={`link-icon ${ item.icon }`} /><span className='link-text'>{ item.title }</span>
-          </NavLink>
-        )
-      }
-    </div>
-  );
-}
-
-let Header = ({ netId, onChange, injectedWeb3, showMobileMenu, onMenuToggle }) => {
-
-  const headerClassName = netId === '77' ? 'sokol' : '';
-  const logoImageName = netId === '77' ? logoSokol : logoBase;
-
-  let select;
-
-  if (!injectedWeb3) {
-    select = <Select id="netId"
-      value={netId}
-      onChange={onChange}
-      style={{
-        width: '150px',
-      }}
-      wrapperStyle={{
-        width: '150px',
-      }}
-      clearable={false}
-      options={[
-        { value: '77', label: 'Network: Sokol' },
-        { value: '99', label: 'Network: Core' },
-      ]} />
-  }
-  return (
-    <header id="header" className={`header ${headerClassName}`}>
-      { showMobileMenu &&
-        (<div className="header-mobile-menu-container">{ getMobileMenuLinks(onMenuToggle) }</div>)
-      }
-      <div className="container">
-        <a
-          className="header-logo-a"
-          href={ baseRootPath }
-        >
-          <img
-            className="header-logo"
-            src={logoImageName} alt=""
-          />
-        </a>
-        <div className="links-container">
-          <NavigationLinks />
-        </div>
-        <div className="mobile-menu">
-          <img
-            alt=""
-            className={ showMobileMenu ? 'mobile-menu-open-icon' : 'mobile-menu-icon' }
-            onClick={ onMenuToggle }
-            src={ showMobileMenu ? menuOpenIcon : menuIcon }
-          />
-        </div>
-        { select }
-      </div>
-    </header>
-  )
-}
-
 class AppMainRouter extends Component {
+
   constructor(props) {
 
     super(props);
 
-    this.rootPath = baseRootPath;
     history.listen(this.onRouteChange.bind(this));
     this.onSetRender = this.onSetRender.bind(this);
     this.onPendingChangesRender = this.onPendingChangesRender.bind(this);
@@ -343,6 +245,8 @@ class AppMainRouter extends Component {
             injectedWeb3={ this.state.injectedWeb3 }
             showMobileMenu={ this.state.showMobileMenu }
             onMenuToggle={ this.toggleMobileMenu }
+            baseRootPath={ baseRootPath }
+            navigationData={ navigationData }
           />
           { loading }
           <div className={`app-container ${ this.state.showMobileMenu ? 'app-container-open-mobile-menu' : '' }`}>
@@ -360,16 +264,16 @@ class AppMainRouter extends Component {
             />
             <Route
               exact
-              path={ `${ this.rootPath }/` }
+              path={ `${ baseRootPath }/` }
               render={ this.onAllValidatorsRender }
               web3Config={ this.state }
             />
             <Route
-              path={ `${ this.rootPath }/pending-changes` }
+              path={ `${ baseRootPath }/pending-changes` }
               render={this.onPendingChangesRender}
             />
             <Route
-              path={ `${ this.rootPath }/set` }
+              path={ `${ baseRootPath }/set` }
               render={ this.onSetRender }
             />
           </div>