Adding Queue modals

src/js/views/modals/AddToQueue.js

@@ -1,10 +1,19 @@
 
-import React, { PropTypes } from 'react';;
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { Link } from 'react-router'
+import ReactGA from 'react-ga'
 
-import Icon from '../Icon';
+import Modal from './Modal';
+import Icon from '../../components/Icon';
+import * as coreActions from '../../services/core/actions'
+import * as uiActions from '../../services/ui/actions'
+import * as mopidyActions from '../../services/mopidy/actions'
+import * as spotifyActions from '../../services/spotify/actions'
 import * as helpers from '../../helpers';
 
-export default class AddToQueueModal extends React.Component{
+class AddToQueue extends React.Component{
 
 	constructor(props){
 		super(props)
@@ -15,14 +24,15 @@ export default class AddToQueueModal extends React.Component{
 	}
 
 	handleSubmit(e){
+		e.preventDefault();
 		var uris = this.state.uris.split(',');
 		this.props.mopidyActions.enqueueURIs(uris, null, this.state.next);
-		this.props.uiActions.closeModal();
+		window.history.back();
 	}
 
 	render(){
 		return (
-			<div>
+			<Modal className="add-to-queue-modal">
 				<h1>Add to queue</h1>
 				<h2 className="grey-text">Add a comma-separated list of URIs to the play queue. You must have the appropriate Mopidy backend enabled for each URI schema (eg spotify:, yt:).</h2>
 
@@ -65,7 +75,26 @@ export default class AddToQueueModal extends React.Component{
 						<button type="submit" className="primary large">Add</button>
 					</div>
 				</form>
-			</div>
+			</Modal>
 		)
 	}
-}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		mopidy_connected: state.mopidy.connected,
+		playlist: (state.core.playlists[ownProps.params.uri] !== undefined ? state.core.playlists[ownProps.params.uri] : null),
+		playlists: state.core.playlists
+	}
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		coreActions: bindActionCreators(coreActions, dispatch),
+		uiActions: bindActionCreators(uiActions, dispatch),
+		mopidyActions: bindActionCreators(mopidyActions, dispatch),
+		spotifyActions: bindActionCreators(spotifyActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AddToQueue)

src/js/views/modals/CreatePlaylist.js

@@ -1,10 +1,17 @@
 
-import React, { PropTypes } from 'react';;
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { Link } from 'react-router'
+import ReactGA from 'react-ga'
 
-import Icon from '../Icon';
+import Modal from './Modal';
+import Icon from '../../components/Icon';
+import * as coreActions from '../../services/core/actions'
+import * as uiActions from '../../services/ui/actions'
 import * as helpers from '../../helpers';
 
-export default class CreatePlaylistModal extends React.Component{
+class CreatePlaylist extends React.Component{
 
 	constructor(props){
 		super(props)
@@ -24,8 +31,14 @@ export default class CreatePlaylistModal extends React.Component{
 			this.setState({error: 'Name is required'})
 			return false
 		} else {	
-			this.props.coreActions.createPlaylist(this.state.scheme, this.state.name, this.state.description, this.state.is_public, this.state.is_collaborative )
-			this.props.uiActions.closeModal()
+			this.props.coreActions.createPlaylist(
+				this.state.scheme, 
+				this.state.name,
+				this.state.description,
+				this.state.is_public,
+				this.state.is_collaborative
+			);
+			window.history.back();
 		}
 
 		return false
@@ -103,7 +116,7 @@ export default class CreatePlaylistModal extends React.Component{
 
 	render(){
 		return (
-			<div>
+			<Modal className="create-playlist-modal">
 				<h1>Create playlist</h1>
 				<form onSubmit={(e) => this.createPlaylist(e)}>
 
@@ -140,7 +153,20 @@ export default class CreatePlaylistModal extends React.Component{
 					</div>
 
 				</form>
-			</div>
+			</Modal>
 		)
 	}
-}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {}
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		coreActions: bindActionCreators(coreActions, dispatch),
+		uiActions: bindActionCreators(uiActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CreatePlaylist)

src/js/views/modals/EditRadio.js

@@ -1,10 +1,19 @@
 
-import React, { PropTypes } from 'react';;
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { Link } from 'react-router'
+import ReactGA from 'react-ga'
 
-import Icon from '../Icon';
+import Modal from './Modal';
+import Icon from '../../components/Icon';
+import * as coreActions from '../../services/core/actions'
+import * as uiActions from '../../services/ui/actions'
+import * as mopidyActions from '../../services/mopidy/actions'
+import * as spotifyActions from '../../services/spotify/actions'
 import * as helpers from '../../helpers';
 
-export default class EditRadioModal extends React.Component{
+class EditRadio extends React.Component{
 
 	constructor(props){
 		super(props)
@@ -191,7 +200,7 @@ export default class EditRadioModal extends React.Component{
 
 	render(){
 		return (
-			<div>
+			<Modal className="edit-radio-modal">
 				<h1>Radio</h1>
 				<h2 className="grey-text">Add and remove seeds to shape the sound of your radio. Radio uses Spotify's recommendations engine to suggest tracks similar to your seeds.</h2>
 
@@ -220,7 +229,26 @@ export default class EditRadioModal extends React.Component{
 						{this.state.enabled ? <button className="primary large" onClick={e => this.handleUpdate(e)}>Save</button> : <button className="primary large" onClick={e => this.handleStart(e)}>Start</button>}
 					</div>
 				</form>
-			</div>
+			</Modal>
 		)
 	}
-}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		mopidy_connected: state.mopidy.connected,
+		playlist: (state.core.playlists[ownProps.params.uri] !== undefined ? state.core.playlists[ownProps.params.uri] : null),
+		playlists: state.core.playlists
+	}
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		coreActions: bindActionCreators(coreActions, dispatch),
+		uiActions: bindActionCreators(uiActions, dispatch),
+		mopidyActions: bindActionCreators(mopidyActions, dispatch),
+		spotifyActions: bindActionCreators(spotifyActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(EditRadio)