From 70075910785758222fa5db59aa09706da37aff7e Mon Sep 17 00:00:00 2001
From: Samm Du <hmu@sammdu.com>
Date: Thu, 9 Dec 2021 06:21:00 -0500
Subject: [PATCH] claim and unclaim offers work

---
 index.html     |  2 +-
 js/api.js      | 15 +++++++++++++++
 js/discover.js | 45 +++++++++++++++++++++++++++++----------------
 js/main.js     |  4 ++--
 4 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 54073c8..9713d6b 100644
--- a/index.html
+++ b/index.html
@@ -209,7 +209,7 @@ <h5>Total cost:</h5>
         </button>
     </script>
     <script type="text/html" id="tmpl_CarOfferBtnAvailable">
-        <button type="button" class="claim-btn rounded-bottom" name="{{id}}" onclick="claimOffer(this.name);">
+        <button type="button" class="claim-btn rounded-bottom" name="{{id}}" onclick="toggleClaimOffer(this.name);">
             <span class="btn-dark-blue claim-text">Claim this offer</span>
             <span class="btn-red bg-heart-empty claim-heart"></span>
         </button>
diff --git a/js/api.js b/js/api.js
index 3e365d5..42539e8 100644
--- a/js/api.js
+++ b/js/api.js
@@ -93,6 +93,21 @@ var api = {
             this.API_URL + '/claimOffer?user_id=' + userID + '&offer_id=' + OfferID
         );
 
+        if (response.status == 200) {
+            return;
+        }
+        else {
+            console.log(response);
+            throw "HTTP status: " + response.status;
+        }
+    },
+
+    unclaimOffer: async function(userID, OfferID) {
+        // send the search query to the backend API
+        const response = await fetch(
+            this.API_URL + '/unclaimOffer?user_id=' + userID + '&offer_id=' + OfferID
+        );
+
         if (response.status == 200) {
             return;
         }
diff --git a/js/discover.js b/js/discover.js
index bbd1957..edf8aa3 100644
--- a/js/discover.js
+++ b/js/discover.js
@@ -44,11 +44,7 @@ async function onPageLoad() {
         // log in the user
         await userLogin();
         // fetch and display the user's claimed offers, if there is any
-        const userOffer = await fetchClaimedOffers(fetchQueryParamByKey('user_id'));
-        if (userOffer !== null) {
-            const offersDetailsLink = document.getElementById('offersDetailsLink');
-            offersDetailsLink.style.visibility = 'visible';
-        }
+        await updateClaimedOffers(fetchQueryParamByKey('user_id'));
     }
 }
 
@@ -301,11 +297,25 @@ function setCarsOffersLoading() {
     Claimed loan offers operations
 */
 
+/*
+    Update the list of claimed offers and associated display
+*/
+async function updateClaimedOffers(userID) {
+    const userOffer = await fetchClaimedOffers(userID);
+    const offersDetailsLink = document.getElementById('offersDetailsLink');
+    if (userOffer !== null) {
+        offersDetailsLink.style.visibility = 'visible';
+    }
+    else {
+        removeAllLoanOffers();
+        offersDetailsLink.style.visibility = 'hidden';
+    }
+}
+
 /*
     Visually toggle the specified claim button between claimed and unclaimed
 */
-function toggleButtonClaimed(id) {
-    let claimButton = document.querySelector('button.claim-btn[name="' + id +'"]');
+function toggleButtonClaimed(claimButton) {
     for (let part of claimButton.children) {
         // modify the text component
         if (part.className.includes('claim-text')) {
@@ -339,22 +349,25 @@ function toggleButtonClaimed(id) {
 /*
     Claim a given loan offer
 */
-async function claimOffer(id) {
+async function toggleClaimOffer(id) {
+    let claimButton = document.querySelector('button.claim-btn[name="' + id +'"]');
     const userID = fetchQueryParamByKey('user_id');
     // attempt to claim the specified offer at the backend API
     try {
-        // make the API call
-        await api.claimOffer(userID, id);
+        // offer is unclaimed, so claim it
+        if (claimButton.innerHTML.includes("Claim this offer")) {
+            await api.claimOffer(userID, id);
+        }
+        // offer is claimed, so unclaim it
+        else {
+            await api.unclaimOffer(userID, id);
+        }
 
         // display the offer details
-        toggleButtonClaimed(id);
+        toggleButtonClaimed(claimButton);
 
         // update the claimed offers widget, fetch and display the user's claimed offers
-        const userOffer = await fetchClaimedOffers(userID);
-        if (userOffer !== null) {
-            const offersDetailsLink = document.getElementById('offersDetailsLink');
-            offersDetailsLink.style.visibility = 'visible';
-        }
+        await updateClaimedOffers(userID);
     }
     catch (e) {
         console.log(e);
diff --git a/js/main.js b/js/main.js
index ee309fc..f7623fb 100644
--- a/js/main.js
+++ b/js/main.js
@@ -115,6 +115,6 @@ function addOfferToContainer(
     Remove all loan offers in the claimed offers container.
 */
 function removeAllLoanOffers() {
-    let carsContainer = document.getElementById('loanOffersContainer');
-    carsContainer.innerHTML = '';
+    let loanOffersContainer = document.getElementById('loanOffersContainer');
+    loanOffersContainer.innerHTML = '';
 }