WEB-23: Create announcement route

src/components/announcement/announcementForm.tsx

@@ -1,5 +1,6 @@
 import { Announcement } from "@/models/announcement";
 import { DateFormat } from "@/models/enums/dateFormat";
+import ApiClient from "@/services/apiClient";
 import { useUserStore } from "@/stores/useUserStore";
 import { formatDate } from "@/utils/utils";
 import { addDays } from "date-fns";
@@ -33,15 +34,17 @@ const dummyAnnouncement: Announcement = {
 };
 
 interface Props {
-  onClose: () => void;
+  onClose: (refetch: boolean) => void;
   editingAnnouncement?: Announcement;
 }
 
 export default function AnnouncementForm({ onClose, editingAnnouncement }: Props) {
+  const apiClient = ApiClient.createInstance();
   const { user } = useUserStore();
 
   const [announcement, setAnnouncement] = useState<Announcement>(editingAnnouncement ?? dummyAnnouncement);
   const [showAlert, setShowAlert] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const handleChange = (field: keyof Announcement, value: any) => {
     setAnnouncement((prev) => ({ ...prev, [field]: value }));
@@ -66,10 +69,26 @@ export default function AnnouncementForm({ onClose, editingAnnouncement }: Props
     if (!user) return;
 
     try {
-      console.log("Scheduling", announcement);
+      setIsLoading(true);
+      ApiClient.setAuthToken(apiClient, user.idToken);
+      await ApiClient.post(apiClient, "/announcements", {
+        apps: announcement.apps,
+        body: announcement.body,
+        endDate: announcement.endDate,
+        imageUrl: announcement.imageUrl,
+        isDebug: false, // TODO: Add debug toggle
+        link: announcement.link,
+        startDate: announcement.startDate,
+        title: announcement.title,
+      });
+
+      // Successful
+      setIsLoading(false);
+      onClose(true);
     } catch (err) {
       console.error(err);
       errorToast();
+      setIsLoading(false);
     }
   };
 
@@ -78,10 +97,14 @@ export default function AnnouncementForm({ onClose, editingAnnouncement }: Props
       {/* Alert */}
       <AlertPopup
         title="Schedule Announcement"
-        description={`Are you sure you want to schedule this announcement from ${formatDate(
-          new Date(announcement.startDate),
-          DateFormat.SHORT
-        )} to ${formatDate(new Date(announcement.endDate), DateFormat.SHORT)}?`}
+        description={
+          announcement.startDate && announcement.endDate
+            ? `Are you sure you want to schedule this announcement from ${formatDate(
+                new Date(announcement.startDate),
+                DateFormat.SHORT
+              )} to ${formatDate(new Date(announcement.endDate), DateFormat.SHORT)}?`
+            : ""
+        }
         actionText="Schedule"
         action={scheduleAnnouncement}
         open={showAlert}
@@ -99,7 +122,7 @@ export default function AnnouncementForm({ onClose, editingAnnouncement }: Props
                 <p className="b1 text-neutral-600">Schedule an announcement to our apps with this form.</p>
               </div>
             </div>
-            <button onClick={onClose}>
+            <button onClick={() => onClose(false)}>
               <X className="size-[32px] stroke-neutral-400 opacity-hover" />
             </button>
           </div>
@@ -158,6 +181,7 @@ export default function AnnouncementForm({ onClose, editingAnnouncement }: Props
                 action={scheduleAnnouncement}
                 disabled={!canSchedule}
                 className="lg:hidden"
+                isLoading={isLoading}
               />
             </div>
           </div>
@@ -168,6 +192,7 @@ export default function AnnouncementForm({ onClose, editingAnnouncement }: Props
             action={() => setShowAlert(true)}
             disabled={!canSchedule}
             className="max-lg:hidden w-full"
+            isLoading={isLoading}
           />
         </div>
       </div>

src/components/landing/landing.tsx

@@ -52,9 +52,11 @@ export default function Landing() {
   };
 
   // Close Form
-  const closeForm = () => {
+  const closeForm = (refetch: boolean) => {
     setShowForm(false);
     setEditingAnnouncement(undefined);
+
+    if (refetch) fetchAnnouncementsQuery.refetch();
   };
 
   return user?.name !== "" ? (

src/components/landing/landingActiveSection.tsx

@@ -1,10 +1,10 @@
-import CalendarArrowIcon from "@/icons/calendarArrowIcon";
 import { Announcement } from "@/models/announcement";
+import { Constants } from "@/utils/constants";
 import { filterActiveAnnouncements, sortAnnouncementsByStartDate } from "@/utils/utils";
-import AnnouncementModal from "../announcement/announcementModal";
+import { CalendarArrowUp } from "lucide-react";
 import { useState } from "react";
-import { Constants } from "@/utils/constants";
 import AnnouncementCell from "../announcement/announcementCell";
+import AnnouncementModal from "../announcement/announcementModal";
 
 interface Props {
   announcements?: Announcement[];
@@ -25,7 +25,7 @@ export default function LandingActiveSection({ announcements, onEditClick }: Pro
   return (
     <div className="flex flex-col p-6 items-start gap-6 rounded-lg bg-neutral-white">
       <div className="flex items-center gap-4 self-stretch">
-        <CalendarArrowIcon className="w-[32px] md:w-[40px] h-[32px] md:h-[40px] fill-neutral-800" />
+        <CalendarArrowUp className="size-[32px] md:size-[40px] stroke-neutral-800" />
         <div className="flex flex-col">
           <h4 className="self-stretch text-neutral-800">Active Announcements</h4>
           <p className="b1 self-stretch text-neutral-600">Current and upcoming announcements.</p>

src/components/system/input/inputDatePicker.tsx

@@ -4,10 +4,10 @@ import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { DateRange } from "react-day-picker";
 
-import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
 import { useEffect, useState } from "react";
 
 interface Props {