75 lines
2.5 KiB
JavaScript
75 lines
2.5 KiB
JavaScript
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';
|
|
|
|
class NavBar extends React.Component {
|
|
constructor (props) {
|
|
super(props);
|
|
this.checkForLoggedInUser = this.checkForLoggedInUser.bind(this);
|
|
this.handleSelection = this.handleSelection.bind(this);
|
|
}
|
|
componentDidMount () {
|
|
// check to see if the user is already logged in
|
|
this.checkForLoggedInUser();
|
|
}
|
|
checkForLoggedInUser () {
|
|
// check for whether a channel is already logged in
|
|
let channelName, channelShortId, channelLongId;
|
|
({ channelName, channelShortId, channelLongId } = getUserCookies());
|
|
console.log(`cookies found for channel: ${channelName} ${channelShortId} ${channelLongId}`);
|
|
if (channelName) {
|
|
this.props.onChannelLogin(channelName, channelShortId, channelLongId);
|
|
}
|
|
}
|
|
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
|
|
clearUserCookies();
|
|
// send logout request to server
|
|
window.location.href = '/logout';
|
|
break;
|
|
case VIEW:
|
|
// redirect to channel page
|
|
window.location.href = `/${this.props.channelName}:${this.props.channelLongId}`;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
render () {
|
|
return (
|
|
<div className="row row--wide nav-bar">
|
|
<div className="row row--padded row--short flex-container--row flex-container--space-between-center">
|
|
<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-active" href="/">Publish</a>
|
|
<a className="nav-bar-link link--nav" href="/about">About</a>
|
|
{ this.props.channelName ? (
|
|
<NavBarChannelDropdown
|
|
channelName={this.props.channelName}
|
|
handleSelection={this.handleSelection}
|
|
VIEW={VIEW}
|
|
LOGOUT={LOGOUT}
|
|
/>
|
|
) : (
|
|
<a id="nav-bar-login-link" className="nav-bar-link link--nav" href="/login">Channel</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default NavBar;
|