Commit 78baf64a authored by Tamlyn Rhodes's avatar Tamlyn Rhodes

Update Navigation component to use AppBar

Cut out Manage component since we no longer need Bootstrap styles
parent 38156e5b
import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router-dom'
import { LinkContainer } from 'react-router-bootstrap'
import { Navbar, Nav, NavItem, NavbarBrand } from 'react-bootstrap'
import { withRouter, NavLink } from 'react-router-dom'
import { connect } from 'react-redux'
import Authorize from 'pubsweet-client/src/helpers/Authorize'
import NavbarUser from 'pubsweet-component-navigation/NavbarUser'
import actions from 'pubsweet-client/src/actions'
import { AppBar } from '@pubsweet/ui'
import classes from './Navigation.local.scss'
// TODO -- break into smaller components
class Navigation extends React.Component {
constructor (props) {
constructor(props) {
super(props)
this.collectionId = ''
this.inEditor = null
}
componentDidMount () {
componentDidMount() {
this.shouldAddBookLink()
}
componentWillUpdate () {
componentWillUpdate() {
this.shouldAddBookLink()
}
shouldAddBookLink () {
shouldAddBookLink() {
const { history } = this.props
const { location } = history
const { pathname } = location
......@@ -35,68 +35,47 @@ class Navigation extends React.Component {
this.inEditor = pathname.match(/fragments/g)
if (this.inEditor) {
const pathnameSplited = pathname.split('/')
this.collectionId = pathnameSplited[2]
const pathnameSplit = pathname.split('/')
this.collectionId = pathnameSplit[2]
}
}
render () {
render() {
const { logoutUser, currentUser } = this.props
let logoutButtonIfAuthenticated
if (currentUser.isAuthenticated) {
logoutButtonIfAuthenticated = (
<NavbarUser
user={currentUser.user}
onLogoutClick={() => logoutUser('/login')}
/>
)
}
let BackToBooks
if (this.inEditor) {
BackToBooks = (
<LinkContainer to={`/books/${this.collectionId}/book-builder`}>
<NavItem>Back to book</NavItem>
</LinkContainer>
)
}
// TODO -- fix object properties underneath
return (
<Navbar fluid>
<Navbar.Header>
<NavbarBrand>
<a href="/">Editoria</a>
</NavbarBrand>
</Navbar.Header>
<Nav>
<LinkContainer to="/books">
<NavItem>Books</NavItem>
</LinkContainer>
<Authorize operation="read" object={{ path: '/users' }}>
<LinkContainer to="/users">
<NavItem>Users</NavItem>
</LinkContainer>
</Authorize>
<Authorize operation="read" object={{ path: '/teams' }}>
<LinkContainer to="/teams">
<NavItem>Teams</NavItem>
</LinkContainer>
</Authorize>
{BackToBooks}
</Nav>
{logoutButtonIfAuthenticated}
</Navbar>
<AppBar
brand="Editoria"
className={classes.root}
navLinks={
<NavLinks collectionId={this.collectionId} inEditor={this.inEditor} />
}
onLogoutClick={logoutUser}
user={currentUser.user}
/>
)
}
}
const NavLinks = ({ inEditor, collectionId }) => (
<div>
<NavLink to="/books">Books</NavLink>
<Authorize operation="read" object={{ path: '/users' }}>
<NavLink to="/users">Users</NavLink>
</Authorize>
<Authorize operation="read" object={{ path: '/teams' }}>
<NavLink to="/teams">Teams</NavLink>
</Authorize>
{inEditor && (
<NavLink to={`/books/${collectionId}/book-builder`}>Back to book</NavLink>
)}
</div>
)
Navigation.propTypes = {
currentUser: PropTypes.object,
history: PropTypes.object.isRequired,
......
.root {
font-style: italic;
}
\ No newline at end of file
import React from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
// Import Bootstrap + Font Awesome styles
import 'pubsweet-component-manage/Manage.scss'
// Users and Teams
import UsersManager from 'pubsweet-component-users-manager/UsersManagerContainer'
import TeamsManager from 'pubsweet-component-teams-manager/TeamsManagerContainer'
......@@ -21,7 +18,6 @@ import WithConfig from 'pubsweet-component-wax/src/WithConfig'
import BookBuilder from 'pubsweet-component-bookbuilder/src/BookBuilder'
import Dashboard from 'pubsweet-component-editoria-dashboard/src/Dashboard'
import Manage from 'pubsweet-component-manage/Manage'
import Navigation from './components/Navigation/Navigation'
import PrivateRoute from './components/PrivateRoute'
......@@ -57,13 +53,15 @@ export default (
<Route path='/signup' component={Signup} />
<Route path='/password-reset' component={PasswordReset} />
<Manage nav={<Navigation />}>
<div>
<Navigation />
<PrivateRoute exact path='/books' component={Dashboard} />
<PrivateRoute path='/books/:id/book-builder' component={BookBuilder} />
<PrivateRoute path='/books/:bookId/fragments/:fragmentId' component={Editor} />
<PrivateRoute path='/teams' component={TeamsManager} />
<PrivateRoute path='/users' component={UsersManager} />
</Manage>
</div>
</Switch>
)
......@@ -21,6 +21,7 @@
"dependencies": {
"@pubsweet/db-manager": "^0.0.8",
"@pubsweet/logger": "^0.0.1",
"@pubsweet/ui": "^0.2.0",
"authsome": "0.0.9",
"font-awesome": "4.7.0",
"history": "^4.7.2",
......@@ -35,7 +36,6 @@
"pubsweet-component-ink-backend": "^0.1.1",
"pubsweet-component-ink-frontend": "^0.2.3",
"pubsweet-component-login": "^0.5.5",
"pubsweet-component-manage": "^0.2.0",
"pubsweet-component-navigation": "^0.3.0",
"pubsweet-component-password-reset-backend": "^0.2.0",
"pubsweet-component-password-reset-frontend": "^0.2.1",
......@@ -59,7 +59,6 @@
"redux": "3.6.0"
},
"devDependencies": {
"@pubsweet/db-manager": "^0.0.8",
"app-module-path": "^2.2.0",
"autobind-decorator": "^1.3.4",
"babel-core": "^6.14.0",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment