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/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/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/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" <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>

91
public/script.js
View file

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