Remove jQuery and replace $.ajax with Axios

watsonbox · watsonbox · commit 49e88477aa52 · 2020-11-16T12:09:07.000+01:00
diff --git a/package.json b/package.json
@@ -19,10 +19,10 @@
     "@types/react": "^16.9.53",
     "@types/react-bootstrap": "^0.32.24",
     "@types/react-dom": "^16.9.8",
+    "axios": "^0.21.0",
     "bootstrap": "3.3.7",
     "bottleneck": "^2.19.5",
     "file-saver": "^2.0.2",
-    "jquery": "2.1.4",
     "jszip": "^3.5.0",
     "node-sass": "4.14.1",
     "react": "^17.0.1",
diff --git a/src/App.scss b/src/App.scss
@@ -19,8 +19,17 @@ table {
   float: left;
 }
 
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 #playlists {
-  display: none;
+  animation: fadeIn 1s;
 }
 
 #playlistsHeader {
diff --git a/src/components/PlaylistExporter.jsx b/src/components/PlaylistExporter.jsx
@@ -25,7 +25,7 @@ var PlaylistExporter = {
     })
 
     let tracks = (await Promise.all(promises)).flatMap(response => {
-      return response.items.map(item => {
+      return response.data.items.map(item => {
         return item.track && [
           item.track.uri,
           item.track.name,
diff --git a/src/components/PlaylistTable.jsx b/src/components/PlaylistTable.jsx
@@ -1,5 +1,4 @@
 import React from "react"
-import $ from "jquery" // TODO: Remove jQuery dependency
 import { ProgressBar } from "react-bootstrap"
 
 import PlaylistRow from "./PlaylistRow"
@@ -29,7 +28,7 @@ class PlaylistTable extends React.Component {
     var firstPage = typeof url === 'undefined' || url.indexOf('offset=0') > -1;
 
     apiCall("https://api.spotify.com/v1/me", this.props.accessToken).then((response) => {
-      userId = response.id;
+      userId = response.data.id;
 
       // Show liked tracks playlist if viewing first page
       if (firstPage) {
@@ -47,10 +46,13 @@ class PlaylistTable extends React.Component {
         return Promise.all([apiCall(url, this.props.accessToken)])
       }
     }).then(([playlistsResponse, likedTracksResponse]) => {
-      let playlists = playlistsResponse.items;
+      const playlistsData = playlistsResponse.data
+      const playlists = playlistsData.items
 
       // Show library of saved tracks if viewing first page
       if (firstPage) {
+        const likedTracksData = likedTracksResponse.data
+
         playlists.unshift({
           "id": "liked",
           "name": "Liked",
@@ -63,31 +65,32 @@ class PlaylistTable extends React.Component {
           },
           "tracks": {
             "href": "https://api.spotify.com/v1/me/tracks",
-            "limit": likedTracksResponse.limit,
-            "total": likedTracksResponse.total
+            "limit": likedTracksData.limit,
+            "total": likedTracksData.total
           },
           "uri": "spotify:user:" + userId + ":saved"
         });
 
         // FIXME: Handle unmounting
         this.setState({
           likedSongs: {
-            limit: likedTracksResponse.limit,
-            count: likedTracksResponse.total
+            limit: likedTracksData.limit,
+            count: likedTracksData.total
           }
         })
       }
 
       // FIXME: Handle unmounting
       this.setState({
         playlists: playlists,
-        playlistCount: playlistsResponse.total,
-        nextURL: playlistsResponse.next,
-        prevURL: playlistsResponse.previous
+        playlistCount: playlistsData.total,
+        nextURL: playlistsData.next,
+        prevURL: playlistsData.previous
       });
 
-      $('#playlists').fadeIn();
-      $('#subtitle').text((playlistsResponse.offset + 1) + '-' + (playlistsResponse.offset + playlistsResponse.items.length) + ' of ' + playlistsResponse.total + ' playlists for ' + userId)
+      if (document.getElementById("subtitle") !== null) {
+        document.getElementById("subtitle").textContent = `${playlistsData.offset + 1}-${playlistsData.offset + playlistsData.items.length} of ${playlistsData.total} playlists for ${userId}`
+      }
     })
   }
 
diff --git a/src/components/PlaylistsExporter.jsx b/src/components/PlaylistsExporter.jsx
@@ -14,7 +14,7 @@ class PlaylistsExporter extends React.Component {
 
     apiCall("https://api.spotify.com/v1/me", accessToken).then(async (response) => {
       var limit = 20;
-      var userId = response.id;
+      var userId = response.data.id;
       var requests = [];
 
       // Add playlists
@@ -30,7 +30,7 @@ class PlaylistsExporter extends React.Component {
         })
       })
 
-      let playlists = (await Promise.all(playlistPromises)).flatMap(response => response.items)
+      let playlists = (await Promise.all(playlistPromises)).flatMap(response => response.data.items)
 
       // Add library of saved tracks
       playlists.unshift({
diff --git a/src/helpers.jsx b/src/helpers.jsx
@@ -1,4 +1,4 @@
-import $ from "jquery" // TODO: Remove jQuery dependency
+import axios from "axios"
 import Bottleneck from "bottleneck"
 
 export function authorize() {
@@ -43,10 +43,5 @@ limiter.on("failed", async (error, jobInfo) => {
 })
 
 export const apiCall = limiter.wrap(function(url, accessToken) {
-  return $.ajax({
-    url: url,
-    headers: {
-      'Authorization': 'Bearer ' + accessToken
-    }
-  })
+  return axios.get(url, { headers: { 'Authorization': 'Bearer ' + accessToken } })
 })
diff --git a/yarn.lock b/yarn.lock
@@ -2542,6 +2542,13 @@ axe-core@^3.5.4:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.5.tgz#84315073b53fa3c0c51676c588d59da09a192227"
   integrity sha512-5P0QZ6J5xGikH780pghEdbEKijCTrruK9KxtPZCFWUpef0f6GipO+xEZ5GKCb020mmqgbiNO6TcA55CriL784Q==
 
+axios@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.0.tgz#26df088803a2350dff2c27f96fef99fe49442aca"
+  integrity sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 axobject-query@^2.1.2:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -5230,7 +5237,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.10.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
   integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
@@ -6947,11 +6954,6 @@ jest@26.6.0:
     import-local "^3.0.2"
     jest-cli "^26.6.0"
 
-jquery@2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-2.1.4.tgz#228bde698a0c61431dc2630a6a154f15890d2317"
-  integrity sha1-IoveaYoMYUMdwmMKahVPFYkNIxc=
-
 js-base64@^2.1.8:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
