public/assets/js/createChannelFunctions.js

@@ -31,7 +31,6 @@ function publishNewChannel (event) {
             return sendAuthRequest(userName, password, '/signup') // post the request
         })
         .then(result => {
-            setUserCookies(result.channelName, result.shortChannelId, result.channelClaimId);
             showChannelCreateDoneDisplay();
             window.location = '/';
         })

public/assets/js/generalFunctions.js

@@ -96,51 +96,6 @@ function createProgressBar(element, size){
 	setInterval(updateOneBar, 300);
 }
 
-function setCookie(key, value) {
-    document.cookie = `${key}=${value}`;
-}
-
-function getCookie(cname) {
-    const name = cname + "=";
-    const decodedCookie = decodeURIComponent(document.cookie);
-    const ca = decodedCookie.split(';');
-    for(let i = 0; i <ca.length; i++) {
-        let c = ca[i];
-        while (c.charAt(0) == ' ') {
-            c = c.substring(1);
-        }
-        if (c.indexOf(name) == 0) {
-            return c.substring(name.length, c.length);
-        }
-    }
-    return "";
-}
-
-function checkCookie() {
-    const channelName = getCookie("channel_name");
-    if (channelName != "") {
-        console.log(`cookie found for ${channelName}`);
-    } else {
-        console.log('no channel_name cookie found');
-    }
-}
-
-function clearCookie(name) {
-    document.cookie = `${name}=; expires=Thu, 01-Jan-1970 00:00:01 GMT;`;
-}
-
-function setUserCookies(channelName, shortChannelId, channelClaimId) {
-    setCookie('CHANNEL_NAME', channelName)
-    setCookie('CHANNEL_SHORT_ID', shortChannelId);
-    setCookie('CHANNEL_LONG_ID', channelClaimId);
-}
-
-function clearUserCookies() {
-    clearCookie('CHANNEL_NAME')
-    clearCookie('CHANNEL_SHORT_ID');
-    clearCookie('CHANNEL_LONG_ID');
-}
-
 function copyToClipboard(event){
     var elementToCopy = event.target.dataset.elementtocopy;
     var element = document.getElementById(elementToCopy);

public/assets/js/loginFunctions.js

@@ -8,8 +8,6 @@ function loginToChannel (event) {
             return sendAuthRequest(userName, password, '/login')
         })
         .then(result => {
-            setUserCookies(result.channelName, result.shortChannelId, result.channelClaimId);
-            // if user is on the home page, update the needed elements without reloading
             window.location = '/';
         })
         .catch(error => {

public/assets/js/navBarFunctions.js

@@ -1,15 +0,0 @@
-function toggleNavBarSelection (value) {
-    const selectedOption = value;
-    if (selectedOption === 'LOGOUT') {
-        // remove session cookies
-        clearUserCookies();
-        // send logout request to server
-        window.location.href = '/logout';
-    } else if (selectedOption === 'VIEW') {
-        // get channel info
-        const channelName = getCookie('CHANNEL_NAME');
-        const channelClaimId = getCookie('CHANNEL_LONG_ID');
-        // redirect to channel page
-        window.location.href = `/${channelName}:${channelClaimId}`;
-    }
-}

react/containers/ChannelCreateForm/view.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import ProgressBar from 'components/ProgressBar';
 import { makeGetRequest, makePostRequest } from 'utils/xhr';
-import { setUserCookies } from 'utils/cookies';
 
 class ChannelCreateForm extends React.Component {
   constructor (props) {
@@ -44,7 +43,7 @@ class ChannelCreateForm extends React.Component {
   }
   updateIsChannelAvailable (channel) {
     const that = this;
-    const channelWithAtSymbol = `@${channel}`
+    const channelWithAtSymbol = `@${channel}`;
     makeGetRequest(`/api/channel-is-available/${channelWithAtSymbol}`)
       .then(isAvailable => {
         if (isAvailable) {
@@ -111,7 +110,6 @@ class ChannelCreateForm extends React.Component {
       })
       .then(result => {
         that.setState({status: null});
-        setUserCookies(result.channelName, result.shortChannelId, result.channelClaimId);
         that.props.onChannelLogin(result.channelName, result.shortChannelId, result.channelClaimId);
       })
       .catch((error) => {

react/containers/ChannelLoginForm/view.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { makePostRequest } from 'utils/xhr';
-import { setUserCookies } from 'utils/cookies';
 
 class ChannelLoginForm extends React.Component {
   constructor (props) {
@@ -25,7 +24,6 @@ class ChannelLoginForm extends React.Component {
     const that = this;
     makePostRequest(url, params)
       .then(result => {
-        setUserCookies(result.channelName, result.shortChannelId, result.channelClaimId);
         that.props.onChannelLogin(result.channelName, result.shortChannelId, result.channelClaimId);
       })
       .catch(error => {

react/containers/NavBar/view.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { clearUserCookies } from 'utils/cookies';
 import { authenticateUser } from 'utils/auth';
 import Logo from 'components/Logo';
 import NavBarChannelDropdown from 'components/NavBarChannelDropdown';

react/utils/cookies.js

@@ -1,44 +0,0 @@
-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);
-    const ca = decodedCookie.split(';');
-    for (let i = 0; i < ca.length; i++) {
-      let c = ca[i];
-      while (c.charAt(0) === ' ') {
-        c = c.substring(1);
-      }
-      if (c.indexOf(name) === 0) {
-        return c.substring(name.length, c.length);
-      }
-    }
-    return '';
-  },
-  clearCookie (name) {
-    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_SHORT_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/layouts/channel.handlebars

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

views/layouts/main.handlebars

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

views/layouts/show.handlebars

@@ -14,7 +14,6 @@
 </head>
 <body id="show-body">
     <script src="/assets/js/generalFunctions.js"></script>
-    <script src="/assets/js/navBarFunctions.js"></script>
     <script src="/assets/js/assetConstructor.js"></script>
     {{{ body }}}
 </body>

views/partials/navBar.handlebars

@@ -27,12 +27,15 @@
             <a class="nav-bar-link link--nav" href="/">Publish</a>
             <!--<a class="nav-bar-link link--nav" href="/popular">Popular</a>-->
             <a class="nav-bar-link link--nav" href="/about">About</a>
-            <select type="text" id="nav-bar-channel-select" class="select select--arrow link--nav" onchange="toggleNavBarSelection(event.target.selectedOptions[0].value)" {{#unless user}}style="display:none"{{/unless}}>
-                <option id="nav-bar-channel-select-channel-option">@{{user.userName}}</option>
-                <option value="VIEW">View</option>
+            {{#if user }}
+                <select type="text" id="nav-bar-channel-select" class="select select--arrow link--nav" onchange="toggleNavBarSelection(event)">
+                    <option id="nav-bar-channel-select-channel-option" >{{user.channelName}}</option>
+                    <option value="VIEW" data-channelUrl="/{{user.channelName}}:{{user.channelClaimId}}">View</option>
                     <option value="LOGOUT">Logout</option>
                 </select>
-            <a id="nav-bar-login-link" class="nav-bar-link link--nav" href="/login" {{#if user}}style="display:none"{{/if}}>Channel</a>
+            {{else}}
+                <a id="nav-bar-login-link" class="nav-bar-link link--nav" href="/login">Channel</a>
+            {{/if}}
         </div>
     </div>
 </div>
@@ -48,4 +51,16 @@
            link.setAttribute('class', 'select select--arrow link--nav-active');
        }
    }
+   // function to send user to their channel if selected
+   function toggleNavBarSelection (event) {
+     console.log('toggleNavBarSelection event', event);
+     const selectedOption = event.target.selectedOptions[0].value;
+       if (selectedOption === 'LOGOUT') {
+           // send logout request to server
+           window.location.href = '/logout';
+       } else if (selectedOption === 'VIEW') {
+           // redirect to channel page
+           window.location.href = event.target.selectedOptions[0].dataset.channelUrl;
+       }
+   }
 </script>