check for spotify auth on run, updated helper text

src/js/Index/Index.js

@@ -9,7 +9,39 @@ class Index extends Component{
     }
 
     render(){
-        return <h1 className="center-text text-no-select">welcome to playlist manager!</h1>;
+        return (
+            <table className="app-table">
+                <thead>
+                    <tr>
+                        <th>
+                            <h1 className="center-text text-no-select">playlist manager</h1>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td className="center-text text-no-select ui-text" style={{fontSize: "20px"}}>
+                            construct playlists from selections of other playlists
+                        </td>
+                    </tr>
+                    <tr>
+                        <td className="center-text text-no-select ui-text">
+                            group sub-genre playlists
+                        </td>
+                    </tr>
+                    <tr>
+                        <td className="center-text text-no-select ui-text">
+                            optionally append recommendations generated by spotify
+                        </td>
+                    </tr>
+                    <tr>
+                        <td className="center-text text-no-select ui-text">
+                            <br></br>playlists are run multiple times a day
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        );
     }
 }
 

src/js/Playlist/NewPlaylist.js

@@ -10,19 +10,46 @@ class NewPlaylist extends Component {
         super(props);
         this.state = {
             name: '',
-            type: 'normal'
+            type: 'default',
+            description: ''
         }
         this.handleInputChange = this.handleInputChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
     }
 
+    componentDidMount(){
+        this.setDescription('default');
+    }
+
+    setDescription(value){
+        switch(value){
+            case 'default':
+                this.setState({
+                    description: 'merge playlists as-is with deduplication by spotify id'
+                })
+                break;
+            case 'recents':
+                this.setState({
+                    description: "select songs from playlists which have been added since a variable number of days"
+                })
+                break;
+        }
+    }
+
     handleInputChange(event){
         this.setState({
             [event.target.name]: event.target.value
         });
+        this.setDescription(event.target.value);
     }
 
     handleSubmit(event){
+        var name = this.state.name;
+        this.setState({
+            name: ''
+        });
+
+        if(name.length != 0){
             axios.get('/api/playlists')
             .then((response) => {
 
@@ -31,7 +58,7 @@ class NewPlaylist extends Component {
                 var sameName = names.includes(this.state.name);
                 if(sameName == false){
                     axios.put('/api/playlist', {
-                    name: this.state.name,
+                        name: name,
                         parts: [],
                         playlist_references: [],
                         shuffle: false,
@@ -48,15 +75,18 @@ class NewPlaylist extends Component {
             .catch((error) => {
                 showMessage(`error getting playlists (${error.response.status})`);
             });
+        }else{
+            showMessage('enter name');
+        }
     }
 
     render(){
         return (
-            <table className="app-table">
+            <table className="app-table max-width">
                 <thead>
                     <tr>
                         <th colSpan="2">
-                            <h1 className="ui-text center-text">new playlist</h1>
+                            <h1 className="ui-text center-text text-no-select">new playlist</h1>
                         </th>
                     </tr>
                 </thead>
@@ -64,7 +94,7 @@ class NewPlaylist extends Component {
                     <tr>
                         <td>
                             <select className="full-width" name="type" onChange={this.handleInputChange}>
-                                <option value="default">normal</option>
+                                <option value="default">default</option>
                                 <option value="recents">recents</option>
                             </select>
                         </td>
@@ -83,6 +113,11 @@ class NewPlaylist extends Component {
                             <input type="submit" className="button full-width" onClick={this.handleSubmit} value="create" />
                         </td>
                     </tr>
+                    <tr>
+                        <td colSpan="2" className="ui-text text-no-select center-text">
+                            <br></br>{this.state.description}
+                        </td>
+                    </tr>
                 </tbody>
             </table>
         );

src/js/Playlist/PlaylistView.js

@@ -11,6 +11,7 @@ class PlaylistView extends Component{
             name: this.props.match.params.name,
             parts: [],
             playlists: [],
+            filteredPlaylists: [],
             playlist_references: [],
             type: null,
 
@@ -50,8 +51,13 @@ class PlaylistView extends Component{
                 return 0;
             });
 
+            var filteredPlaylists = playlists.data.playlists.filter((entry) => entry.name != this.state.name);
+
             this.setState(info.data);
-            this.setState({playlists: playlists.data.playlists});
+            this.setState({
+                playlists: playlists.data.playlists,
+                newPlaylistReference: filteredPlaylists.length > 0 ? filteredPlaylists[0].name : ''
+            });
         }))
         .catch((error) => {
             showMessage(`error getting playlist info (${error.response.status})`);
@@ -67,6 +73,7 @@ class PlaylistView extends Component{
     }
 
     handleInputChange(event){
+        
         this.setState({
             [event.target.name]: event.target.value
         });
@@ -123,11 +130,11 @@ class PlaylistView extends Component{
 
     handleAddPart(event){
         
-        var check = this.state.parts.filter((e) => {
+        if(this.state.newPlaylistName.length != 0){
-            return e == event.target.value;
-        });
 
-        if(check.length == 0) {
+            var check = this.state.parts.includes(this.state.newPlaylistName);
+
+            if(check == false) {
                 var parts = this.state.parts.slice();
                 parts.push(this.state.newPlaylistName);
 
@@ -147,16 +154,22 @@ class PlaylistView extends Component{
                 }).catch((error) => {
                     showMessage(`error adding part (${error.response.status})`);
                 });
+            }else{
+                showMessage('playlist already added');  
+            }
+
+        }else{
+            showMessage('enter playlist name');
         }
     }
 
     handleAddReference(event){
 
-        var check = this.state.playlist_references.filter((e) => {
+        if(this.state.newPlaylistReference.length != 0){
-            return e == event.target.value;
-        });
             
-        if(check.length == 0) {
+            var check = this.state.playlist_references.includes(this.state.newPlaylistReference);
+
+            if(check == false) {
                 var playlist_references = this.state.playlist_references.slice();
                 playlist_references.push(this.state.newPlaylistReference);
                 
@@ -166,9 +179,11 @@ class PlaylistView extends Component{
                     return 0;
                 });
 
+                var filteredPlaylists = this.state.playlists.filter((entry) => entry.name != this.state.name);
+                
                 this.setState({
                     playlist_references: playlist_references,
-                newPlaylistReference: ''
+                    newPlaylistReference: filteredPlaylists.length > 0 ? filteredPlaylists[0].name : ''
                 });
                 axios.post('/api/playlist', {
                     name: this.state.name,
@@ -176,6 +191,13 @@ class PlaylistView extends Component{
                 }).catch((error) => {
                     showMessage(`error adding reference (${error.response.status})`);
                 });
+
+            }else{
+                showMessage('playlist already added');  
+            }
+
+        }else{
+            showMessage('no other playlists to add');   
         }
     }
 
@@ -218,6 +240,9 @@ class PlaylistView extends Component{
     }
 
     handleRun(event){
+        axios.get('/api/user')
+        .then((response) => {
+            if(response.data.spotify_linked == true){
                 axios.get('/api/playlist/run', {params: {name: this.state.name}})
                 .then((reponse) => {
                     showMessage(`${this.state.name} ran`);
@@ -225,6 +250,12 @@ class PlaylistView extends Component{
                 .catch((error) => {
                     showMessage(`error running ${this.state.name} (${error.response.status})`);
                 });
+            }else{
+                showMessage(`link spotify before running`);
+            }
+        }).catch((error) => {
+            showMessage(`error running ${this.state.name} (${error.response.status})`);
+        });
     }
 
     render(){
@@ -239,6 +270,11 @@ class PlaylistView extends Component{
                 { this.state.playlist_references.length > 0 && <ListBlock name="managed" handler={this.handleRemoveRefRow} list={this.state.playlist_references}/> }
                 { this.state.parts.length > 0 && <ListBlock name="spotify" handler={this.handleRemoveRow} list={this.state.parts}/> }
                 <tbody>
+                    <tr>
+                        <td colSpan="2" className="center-text ui-text text-no-select" style={{fontStyle: "italic"}}>
+                            <br></br>spotify playlist can be the name of either your own created playlist or one you follow, names are case sensitive
+                        </td>
+                    </tr>
                     <tr>
                         <td>
                             <input type="text"
@@ -246,7 +282,7 @@ class PlaylistView extends Component{
                                 className="full-width" 
                                 value={this.state.newPlaylistName} 
                                 onChange={this.handleInputChange}
-                                placeholder="spotify playlist"></input>
+                                placeholder="spotify playlist name"></input>
                         </td>
                         <td>
                             <button className="button full-width" onClick={this.handleAddPart}>add</button>
@@ -258,7 +294,9 @@ class PlaylistView extends Component{
                                     className="full-width"
                                     value={this.state.newPlaylistReference}
                                     onChange={this.handleInputChange}>
-                                { this.state.playlists.map((entry) => <ReferenceEntry name={entry.name} key={entry.name} />) }
+                                { this.state.playlists
+                                    .filter((entry) => entry.name != this.state.name)
+                                    .map((entry) => <ReferenceEntry name={entry.name} key={entry.name} />) }
                             </select>
                         </td>
                         <td>
@@ -287,7 +325,7 @@ class PlaylistView extends Component{
                     </tr>
                     <tr>
                         <td className="center-text ui-text text-no-select">
-                            recommendations sample size
+                            number of recommendations
                         </td>
                         <td>
                         <input type="number" 
@@ -311,6 +349,15 @@ class PlaylistView extends Component{
                         </td>
                     </tr>
                     }
+                    { this.state.type == 'recents' &&
+                    <tr>
+                        <td colSpan="2" className="center-text ui-text text-no-select" style={{fontStyle: "italic"}}>
+                            <br></br>'recents' playlists search for and include this months and last months playlists when named in the format
+                            <br></br>[month] [year]
+                            <br></br>e.g july 19 (lowercase)
+                        </td>
+                    </tr>
+                    }
                     <tr>
                         <td colSpan="2">
                             <button className="button full-width" onClick={this.handleRun}>run</button>

src/js/Playlist/PlaylistsView.js

@@ -41,6 +41,9 @@ class PlaylistsView extends Component {
     }
 
     handleRunPlaylist(name, event){
+        axios.get('/api/user')
+        .then((response) => {
+            if(response.data.spotify_linked == true){
                 axios.get('/api/playlist/run', {params: {name: name}})
                 .then((response) => {
                     showMessage(`${name} ran`);
@@ -48,6 +51,12 @@ class PlaylistsView extends Component {
                 .catch((error) => {
                     showMessage(`error running ${name} (${error.response.status})`);
                 });
+            }else{
+                showMessage(`link spotify before running`);
+            }
+        }).catch((error) => {
+            showMessage(`error running ${this.state.name} (${error.response.status})`);
+        });
     }
 
     handleDeletePlaylist(name, event){
@@ -61,6 +70,9 @@ class PlaylistsView extends Component {
     }
 
     handleRunAll(event){
+        axios.get('/api/user')
+        .then((response) => {
+            if(response.data.spotify_linked == true){
                 axios.get('/api/playlist/run/user')
                 .then((response) => {
                     showMessage("all playlists ran");
@@ -68,6 +80,12 @@ class PlaylistsView extends Component {
                 .catch((error)  => {
                     showMessage(`error running all (${error.response.status})`);
                 });
+            }else{
+                showMessage(`link spotify before running`);
+            }
+        }).catch((error) => {
+            showMessage(`error running ${this.state.name} (${error.response.status})`);
+        });
     }
 
     render() {
@@ -88,16 +106,25 @@ class PlaylistsView extends Component {
 function Table(props){
     return (
         <table className="app-table max-width">
+            { props.playlists.length == 0 ? (
+                <tbody>
+                    <tr>
+                        <td className="ui-text text-no-select center-text">
+                            no playlists
+                        </td>
+                    </tr>
+                </tbody>
+            ) : (
             <tbody>
                 { props.playlists.map((playlist) => <Row playlist={ playlist } 
                                                         handleRunPlaylist={props.handleRunPlaylist} 
                                                         handleDeletePlaylist={props.handleDeletePlaylist}
                                                         key={ playlist.name }/>) }
-                { props.playlists.length > 0 && 
                 <tr>
                     <td colSpan="3"><button className="full-width button" onClick={props.handleRunAll}>run all</button></td>
-                </tr> }
+                </tr>
             </tbody>
+            )}
         </table>
     );
 }