fixed underline on NavBar and removed components

public/assets/js/navBarFunctions.js

@@ -7,8 +7,8 @@ function toggleNavBarSelection (value) {
         window.location.href = '/logout';
     } else if (selectedOption === 'VIEW') {
         // get channel info
-        const channelName = getCookie('channel_name');
+        const channelName = getCookie('CHANNEL_NAME');
-        const channelClaimId = getCookie('channel_claim_id');
+        const channelClaimId = getCookie('CHANNEL_LONG_ID');
         // redirect to channel page
         window.location.href = `/${channelName}:${channelClaimId}`;
     }

react/components/ActiveStatusBar.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function ActiveStatusBar () {
+  return <span className="progress-bar progress-bar--active">| </span>;
+}
+
+export default ActiveStatusBar;

react/components/InactiveStatusBar.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function InactiveStatusBar () {
+  return <span className="progress-bar progress-bar--inactive">| </span>;
+}
+
+export default InactiveStatusBar();

react/components/Logo.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+function Logo () {
+  return (
+    <svg version="1.1" id="Layer_1" x="0px" y="0px" height="24px" viewBox="0 0 80 31" enableBackground="new 0 0 80 31" className="nav-bar-logo">
+      <a href="/">
+        <title>Logo</title>
+        <desc>Spee.ch logo</desc>
+        <g id="About">
+          <g id="Publish-Form-V2-_x28_filled_x29_" transform="translate(-42.000000, -23.000000)">
+            <g id="Group-17" transform="translate(42.000000, 22.000000)">
+              <text transform="matrix(1 0 0 1 0 20)" fontSize="25" fontFamily="Roboto">Spee&lt;h</text>
+              <g id="Group-16" transform="translate(0.000000, 30.000000)">
+                <path id="Line-8" fill="none" stroke="#09F911" strokeWidth="1" strokeLinecap="square" d="M0.5,1.5h15"/>
+                <path id="Line-8-Copy" fill="none" stroke="#029D74" strokeWidth="1" strokeLinecap="square" d="M16.5,1.5h15"/>
+                <path id="Line-8-Copy-2" fill="none" stroke="#E35BD8" strokeWidth="1" strokeLinecap="square" d="M32.5,1.5h15"/>
+                <path id="Line-8-Copy-3" fill="none" stroke="#4156C5" strokeWidth="1" strokeLinecap="square" d="M48.5,1.5h15"/>
+                <path id="Line-8-Copy-4" fill="none" stroke="#635688" strokeWidth="1" strokeLinecap="square" d="M64.5,1.5h15"/>
+              </g>
+            </g>
+          </g>
+        </g>
+      </a>
+    </svg>
+  );
+};
+
+export default Logo;

react/components/NavBarChannelDropdown.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+function Logo ({ channelName, handleSelection, VIEW, LOGOUT }) {
+  return (
+    <select type="text" id="nav-bar-channel-select" className="select select--arrow link--nav" onChange={handleSelection}>
+      <option id="nav-bar-channel-select-channel-option">{channelName}</option>
+      <option value={VIEW}>View</option>
+      <option value={LOGOUT}>Logout</option>
+    </select>
+  );
+};
+
+export default Logo;

react/components/ProgressBar.jsx

@@ -1,13 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import ActiveStatusBar from 'components/ActiveStatusBar';
-function ActiveBar () {
+import InactiveStatusBar from 'components/InactiveStatusBar';
-  return <span className="progress-bar progress-bar--active">| </span>;
-}
-
-function InactiveBar () {
-  return <span className="progress-bar progress-bar--inactive">| </span>;
-}
 
 class ProgressBar extends React.Component {
   constructor (props) {
@@ -70,7 +64,7 @@ class ProgressBar extends React.Component {
   render () {
     return (
       <div>
-        {this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index}/> )}
+        {this.state.bars.map((bar, index) => bar.isActive ? <ActiveStatusBar key={index} /> : <InactiveStatusBar key={index}/>)}
       </div>
     );
   }

react/containers/NavBar/view.jsx

@@ -1,34 +1,11 @@
 import React from 'react';
 import { getUserCookies, clearUserCookies } from 'utils/cookies';
+import Logo from 'components/Logo';
+import NavBarChannelDropdown from 'components/NavBarChannelDropdown';
 
 const VIEW = 'VIEW';
 const LOGOUT = 'LOGOUT';
 
-function Logo () {
-  return (
-    <svg version="1.1" id="Layer_1" x="0px" y="0px" height="24px" viewBox="0 0 80 31" enableBackground="new 0 0 80 31" className="nav-bar-logo">
-      <a href="/">
-        <title>Logo</title>
-        <desc>Spee.ch logo</desc>
-        <g id="About">
-            <g id="Publish-Form-V2-_x28_filled_x29_" transform="translate(-42.000000, -23.000000)">
-                <g id="Group-17" transform="translate(42.000000, 22.000000)">
-                    <text transform="matrix(1 0 0 1 0 20)" fontSize="25" fontFamily="Roboto">Spee&lt;h</text>
-                    <g id="Group-16" transform="translate(0.000000, 30.000000)">
-                        <path id="Line-8" fill="none" stroke="#09F911" strokeWidth="1" strokeLinecap="square" d="M0.5,1.5h15"/>
-                        <path id="Line-8-Copy" fill="none" stroke="#029D74" strokeWidth="1" strokeLinecap="square" d="M16.5,1.5h15"/>
-                        <path id="Line-8-Copy-2" fill="none" stroke="#E35BD8" strokeWidth="1" strokeLinecap="square" d="M32.5,1.5h15"/>
-                        <path id="Line-8-Copy-3" fill="none" stroke="#4156C5" strokeWidth="1" strokeLinecap="square" d="M48.5,1.5h15"/>
-                        <path id="Line-8-Copy-4" fill="none" stroke="#635688" strokeWidth="1" strokeLinecap="square" d="M64.5,1.5h15"/>
-                    </g>
-                </g>
-            </g>
-        </g>
-      </a>
-    </svg>
-  );
-}
-
 class NavBar extends React.Component {
   constructor (props) {
     super(props);
@@ -36,6 +13,7 @@ class NavBar extends React.Component {
     this.handleSelection = this.handleSelection.bind(this);
   }
   componentDidMount () {
+    // check to see if the user is already logged in
     this.checkForLoggedInUser();
   }
   checkForLoggedInUser () {
@@ -48,7 +26,9 @@ class NavBar extends React.Component {
     }
   }
   handleSelection (event) {
+    console.log('handling selection', event)
     const value = event.target.selectedOptions[0].value;
+    console.log('value', value);
     switch (value) {
       case LOGOUT:
         // remove session cookies
@@ -73,14 +53,15 @@ class NavBar extends React.Component {
             <span className="nav-bar-tagline">Open-source, decentralized image and video sharing.</span>
           </div>
           <div className="nav-bar--right">
-            <a className="nav-bar-link link--nav" href="/">Publish</a>
+            <a className="nav-bar-link link--nav-active" href="/">Publish</a>
             <a className="nav-bar-link link--nav" href="/about">About</a>
             { this.props.channelName ? (
-              <select type="text" id="nav-bar-channel-select" className="select select--arrow link--nav" onChange={this.handleSelection}>
+              <NavBarChannelDropdown
-                <option id="nav-bar-channel-select-channel-option">{this.props.channelName}</option>
+                channelName={this.props.channelName}
-                <option value={VIEW}>View</option>
+                handleSelection={this.handleSelection}
-                <option value={LOGOUT}>Logout</option>
+                VIEW={VIEW}
-              </select>
+                LOGOUT={LOGOUT}
+              />
             ) : (
               <a id="nav-bar-login-link" className="nav-bar-link link--nav" href="/login">Channel</a>
             )}