Creation and deletion of playlists

src/js/views/Playlist.js

@@ -67,7 +67,7 @@ class Playlist extends React.Component{
 	}
 
 	delete(){
-		alert('Delete me')
+		this.props.mopidyActions.deletePlaylist( this.props.params.uri )
 	}
 
 	removeTracks( track_indexes ){
@@ -75,15 +75,14 @@ class Playlist extends React.Component{
 	}
 
 	renderFollowOrDeleteButton(){
-		if( !this.props.spotify_authorized ) return null
-
 		switch( helpers.uriSource( this.props.params.uri ) ){
 
 			case 'm3u':
 				return <ConfirmationButton className="large tertiary" content="Delete" confirmingContent="Are you sure?" onConfirm={ e => this.delete() } />
 				break
 
-			case 'spotify':			
+			case 'spotify':
+				if( !this.props.spotify_authorized ) return null
 				if( this.props.playlist.owner && this.props.playlist.owner.id == this.props.spotify_userid ){
 					return <ConfirmationButton className="large tertiary" content="Delete" confirmingContent="Are you sure?" onConfirm={ e => this.unfollow() } />
 				}else if( this.props.playlist.following ){

src/js/views/Settings.js

@@ -93,43 +93,43 @@ class Settings extends React.Component{
 
 					<h4 className="underline">Mopidy</h4>
 					<form onSubmit={(e) => this.setMopidyConfig(e)}>
-						<label>
-							<div className="label">Status</div>
+						<div className="field">
+							<div className="name">Status</div>
 							<div className="input">
 								{ this.renderConnectionStatus('mopidy') }
 							</div>
-						</label>
-						<label>
-							<div className="label">Host</div>
+						</div>
+						<div className="field">
+							<div className="name">Host</div>
 							<div className="input">
 								<input 
 									type="text"
 									onChange={ e => this.setState({ mopidy_host: e.target.value })} 
 									value={ this.state.mopidy_host } />
 							</div>
-						</label>
-						<label>
-							<div className="label">Port</div>
+						</div>
+						<div className="field">
+							<div className="name">Port</div>
 							<div className="input">
 								<input 
 									type="text"
 									onChange={ e => this.setState({ mopidy_port: e.target.value })} 
 									value={ this.state.mopidy_port } />
 							</div>
-						</label>
+						</div>
 						<button type="submit" className="secondary">Apply</button>
 					</form>
 
 					<h4 className="underline">Pusher</h4>
 					<form>
-						<label>
-							<div className="label">Status</div>
+						<div className="field">
+							<div className="name">Status</div>
 							<div className="input">
 								{ this.renderConnectionStatus('pusher') }
 							</div>
-						</label>
-						<label>
-							<div className="label">Username</div>
+						</div>
+						<div className="field">
+							<div className="name">Username</div>
 							<div className="input">
 								<input 
 									type="text"
@@ -137,9 +137,9 @@ class Settings extends React.Component{
 									onBlur={ e => this.props.pusherActions.changeUsername( this.state.pusher_username ) } 
 									value={ this.state.pusher_username } />
 							</div>
-						</label>
-						<label>
-							<div className="label">Port</div>
+						</div>
+						<div className="field">
+							<div className="name">Port</div>
 							<div className="input">
 								<input 
 									type="text"
@@ -147,19 +147,19 @@ class Settings extends React.Component{
 									onBlur={ e => this.props.pusherActions.setPort({ port: this.state.pusher_port }) } 
 									value={ this.state.pusher_port } />
 							</div>
-						</label>
+						</div>
 					</form>
 
 					<h4 className="underline">Spotify</h4>
 					<form onSubmit={(e) => this.setSpotifyConfig(e)}>
-						<label>
-							<div className="label">Status</div>
+						<div className="field">
+							<div className="name">Status</div>
 							<div className="input">
 								{ this.renderConnectionStatus('spotify') }
 							</div>
-						</label>
-						<label>
-							<div className="label">Country</div>
+						</div>
+						<div className="field">
+							<div className="name">Country</div>
 							<div className="input">
 								<input 
 									type="text"
@@ -167,9 +167,9 @@ class Settings extends React.Component{
 									onBlur={ e => this.setSpotifyConfig(e) } 
 									value={ this.state.spotify_country } />
 							</div>
-						</label>
-						<label>
-							<div className="label">Locale</div>
+						</div>
+						<div className="field">
+							<div className="name">Locale</div>
 							<div className="input">
 								<input 
 									type="text"
@@ -177,39 +177,39 @@ class Settings extends React.Component{
 									onBlur={ e => this.setSpotifyConfig(e) } 
 									value={ this.state.spotify_locale } />
 							</div>
-						</label>
+						</div>
 					</form>
 
 			        <SpotifyAuthenticationFrame />
 
 					<h4 className="underline">Advanced</h4>
 
-					<label>
-						<div className="label">Connections</div>
+					<div className="field">
+						<div className="name">Connections</div>
 						<div className="input">
 							<span className="text">
 			        			<PusherConnectionList />
 			        		</span>
 			        	</div>
-			        </label>
+			        </div>
 					
-					<label>
-						<div className="label">Backends</div>
+					<div className="field">
+						<div className="name">Backends</div>
 						<div className="input">
 							<span className="text">
 				        		<URISchemesList />
 			        		</span>
 			        	</div>
-			        </label>
+			        </div>
 					
-					<label>
-						<div className="label">Version</div>
+					<div className="field">
+						<div className="name">Version</div>
 						<div className="input">
 							<span className="text">
 				        		<VersionManager />
 			        		</span>
 			        	</div>
-			        </label>
+			        </div>
 
 			        <ConfirmationButton content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
 

src/js/views/library/LibraryPlaylists.js

@@ -3,10 +3,12 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { Link } from 'react-router'
+import FontAwesome from 'react-fontawesome'
 
 import PlaylistGrid from '../../components/PlaylistGrid'
 import Header from '../../components/Header'
 
+import * as uiActions from '../../services/ui/actions'
 import * as mopidyActions from '../../services/mopidy/actions'
 import * as spotifyActions from '../../services/spotify/actions'
 
@@ -30,6 +32,11 @@ class LibraryPlaylists extends React.Component{
 
 				<Header icon="playlist" title="My playlists" />
 
+				<button onClick={ () => this.props.uiActions.openModal('create_playlist',false) }>
+					<FontAwesome name="plus" />&nbsp;
+					New playlist
+				</button>
+
 				<section className="grid-wrapper">
 					<PlaylistGrid playlists={this.props.playlists} />
 				</section>
@@ -52,4 +59,12 @@ const mapStateToProps = (state, ownProps) => {
 	}
 }
 
-export default connect(mapStateToProps)(LibraryPlaylists)
+const mapDispatchToProps = (dispatch) => {
+	return {
+		uiActions: bindActionCreators(uiActions, dispatch),
+		mopidyActions: bindActionCreators(mopidyActions, dispatch),
+		spotifyActions: bindActionCreators(spotifyActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LibraryPlaylists)