loverajoel · markoscc-zz · Nov 2, 2015 · Nov 2, 2015 · Nov 3, 2015
diff --git a/app/index.html b/app/index.html
@@ -1,6 +1,8 @@
+<!doctype html>
 <html itemscope itemtype="http://schema.org/Article">
 <head>
-	<title>MagicPlaylist</title>
+  <meta charset="UTF-8">
+  <title>MagicPlaylist</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
   <meta name="description" content="Get the playlist of your dreams based on a song"/>

diff --git a/app/js/actions/PlaylistActions.js b/app/js/actions/PlaylistActions.js
@@ -31,7 +31,6 @@ let PlaylistActions = {
           tracks: tracks,
           mainTrack: mainTrack
         });
-        ga('send', 'event', 'event', 'new-playlist', 'new');
       } else {
         Dispatcher.dispatch({
           type: PLAYLIST_TRACK_NOT_FOUND,

diff --git a/app/js/actions/UserActions.js b/app/js/actions/UserActions.js
@@ -71,8 +71,6 @@ let UserActions = {
             data: 'US'
           });
         }
-      }).catch((error) => {
-        ga('send', 'event', 'event', 'error-country', 'catch');
       });
     }
   }

diff --git a/app/js/app.js b/app/js/app.js
@@ -69,21 +69,16 @@ class App extends Component {
   }
 
   render() {
-    return <div className='container'>
-              <ReactCSSTransitionGroup transitionName='fade'>
-              { this.state.searching ? this.renderTop() : null }
-              </ReactCSSTransitionGroup>
-              <ReactCSSTransitionGroup transitionName='fadeOut'>
-              { !this.state.searching ? this.renderSearch() : null }
-              </ReactCSSTransitionGroup>
+    return <div className={'container search-state-' + this.state.searching}>
+              { this.renderSearch() }
               <ReactCSSTransitionGroup transitionName='fade'>
               { this.state.searching && !this.state.loading ? this.renderPlaylist() : null }
               </ReactCSSTransitionGroup>
               <ReactCSSTransitionGroup transitionName='fade'>
               { this.state.loading ? <Loading/> : null }
               </ReactCSSTransitionGroup>
               <ReactCSSTransitionGroup transitionName='fade'>
-              { this.state.modalOpen ? this.renderModal() : null }
+              { this.state.modalOpen ? this.renderModal() : <span/> }
               </ReactCSSTransitionGroup>
               <ReactCSSTransitionGroup transitionName='fade' >
               { this.state.alertOpen ? this.renderAlert() : null }
@@ -92,24 +87,16 @@ class App extends Component {
             </div>;
   }
 
-  renderTop() {
-    return <Top search={this.state.text} country={this.state.country}/>;
-  }
-
   renderSearch() {
-    return <div className='search-container'>
+    return <span><div className='search-container'>
             <Title/>
             <SearchBox country={this.state.country}/>
             <Tip/>
-          </div>;
+            </div></span>;
   }
 
   renderPlaylist() {
-    return <Playlist
-      mainTrack={this.state.mainTrack}
-      tracks={this.state.tracks}
-      country={this.state.country}
-      />;
+    return <Playlist mainTrack={this.state.mainTrack} tracks={this.state.tracks}/>;
   }
 
   renderModal() {

diff --git a/app/js/components/Footer.js b/app/js/components/Footer.js
@@ -15,7 +15,7 @@ class Footer extends Component {
   render() {
     let style = !this.props.tracks ? 'footer fixed' : 'footer';
     return <div className={style}>
-              <div className='copy'>
+              <div className='copy'><p>
                 Developed by <a
                   href='https://github.com/loverajoel'
                   target='_blank'
@@ -34,11 +34,10 @@ class Footer extends Component {
                   href='https://twitter.com/magicplaylistco'
                   onClick={this._handleClick.bind(this, 'twitter')}
                   target='_blank'>@magicplaylistco</a>
-              </div>
-              <div className='spotify-api'>Created using the API of <a
+              </p></div>
+              <div className='spotify-api'><p>Created using the API of <a
                 href='https://developer.spotify.com/web-api/'
-                target='_blank'><img src='img/spotify-logo.png'
-              /></a>
+                target='_blank'></a></p>
               </div>
             </div>;
   }

diff --git a/app/js/components/Modal.js b/app/js/components/Modal.js
@@ -15,7 +15,6 @@ class Modal extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      inputError: false,
       playlistName: '',
       playlistPublic: true
     };
@@ -32,28 +31,17 @@ class Modal extends Component {
 
   _savePlaylist() {
     const playlistName = ReactDOM.findDOMNode(this.refs.playlistName).value;
-    close();
-    save(
-      UserStore.getUser()._id,
-      playlistName,
-      this.state.playlistPublic, PlaylistStore.getTracks()
-    );
-  }
-
-  _validateForm() {
-    const playlistName = ReactDOM.findDOMNode(this.refs.playlistName).value;
-    let isValid = playlistName.length > 3;
-    this.setState({
-      inputError: !isValid
-    });
-
-    return isValid;
+    if (playlistName.length > 3) {
+      close();
+      save(
+        UserStore.getUser()._id,
+        playlistName,
+        this.state.playlistPublic, PlaylistStore.getTracks()
+      );
+    }
   }
 
   _handleSave() {
-    if (!this._validateForm()) {
-      return;
-    }
     if (this.props.token &&
         this.props.user &&
         Number(localStorage.magic_token_expires) > Date.now())
@@ -74,22 +62,19 @@ class Modal extends Component {
   }
 
   render() {
-    let inputPlaceholder = this.state.inputError ? 'Please enter a valid name!' : 'Name';
-    let inputClass  = this.state.inputError ? 'playlist-name error' : 'playlist-name';
     return <div className='modal'>
               <div className='modal-container'>
-                  <div className='close-modal'>
-                    <img src='img/close.svg' onClick={this._handleClose}/>
-                  </div>
-                  <div>
+                  <h1>Save playlist on Spotify</h1>
+                  <div className='playlist-name-input'>
                     <input
                       type='text'
-                      placeholder={inputPlaceholder}
-                      className={inputClass}
+                      placeholder='Playlist Name'
+                      className='playlist-name'
                       ref='playlistName'
                     />
                   </div>
-                  <span className='status'>Playlist Status</span>
+                  <div className='playlist-status'>
+                  <h3 className='status'>Playlist Status</h3>
                   <div className='radio-container'>
                     <input id='true'
                       type='radio'
@@ -108,12 +93,15 @@ class Modal extends Component {
                     />
                     <label htmlFor='false'>Private</label>
                   </div>
-                  <div>
-                    <button
+                  </div>
+                  <div className='buttons'>
+                    <a className='close' href='#' onClick={this._handleClose}>Cancel</a>
+
+                    <a
+                      href='#'
                       className='save'
-                      type='button'
                       onClick={this._handleSave.bind(this)}
-                    >Save playlist</button>
+                    >Save playlist</a>
                   </div>
               </div>
          </div>;

diff --git a/app/js/components/Player.js b/app/js/components/Player.js
@@ -73,13 +73,13 @@ class Track extends Component {
   render() {
     return <div>
               { !this.state.isPlaying && !this.state.isLoading ?
-                <img src='img/volume.svg' onClick={this._play.bind(this)}/> : null
+                <a className='play' onClick={this._play.bind(this)}> </a>: null
               }
               { this.state.isPlaying && !this.state.isLoading ?
-                <img src='img/pause.svg' onClick={this._stop.bind(this)}/> : null
+                <a  className='pause' onClick={this._stop.bind(this)}> </a>: null
               }
               { this.state.isLoading ?
-                <img src='img/tail-spin.svg' className='player-loading'/> : null
+                <span className='player-loading'> </span>: null
               }
               <audio ref='audio' src={this.props.source}/>
             </div>;

diff --git a/app/js/components/Playlist.js b/app/js/components/Playlist.js
@@ -37,28 +37,26 @@ class Playlist extends Component {
                 index={i}
                 ptag={this._add.bind(this)}
                 stopAll={this._stopAll.bind(this)}
-                country={this.props.country}
               />;
     });
     return <div className='playlist'>
               <div className='info'>
                 { !this.props.tracks.length ?
-                  <div className='track-name'>Hey! The track doesn't exist! :(</div> : null
+                  <h2 className='track-name'>Hey! The track doesn't exist! :(</h2> : null
                 }
                 { this.props.mainTrack ?
-                  <div className='track-name'>
-                    <strong>
+                  <h2 className='track-name'>
                       {this.props.mainTrack.name}
-                    </strong>, {this.props.mainTrack.artists.first().name}
-                  </div> :  null
+                    , {this.props.mainTrack.artists.first().name}
+                  </h2> :  null
                 }
                 { this.props.tracks.length ?
-                  <div className='save-playlist' onClick={this._handleSave}>
+                  <a href='#' className='save-playlist' onClick={this._handleSave}>
                     Save playlist on Spotify
-                  </div> : null
+                  </a> : null
                 }
               </div>
-              <ul className='trackList'>
+              <ul className='tracklist'>
               <ReactCSSTransitionGroup
                 transitionName='fadeList'
                 transitionEnterTimeout={0}

diff --git a/app/js/components/SearchBox.js b/app/js/components/SearchBox.js
@@ -88,7 +88,6 @@ class SearchBox extends Component {
             <div className='search-group'>
               <span className='input-group-btn'>
                 <div className='btn-search' onClick={this._handleSearch.bind(this)}>
-                  <img src='img/search.svg'/>
                 </div>
               </span>
               <Autosuggest

diff --git a/app/js/components/Tip.js b/app/js/components/Tip.js
@@ -4,8 +4,7 @@ import React, {Component} from 'react';
 
 let Tip = () => {
   return <div className='tip'>
-            <span>Tip: Type a song + artist for better results.</span>
-            <span>(ex: Billie Jean, Michael Jackson)</span>
+            <p>Tip: Type a song + artist for better results.<br/>(ex: Billie Jean, Michael Jackson)</p>
           </div>;
 };
 

diff --git a/app/js/components/Track.js b/app/js/components/Track.js
@@ -15,35 +15,18 @@ class Track extends Component {
     ga('send', 'event', 'button', 'click', 'playlist-remove-track');
   }
 
-  _handleReSearch() {
-    PlaylistActions.search(this.props.track, this.props.country);
-    ga('send', 'event', 'event', 'new-re-search', this.props.track.name);
-  }
-
   render() {
     let track = this.props.track;
     return <li>
               <div className='track-name'>{track.name}, {track.artists.first().name}</div>
-              <div
-                className='remove tooltip center'
-                onClick={this._remove.bind(this)}
-                data-tooltip='Remove this track'
-              >
-                <img src='img/remove.svg'/>
+              <div className='remove' onClick={this._remove.bind(this)}>
               </div>
-              <div className='play tooltip center' data-tooltip='Preview this track'>
+              <div className='play'>
                 <Player
                   source={track.preview_url}
                   ptag={this.props.ptag.bind(this)}
                   stopAll={this.props.stopAll.bind(this)}/>
               </div>
-              <div
-                className='re-search tooltip center'
-                onClick={this._handleReSearch.bind(this)}
-                data-tooltip='Make a new playlist!'
-              >
-                <img src='img/reload.svg'/>
-              </div>
             </li>;
   }
 }

diff --git a/app/js/core/Spotify.js b/app/js/core/Spotify.js
@@ -8,7 +8,7 @@ let client = Client.instance;
 client.settings = {
   clientId: '',
   secretId: '',
-  scopes: 'playlist-modify-public playlist-modify-private',
+  scopes: 'playlist-modify-public user-read-private playlist-modify-private',
   redirect_uri: 'http://localhost:3000/app/login/index.html'
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,8 +71,6 @@ let UserActions = { @@
                 data: 'US'
               });
             }
-          }).catch((error) => {
-            ga('send', 'event', 'event', 'error-country', 'catch');
           });
         }
       }
@@ Expand Down @@