q3stats/frontend/src/views/NavigationBarView.js

/**
 * Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 * IN THE SOFTWARE.
 */

import ClassNames from "classnames";
import ContainerComponent from "../components/ContainerComponent";
import Glyphicon from "react-bootstrap/lib/Glyphicon";
import React from "react";
import Navbar from "react-bootstrap/lib/Navbar";
import {connect} from "react-redux";
import {Router, Link} from "react-router";

import {
  cleanup, expand, collapse, showAboutModal, hideAboutModal, showSettingsModal,
  hideSettingsModal
} from "../actions/navigationBar";
import {LAYOUT_WIDE} from "../lib/defs";

import AboutModalView from "./AboutModalView";
import SettingsModalView from "./SettingsModalView";

class NavigationBarItemView extends React.PureComponent {
  render () {
    let className = ClassNames({
      active: this.props.active
    });

    return (
      <li className={className}>
        <Link to={this.props.route} onClick={this.props.onClick}>
          {this.props.title}
        </Link>
      </li>
    );
  }
}

NavigationBarItemView.propTypes = {
  active: React.PropTypes.bool,
  route: React.PropTypes.string,
  title: React.PropTypes.string,
  onClick: React.PropTypes.func.isRequired
};

class NavigationBarView extends React.PureComponent {
  constructor (props) {
    super(props);
    this.onNavigationBarItemClick = this.onNavigationBarItemClick.bind(this);
    this.onNavigationBarToggleExpanded = this.onNavigationBarToggleExpanded.bind(this);
    this.onHideSettingsModal = this.onHideSettingsModal.bind(this);
    this.onShowSettingsModalButtonClick = this.onShowSettingsModalButtonClick.bind(this);
    this.onHideAboutModal = this.onHideAboutModal.bind(this);
    this.onShowAboutModalButtonClick = this.onShowAboutModalButtonClick.bind(this);
  }
  onNavigationBarItemClick (e) {
    this.props.dispatch(collapse());
  }
  onNavigationBarToggleExpanded (expanded) {
    if (expanded) {
      this.props.dispatch(expand());
    } else {
      this.props.dispatch(collapse());
    }
  }
  onShowSettingsModalButtonClick () {
    this.props.dispatch(showSettingsModal());
  }
  onHideSettingsModal () {
    this.props.dispatch(hideSettingsModal());
  }
  onShowAboutModalButtonClick () {
    this.props.dispatch(showAboutModal());
  }
  onHideAboutModal () {
    this.props.dispatch(hideAboutModal());
  }
  render () {
    return (
      <div className="q3stats-navigation-bar">
        <Navbar
          ref="navbar"
          expanded={this.props.expanded}
          fixedTop
          fluid={this.props.layout == LAYOUT_WIDE}
          onToggle={this.onNavigationBarToggleExpanded}>
          <Navbar.Header>
            <Navbar.Brand>
              <a>Q3Stats</a>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>

          <Navbar.Collapse>
            <ul className="nav navbar-nav">
              <NavigationBarItemView
                active={this.props.router.isActive("/", true)}
                route="/"
                title="Dashboard"
                onClick={this.onNavigationBarItemClick} />
              <NavigationBarItemView
                active={this.props.router.isActive("/sessions/", false)}
                route="/sessions/"
                title="Sessions"
                onClick={this.onNavigationBarItemClick} />
              <NavigationBarItemView
                active={this.props.router.isActive("/players/", false)}
                route="/players/"
                title="Players"
                onClick={this.onNavigationBarItemClick} />
            </ul>

            <ul className="nav navbar-nav navbar-right">
              <li>
                <a onClick={this.onShowSettingsModalButtonClick}>
                  <Glyphicon className="hidden-xs hidden-sm" glyph="cog" />
                  <span className="hidden-md hidden-lg">Settings</span>
                </a>
              </li>
              <li>
                <a onClick={this.onShowAboutModalButtonClick}>
                  <Glyphicon className="hidden-xs hidden-sm" glyph="info-sign" />
                  <span className="hidden-md hidden-lg">About</span>
                </a>
              </li>
            </ul>
          </Navbar.Collapse>
        </Navbar>

        <AboutModalView
          show={this.props.showAboutModal}
          onHide={this.onHideAboutModal} />

        <SettingsModalView
          show={this.props.showSettingsModal}
          onHide={this.onHideSettingsModal} />
      </div>
    );
  }
}

NavigationBarView.propTypes = {
  expanded: React.PropTypes.bool.isRequired,
  layout: React.PropTypes.string.isRequired,
  location: React.PropTypes.object.isRequired,
  router: React.PropTypes.object.isRequired,
  showAboutModal: React.PropTypes.bool.isRequired,
  showSettingsModal: React.PropTypes.bool.isRequired
};

const mapStateToProps = (state, props) => {
  return {
    expanded: state.navigationBar.expanded,
    layout: state.settings.layout,
    location: props.location,
    router: props.router,
    showAboutModal: state.navigationBar.showAboutModal,
    showSettingsModal: state.navigationBar.showSettingsModal
  };
};

const reduxContainer = connect(mapStateToProps)(NavigationBarView);

export default reduxContainer;