JAN22P #1105 delete listing as client

pages/listings/listing/index.html

@@ -175,9 +175,9 @@ <h2 class="modal-title text-center">Listing has been </br> updated</h2>
                   <div>
                     <h2 class="modal-title text-center text-wrap my-5 px-4">Are you sure you want to delete this listing?</h2>
                     <div class="modal-footer justify-content-center pb-4">
-                      <button href="/pages/user/index.html" class="btn btn-theme-dark text-theme-light px-4 me-4"
+                      <button id="cancel-delete-listing-btn" href="/pages/user/index.html" class="btn btn-theme-dark text-theme-light px-4 me-4"
                         data-bs-dismiss="modal">CANCEL</button>
-                      <button href="/pages/listings/listing/index.html" class="btn bg-theme-primary fw-bolder px-5" type="button"
+                      <button id="confirm-delete-listing-btn" href="/pages/listings/listing/index.html" class="btn bg-theme-primary fw-bolder px-5" type="button"
                         id="deleteThisListing">YES
                       </button>
                     </div>
@@ -193,8 +193,8 @@ <h2 class="modal-title text-center text-wrap my-5 px-4">Are you sure you want to
                   <div class="text-center py-5 my-5">
                     <img src="/assets/icons/delete-red.svg" alt="Illustration of close icon" />
                     <h2 class="modal-title text-center">Listing Deleted</h2>
-                    <button class="d-none" id="hide-delete-modal" data-bs-dismiss="modal"
-                      data-bs-target="#deleteListingModal"></button>
+                    <button  id="hide-delete-modal-btn" data-bs-dismiss="modal"
+                      data-bs-target="#deleteListingModal">Close</button>
                   </div>
                 </div>
               </div>

src/js/api/posts/deleteListing.js

@@ -1,10 +1,19 @@
 // Author: Margrethe By
 // Team: Enigma Bullet
 import { apiUrl, listingsUrl } from '../constants.js';
-
+import { headers } from '../headers.js';
+/**
+ * Deletes a listing item by showing the confirmation modal if the user is logged in.
+ * If the user is not logged in, the DELETE button will be hidden.
+ * This function checks for the presence of a valid access token in `localStorage`.
+ * 
+ * @async
+ * @function deleteItem
+ */
 export async function deleteItem() {
   const deleteButton = document.querySelector('#delete-button-on-listing-screen');
-
+  const deleteModalElement = document.getElementById('deleteListingModal');
+  const deleteModal = new bootstrap.Modal(deleteModalElement);
   // Check if the user is logged in by checking the presence of an access token
   const accessToken = localStorage.getItem('token');
   if (!accessToken) {
@@ -16,20 +25,41 @@ export async function deleteItem() {
     // If logged in, ensure the DELETE button is visible and add the event listener
     if (deleteButton) {
       deleteButton.style.display = 'block'; // Show the button if the user is logged in
-      deleteButton.addEventListener('click', deleteListing);
-    }
+      deleteButton.addEventListener('click', () => {
+       deleteModal.show();
+    })
+    document.getElementById('deleteListingModal').addEventListener('click', (event) => {
+      if(event.target.id = 'cancel-delete-listing-btn') {
+        deleteModal.hide();
+      } 
+      if(event.target.id = 'confirm-delete-listing-btn') {
+        deleteListing();
+      }
+    })
   }
 }
-
+}
 /**
- * Sends a delete request to the API based on the url parameter.
+ * Sends a DELETE request to the API to remove a listing.
+ * It retrieves the listing ID from the URL, constructs the API URL, 
+ * and sends the request with the necessary authorization headers.
+ * On success, it displays a success modal and hides the delete modal.
+ * 
+ * @async
+ * @function deleteListing
+ * @throws {Error} Throws an error if the access token is not available or if the delete operation fails.
+ * @returns {Promise<Object>} The result of the delete operation from the API.
  */
-export async function deleteListing() {
+async function deleteListing() {
   const accessToken = localStorage.getItem('token');
+  const successDeleteModalElement = document.getElementById('success-delete-modal');
+  const successModal = new bootstrap.Modal(successDeleteModalElement);
+
+
   if (!accessToken) {
     throw new Error("Access token is not available");
   }
-  const newAccessToken = accessToken.replace(/^"|"$/g, '');
+
 
   try {
     const url = new URL(location.href);
@@ -38,10 +68,7 @@ export async function deleteListing() {
 
     const listingData = {
       method: 'DELETE',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${newAccessToken}`,
-      },
+      headers: headers('application/json'),
       body: JSON.stringify(),
     };
 
@@ -52,8 +79,12 @@ export async function deleteListing() {
       alert(`Error deleting listing: ${result.message}`);
       throw new Error(`Error deleting listing: ${result.statusText}`);
     } else {
-      document.getElementById("hide-delete-modal").click();
-      new bootstrap.Modal(document.querySelector('#success-delete-modal')).show();
+      successModal.show();
+      document.getElementById("hide-delete-modal-btn").addEventListener('click', () => {
+        successModal.hide();
+        window.location.reload();
+      })
+
     }
 
     return result;