Cleaning code; Updating spotify POST requests and LastFM signed to use fetch

src/js/components/Fields/Commands.js

@@ -5,7 +5,7 @@ import Icon from '../Icon';
 import Link from '../Link';
 import * as helpers from '../../helpers';
 
-export default class Commands extends React.Component {
+export default class Commands extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -50,12 +50,12 @@ export default class Commands extends React.Component {
           animation: 150,
         }}
         className="list commands-setup"
-        onChange={(order, sortable, e) => { this.onChange(order); }}
+        onChange={(order, sortable, e) => { this.onChange(order); }}
       >
         {
                     commands.map((command) => (
                       <div className="list__item commands-setup__item list__item--no-interaction" key={command.id} data-id={command.id}>
-                        <div className="col col--w90">
+                        <div className="commands-setup__item__details">
                           <Icon className="commands-setup__item__drag-handle" name="drag_indicator" />
                           <div className="commands-setup__item__command-item commands__item commands__item--small">
                             <Icon className="commands__item__icon" name={command.icon} />
@@ -79,4 +79,4 @@ export default class Commands extends React.Component {
       </Sortable>
     );
   }
-}
+}

src/js/services/lastfm/actions.js

@@ -84,35 +84,26 @@ const sendSignedRequest = (dispatch, getState, params) => new Promise((resolve,
   dispatch(uiActions.startLoading(loader_key, `lastfm_${method}`));
 
   params += `&sk=${getState().lastfm.authorization.key}`;
+  const url = `${getState().lastfm.authorization_url}?action=sign_request&${params}`;
 
   const config = {
     method: 'GET',
     cache: false,
     timeout: 30000,
-    url: `${getState().lastfm.authorization_url}?action=sign_request&${params}`,
   };
 
-  // Get our server proxy to sign our request
-  $.ajax(config).then(
-    (response) => {
+  fetch(url, config)
+    .then(signResponse => {
       dispatch(uiActions.stopLoading(loader_key));
 
       // Now we have signed params, we can make the actual request
-      sendRequest(dispatch, getState, response.params, true)
+      sendRequest(dispatch, getState, signResponse.params, true)
         .then(
-          (response) => {
-            resolve(response);
-          },
-          (error) => {
-            reject(error);
-          },
+          response => resolve(response),
+          error => reject(error),
         );
-    },
-    (xhr, status, error) => {
-      dispatch(uiActions.stopLoading(loader_key));
-      reject(error);
-    },
-  );
+    })
+    .catch(error => reject(error));
 });
 
 

src/js/services/spotify/actions.js

@@ -47,9 +47,9 @@ const request = (dispatch, getState, endpoint, method = 'GET', data = false, cac
           // only if we've got data do we add it to the request (this prevents appending of "&false" to the URL)
           if (data) {
             if (typeof (data) === 'string') {
-              config.data = data;
+              config.body = data;
             } else {
-              config.data = JSON.stringify(data);
+              config.body = JSON.stringify(data);
             }
           }
 

src/js/views/modals/AddToPlaylist.js

@@ -17,66 +17,73 @@ import * as helpers from '../../helpers';
 class AddToPlaylist extends React.Component {
   constructor(props) {
     super(props);
+    const {
+      spotify_library_playlists,
+      mopidy_library_playlists,
+      mopidy_connected,
+      spotifyActions,
+      mopidyActions,
+    } = this.props;
 
-    if (!this.props.spotify_library_playlists) {
-      this.props.spotifyActions.getLibraryPlaylists();
+    if (!spotify_library_playlists) {
+      spotifyActions.getLibraryPlaylists();
     }
 
-    if (!this.props.mopidy_library_playlists && this.props.mopidy_connected) {
-      this.props.mopidyActions.getLibraryPlaylists();
+    if (!mopidy_library_playlists && mopidy_connected) {
+      mopidyActions.getLibraryPlaylists();
     }
   }
 
   playlistSelected(playlist_uri) {
-    this.props.coreActions.addTracksToPlaylist(playlist_uri, this.props.uris);
+    const { coreActions, uris } = this.props;
+    coreActions.addTracksToPlaylist(playlist_uri, uris);
     window.history.back();
   }
 
   render() {
-    if (!this.props.playlists) return <div className="empty">No editable playlists</div>;
-    let playlists = [];
-    for (const uri in this.props.playlists) {
-      if (this.props.playlists[uri].can_edit) playlists.push(this.props.playlists[uri]);
+    const { playlists, uris, spotify_library_playlists_status } = this.props;
+
+    if (!playlists) return <div className="empty">No editable playlists</div>;
+
+    let editablePlaylists = [];
+    for (let uri in playlists) {
+      if (playlists[uri].can_edit) editablePlaylists.push(playlists[uri]);
     }
 
-    playlists = helpers.sortItems(playlists, 'name');
+    editablePlaylists = helpers.sortItems(editablePlaylists, 'name');
 
-    const isLoading = this.props.spotify_library_playlists_status == 'running';
+    const isLoading = spotify_library_playlists_status === 'running';
 
     return (
       <Modal className="modal--add-to-playlist">
         <h1>Add to playlist</h1>
         <h2 className="mid_grey-text">
-Select playlist to add
-          {this.props.uris.length}
-          {' '}
-track
-          {this.props.uris.length > 1 ? 's' : null}
-          {' '}
-to
+          {`Select playlist to add ${uris.length} track ${uris.length > 1 ? 's' : ''} to`}
         </h2>
-        {playlists.length <= 0 ? <div className="no-results">No playlists available</div> : null}
+        {editablePlaylists.length <= 0 && <div className="no-results">No playlists available</div>}
         <div className="list small playlists">
-          {
-						playlists.map((playlist) => (
-  <div className="list__item" key={playlist.uri} onClick={() => this.playlistSelected(playlist.uri)}>
-    <Thumbnail images={playlist.images} size="small" />
-    <h4 className="list__item__name">{ playlist.name }</h4>
-    <ul className="list__item__details details">
-      <li><Icon type="fontawesome" className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
-      <li>
-        { playlist.tracks_total ? (
-          <span className="mid_grey-text">
-            { playlist.tracks_total }
-            {' '}
-tracks
-          </span>
-        ) : null }
-      </li>
-    </ul>
-  </div>
-						))
-					}
+          {editablePlaylists.map((playlist) => (
+            <div
+              className="list__item"
+              key={playlist.uri}
+              onClick={() => this.playlistSelected(playlist.uri)}
+            >
+              <Thumbnail images={playlist.images} size="small" />
+              <h4 className="list__item__name">{ playlist.name }</h4>
+              <ul className="list__item__details details">
+                <li><Icon type="fontawesome" className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
+                <li>
+                  { playlist.tracks_total ? (
+                    <span className="mid_grey-text">
+                      { playlist.tracks_total }
+                      {' '}
+            tracks
+                    </span>
+                  ) : null }
+                </li>
+              </ul>
+            </div>
+          ))}
         </div>
         {isLoading && <Loader body lazy loading />}
       </Modal>