import React, {Component} from 'react';
import {Link, NavLink} from "react-router-dom";
import NavigationItem from "../components/NavigationItem";
import {connect} from "react-redux";
import * as authActions from "../store/authActions";
/**
* web navigation
*/
class Navigation extends Component {
// renders navigation in the top of webpage
render() {
const {user} = this.props;
// render navigation
return (
<div className="position-sticky w-100 fixed-header">
<nav className="blue-nav navbar navbar-expand-lg navbar-light" id="blue-nav">
<div className="container">
<Link className="navbar-brand" to="/">CTS</Link>
<button className="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"/>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ml-auto d-flex align-items-center">
<NavigationItem exact to="/">Home</NavigationItem>
<NavigationItem exact to="/info">Info</NavigationItem>
{user.isAdmin && <NavigationItem to="/users">Users</NavigationItem>}
{user.isTranslator && <NavigationItem to="/institutions">Translate</NavigationItem>}
{user.isTranslator && <NavigationItem to="/myTranslations">My Translations</NavigationItem>}
{user.isInstitutionOwner && <NavigationItem to="/approve">Approve</NavigationItem>}
{user.isLoggedIn && <NavigationItem to="/myInstitution">My Institution</NavigationItem>}
{
user.isLoggedIn ?
<li className="nav-item dropdown">
<a className="nav-link" id="navbarDropdown" role="button" href="/#"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{user.username + " "}
<i className="fa fa-user" aria-hidden="true"/>
</a>
<div className="my-dropdown dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<NavLink className="dropdown-item" to="/profile">
<i className="fa fa-user" /> My Profile
</NavLink>
<div className="dropdown-divider"/>
<a onClick={(e) => {e.preventDefault(); this.props.logout();}} href="/#" className="dropdown-item" id="logout">
<i className="fa fa-sign-out" /> Logout
</a>
</div>
</li>
:
<>
<NavigationItem to="/signup">Signup</NavigationItem>
<NavigationItem to="/login">Login</NavigationItem>
</>
}
</ul>
</div>
</div>
</nav>
</div>
);
}
}
/**
* maps redux state to props
* @param state redux state
*/
const mapStateToProps = (state) => {
return {
user: state,
};
}
/**
* maps redux dispatch to props
* @param dispatch redux dispatch
*/
const mapDispatchToProps = (dispatch) => {
return {
logout: () => dispatch(authActions.logout()),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Navigation);