added a navbar component

public/assets/js/generalFunctions.js

@@ -130,15 +130,15 @@ function clearCookie(name) {
 }
 
 function setUserCookies(channelName, shortChannelId, channelClaimId) {
-    setCookie('channel_name', channelName)
+    setCookie('CHANNEL_NAME', channelName)
-    setCookie('channel_claim_id', channelClaimId);
+    setCookie('CHANNEL_SHORT_ID', shortChannelId);
-    setCookie('short_channel_id', shortChannelId);
+    setCookie('CHANNEL_LONG_ID', channelClaimId);
 }
 
 function clearUserCookies() {
-    clearCookie('channel_name')
+    clearCookie('CHANNEL_NAME')
-    clearCookie('channel_claim_id');
+    clearCookie('CHANNEL_SHORT_ID');
-    clearCookie('short_channel_id');
+    clearCookie('CHANNEL_LONG_ID');
 }
 
 function copyToClipboard(event){

public/assets/js/navBarFunctions.js

@@ -12,4 +12,4 @@ function toggleNavBarSelection (value) {
         // redirect to channel page
         window.location.href = `/${channelName}:${channelClaimId}`;
     }
-}
+}

react/app.js

@@ -4,12 +4,20 @@ import {Provider} from 'react-redux';
 import {createStore} from 'redux';
 import Reducer from 'reducers';
 import Publish from 'containers/PublishTool';
+import NavBar from 'containers/NavBar';
 
 let store = createStore(
   Reducer,
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );
 
+ReactDOM.render(
+  <Provider store={store}>
+    <NavBar />
+  </Provider>,
+  document.getElementById('react-nav-bar')
+)
+
 ReactDOM.render(
   <Provider store={store}>
     <Publish />

react/containers/ChannelCreateForm/view.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { makeGetRequest, makePostRequest } from 'utils/xhr';
 import { setUserCookies } from 'utils/cookies';
-import { replaceChannelSelectionInNavBar } from 'utils/page';
 
 class ChannelCreateForm extends React.Component {
   constructor (props) {
@@ -114,7 +113,6 @@ class ChannelCreateForm extends React.Component {
       .then(result => {
         that.setState({status: null});
         setUserCookies(result.channelName, result.shortChannelId, result.channelClaimId);
-        replaceChannelSelectionInNavBar(result.channelName);
         that.props.onChannelLogin(result.channelName, result.shortChannelId, result.channelClaimId);
       })
       .catch((error) => {

react/containers/ChannelLoginForm/view.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { makePostRequest } from 'utils/xhr';
 import { setUserCookies } from 'utils/cookies';
-import { replaceChannelSelectionInNavBar } from 'utils/page';
 
 class ChannelLoginForm extends React.Component {
   constructor (props) {
@@ -27,9 +26,8 @@ class ChannelLoginForm extends React.Component {
     const that = this;
     makePostRequest(url, params)
       .then(result => {
-        that.props.onChannelLogin(result.channelName, result.shortChannelId, result.channelClaimId);
         setUserCookies(result.channelName, result.shortChannelId, result.channelClaimId);
-        replaceChannelSelectionInNavBar(result.channelName);
+        that.props.onChannelLogin(result.channelName, result.shortChannelId, result.channelClaimId);
       })
       .catch(error => {
         console.log('login error', error);

react/containers/NavBar/index.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { updateLoggedInChannel } from 'actions/channel';
 import View from './view';
 
 const mapStateToProps = ({ channel }) => {
@@ -9,4 +10,12 @@ const mapStateToProps = ({ channel }) => {
   };
 };
 
-export default connect(mapStateToProps, null)(View);
+const mapDispatchToProps = dispatch => {
+  return {
+    onChannelLogin: (name, shortId, longId) => {
+      dispatch(updateLoggedInChannel(name, shortId, longId));
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(View);

react/containers/NavBar/view.jsx

@@ -1,25 +1,63 @@
 import React from 'react';
+import { getUserCookies, clearUserCookies } from 'utils/cookies';
 
 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);
-    this.state = {
+    this.checkForLoggedInUser = this.checkForLoggedInUser.bind(this);
-      selectedOption: '',
-    }
     this.handleSelection = this.handleSelection.bind(this);
   }
   componentDidMount () {
-    // set first selected option
+    this.checkForLoggedInUser();
+  }
+  checkForLoggedInUser () {
+    // check for whether a channel is already logged in
+    let channelName, channelShortId, channelLongId;
+    ({ channelName, channelShortId, channelLongId } = getUserCookies());
+    console.log(`userCookies`, getUserCookies());
+    console.log(`cookies found for channel: ${channelName} ${channelShortId} ${channelLongId}`);
+    this.props.onChannelLogin(channelName, channelShortId, channelLongId);
   }
   handleSelection (event) {
     const value = event.target.selectedOptions[0].value;
     switch (value) {
-      case 'logout':
+      case LOGOUT:
+        // remove session cookies
+        clearUserCookies();
+        // send logout request to server
+        window.location.href = '/logout';
         break;
-      case 'view':
+      case VIEW:
+        // redirect to channel page
+        window.location.href = `/${this.props.channelName}:${this.props.channelLongId}`;
         break;
       default:
         break;
@@ -29,35 +67,16 @@ class NavBar extends React.Component {
     return (
       <div className="row row--wide nav-bar">
         <div className="row row--padded row--short flex-container--row flex-container--space-between-center">
-          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="24px" viewBox="0 0 80 31" enable-background="new 0 0 80 31" xml:space="preserve" className="nav-bar-logo">
+          <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)" font-size="25" font-family="Roboto">Spee&lt;h</text>
-                        <g id="Group-16" transform="translate(0.000000, 30.000000)">
-                            <path id="Line-8" fill="none" stroke="#09F911" stroke-width="1" stroke-linecap="square" d="M0.5,1.5h15"/>
-                            <path id="Line-8-Copy" fill="none" stroke="#029D74" stroke-width="1" stroke-linecap="square" d="M16.5,1.5h15"/>
-                            <path id="Line-8-Copy-2" fill="none" stroke="#E35BD8" stroke-width="1" stroke-linecap="square" d="M32.5,1.5h15"/>
-                            <path id="Line-8-Copy-3" fill="none" stroke="#4156C5" stroke-width="1" stroke-linecap="square" d="M48.5,1.5h15"/>
-                            <path id="Line-8-Copy-4" fill="none" stroke="#635688" stroke-width="1" stroke-linecap="square" d="M64.5,1.5h15"/>
-                        </g>
-                    </g>
-                </g>
-            </g>
-            </a>
-        </svg>
           <div className="nav-bar--center">
             <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" href="/about">About</a>
-            { this.props.loggedInChannelName ? (
+            { this.props.channelName ? (
-              <select type="text" id="nav-bar-channel-select" className="select select--arrow link--nav" onchange={this.handleSelection}>
+              <select type="text" id="nav-bar-channel-select" className="select select--arrow link--nav" onChange={this.handleSelection}>
-                <option id="nav-bar-channel-select-channel-option">@{this.props.loggedInChannelName}</option>
+                <option id="nav-bar-channel-select-channel-option">{this.props.channelName}</option>
                 <option value={VIEW}>View</option>
                 <option value={LOGOUT}>Logout</option>
               </select>

react/containers/PublishForm/view.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import {getCookie} from 'utils/cookies';
 import Dropzone from 'containers/Dropzone';
 import PublishTitleInput from 'containers/PublishTitleInput';
 import PublishUrlInput from 'containers/PublishUrlInput';
@@ -15,14 +14,6 @@ class PublishForm extends React.Component {
     this.makePublishRequest = this.makePublishRequest.bind(this);
     this.publish = this.publish.bind(this);
   }
-  componentDidMount () {
-    // check for whether a channel is already logged in
-    const loggedInChannelName = getCookie('channel_name');
-    const loggedInChannelShortId = getCookie('short_channel_id');
-    const loggedInChannelLongId = getCookie('long_channel_id');
-    console.log(`channel cookies found: ${loggedInChannelName} ${loggedInChannelShortId} ${loggedInChannelLongId}`);
-    this.props.onChannelLogin(loggedInChannelName, loggedInChannelShortId, loggedInChannelLongId);
-  }
   validatePublishRequest () {
     // make sure all required data is provided
     return new Promise((resolve, reject) => {

react/utils/cookies.js

@@ -1,4 +1,11 @@
+const CHANNEL_NAME = 'CHANNEL_NAME';
+const CHANNEL_SHORT_ID = 'CHANNEL_SHORT_ID';
+const CHANNEL_LONG_ID = 'CHANNEL_LONG_ID';
+
 module.exports = {
+  setCookie (key, value) {
+    document.cookie = `${key}=${value}`;
+  },
   getCookie (cname) {
     const name = cname + '=';
     const decodedCookie = decodeURIComponent(document.cookie);
@@ -14,12 +21,24 @@ module.exports = {
     }
     return '';
   },
-  setCookie (key, value) {
+  clearCookie (name) {
-    document.cookie = `${key}=${value}`;
+    document.cookie = `${name}=; expires=Thu, 01-Jan-1970 00:00:01 GMT;`;
   },
   setUserCookies (channelName, shortChannelId, channelClaimId) {
-    module.exports.setCookie('channel_name', channelName)
+    module.exports.setCookie('CHANNEL_NAME', channelName);
-    module.exports.setCookie('channel_claim_id', channelClaimId);
+    module.exports.setCookie('CHANNEL_SHORT_ID', shortChannelId);
-    module.exports.setCookie('short_channel_id', shortChannelId);
+    module.exports.setCookie('CHANNEL_LONG_ID', channelClaimId);
   },
-}
+  clearUserCookies () {
+    module.exports.clearCookie('CHANNEL_NAME');
+    module.exports.clearCookie('CHANNEL_SHORT_ID');
+    module.exports.clearCookie('CHANNEL_LONG_ID');
+  },
+  getUserCookies () {
+    return {
+      channelName   : module.exports.getCookie('CHANNEL_NAME'),
+      channelShortId: module.exports.getCookie('CHANNEL_SHORT_ID'),
+      channelLongId : module.exports.getCookie('CHANNEL_LONG_ID'),
+    };
+  },
+};

views/about.handlebars

@@ -1,3 +1,4 @@
+{{> navBar}}
 <div class="row row--padded">
         <div class="column column--5 column--med-10 align-content-top">
             <div class="column column--8 column--med-10">

views/channel.handlebars

@@ -1,3 +1,4 @@
+{{> navBar}}
 <div class="row row--padded">
     <div class="row">
         {{#ifConditional this.totalPages '===' 0}}

views/fourOhFour.handlebars

@@ -1,3 +1,4 @@
+{{> navBar}}
 <div class="row row--padded">
     <h3>404: Not Found</h3>
     <p>That page does not exist.  Return <a class="link--primary" href="/">home</a>.</p>

views/index.handlebars

@@ -1,3 +1,4 @@
+<div id="react-nav-bar"></div>
 <div class="row row--tall flex-container--column">
     <div id="react-publish-tool" class="row row--padded row--tall flex-container--column">
         <div class="row row--padded row--tall flex-container--column flex-container--center-center">

views/layouts/channel.handlebars

@@ -18,7 +18,6 @@
 <body id="channel-body">
     <script src="/assets/js/generalFunctions.js"></script>
     <script src="/assets/js/navBarFunctions.js"></script>
-    {{> navBar}}
     {{{ body }}}
 </body>
 </html>

views/layouts/main.handlebars

@@ -22,7 +22,6 @@
     <script src="/assets/js/loginFunctions.js"></script>
     <script src="/assets/js/createChannelFunctions.js"></script>
     <script src="/assets/js/navBarFunctions.js"></script>
-    {{> navBar}}
     {{{ body }}}
 </body>
 </html>

views/layouts/show.handlebars

@@ -16,7 +16,6 @@
     <script src="/assets/js/generalFunctions.js"></script>
     <script src="/assets/js/navBarFunctions.js"></script>
     <script src="/assets/js/assetConstructor.js"></script>
-    {{> navBar}}
     {{{ body }}}
 </body>
 </html>

views/login.handlebars

@@ -1,3 +1,4 @@
+{{> navBar}}
 <div class="row row--padded">
     <div class="column column--5 column--med-10 align-content-top">
         <div class="column column--8 column--med-10">

views/noChannel.handlebars

@@ -1,3 +1,4 @@
+{{> navBar}}
 <div class="row row--padded">
     <h3>No Channel</h3>
     <p>There are no published channels matching your url</p>

views/noClaim.handlebars

@@ -1,3 +1,4 @@
+{{> navBar}}
 <div class="row row--padded">
     <h3>No Claims</h3>
     <p>There are no free assets at that claim.  You should publish one at <a class="link--primary" href="/">spee.ch</a>.</p>

views/popular.handlebars

@@ -1,3 +1,4 @@
+{{> navBar}}
 <div class="row row--padded">
     <div class="grid">
         {{#each trendingAssets}}
@@ -20,4 +21,4 @@
             percentPosition: true
         });
     });
-</script>
+</script>

views/requestError.handlebars

@@ -1,3 +1,4 @@
+{{> navBar}}
 <div class="row row--padded">
     <h3>Error</h3>
     <p>Unfortnately, Spee.ch encountered an error.  You can help us out, by reporting the below error message in the #speech channel on <a class="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">LBRY Discord</a>!</p>

views/show.handlebars

@@ -1,3 +1,4 @@
+{{> navBar}}
 <div class="row row--tall row--padded">
     <div class="column column--10">
         <!-- title -->
@@ -14,4 +15,4 @@
             {{> assetInfo}}
         </div>
     </div>
-</div>
+</div>