ODWRTW/canape
2
2
Fork 0
Code Issues 3 Pull Requests 1 Releases Activity

Add react-bootstrap to the party

Browse Source
This commit is contained in:
Grégoire Delattre 2016-11-16 15:04:49 +01:00
parent 61b820b9b9
commit 544d4c8239
4 changed files with 97 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -17,9 +17,11 @@
"jquery": "^2.2.4",
"jwt-decode": "^2.1.0",
"react": "^15.3.2",
"react-bootstrap": "^0.30.6",
"react-dom": "^15.3.2",
"react-redux": "^4.4.6",
"react-router": "^3.0.0",
"react-router-bootstrap": "^0.23.1",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0",
"redux-auth-wrapper": "^0.9.0",

2
src/public/js/app.js
View File

@ -28,9 +28,7 @@ class Main extends React.Component {
render() {
return (
<div>
<div className="navbar navbar-inverse navbar-fixed-top">
<NavBar {...this.props}/>
</div>
<Error {...this.props}/>
<div className="container-fluid">
<div className="container">

55
src/public/js/components/navbar.jsx
View File

@ -3,38 +3,49 @@ import { Link } from 'react-router'
import { store } from '../store'
import { isUserLoggedIn } from '../actions/actionCreators'
import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'
export default class NavBar extends React.Component {
render() {
const username = this.props.userStore.username;
const isLoggedIn = username !== "" ? true : false;
return (
<div className="container-fluid">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href="#">Canapé</a>
</div>
<div className="collapse navbar-collapse">
<ul className="nav navbar-nav">
<li><Link to="/movies/popular">Movies</Link></li>
</ul>
<ul className="nav navbar-nav navbar-right">
{isLoggedIn &&
<li><Link to="/users/details">{username} / Edit</Link></li>
}
<div>
<Navbar inverse fixedTop collapseOnSelect>
<Navbar.Header>
<LinkContainer to="/">
<Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>
</LinkContainer>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<LinkContainer to="/movies/popular">
<NavItem>Movies</NavItem>
</LinkContainer>
</Nav>
<Nav pullRight>
{isLoggedIn ||
<li><Link to="/users/login">Login</Link></li>
<LinkContainer to="/users/login">
<NavItem>Login</NavItem>
</LinkContainer>
}
{isLoggedIn &&
<li><a onClick={this.props.userLogout}>Logout</a></li>
<NavDropdown title={username} id="navbar-dropdown-right">
<LinkContainer to="/users/edit">
<MenuItem>Edit</MenuItem>
</LinkContainer>
<LinkContainer to="/users/logout" onClick={this.props.userLogout}>
<MenuItem>Logout</MenuItem>
</LinkContainer>
</NavDropdown>
}
</ul>
</div>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
}

57
yarn.lock
View File

@ -859,6 +859,10 @@ chokidar@^1.0.0:
optionalDependencies:
fsevents "^1.0.0"
classnames@^2.2.5:
version "2.2.5"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
cliui@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@ -1036,6 +1040,10 @@ detect-indent@^4.0.0:
dependencies:
repeating "^2.0.0"
dom-helpers@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-2.4.0.tgz#9bb4b245f637367b1fa670274272aa28fe06c367"
domain-browser@^1.1.1:
version "1.1.7"
resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
@ -1692,6 +1700,12 @@ invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1:
dependencies:
loose-envify "^1.0.0"
invariant@^2.1.0:
version "2.2.2"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
dependencies:
loose-envify "^1.0.0"
is-absolute@^0.2.3:
version "0.2.6"
resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-0.2.6.tgz#20de69f3db942ef2d87b9c2da36f172235b1b5eb"
@ -1913,6 +1927,10 @@ jwt-decode:
version "2.1.0"
resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-2.1.0.tgz#d3079cef1689d82d56bbb7aedcfea28b12f0e36a"
keycode@^2.1.2:
version "2.1.7"
resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.1.7.tgz#7b9255919f6cff562b09a064d222dca70b020f5c"
kind-of@^3.0.2:
version "3.0.4"
resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.0.4.tgz#7b8ecf18a4e17f8269d73b501c9f232c96887a74"
@ -2579,10 +2597,39 @@ rc@~1.1.6:
minimist "^1.2.0"
strip-json-comments "~1.0.4"
react-bootstrap:
version "0.30.6"
resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-0.30.6.tgz#288662a245f9dbb79f7740ee595e4ec931d6a4a9"
dependencies:
babel-runtime "^6.11.6"
classnames "^2.2.5"
dom-helpers "^2.4.0"
invariant "^2.2.1"
keycode "^2.1.2"
react-overlays "^0.6.10"
react-prop-types "^0.4.0"
uncontrollable "^4.0.1"
warning "^3.0.0"
react-dom@^15.3.2:
version "15.3.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"
react-overlays@^0.6.10:
version "0.6.10"
resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.6.10.tgz#e7e52dad47f00a0fc784eb044428c3a9e874bfa3"
dependencies:
classnames "^2.2.5"
dom-helpers "^2.4.0"
react-prop-types "^0.4.0"
warning "^3.0.0"
react-prop-types@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/react-prop-types/-/react-prop-types-0.4.0.tgz#f99b0bfb4006929c9af2051e7c1414a5c75b93d0"
dependencies:
warning "^3.0.0"
react-redux:
version "4.4.6"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-4.4.6.tgz#4b9d32985307a11096a2dd61561980044fcc6209"
@ -2602,6 +2649,10 @@ react-router:
loose-envify "^1.2.0"
warning "^3.0.0"
react-router-bootstrap:
version "0.23.1"
resolved "https://registry.yarnpkg.com/react-router-bootstrap/-/react-router-bootstrap-0.23.1.tgz#a1e0b82f49d25a6083c72202ad16aaa64bba0e0c"
react-router-redux:
version "4.0.7"
resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-4.0.7.tgz#9b1fde4e70106c50f47214e12bdd888cfb96e2a6"
@ -3116,6 +3167,12 @@ unc-path-regex@^0.1.0:
version "0.1.2"
resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
uncontrollable@^4.0.1:
version "4.0.3"
resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-4.0.3.tgz#06ec76cb9e02914756085d9cea0354fc746b09b4"
dependencies:
invariant "^2.1.0"
unique-stream@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-1.0.0.tgz#d59a4a75427447d9aa6c91e70263f8d26a4b104b"