From 15e57b4bb9f055d89e16bf15620b7ebf5ede46b9 Mon Sep 17 00:00:00 2001 From: Vin Bui Date: Thu, 12 Dec 2024 10:33:25 -0500 Subject: [PATCH] WEB-23: Create announcement route --- .../announcement/announcementForm.tsx | 39 +++++++++++++++---- src/components/landing/landing.tsx | 4 +- .../landing/landingActiveSection.tsx | 8 ++-- .../system/input/inputDatePicker.tsx | 2 +- src/icons/CalendarArrowIcon.tsx | 9 ----- 5 files changed, 40 insertions(+), 22 deletions(-) delete mode 100644 src/icons/CalendarArrowIcon.tsx diff --git a/src/components/announcement/announcementForm.tsx b/src/components/announcement/announcementForm.tsx index dd06f6a..b6719d4 100644 --- a/src/components/announcement/announcementForm.tsx +++ b/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(editingAnnouncement ?? dummyAnnouncement); const [showAlert, setShowAlert] = useState(false); + const [isLoading, setIsLoading] = useState(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 */} Schedule an announcement to our apps with this form.

- @@ -158,6 +181,7 @@ export default function AnnouncementForm({ onClose, editingAnnouncement }: Props action={scheduleAnnouncement} disabled={!canSchedule} className="lg:hidden" + isLoading={isLoading} /> @@ -168,6 +192,7 @@ export default function AnnouncementForm({ onClose, editingAnnouncement }: Props action={() => setShowAlert(true)} disabled={!canSchedule} className="max-lg:hidden w-full" + isLoading={isLoading} /> diff --git a/src/components/landing/landing.tsx b/src/components/landing/landing.tsx index 3beed85..b6afa1f 100644 --- a/src/components/landing/landing.tsx +++ b/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 !== "" ? ( diff --git a/src/components/landing/landingActiveSection.tsx b/src/components/landing/landingActiveSection.tsx index a60b38e..0514538 100644 --- a/src/components/landing/landingActiveSection.tsx +++ b/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 (
- +

Active Announcements

Current and upcoming announcements.

diff --git a/src/components/system/input/inputDatePicker.tsx b/src/components/system/input/inputDatePicker.tsx index 8cbc138..e9e0853 100644 --- a/src/components/system/input/inputDatePicker.tsx +++ b/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 { diff --git a/src/icons/CalendarArrowIcon.tsx b/src/icons/CalendarArrowIcon.tsx deleted file mode 100644 index 265ca66..0000000 --- a/src/icons/CalendarArrowIcon.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { IconProps } from "@/models/props/iconProps"; - -export default function ({ className }: IconProps) { - return ( - - - - ); -}