From 5aef4e4b4105a55f76978435f4d11f48c6fad4f9 Mon Sep 17 00:00:00 2001
From: Vin Bui <vdb23@cornell.edu>
Date: Thu, 12 Dec 2024 10:51:36 -0500
Subject: [PATCH] WEB-25: Add delete announcement route

---
 .../announcement/announcementModal.tsx        | 29 ++++++++++++++-----
 src/components/landing/landing.tsx            | 12 ++++++--
 .../landing/landingActiveSection.tsx          | 11 +++++--
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/components/announcement/announcementModal.tsx b/src/components/announcement/announcementModal.tsx
index 1945603..3c35dba 100644
--- a/src/components/announcement/announcementModal.tsx
+++ b/src/components/announcement/announcementModal.tsx
@@ -1,6 +1,7 @@
 import AppIcon from "@/icons/appIcon";
 import { Announcement } from "@/models/announcement";
 import { DateFormat } from "@/models/enums/dateFormat";
+import ApiClient from "@/services/apiClient";
 import { useUserStore } from "@/stores/useUserStore";
 import { dateInRange, formatDate } from "@/utils/utils";
 import { X } from "lucide-react";
@@ -12,16 +13,18 @@ import errorToast from "../system/errorToast";
 import AnnouncementBanner from "./announcementBanner";
 import AnnouncementIndicator from "./announcementIndicator";
 
-interface AnnouncementModalProps {
-  onClose: () => void;
+interface Props {
+  onClose: (refetch: boolean) => void;
   announcement: Announcement | null;
 }
 
-export default function AnnouncementModal({ onClose, announcement }: AnnouncementModalProps) {
+export default function AnnouncementModal({ onClose, announcement }: Props) {
+  const apiClient = ApiClient.createInstance();
   const { user } = useUserStore();
 
   const [showDeleteAlert, setShowDeleteAlert] = useState<boolean>(false);
   const [showEndAlert, setShowEndAlert] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   if (!announcement) return null;
 
@@ -42,10 +45,18 @@ export default function AnnouncementModal({ onClose, announcement }: Announcemen
     if (!user) return;
 
     try {
-      console.log("Deleting", announcement);
+      setIsLoading(true);
+      ApiClient.setAuthToken(apiClient, user.idToken);
+
+      await ApiClient.delete(apiClient, `/announcements/${announcement.id}`);
+
+      // Successful
+      setIsLoading(false);
+      onClose(true);
     } catch (err) {
       console.error(err);
       errorToast();
+      setIsLoading(false);
     }
   };
 
@@ -76,7 +87,7 @@ export default function AnnouncementModal({ onClose, announcement }: Announcemen
               <div className="flex flex-col gap-1">
                 <div className="flex flex-row items-center justify-between gap-1">
                   <h4 className="text-neutral-800 break-all">{announcement.title}</h4>
-                  <button className="size-[24px] opacity-hover" onClick={onClose}>
+                  <button className="size-[24px] opacity-hover" onClick={() => onClose(false)}>
                     <X className="size-[24px] fill-neutral-400" />
                   </button>
                 </div>
@@ -106,9 +117,13 @@ export default function AnnouncementModal({ onClose, announcement }: Announcemen
             </div>
 
             {dateInRange(new Date(announcement.startDate), new Date(announcement.endDate), new Date()) ? (
-              <ButtonPrimary2 text="End Live Announcement" action={() => setShowEndAlert(true)} />
+              <ButtonPrimary2 text="End Live Announcement" action={() => setShowEndAlert(true)} isLoading={isLoading} />
             ) : (
-              <ButtonSecondary2 text="Delete Announcement" action={() => setShowDeleteAlert(true)} />
+              <ButtonSecondary2
+                text="Delete Announcement"
+                action={() => setShowDeleteAlert(true)}
+                isLoading={isLoading}
+              />
             )}
           </div>
         </div>
diff --git a/src/components/landing/landing.tsx b/src/components/landing/landing.tsx
index b6afa1f..e55a1a7 100644
--- a/src/components/landing/landing.tsx
+++ b/src/components/landing/landing.tsx
@@ -73,7 +73,11 @@ export default function Landing() {
           />
           <LandingCreateAnnouncement action={() => setShowForm(true)} />
           <LandingUpcomingSection announcements={fetchAnnouncementsQuery.data} />
-          <LandingActiveSection announcements={fetchAnnouncementsQuery.data} onEditClick={editAnnouncement} />
+          <LandingActiveSection
+            announcements={fetchAnnouncementsQuery.data}
+            onEditClick={editAnnouncement}
+            onRefetch={() => fetchAnnouncementsQuery.refetch()}
+          />
           <LandingPastSection announcements={fetchAnnouncementsQuery.data} onEditClick={editAnnouncement} />
         </div>
         <div className="max-lg:hidden flex flex-col gap-8">
@@ -87,7 +91,11 @@ export default function Landing() {
               <LandingUpcomingSection announcements={fetchAnnouncementsQuery.data} />
             </div>
             <div className="flex flex-col gap-8 flex-1">
-              <LandingActiveSection announcements={fetchAnnouncementsQuery.data} onEditClick={editAnnouncement} />
+              <LandingActiveSection
+                announcements={fetchAnnouncementsQuery.data}
+                onEditClick={editAnnouncement}
+                onRefetch={() => fetchAnnouncementsQuery.refetch()}
+              />
               <LandingPastSection announcements={fetchAnnouncementsQuery.data} onEditClick={editAnnouncement} />
             </div>
           </div>
diff --git a/src/components/landing/landingActiveSection.tsx b/src/components/landing/landingActiveSection.tsx
index 0514538..91f25d6 100644
--- a/src/components/landing/landingActiveSection.tsx
+++ b/src/components/landing/landingActiveSection.tsx
@@ -9,9 +9,10 @@ import AnnouncementModal from "../announcement/announcementModal";
 interface Props {
   announcements?: Announcement[];
   onEditClick: (announcement: Announcement) => void;
+  onRefetch: () => void;
 }
 
-export default function LandingActiveSection({ announcements, onEditClick }: Props) {
+export default function LandingActiveSection({ announcements, onEditClick, onRefetch }: Props) {
   const activeAnnouncements = sortAnnouncementsByStartDate(filterActiveAnnouncements(announcements ?? []));
   const [selectedAnnouncement, setSelectedAnnouncement] = useState<Announcement | null>(null);
 
@@ -45,7 +46,13 @@ export default function LandingActiveSection({ announcements, onEditClick }: Pro
       ) : (
         <p className="b1 self-stretch text-neutral-400 text-center">{Constants.text.empty}</p>
       )}
-      <AnnouncementModal onClose={closeModal} announcement={selectedAnnouncement} />
+      <AnnouncementModal
+        onClose={(refetch) => {
+          if (refetch) onRefetch();
+          closeModal();
+        }}
+        announcement={selectedAnnouncement}
+      />
     </div>
   );
 }