Implement rate limiting using Retry-After header [#12]

watsonbox · watsonbox · commit 75f6048c3e43 · 2020-11-12T20:37:06.000+01:00
- Remove jQuery in exporter objects - Use Bottleneck library for rate limiting https://github.com/SGrondin/bottleneck - Simplify code
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "@types/react-bootstrap": "^0.32.24",
     "@types/react-dom": "^16.9.8",
     "bootstrap": "3.3.7",
+    "bottleneck": "^2.19.5",
     "file-saver": "^2.0.2",
     "jquery": "2.1.4",
     "jszip": "^3.5.0",
diff --git a/src/App.tsx b/src/App.tsx
@@ -19,7 +19,7 @@ function App() {
       <p style={{ marginTop: "50px" }}>It should still be possible to export individual playlists, particularly when using your own Spotify application.</p>
     </div>
   } else if (key.has('access_token')) {
-    view = <PlaylistTable access_token={key.get('access_token')} />
+    view = <PlaylistTable accessToken={key.get('access_token')} />
   } else {
     view = <Login />
   }
diff --git a/src/components/PlaylistExporter.jsx b/src/components/PlaylistExporter.jsx
@@ -1,83 +1,69 @@
-import $ from "jquery" // TODO: Remove jQuery dependency
 import { saveAs } from "file-saver"
 
 import { apiCall } from "helpers"
 
 // Handles exporting a single playlist as a CSV file
 var PlaylistExporter = {
-  export: function(access_token, playlist) {
-    this.csvData(access_token, playlist).then((data) => {
+  export: function(accessToken, playlist) {
+    this.csvData(accessToken, playlist).then((data) => {
       var blob = new Blob([ data ], { type: "text/csv;charset=utf-8" });
       saveAs(blob, this.fileName(playlist), true);
     })
   },
 
-  csvData: function(access_token, playlist) {
+  csvData: async function(accessToken, playlist) {
     var requests = [];
     var limit = playlist.tracks.limit || 100;
 
+    // Add tracks
     for (var offset = 0; offset < playlist.tracks.total; offset = offset + limit) {
-      requests.push(
-        apiCall(`${playlist.tracks.href.split('?')[0]}?offset=${offset}&limit=${limit}`, access_token)
-      )
+      requests.push(`${playlist.tracks.href.split('?')[0]}?offset=${offset}&limit=${limit}`)
     }
 
-    return $.when.apply($, requests).then(function() {
-      var responses = [];
-
-      // Handle either single or multiple responses
-      if (typeof arguments[0] != 'undefined') {
-        if (typeof arguments[0].href == 'undefined') {
-          responses = Array.prototype.slice.call(arguments).map(function(a) { return a[0] });
-        } else {
-          responses = [arguments[0]];
-        }
-      }
-
-      var tracks = responses.map(function(response) {
-        return response.items.map(function(item) {
-          return item.track && [
-            item.track.uri,
-            item.track.name,
-            item.track.artists.map(function(artist) { return artist.uri }).join(', '),
-            item.track.artists.map(function(artist) { return String(artist.name).replace(/,/g, "\\,") }).join(', '),
-            item.track.album.uri,
-            item.track.album.name,
-            item.track.disc_number,
-            item.track.track_number,
-            item.track.duration_ms,
-            item.added_by == null ? '' : item.added_by.uri,
-            item.added_at
-          ];
-        }).filter(e => e);
-      });
-
-      // Flatten the array of pages
-      tracks = $.map(tracks, function(n) { return n })
+    let promises = requests.map((request) => {
+      return apiCall(request, accessToken)
+    })
 
-      tracks.unshift([
-        "Track URI",
-        "Track Name",
-        "Artist URI",
-        "Artist Name",
-        "Album URI",
-        "Album Name",
-        "Disc Number",
-        "Track Number",
-        "Track Duration (ms)",
-        "Added By",
-        "Added At"
-      ]);
+    let tracks = (await Promise.all(promises)).flatMap(response => {
+      return response.items.map(item => {
+        return item.track && [
+          item.track.uri,
+          item.track.name,
+          item.track.artists.map(function(artist) { return artist.uri }).join(', '),
+          item.track.artists.map(function(artist) { return String(artist.name).replace(/,/g, "\\,") }).join(', '),
+          item.track.album.uri,
+          item.track.album.name,
+          item.track.disc_number,
+          item.track.track_number,
+          item.track.duration_ms,
+          item.added_by == null ? '' : item.added_by.uri,
+          item.added_at
+        ];
+      }).filter(e => e)
+    })
 
-      let csvContent = '';
+    tracks.unshift([
+      "Track URI",
+      "Track Name",
+      "Artist URI",
+      "Artist Name",
+      "Album URI",
+      "Album Name",
+      "Disc Number",
+      "Track Number",
+      "Track Duration (ms)",
+      "Added By",
+      "Added At"
+    ]);
 
-      tracks.forEach(function(row, index){
-        let dataString = row.map(function (cell) { return '"' + String(cell).replace(/"/g, '""') + '"'; }).join(",");
-        csvContent += dataString + "\n";
-      });
+    let csvContent = '';
 
-      return csvContent;
+    tracks.forEach(function(row, index){
+      let dataString = row.map(function (cell) { return '"' + String(cell).replace(/"/g, '""') + '"'; }).join(",");
+      csvContent += dataString + "\n";
     });
+
+    return csvContent;
   },
 
   fileName: function(playlist) {
diff --git a/src/components/PlaylistRow.jsx b/src/components/PlaylistRow.jsx
@@ -5,7 +5,7 @@ import PlaylistExporter from "./PlaylistExporter"
 
 class PlaylistRow extends React.Component {
   exportPlaylist = () => {
-    PlaylistExporter.export(this.props.access_token, this.props.playlist);
+    PlaylistExporter.export(this.props.accessToken, this.props.playlist);
   }
 
   renderTickCross(condition) {
diff --git a/src/components/PlaylistTable.jsx b/src/components/PlaylistTable.jsx
@@ -21,35 +21,26 @@ class PlaylistTable extends React.Component {
     var userId = '';
     var firstPage = typeof url === 'undefined' || url.indexOf('offset=0') > -1;
 
-    apiCall("https://api.spotify.com/v1/me", this.props.access_token).then((response) => {
+    apiCall("https://api.spotify.com/v1/me", this.props.accessToken).then((response) => {
       userId = response.id;
 
       // Show liked tracks playlist if viewing first page
       if (firstPage) {
-        return $.when.apply($, [
+        return Promise.all([
           apiCall(
-            "https://api.spotify.com/v1/users/" + userId + "/tracks",
-            this.props.access_token
+            "https://api.spotify.com/v1/users/" + userId + "/playlists",
+            this.props.accessToken
           ),
           apiCall(
-            "https://api.spotify.com/v1/users/" + userId + "/playlists",
-            this.props.access_token
+            "https://api.spotify.com/v1/users/" + userId + "/tracks",
+            this.props.accessToken
           )
         ])
       } else {
-        return apiCall(url, this.props.access_token);
-      }
-    }).done((...args) => {
-      var response;
-      var playlists = [];
-
-      if (args[1] === 'success') {
-        response = args[0];
-        playlists = args[0].items;
-      } else {
-        response = args[1][0];
-        playlists = args[1][0].items;
+        return Promise.all([apiCall(url, this.props.accessToken)])
       }
+    }).then(([playlistsResponse, likedTracksResponse]) => {
+      let playlists = playlistsResponse.items;
 
       // Show library of saved tracks if viewing first page
       if (firstPage) {
@@ -65,35 +56,34 @@ class PlaylistTable extends React.Component {
           },
           "tracks": {
             "href": "https://api.spotify.com/v1/me/tracks",
-            "limit": args[0][0].limit,
-            "total": args[0][0].total
+            "limit": likedTracksResponse.limit,
+            "total": likedTracksResponse.total
           },
           "uri": "spotify:user:" + userId + ":saved"
         });
 
         // FIXME: Handle unmounting
         this.setState({
-          likedSongsLimit: args[0][0].limit,
-          likedSongsCount: args[0][0].total
+          likedSongsLimit: likedTracksResponse.limit,
+          likedSongsCount: likedTracksResponse.total
         })
       }
 
       // FIXME: Handle unmounting
       this.setState({
         playlists: playlists,
-        playlistCount: response.total,
-        nextURL: response.next,
-        prevURL: response.previous
+        playlistCount: playlistsResponse.total,
+        nextURL: playlistsResponse.next,
+        prevURL: playlistsResponse.previous
       });
 
       $('#playlists').fadeIn();
-      $('#subtitle').text((response.offset + 1) + '-' + (response.offset + response.items.length) + ' of ' + response.total + ' playlists for ' + userId)
-
+      $('#subtitle').text((playlistsResponse.offset + 1) + '-' + (playlistsResponse.offset + playlistsResponse.items.length) + ' of ' + playlistsResponse.total + ' playlists for ' + userId)
     })
   }
 
   exportPlaylists = () => {
-    PlaylistsExporter.export(this.props.access_token, this.state.playlistCount, this.state.likedSongsLimit, this.state.likedSongsCount);
+    PlaylistsExporter.export(this.props.accessToken, this.state.playlistCount, this.state.likedSongsLimit, this.state.likedSongsCount);
   }
 
   componentDidMount() {
@@ -123,7 +113,7 @@ class PlaylistTable extends React.Component {
             </thead>
             <tbody>
               {this.state.playlists.map((playlist, i) => {
-                return <PlaylistRow playlist={playlist} key={playlist.id} access_token={this.props.access_token}/>
+                return <PlaylistRow playlist={playlist} key={playlist.id} accessToken={this.props.accessToken}/>
               })}
             </tbody>
           </table>
diff --git a/src/components/PlaylistsExporter.jsx b/src/components/PlaylistsExporter.jsx
@@ -1,4 +1,3 @@
-import $ from "jquery" // TODO: Remove jQuery dependency
 import { saveAs } from "file-saver"
 import JSZip from "jszip"
 
@@ -7,70 +6,60 @@ import { apiCall } from "helpers"
 
 // Handles exporting all playlist data as a zip file
 let PlaylistsExporter = {
-  export: function(access_token, playlistCount, likedSongsLimit, likedSongsCount) {
-    var playlistFileNames = [];
+  export: async function(accessToken, playlistCount, likedSongsLimit, likedSongsCount) {
 
-    apiCall("https://api.spotify.com/v1/me", access_token).then(function(response) {
+    var playlistFileNames = []
+    var playlistCsvExports = []
+
+    apiCall("https://api.spotify.com/v1/me", accessToken).then(async (response) => {
       var limit = 20;
       var userId = response.id;
       var requests = [];
 
       // Add playlists
       for (var offset = 0; offset < playlistCount; offset = offset + limit) {
         var url = "https://api.spotify.com/v1/users/" + userId + "/playlists";
-        requests.push(
-          apiCall(`${url}?offset=${offset}&limit=${limit}`, access_token)
-        )
+        requests.push(`${url}?offset=${offset}&limit=${limit}`)
       }
 
-      $.when.apply($, requests).then(function() {
-        var playlists = [];
-        var playlistExports = [];
+      let playlistPromises = requests.map((request, index) => {
+        return apiCall(request, accessToken).then((response) => {
+          return response
+        })
+      })
 
-        // Handle either single or multiple responses
-        if (typeof arguments[0].href == 'undefined') {
-          $(arguments).each(function(i, response) {
-            if (typeof response[0].items === 'undefined') {
-              // Single playlist
-              playlists.push(response[0]);
-            } else {
-              // Page of playlists
-              $.merge(playlists, response[0].items);
-            }
-          })
-        } else {
-          playlists = arguments[0].items
-        }
+      let playlists = (await Promise.all(playlistPromises)).flatMap(response => response.items)
 
-        // Add library of saved tracks
-        playlists.unshift({
-          "id": "liked",
-          "name": "Liked",
-          "tracks": {
-            "href": "https://api.spotify.com/v1/me/tracks",
-            "limit": likedSongsLimit,
-            "total": likedSongsCount
-          },
-        });
+      // Add library of saved tracks
+      playlists.unshift({
+        "id": "liked",
+        "name": "Liked",
+        "tracks": {
+          "href": "https://api.spotify.com/v1/me/tracks",
+          "limit": likedSongsLimit,
+          "total": likedSongsCount
+        },
+      })
 
-        $(playlists).each(function(i, playlist) {
-          playlistFileNames.push(PlaylistExporter.fileName(playlist));
-          playlistExports.push(PlaylistExporter.csvData(access_token, playlist));
-        });
+      let trackPromises = playlists.map((playlist, index) => {
+        return PlaylistExporter.csvData(accessToken, playlist).then((csvData) => {
+          playlistFileNames.push(PlaylistExporter.fileName(playlist))
+          playlistCsvExports.push(csvData)
+        })
+      })
 
-        return $.when.apply($, playlistExports);
-      }).then(function() {
-        var zip = new JSZip();
+      await Promise.all(trackPromises)
 
-        $(arguments).each(function(i, response) {
-          zip.file(playlistFileNames[i], response)
-        });
+      var zip = new JSZip()
 
-        zip.generateAsync({ type: "blob" }).then(function(content) {
-          saveAs(content, "spotify_playlists.zip");
-        })
-      });
-    });
+      playlistCsvExports.forEach(function(csv, i) {
+        zip.file(playlistFileNames[i], csv)
+      })
+
+      zip.generateAsync({ type: "blob" }).then(function(content) {
+        saveAs(content, "spotify_playlists.zip");
+      })
+    })
   }
 }
 
diff --git a/src/helpers.jsx b/src/helpers.jsx
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ function App() {`
`19`	`19`	`<p style={{ marginTop: "50px" }}>It should still be possible to export individual playlists, particularly when using your own Spotify application.</p>`
`20`	`20`	`</div>`
`21`	`21`	`} else if (key.has('access_token')) {`
`22`		`- view = <PlaylistTable access_token={key.get('access_token')} />`
	`22`	`+ view = <PlaylistTable accessToken={key.get('access_token')} />`
`23`	`23`	`} else {`
`24`	`24`	`view = <Login />`
`25`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import PlaylistExporter from "./PlaylistExporter"`
`5`	`5`
`6`	`6`	`class PlaylistRow extends React.Component {`
`7`	`7`	`exportPlaylist = () => {`
`8`		`- PlaylistExporter.export(this.props.access_token, this.props.playlist);`
	`8`	`+ PlaylistExporter.export(this.props.accessToken, this.props.playlist);`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`renderTickCross(condition) {`