Use React Bootstrap
This commit is contained in:
parent
a095b088a3
commit
5da188fcd0
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue