gaugendre/DAVIDS
1
0
Fork 0
Code Issues Pull requests Releases Activity

Use React Bootstrap

Browse source
This commit is contained in:
Gabriel Augendre 2016-04-22 00:12:57 +02:00
parent a095b088a3
commit 5da188fcd0
2 changed files with 46 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public/index.html
View file

@ -16,6 +16,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.29.1/react-bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>

91
public/script.js
View file

@ -16,6 +16,7 @@ function getHashParams() {
var Duplicate = React.createClass({
render: function () {
var ListGroupItem = ReactBootstrap.ListGroupItem;
var authors = "";
this.props.track.artists.forEach(function (item, index) {
if (index != 0) {
@ -24,13 +25,14 @@ var Duplicate = React.createClass({
authors += item.name;
});
return (
<div className="list-group-item">{this.props.track.name} - {authors}</div>
<ListGroupItem>{this.props.track.name} - {authors}</ListGroupItem>
);
}
});
var DuplicatesBox = React.createClass({
render: function () {
var ListGroup = ReactBootstrap.ListGroup;
if (this.props.dups && this.props.dups.length > 0) {
var duplicates = this.props.dups.map(function (duplicate) {
return (
@ -38,9 +40,9 @@ var DuplicatesBox = React.createClass({
);
});
return (
<div className="duplicatesBox list-group">
<ListGroup>
{duplicates}
</div>
</ListGroup>
);
}
else {
@ -63,8 +65,9 @@ var PlaylistBox = React.createClass({
this.props.handleClick(id, uid);
},
render: function () {
var ListGroup = ReactBootstrap.ListGroup;
var currentId = this.state.currentId;
var playlists;
var playlists = <p>No playlist found.</p>;
if (this.props.playlists) {
playlists = this.props.playlists.map(function (pl) {
var id = pl.id;
@ -75,9 +78,9 @@ var PlaylistBox = React.createClass({
}, this);
}
return (
<div className="playListBox list-group">
<ListGroup className="playListBox">
{playlists}
</div>
</ListGroup>
);
}
});
@ -125,30 +128,35 @@ var DuplicateFinderBox = React.createClass({
},
render: function () {
var duplicates;
var Col = ReactBootstrap.Col,
Row = ReactBootstrap.Row;
if (this.state.clicked) {
duplicates = <p>Loading...</p>;
if (!this.state.dupsLoading) {
duplicates = <DuplicatesBox dups={this.state.dups}/>;
}
duplicates = (
<div className="col-sm-8 col-md-9">
<Col md={9} sm={8}>
<h2>Duplicates</h2>
{duplicates}
</div>
</Col>
)
}
var playlistBox = <p>Loading...</p>;
if (!this.props.playlistsLoading) {
playlistBox = <PlaylistBox handleClick={this.handlePlaylistClick} playlists={this.props.playlists}/>;
}
return (
<div className="duplicateFinderBox row">
<div className="col-sm-4 col-md-3">
<Row className="duplicateFinderBox">
<Col md={3} sm={4}>
<h2>Playlists</h2>
{playlistBox}
</div>
</Col>
{duplicates}
</div>
</Row>
);
}
});
@ -175,50 +183,41 @@ var Authenticate = React.createClass({
},
render: function () {
var auth;
var Nav = ReactBootstrap.Nav,
NavItem = ReactBootstrap.NavItem,
Navbar = ReactBootstrap.Navbar;
if (this.props.auth.access_token == null) {
auth = (
<ul className="nav navbar-nav navbar-right">
<li>
<a href="/login"><strong>Login With Spotify</strong></a>
</li>
</ul>
<Nav pullRight>
<NavItem eventKey={1} href="/login"><strong>Login With Spotify</strong></NavItem>
</Nav>
);
}
else {
auth = (
<ul className="nav navbar-nav navbar-right">
<li>
<a href="#" onClick={this.refreshToken}>Refresh my token</a>
</li>
<li>
<a href="#" onClick={this.logout}><strong>Logout</strong></a>
</li>
</ul>
<Nav pullRight>
<NavItem eventKey={2} onClick={this.refreshToken} href="#">Refresh my token</NavItem>
<NavItem eventKey={3} onClick={this.logout} href="#"><strong>Logout</strong></NavItem>
</Nav>
);
}
return (
<nav className="navbar navbar-default navbar-static-top" role="navigation">
<div className="container-fluid">
<button type="button" className="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<div className="navbar-header">
<a className="navbar-brand" href="#">DuplicateFinder</a>
</div>
<div className="collapse navbar-collapse navbar-ex1-collapse">
<ul className="nav navbar-nav">
<li className="active"><a href="#">Finder</a></li>
</ul>
{auth}
</div>
</div>
</nav>
<Navbar fluid={true}>
<Navbar.Header>
<Navbar.Brand>
<a href="#">Duplicate Finder</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#" active>Finder</NavItem>
</Nav>
{auth}
</Navbar.Collapse>
</Navbar>
);
}
});