added recommendations and select ref from dropdown

spotify/api/api.py

@@ -79,6 +79,9 @@ def playlist():
             playlist_type = request_json.get('type', None)
             playlist_day_boundary = request_json.get('day_boundary', None)
 
+            playlist_recommendation = request_json.get('include_recommendations', None)
+            playlist_recommendation_sample = request_json.get('recommendation_sample', None)
+
             queried_playlist = [i for i in playlists.where(u'name', u'==', playlist_name).stream()]
 
             if request.method == 'PUT':
@@ -93,8 +96,10 @@ def playlist():
 
                 to_add = {
                     'name': playlist_name,
-                    'parts': playlist_parts if not None else [],
+                    'parts': playlist_parts if playlist_parts is not None else [],
-                    'playlist_references': playlist_references if not None else [],
+                    'playlist_references': playlist_references if playlist_references is not None else [],
+                    'include_recommendations': playlist_recommendation if playlist_recommendation is not None else False,
+                    'recommendation_sample': playlist_recommendation_sample if playlist_recommendation_sample is not None else 10,
                     'playlist_id': None,
                     'shuffle': playlist_shuffle,
                     'type': playlist_type
@@ -123,7 +128,9 @@ def playlist():
                         playlist_references is None and \
                         playlist_id is None and \
                         playlist_shuffle is None and \
-                        playlist_day_boundary is None:
+                        playlist_day_boundary is None and \
+                        playlist_recommendation is None and \
+                        playlist_recommendation_sample is None:
                     return jsonify({'error': "no chnages to make"}), 400
 
                 playlist_doc = playlists.document(queried_playlist[0].id)
@@ -151,6 +158,12 @@ def playlist():
                 if playlist_day_boundary is not None:
                     dic['day_boundary'] = playlist_day_boundary
 
+                if playlist_recommendation is not None:
+                    dic['include_recommendations'] = playlist_recommendation
+
+                if playlist_recommendation_sample is not None:
+                    dic['recommendation_sample'] = playlist_recommendation_sample
+
                 playlist_doc.update(dic)
 
                 return jsonify({"message": 'playlist updated', "status": "success"}), 200

src/js/Playlist/PlaylistView.js

@@ -8,16 +8,19 @@ class PlaylistView extends Component{
         this.state = {
             name: this.props.match.params.name,
             parts: [],
+            playlists: [],
             playlist_references: [],
             type: null,
             error: false,
             error_text: null,
 
             day_boundary: '',
+            recommendation_sample: '',
             newPlaylistName: '',
             newPlaylistReference: '',
 
-            shuffle: false
+            shuffle: false,
+            include_recommendations: false
         }
         this.handleAddPart = this.handleAddPart.bind(this);
         this.handleAddReference = this.handleAddReference.bind(this);
@@ -28,25 +31,33 @@ class PlaylistView extends Component{
         this.handleRun = this.handleRun.bind(this);
 
         this.handleShuffleChange = this.handleShuffleChange.bind(this);
+        this.handleRecChange = this.handleRecChange.bind(this);
     }
 
     componentDidMount(){
-        this.getPlaylistInfo();
+        axios.all([this.getPlaylistInfo(), this.getPlaylists()])
+        .then(axios.spread((info, playlists) => {
+            this.setState(info.data);
+            this.setState({playlists: playlists.data.playlists});
+        }))
+        .catch((error) => {
+            this.setState({
+                error: true,
+                error_text: "error pulling playlist info"
+            });
+        });
     }
 
     getPlaylistInfo(){
-        axios.get(`/api/playlist?name=${ this.state.name }`)
+        return axios.get(`/api/playlist?name=${ this.state.name }`);
-            .then((response) => {
+    }
-                this.setState(response.data);
+
-            }).catch((error) => {
+    getPlaylists(){
-                this.setState({
+        return axios.get(`/api/playlists`);
-                    error: true,
-                    error_text: "error pulling playlist info"
-                });
-            });
     }
 
     handleInputChange(event){
+        console.log(event.target.name + event.target.value);
         this.setState({
             [event.target.name]: event.target.value
         });
@@ -54,6 +65,9 @@ class PlaylistView extends Component{
         if(event.target.name == 'day_boundary'){
             this.handleDayBoundaryChange(event.target.value);
         }
+        if(event.target.name == 'recommendation_sample'){
+            this.handleRecSampleChange(event.target.value);
+        }
     }
 
     handleDayBoundaryChange(boundary) {
@@ -65,6 +79,15 @@ class PlaylistView extends Component{
         });
     }
 
+    handleRecSampleChange(sample){
+        axios.post('/api/playlist', {
+            name: this.state.name,
+            recommendation_sample: parseInt(sample)
+        }).catch((error) => {
+            console.log(error);
+        });
+    }
+
     handleShuffleChange(event) {
         this.setState({
             shuffle: event.target.checked
@@ -77,6 +100,18 @@ class PlaylistView extends Component{
         });
     }
 
+    handleRecChange(event) {
+        this.setState({
+            include_recommendations: event.target.checked
+        });
+        axios.post('/api/playlist', {
+            name: this.state.name,
+            include_recommendations: event.target.checked
+        }).catch((error) => {
+            console.log(error);
+        });
+    }
+
     handleAddPart(event){
 
         var check = this.state.parts.filter((e) => {
@@ -207,12 +242,12 @@ class PlaylistView extends Component{
                     </tr>
                     <tr>
                         <td>
-                            <input type="text"
+                            <select name="newPlaylistReference" 
-                                name="newPlaylistReference" 
+                                    className="full-width"
-                                className="full-width" 
+                                    value={this.state.newPlaylistReference}
-                                value={this.state.newPlaylistReference} 
+                                    onChange={this.handleInputChange}>
-                                onChange={this.handleInputChange}
+                                { this.state.playlists.map((entry) => <ReferenceEntry name={entry.name} key={entry.name} />) }
-                                placeholder="managed playlist"></input>
+                            </select>
                         </td>
                         <td>
                             <button className="button full-width" onClick={this.handleAddReference}>add</button>
@@ -228,10 +263,32 @@ class PlaylistView extends Component{
                                 onChange={this.handleShuffleChange}></input>
                         </td>
                     </tr>
+                    <tr>
+                        <td className="center-text ui-text text-no-select">
+                            include recommendations?
+                        </td>
+                        <td>
+                            <input type="checkbox" 
+                                checked={this.state.include_recommendations}
+                                onChange={this.handleRecChange}></input>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td className="center-text ui-text text-no-select">
+                            recommendations sample size
+                        </td>
+                        <td>
+                        <input type="number" 
+                                name="recommendation_sample"
+                                className="full-width"
+                                value={this.state.recommendation_sample}
+                                onChange={this.handleInputChange}></input>
+                        </td>
+                    </tr>
                     { this.state.type == 'recents' &&
                      <tr>
                         <td className="center-text ui-text text-no-select">
-                            day boundary
+                            added since (days)
                         </td>
                         <td>
                             <input type="number" 
@@ -258,6 +315,12 @@ class PlaylistView extends Component{
 
 }
 
+function ReferenceEntry(props) {
+    return (
+        <option value={props.name}>{props.name}</option>
+    );
+}
+
 function ListBlock(props) {
     return (
         <tbody>