Deletion of an Agreement by its Id no works

Author: jhodapp

src/components/ui/coaching-sessions/agreements-list.tsx

@@ -21,6 +21,7 @@ import { MoreHorizontal, ArrowUpDown, Save } from "lucide-react";
 import { Id } from "@/types/general";
 import {
   createAgreement,
+  deleteAgreement as deleteAgreementApi,
   updateAgreement as updateAgreementApi,
   fetchAgreementsByCoachingSessionId,
 } from "@/lib/api/agreements";
@@ -41,6 +42,8 @@ const AgreementsList: React.FC<{
   const addAgreement = () => {
     if (newAgreement.trim() === "") return;
 
+    // TODO: move this and the other backend calls outside of this component and trigger
+    // an event instead, especially if we end up making this a reusable Agreement/Action component.
     createAgreement(coachingSessionId, userId, newAgreement)
       .then((agreement) => {
         console.trace(
@@ -100,7 +103,16 @@ const AgreementsList: React.FC<{
   };
 
   const deleteAgreement = (id: Id) => {
-    setAgreements(agreements.filter((agreement) => agreement.id !== id));
+    deleteAgreementApi(id)
+      .then((deleted_id) => {
+        console.trace("Deleted Agreement id: " + JSON.stringify(deleted_id));
+
+        setAgreements(agreements.filter((agreement) => agreement.id !== id));
+      })
+      .catch((err) => {
+        console.error("Failed to create new Agreement: " + err);
+        throw err;
+      });
   };
 
   const sortAgreements = (column: keyof Agreement) => {

src/lib/api/agreements.ts

@@ -149,7 +149,6 @@ export const createAgreement = async (
         } else if (error.response?.status == 500) {
           err = "Update of Agreement failed: internal server error.";
         } else {
-          console.log(error);
           err = `Update of new Agreement failed.`;
         }
       });
@@ -161,3 +160,46 @@ export const createAgreement = async (
 
     return updatedAgreement;
   };
+
+  export const deleteAgreement = async (
+    id: Id
+  ): Promise<Agreement> => {
+    const axios = require("axios");
+  
+    var deletedAgreement: Agreement = defaultAgreement();
+    var err: string = "";
+  
+    const data = await axios
+      .delete(`http://localhost:4000/agreements/${id}`, {
+        withCredentials: true,
+        setTimeout: 5000, // 5 seconds before timing out trying to log in with the backend
+        headers: {
+          "X-Version": "0.0.1",
+          "Content-Type": "application/json",
+        },
+      })
+      .then(function (response: AxiosResponse) {
+        // handle success
+        if (isAgreement(response.data.data)) {
+          deletedAgreement = response.data.data;
+        }
+      })
+      .catch(function (error: AxiosError) {
+        // handle error
+        console.error(error.response?.status);
+        if (error.response?.status == 401) {
+          err = "Deletion of Agreement failed: unauthorized.";
+        } else if (error.response?.status == 500) {
+          err = "Deletion of Agreement failed: internal server error.";
+        } else {
+          err = `Deletion of new Agreement failed.`;
+        }
+      });
+
+    if (err) {
+      console.error(err);
+      throw err;
+    }
+  
+    return deletedAgreement;
+  };