diff --git a/public/components/duplicate-finder-box.js b/public/components/duplicate-finder-box.js new file mode 100644 index 0000000..c7d8677 --- /dev/null +++ b/public/components/duplicate-finder-box.js @@ -0,0 +1,84 @@ +'use strict'; +var React = require('react'); +var ReactBootstrap = require('react-bootstrap'); + +var DuplicatesBox = require('./duplicates-box'); +var PlaylistBox = require('./playlist-box'); + +var DuplicateFinderBox = React.createClass({ + getInitialState: function () { + return { + currentId: null, + currentUId: null, + dups: null, + dupsLoading: false, + clicked: false + }; + }, + componentWillReceiveProps: function () { + this.setState({ + clicked: false + }); + }, + handlePlaylistClick: function (id, uid) { + this.setState({ + currentId: id, + currentUId: uid, + dupsLoading: true, + clicked: true + }); + var self = this; + + $.ajax({ + url: "/pl/" + uid + "/" + id, + data: { + 'access_token': self.props.auth.access_token + }, + success: function (data) { + var dups = data.data; + self.setState({ + dups: dups, + dupsLoading: false + }); + }, + error: function (xhr, response, err) { + console.error(response, err); + } + }); + }, + render: function () { + var duplicates; + var Col = ReactBootstrap.Col, + Row = ReactBootstrap.Row; + + if (this.state.clicked) { + duplicates =

Loading...

; + if (!this.state.dupsLoading) { + duplicates = ; + } + duplicates = ( + +

Duplicates

+ {duplicates} + + ) + } + + var playlistBox =

Loading...

; + if (!this.props.playlistsLoading) { + playlistBox = ; + } + + return ( + + +

Playlists

+ {playlistBox} + + {duplicates} +
+ ); + } +}); + +module.exports = DuplicateFinderBox; diff --git a/public/script.jsx b/public/script.jsx index 45734d7..2ca4c32 100644 --- a/public/script.jsx +++ b/public/script.jsx @@ -20,85 +20,7 @@ function getHashParams() { return hashParams; } -var DuplicatesBox = require('./components/duplicates-box'); - -var PlaylistBox = require('./components/playlist-box'); - -var DuplicateFinderBox = React.createClass({ - getInitialState: function () { - return { - currentId: null, - currentUId: null, - dups: null, - dupsLoading: false, - clicked: false - }; - }, - componentWillReceiveProps: function () { - this.setState({ - clicked: false - }); - }, - handlePlaylistClick: function (id, uid) { - this.setState({ - currentId: id, - currentUId: uid, - dupsLoading: true, - clicked: true - }); - var self = this; - - $.ajax({ - url: "/pl/" + uid + "/" + id, - data: { - 'access_token': self.props.auth.access_token - }, - success: function (data) { - var dups = data.data; - self.setState({ - dups: dups, - dupsLoading: false - }); - }, - error: function (xhr, response, err) { - console.error(response, err); - } - }); - }, - render: function () { - var duplicates; - var Col = ReactBootstrap.Col, - Row = ReactBootstrap.Row; - - if (this.state.clicked) { - duplicates =

Loading...

; - if (!this.state.dupsLoading) { - duplicates = ; - } - duplicates = ( - -

Duplicates

- {duplicates} - - ) - } - - var playlistBox =

Loading...

; - if (!this.props.playlistsLoading) { - playlistBox = ; - } - - return ( - - -

Playlists

- {playlistBox} - - {duplicates} -
- ); - } -}); +var DuplicateFinderBox = require('./components/duplicate-finder-box'); var Authenticate = React.createClass({ logout: function () {