Testing and patching notifications and modals; exploring icons for best favicon + manifest combo

src/js/views/modals/EditRadio.js

@@ -7,10 +7,12 @@ import ReactGA from 'react-ga'
 
 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 pusherActions from '../../services/pusher/actions'
 import * as helpers from '../../helpers';
 
 class EditRadio extends React.Component{
@@ -29,12 +31,22 @@ class EditRadio extends React.Component{
 		this.props.uiActions.setWindowTitle("Edit radio");
 
 		if (this.props.radio && this.props.radio.enabled){
-			var seeds = [...this.props.radio.seed_tracks, ...this.props.radio.seed_artists, ...this.props.radio.seed_genres];
-			this.setState({seeds: seeds, enabled: this.props.radio.enabled});
-			this.props.spotifyActions.resolveRadioSeeds(this.props.radio);
+			this.loadRadio(this.props.radio);
 		}
 	}
 
+	componentWillReceiveProps(nextProps){
+		if (!this.props.radio && nextProps.radio){
+			this.loadRadio(nextProps.radio);
+		}
+	}
+
+	loadRadio(radio){
+		var seeds = [...radio.seed_tracks, ...radio.seed_artists, ...radio.seed_genres];
+		this.setState({seeds: seeds, enabled: radio.enabled});
+		this.props.spotifyActions.resolveRadioSeeds(radio);
+	}
+
 	handleStart(e){
 		e.preventDefault();
 
@@ -202,7 +214,8 @@ class EditRadio extends React.Component{
 				<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>
 
-				<form onSubmit={e => this.addSeed(e)}>
+				<form onSubmit={e => {(this.state.enabled ? this.handleUpdate(e) : this.handleStart(e))}}>
+
 					{this.renderSeeds()}
 
 					<div className="field text">
@@ -213,17 +226,16 @@ class EditRadio extends React.Component{
 								onChange={e => this.setState({uri: e.target.value, error_message: null})} 
 								value={this.state.uri}
 							/>
-							<button type="submit" className="discrete add-uri no-hover">
+							<span className="button discrete add-uri no-hover" onClick={e => this.addSeed(e)}>
 								<Icon name="add" />Add
-							</button>
+							</span>
 							{this.state.error_message ? <span className="description error">{this.state.error_message}</span> : null}
 						</div>
 					</div>
-				</form>
 
-				<form>
 					<div className="actions centered-text">
-						{this.state.enabled ? <button className="destructive large" onClick={e => this.handleStop(e)}>Stop</button> : null}
+						{this.state.enabled ? <span className="button destructive large" onClick={e => this.handleStop(e)}>Stop</span> : null}
+
 						{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>
@@ -235,8 +247,9 @@ class EditRadio extends React.Component{
 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
+		radio: state.core.radio,
+		artists: state.core.artists,
+		tracks: state.core.tracks
 	}
 }
 
@@ -245,6 +258,7 @@ const mapDispatchToProps = (dispatch) => {
 		coreActions: bindActionCreators(coreActions, dispatch),
 		uiActions: bindActionCreators(uiActions, dispatch),
 		mopidyActions: bindActionCreators(mopidyActions, dispatch),
+		pusherActions: bindActionCreators(pusherActions, dispatch),
 		spotifyActions: bindActionCreators(spotifyActions, dispatch)
 	}
 }