feat: Update subscription button to use POST request to /subscribe endpoint

1 files changed, 28 insertions, 4 deletions

diff --git a/src/views/index.pug b/src/views/index.pug
index 0e35a9d..dbd246f 100644
--- a/src/views/index.pug
+++ b/src/views/index.pug
@@ -9,7 +9,7 @@ html
   +head("home")
   +subMgmt()
   script(defer).
-    function updateButton(sub) {
+    async function updateButton(sub) {
       var b = document.getElementById("button-container");
       b.innerHTML = '';
 
@@ -17,14 +17,38 @@ html
 
       if (issub(sub)) {
          button.innerText = "unsubscribe";
-         button.onclick = ()=>unsubscribe(sub);
+         button.onclick = async () => await unsubscribe(sub);
       } else {
          button.innerText = "subscribe";
-         button.onclick = ()=>subscribe(sub);
+         button.onclick = async () => await subscribe(sub);
       }
       b.appendChild(button);
     }
 
+    async function subscribe(sub) {
+      await postSubscription(sub, true);
+      updateButton(sub);
+    }
+
+    async function unsubscribe(sub) {
+      await postSubscription(sub, false);
+      updateButton(sub);
+    }
+
+    async function postSubscription(sub, subscribe) {
+      const response = await fetch('/subscribe', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ subreddit: sub, subscribe: subscribe }),
+      });
+
+      if (!response.ok) {
+        console.error('Failed to update subscription');
+      }
+    }
+
     function toggleDetails(details_id) {
       var detailsElement = document.getElementById(details_id);
       if (detailsElement) {
@@ -32,7 +56,7 @@ html
       }
     }
 
-    document.addEventListener('DOMContentLoaded', ()=>updateButton("#{subreddit}"));
+    document.addEventListener('DOMContentLoaded', () => updateButton("#{subreddit}"));
   body
     main#content
       +header(user)