diff --git a/public/assets/js/generalFunctions.js b/public/assets/js/generalFunctions.js index e20facb4..c82022af 100644 --- a/public/assets/js/generalFunctions.js +++ b/public/assets/js/generalFunctions.js @@ -130,15 +130,15 @@ function clearCookie(name) { } function setUserCookies(channelName, shortChannelId, channelClaimId) { - setCookie('channel_name', channelName) - setCookie('channel_claim_id', channelClaimId); - setCookie('short_channel_id', shortChannelId); + setCookie('CHANNEL_NAME', channelName) + setCookie('CHANNEL_SHORT_ID', shortChannelId); + setCookie('CHANNEL_LONG_ID', channelClaimId); } function clearUserCookies() { - clearCookie('channel_name') - clearCookie('channel_claim_id'); - clearCookie('short_channel_id'); + clearCookie('CHANNEL_NAME') + clearCookie('CHANNEL_SHORT_ID'); + clearCookie('CHANNEL_LONG_ID'); } function copyToClipboard(event){ diff --git a/public/assets/js/navBarFunctions.js b/public/assets/js/navBarFunctions.js index 5df9cfc4..e405d70d 100644 --- a/public/assets/js/navBarFunctions.js +++ b/public/assets/js/navBarFunctions.js @@ -12,4 +12,4 @@ function toggleNavBarSelection (value) { // redirect to channel page window.location.href = `/${channelName}:${channelClaimId}`; } -} \ No newline at end of file +} diff --git a/react/app.js b/react/app.js index 63f3100d..d6af0313 100644 --- a/react/app.js +++ b/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( + + + , + document.getElementById('react-nav-bar') +) + ReactDOM.render( diff --git a/react/containers/ChannelCreateForm/view.jsx b/react/containers/ChannelCreateForm/view.jsx index 7484dd41..92fad44e 100644 --- a/react/containers/ChannelCreateForm/view.jsx +++ b/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) => { diff --git a/react/containers/ChannelLoginForm/view.jsx b/react/containers/ChannelLoginForm/view.jsx index ab90c649..1867da1a 100644 --- a/react/containers/ChannelLoginForm/view.jsx +++ b/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); diff --git a/react/containers/NavBar/index.js b/react/containers/NavBar/index.js index 37153ad2..6f8b5664 100644 --- a/react/containers/NavBar/index.js +++ b/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); diff --git a/react/containers/NavBar/view.jsx b/react/containers/NavBar/view.jsx index 6f51d4b1..52283571 100644 --- a/react/containers/NavBar/view.jsx +++ b/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 ( + + + Logo + Spee.ch logo + + + + Spee<h + + + + + + + + + + + + + ); +} + class NavBar extends React.Component { constructor (props) { super(props); - this.state = { - selectedOption: '', - } + this.checkForLoggedInUser = this.checkForLoggedInUser.bind(this); 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 (
- - - Logo - Spee.ch logo - - - - Spee<h - - - - - - - - - - - - +
Open-source, decentralized image and video sharing.
Publish About - { this.props.loggedInChannelName ? ( - + diff --git a/react/containers/PublishForm/view.jsx b/react/containers/PublishForm/view.jsx index d0d270f9..3b2c3880 100644 --- a/react/containers/PublishForm/view.jsx +++ b/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) => { diff --git a/react/utils/cookies.js b/react/utils/cookies.js index 0214cdd9..135347be 100644 --- a/react/utils/cookies.js +++ b/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) { - document.cookie = `${key}=${value}`; + 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_claim_id', channelClaimId); - module.exports.setCookie('short_channel_id', shortChannelId); + 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'), + }; + }, +}; diff --git a/views/about.handlebars b/views/about.handlebars index b6453990..0274f1e9 100644 --- a/views/about.handlebars +++ b/views/about.handlebars @@ -1,3 +1,4 @@ +{{> navBar}}
diff --git a/views/channel.handlebars b/views/channel.handlebars index 37eee568..2fcff401 100644 --- a/views/channel.handlebars +++ b/views/channel.handlebars @@ -1,3 +1,4 @@ +{{> navBar}}
{{#ifConditional this.totalPages '===' 0}} diff --git a/views/fourOhFour.handlebars b/views/fourOhFour.handlebars index 30d8ed8c..a7f6f0ea 100644 --- a/views/fourOhFour.handlebars +++ b/views/fourOhFour.handlebars @@ -1,3 +1,4 @@ +{{> navBar}}

404: Not Found

That page does not exist. Return home.

diff --git a/views/index.handlebars b/views/index.handlebars index 61276529..563fa20b 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -1,3 +1,4 @@ +
diff --git a/views/layouts/channel.handlebars b/views/layouts/channel.handlebars index 1088d728..0021e325 100644 --- a/views/layouts/channel.handlebars +++ b/views/layouts/channel.handlebars @@ -18,7 +18,6 @@ - {{> navBar}} {{{ body }}} diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars index 40ed3aee..41371bb4 100644 --- a/views/layouts/main.handlebars +++ b/views/layouts/main.handlebars @@ -22,7 +22,6 @@ - {{> navBar}} {{{ body }}} diff --git a/views/layouts/show.handlebars b/views/layouts/show.handlebars index 29ecf57c..6a47413e 100644 --- a/views/layouts/show.handlebars +++ b/views/layouts/show.handlebars @@ -16,7 +16,6 @@ - {{> navBar}} {{{ body }}} diff --git a/views/login.handlebars b/views/login.handlebars index 8e6e77bb..17b028cc 100644 --- a/views/login.handlebars +++ b/views/login.handlebars @@ -1,3 +1,4 @@ +{{> navBar}}
diff --git a/views/noChannel.handlebars b/views/noChannel.handlebars index 6f43d584..19b6a9bc 100644 --- a/views/noChannel.handlebars +++ b/views/noChannel.handlebars @@ -1,3 +1,4 @@ +{{> navBar}}

No Channel

There are no published channels matching your url

diff --git a/views/noClaim.handlebars b/views/noClaim.handlebars index 86273814..f479c81c 100644 --- a/views/noClaim.handlebars +++ b/views/noClaim.handlebars @@ -1,3 +1,4 @@ +{{> navBar}}

No Claims

There are no free assets at that claim. You should publish one at spee.ch.

diff --git a/views/popular.handlebars b/views/popular.handlebars index 1c8626fc..7f3072c2 100644 --- a/views/popular.handlebars +++ b/views/popular.handlebars @@ -1,3 +1,4 @@ +{{> navBar}}
{{#each trendingAssets}} @@ -20,4 +21,4 @@ percentPosition: true }); }); - \ No newline at end of file + diff --git a/views/requestError.handlebars b/views/requestError.handlebars index 83e56144..45048624 100644 --- a/views/requestError.handlebars +++ b/views/requestError.handlebars @@ -1,3 +1,4 @@ +{{> navBar}}

Error

Unfortnately, Spee.ch encountered an error. You can help us out, by reporting the below error message in the #speech channel on LBRY Discord!

diff --git a/views/show.handlebars b/views/show.handlebars index 7282a522..ac8066c8 100644 --- a/views/show.handlebars +++ b/views/show.handlebars @@ -1,3 +1,4 @@ +{{> navBar}}
@@ -14,4 +15,4 @@ {{> assetInfo}}
-
\ No newline at end of file +