-
- {/* Header */}
-
-
- (false);
+ const [showEndAlert, setShowEndAlert] = useState(false);
+
if (!announcement) return null;
+ // End Announcement
+ const endAnnouncement = async () => {
+ if (!user) return;
+
+ try {
+ console.log("Ending", announcement);
+ } catch (err) {
+ console.error(err);
+ errorToast();
+ }
+ };
+
+ // Delete Announcement
+ const deleteAnnouncement = async () => {
+ if (!user) return;
+
+ try {
+ console.log("Deleting", announcement);
+ } catch (err) {
+ console.error(err);
+ errorToast();
+ }
+ };
+
return (
-
- setShowAlert(val)}
+ />
+
+
+
);
}
diff --git a/src/components/announcement/announcementModal.tsx b/src/components/announcement/announcementModal.tsx
index e2bea1d..1945603 100644
--- a/src/components/announcement/announcementModal.tsx
+++ b/src/components/announcement/announcementModal.tsx
@@ -1,10 +1,14 @@
import AppIcon from "@/icons/appIcon";
-import CrossThinIcon from "@/icons/crossThinIcon";
import { Announcement } from "@/models/announcement";
import { DateFormat } from "@/models/enums/dateFormat";
+import { useUserStore } from "@/stores/useUserStore";
import { dateInRange, formatDate } from "@/utils/utils";
+import { X } from "lucide-react";
+import { useState } from "react";
+import AlertPopup from "../system/alertPopup";
import ButtonPrimary2 from "../system/button/buttonPrimary2";
import ButtonSecondary2 from "../system/button/buttonSecondary2";
+import errorToast from "../system/errorToast";
import AnnouncementBanner from "./announcementBanner";
import AnnouncementIndicator from "./announcementIndicator";
@@ -14,55 +18,101 @@ interface AnnouncementModalProps {
}
export default function AnnouncementModal({ onClose, announcement }: AnnouncementModalProps) {
+ const { user } = useUserStore();
+
+ const [showDeleteAlert, setShowDeleteAlert] = useStateCreate Announcement
-Schedule an announcement to our apps with this form.
+ <> + {/* Alert */} +
+
-
+ {/* Header */}
+
-
+
-
-
+
+
+
Create Announcement
+Schedule an announcement to our apps with this form.
+
- {/* Preview */}
- setShowAlert(true)}
+ disabled={!canSchedule}
+ className="max-lg:hidden w-full"
+ />
+
-
+
+ {/* Preview */}
+
- {/* Submit Button */}
-
+
- {/* Form */}
-
- handleChange("title", event.target.value)}
- />
- handleChange("body", event.target.value)}
- />
-
-
- {
- handleChange("startDate", dateRange?.from ?? "");
- handleChange("endDate", dateRange?.to ?? "");
- }}
+ {/* Form */}
+ handleChange("link", event.target.value)}
- />
- handleChange("body", event.target.value)}
+ />
+ handleChange("link", event.target.value)}
+ />
+
Date
-
+ handleChange("title", event.target.value)}
/>
-
-
- handleChange("apps", apps)} />
-
- Apps
-
- handleChange("imageUrl", url)} />
-
+ Upload Image
-
+ {
+ handleChange("startDate", dateRange?.from ?? "");
+ handleChange("endDate", dateRange?.to ?? "");
+ }}
+ />
+
+ Date
+
+ handleChange("apps", apps)} />
+
+ Apps
+
+ handleChange("imageUrl", url)} />
+
- {/* Submit Button */}
- Upload Image
+
-
-
-
-
-
- setShowEndAlert(val)}
+ />
+ setShowDeleteAlert(val)}
+ />
+
+
{announcement.title}
- + <> + {/* Alerts */} +
+
+
+
+ {title}
+ {description}
+
+
+
+ Cancel
+
+
+ {actionText}
+
+
+
+
+ );
+}
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..72241f1
--- /dev/null
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes) => (
+
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes) => (
+
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
);
}
diff --git a/src/components/past/past.tsx b/src/components/past/past.tsx
index 0a8c98a..79de14c 100644
--- a/src/components/past/past.tsx
+++ b/src/components/past/past.tsx
@@ -1,21 +1,21 @@
"use client";
+import FilterIcon from "@/icons/filterIcon";
import { Announcement } from "@/models/announcement";
import { AppName } from "@/models/enums/appName";
import { SortType } from "@/models/enums/sortType";
import { createDummyAnnouncement } from "@/utils/dummy";
+import { dateInRange } from "@/utils/utils";
import { ChangeEvent, useEffect, useState } from "react";
+import { DateRange } from "react-day-picker";
+import Footer from "../common/footer";
import NavBar from "../common/navBar";
import PageHeader from "../common/pageHeader";
-import InputSearch from "../system/input/inputSearch";
import Divider from "../system/divider";
-import PastAnnouncementCell from "./pastAnnouncementCell";
-import Footer from "../common/footer";
+import InputSearch from "../system/input/inputSearch";
import { InputSelect } from "../system/input/inputSelect";
-import FilterIcon from "@/icons/filterIcon";
+import PastAnnouncementCell from "./pastAnnouncementCell";
import PastFilter from "./pastFilter";
-import { DateRange } from "react-day-picker";
-import { dateInRange } from "@/utils/utils";
// TODO: Replace with React Query to fetch from API
const allAnnouncements: Announcement[] = [
diff --git a/src/components/system/alertPopup.tsx b/src/components/system/alertPopup.tsx
new file mode 100644
index 0000000..50ef06b
--- /dev/null
+++ b/src/components/system/alertPopup.tsx
@@ -0,0 +1,43 @@
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from "../ui/alert-dialog";
+
+interface Props {
+ title: string;
+ description: string;
+ actionText?: string;
+ action: () => void;
+ open: boolean;
+ onOpenChange: (val: boolean) => void;
+}
+
+export default function AlertPopup({ title, description, actionText = "Continue", action, open, onOpenChange }: Props) {
+ return (
+
+
-
+
-
+
+
+
+ {announcement.title}
+ ++ {`${formatDate(new Date(announcement.startDate), DateFormat.SHORT)} - ${formatDate( + new Date(announcement.endDate), + DateFormat.SHORT + )}`} +
+
+ 
+
- {`Scheduled by ${announcement.creator.name}`}
- {`${formatDate(new Date(announcement.startDate), DateFormat.SHORT)} - ${formatDate( - new Date(announcement.endDate), - DateFormat.SHORT - )}`} -
-
-
- {`Scheduled by ${announcement.creator.name}`}
+
+
-
+ {announcement.apps.map((app) => (
+
+
- console.log("End Live Announcement button tapped")}
- />
- ) : (
- console.log("Delete button tapped")} />
- )}
- {announcement.apps.map((app) => (
-
-
+
-
- setShowEndAlert(true)} />
+ ) : (
+ setShowDeleteAlert(true)} />
+ )}
-
- {dateInRange(new Date(announcement.startDate), new Date(announcement.endDate), new Date()) ? (
-