From 98e686731e85404af9d47d9112de5ee15c59e6dc Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Sat, 23 Apr 2016 01:52:52 +0200
Subject: [PATCH] Extract Duplicate component and move Bootstrap to require.

---
 package.json                   |  2 ++
 public/components/Duplicate.js | 21 +++++++++++++++++++++
 public/index.html              |  3 ---
 public/script.jsx              | 19 +++----------------
 4 files changed, 26 insertions(+), 19 deletions(-)
 create mode 100644 public/components/Duplicate.js

diff --git a/package.json b/package.json
index 9bf1970..5bdae0e 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "version": "0.0.1",
   "main": "app.js",
   "dependencies": {
+    "bootstrap": "^3.3.6",
     "browserify": "^6.2.0",
     "cookie-parser": "1.3.2",
     "dotenv": "^2.0.0",
@@ -24,6 +25,7 @@
     "watchify": "^2.1.1"
   },
   "scripts": {
+    "start": "watchify -o public/bundle.min.js -v -d public/script.jsx",
     "postinstall": "browserify public/script.jsx | uglifyjs -cm > public/bundle.min.js"
   },
   "browserify": {
diff --git a/public/components/Duplicate.js b/public/components/Duplicate.js
new file mode 100644
index 0000000..45ecf06
--- /dev/null
+++ b/public/components/Duplicate.js
@@ -0,0 +1,21 @@
+'use strict';
+var React = require('react');
+var ReactBootstrap = require('react-bootstrap');
+
+var Duplicate = React.createClass({
+    render: function () {
+        var ListGroupItem = ReactBootstrap.ListGroupItem;
+        var authors = "";
+        this.props.track.artists.forEach(function (item, index) {
+            if (index != 0) {
+                authors += ', ';
+            }
+            authors += item.name;
+        });
+        return (
+            <ListGroupItem>{this.props.track.name} - {authors}</ListGroupItem>
+        );
+    }
+});
+
+module.exports = Duplicate;
diff --git a/public/index.html b/public/index.html
index 494800e..3a40b6a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,9 +12,6 @@
 
 <div id="content"></div>
 
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
-        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
-        crossorigin="anonymous"></script>
 <script type="text/javascript" src="bundle.min.js"></script>
 </body>
 </html>
diff --git a/public/script.jsx b/public/script.jsx
index e409c7b..d214513 100644
--- a/public/script.jsx
+++ b/public/script.jsx
@@ -1,9 +1,10 @@
 'use strict';
 
+var $ = window.$ = window.jQuery = require('jquery');
+require('bootstrap');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var ReactBootstrap = require('react-bootstrap');
-var $ = require('jquery');
 
 /**
  * Obtains parameters from the hash of the URL
@@ -19,21 +20,7 @@ function getHashParams() {
     return hashParams;
 }
 
-var Duplicate = React.createClass({
-    render: function () {
-        var ListGroupItem = ReactBootstrap.ListGroupItem;
-        var authors = "";
-        this.props.track.artists.forEach(function (item, index) {
-            if (index != 0) {
-                authors += ', ';
-            }
-            authors += item.name;
-        });
-        return (
-            <ListGroupItem>{this.props.track.name} - {authors}</ListGroupItem>
-        );
-    }
-});
+var Duplicate = require('./components/Duplicate');
 
 var DuplicatesBox = React.createClass({
     render: function () {