LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

added a navbar component

Browse source
This commit is contained in:
bill bittner 2018-01-18 12:43:02 -08:00
parent ca78165f70
commit 530e49961b
22 changed files with 111 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
public/assets/js/generalFunctions.js
View file

@ -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){

2
public/assets/js/navBarFunctions.js
View file

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

8
react/app.js
View file

@ -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 />

2
react/containers/ChannelCreateForm/view.jsx
View file

@ -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) => {

4
react/containers/ChannelLoginForm/view.jsx
View file

@ -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);

11
react/containers/NavBar/index.js
View file

@ -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);

77
react/containers/NavBar/view.jsx
View file

@ -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 = {
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 (
<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">
<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>
<Logo />
<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 ? (
<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>
{ this.props.channelName ? (
<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.channelName}</option>
<option value={VIEW}>View</option>
<option value={LOGOUT}>Logout</option>
</select>

9
react/containers/PublishForm/view.jsx
View file

@ -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) => {

31
react/utils/cookies.js
View file

@ -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'),
};
},
};

1
views/about.handlebars
View file

@ -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">

1
views/channel.handlebars
View file

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

1
views/fourOhFour.handlebars
View file

@ -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>

1
views/index.handlebars
View file

@ -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">

1
views/layouts/channel.handlebars
View file

@ -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>

1
views/layouts/main.handlebars
View file

@ -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>

1
views/layouts/show.handlebars
View file

@ -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>

1
views/login.handlebars
View file

@ -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">

1
views/noChannel.handlebars
View file

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

1
views/noClaim.handlebars
View file

@ -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>

3
views/popular.handlebars
View file

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

1
views/requestError.handlebars
View file

@ -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>

3
views/show.handlebars
View file

@ -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>