Allow users to create an alert to get notified when new code is available/released for a paper

browse/static/js/catalyzex.js

@@ -4,6 +4,17 @@
   const paperUrl = window.location.href.split('?')[0];
   const $output = $("#catalyzex-output");
 
+  const url = new URL(location.href);
+  let cxToken = url.searchParams.get('cx_token');
+
+  if(cxToken) {
+    localStorage.setItem('@cx/token', cxToken)
+    url.searchParams.delete('cx_token')
+    window.history.replaceState({}, document.title, url.href);
+  } else {
+    cxToken = localStorage.getItem('@cx/token')
+  }
+
   if ($output.html() != "") {
     // Toggled off
     $output.html("");
@@ -19,23 +30,35 @@
   }
 
   const fetchCatalyzeXCode = async () => {
-    const cxApiUrl = `https://www.catalyzex.com/api/code?src=arxiv&paper_arxiv_id=${arxivId}`;
+    const cxApiUrl =  new URL("https://www.catalyzex.com/api/code")
+    const queryParams = {
+      src: 'arxiv',
+      paper_arxiv_id: arxivId,
+      paper_url: paperUrl,
+      paper_title: paperTitle
+    }
 
-    let result = {};
+    Object.entries(queryParams).forEach(([key, val]) => {
+      cxApiUrl.searchParams.set(key, val);
+    })
 
     try {
-      result = await $.ajax({ url: cxApiUrl, timeout: 2000, dataType: "json" });
+      result = await $.ajax({ 
+        url: cxApiUrl, 
+        timeout: 2000, 
+        dataType: "json",
+        headers: cxToken ? { 'Authorization': `Bearer ${cxToken}`} : undefined
+      });
     } catch (error) {
-      result = {};
+      result = error?.responseJSON || {};
     }
 
     return result;
   };
 
   $output.html('');
 
-  const { count: implementations, cx_url: cxImplementationsUrl } = await fetchCatalyzeXCode()
-
+  const { count: implementations, cx_url: cxImplementationsUrl, is_alert_active: isAlertActive, authed_user_id: authedUserId } = await fetchCatalyzeXCode()
   $output.append("<h2>CatalyzeX</h2>");
 
   const addCodeURL = new URL("https://www.catalyzex.com/add_code");
@@ -53,10 +76,26 @@
       .append(icons.catalyzex)
       .append("CatalyzeX");
 
-    $output
-      .append(codeLink)
+    $output.append(window.DOMPurify.sanitize(codeLink))
   } else {
     $output.append(`<p>No code found for this paper just yet.</p>`)
   }
-  $output.append(`<p>If you have code to share with the arXiv community, please ${submitItHereLink} to benefit all researchers & engineers.</p>`)
+  $output.append(window.DOMPurify.sanitize(`<p>If you have code to share with the arXiv community, please ${submitItHereLink} to benefit all researchers & engineers.</p>`))
+  if(isAlertActive) {
+    $output.append(window.DOMPurify.sanitize(`
+      <p>You've set up an alert for this paper, and we'll notify you once new code becomes available. Manage all your alerts <a target="_blank" href="https://www.catalyzex.com/users/${authedUserId}/alerts">here</a>. 🚀
+   `))
+  } else {
+    const createAlertUrl = new URL("https://www.catalyzex.com/alerts/code/create");
+    const queryParams = {
+      paper_arxiv_id: arxivId,
+      paper_url: paperUrl,
+      paper_title: paperTitle,
+      redirect_url: paperUrl
+    }
+    Object.entries(queryParams).forEach(([key, val]) => {
+      createAlertUrl.searchParams.set(key, val);
+    })
+    $output.append(window.DOMPurify.sanitize(`<p><a href="${createAlertUrl}">Create an alert</a> to get notified when new code is available for this paper.</p>`))
+  }
 })();