Use fetchJsonp for getting jsonp responses

This helps us decouple from jquery
sul-dlss · Feb 29, 2024 · e0c7884 · e0c7884
1 parent 7798863
commit e0c7884
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 28 deletions.
diff --git a/app/javascript/jquery.libraryh3lp.js b/app/javascript/jquery.libraryh3lp.js
@@ -1,3 +1,5 @@
+import fetchJsonp from "fetch-jsonp"
+
 (function($) {
   $.fn.libraryH3lp = function() {
 
@@ -14,18 +16,20 @@
 
       function checkStatus(){
         var jidSplit = jid.split('@');
-        $.ajax({
-          url: 'https://libraryh3lp.com/presence/jid/' + jidSplit[0] + '/' + jidSplit[1] + '/js?cb=?',
-          dataType: 'jsonp'
-        }).done(function(){
-          $.each(jabber_resources, function(i, value){
-            if (value.show === 'available'){
-              setAsAvailable();
-            }else{
-              setAsUnavailable();
-            }
-          });
-        });
+        fetchJsonp('https://libraryh3lp.com/presence/jid/' + jidSplit[0] + '/' + jidSplit[1] + '/js',
+          {
+            jsonpCallback: 'cb'
+          })
+          .then(() => {
+            // The libraryh3lp response sets the jabber_resources at the window level. It doesn't use the callback.
+            window['jabber_resources'].forEach((value) => {
+              if (value.show === 'available'){
+                setAsAvailable()
+              } else {
+                setAsUnavailable()
+              }
+            })
+          })
       }
 
       function setAsAvailable(){

diff --git a/app/javascript/jquery.plug-google-content.js b/app/javascript/jquery.plug-google-content.js
@@ -1,3 +1,5 @@
+import fetchJsonp from "fetch-jsonp"
+
 (function($) {
   /*
     jQuery plugin to render Google book covers for image elements
@@ -39,22 +41,11 @@
         const bibkeys = getBibKeysForBatch(batch)
         const batchBooksApiUrl = booksApiUrl + bibkeys
 
-        $.ajax({
-          type: 'GET',
-          url: batchBooksApiUrl,
-          contentType: "application/json",
-          dataType: 'jsonp',
-
-          success: function(json) {
-            renderCoverAndAccessPanel(json);
-          },
-
-          error: function(e) {
-            console.error(e);
-          }
-        });
-
-      });
+        fetchJsonp(batchBooksApiUrl)
+          .then((response) => response.json())
+          .then((json) => renderCoverAndAccessPanel(json))
+          .catch((e) => console.error(e))
+      })
     }
 
     function renderCoverAndAccessPanel(json) {

diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "blacklight-range-limit": "^8.3.0",
     "bootstrap": "4",
     "esbuild": "^0.19.4",
+    "fetch-jsonp": "^1.3.0",
     "leaflet": "1",
     "popper.js": "1"
   },

diff --git a/yarn.lock b/yarn.lock
@@ -201,6 +201,11 @@ esbuild@^0.19.4:
     "@esbuild/win32-ia32" "0.19.12"
     "@esbuild/win32-x64" "0.19.12"
 
+fetch-jsonp@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/fetch-jsonp/-/fetch-jsonp-1.3.0.tgz#99b8c25bd100938d7a7a6b5db9d6b81f32a10809"
+  integrity sha512-hxCYGvmANEmpkHpeWY8Kawfa5Z1t2csTpIClIDG/0S92eALWHRU1RnGaj86Tf5Cc0QF+afSa4SQ4pFB2rFM5QA==
+
 jquery@>=1.7, jquery@>=3.0, jquery@^3.5.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"