From 5da188fcd0b0fe6c5470fd8e38c310b9736ee65d Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Fri, 22 Apr 2016 00:12:57 +0200
Subject: [PATCH] Use React Bootstrap

---
 public/index.html |  1 +
 public/script.js  | 91 +++++++++++++++++++++++------------------------
 2 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/public/index.html b/public/index.html
index 7ea9863..668308a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>
diff --git a/public/script.js b/public/script.js
index aa8208e..254c704 100644
--- a/public/script.js
+++ b/public/script.js
@@ -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>
         );
     }
 });