Extract Duplicate component and move Bootstrap to require.

This commit is contained in:
Gabriel Augendre 2016-04-23 01:52:52 +02:00
parent 84a2048165
commit 98e686731e
4 changed files with 26 additions and 19 deletions

View file

@ -5,6 +5,7 @@
"version": "0.0.1", "version": "0.0.1",
"main": "app.js", "main": "app.js",
"dependencies": { "dependencies": {
"bootstrap": "^3.3.6",
"browserify": "^6.2.0", "browserify": "^6.2.0",
"cookie-parser": "1.3.2", "cookie-parser": "1.3.2",
"dotenv": "^2.0.0", "dotenv": "^2.0.0",
@ -24,6 +25,7 @@
"watchify": "^2.1.1" "watchify": "^2.1.1"
}, },
"scripts": { "scripts": {
"start": "watchify -o public/bundle.min.js -v -d public/script.jsx",
"postinstall": "browserify public/script.jsx | uglifyjs -cm > public/bundle.min.js" "postinstall": "browserify public/script.jsx | uglifyjs -cm > public/bundle.min.js"
}, },
"browserify": { "browserify": {

View file

@ -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;

View file

@ -12,9 +12,6 @@
<div id="content"></div> <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> <script type="text/javascript" src="bundle.min.js"></script>
</body> </body>
</html> </html>

View file

@ -1,9 +1,10 @@
'use strict'; 'use strict';
var $ = window.$ = window.jQuery = require('jquery');
require('bootstrap');
var React = require('react'); var React = require('react');
var ReactDOM = require('react-dom'); var ReactDOM = require('react-dom');
var ReactBootstrap = require('react-bootstrap'); var ReactBootstrap = require('react-bootstrap');
var $ = require('jquery');
/** /**
* Obtains parameters from the hash of the URL * Obtains parameters from the hash of the URL
@ -19,21 +20,7 @@ function getHashParams() {
return hashParams; return hashParams;
} }
var Duplicate = React.createClass({ var Duplicate = require('./components/Duplicate');
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 DuplicatesBox = React.createClass({ var DuplicatesBox = React.createClass({
render: function () { render: function () {