Game calendar working

2025-03-06 19:49:03 -05:00
parent ef6da3ea64
commit 28462776ac
30 changed files with 1025 additions and 67 deletions
--- a/src/ui/calendar/modals/CalendarEventModal.tsx
+++ b/src/ui/calendar/modals/CalendarEventModal.tsx
@@ -0,0 +1,193 @@
+import DangerButton from "@/components/button/DangerButton";
+import PrimaryButton from "@/components/button/PrimaryButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import DateInput from "@/components/input/DateInput";
+import TextArea from "@/components/input/TextArea";
+import TextInput from "@/components/input/TextInput";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import { CalendarEvent } from "@/interface/Calendar";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { UseMutationResult } from "@tanstack/react-query";
+import moment from "moment";
+import { useEffect, useState } from "react";
+import { BsTrash3 } from "react-icons/bs";
+
+
+export default function CalendarEventModal({
+	display,
+	close,
+	calendarEvent,
+	createCalendarEventMutate,
+	updateCalendarEventMutate,
+	deleteCalendarEventMutate
+}:{
+	display: boolean;
+	close: () => void;
+	calendarEvent?: CalendarEvent;
+	createCalendarEventMutate: UseMutationResult<void, Error, CalendarEvent, unknown>;
+	updateCalendarEventMutate: UseMutationResult<void, Error, CalendarEvent, unknown>;
+	deleteCalendarEventMutate: UseMutationResult<void, Error, CalendarEvent, unknown>;
+}){
+	const [ eventName, setEventName ] = useState<string>(calendarEvent?.eventName ?? "");
+	const [ eventDescription, setEventDescription ] = useState<string>(calendarEvent?.eventDescription ?? "");
+	const [ eventStartDate, setEventStartDate ] = useState(calendarEvent?.eventStartDate ?? new Date());
+	const [ eventEndDate, setEventEndDate ] = useState(calendarEvent?.eventEndDate ?? new Date());
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+
+	const modalId = crypto.randomUUID().replaceAll("-", "");
+
+
+	useEffect(() => {
+		if(createCalendarEventMutate.status === "success"){
+			createCalendarEventMutate.reset();
+			addSuccessMessage(`Calendar Event ${eventName} created successfully`);
+			close();
+		}
+		else if(updateCalendarEventMutate.status === "success"){
+			updateCalendarEventMutate.reset();
+			addSuccessMessage(`Calendar Event ${eventName} updated successfully`);
+			close();
+		}
+		else if(deleteCalendarEventMutate.status === "success"){
+			deleteCalendarEventMutate.reset();
+			addSuccessMessage(`Calendar Event ${eventName} deleted successfully`);
+			close();
+		}
+		else if(createCalendarEventMutate.status === "error"){
+			createCalendarEventMutate.reset();
+			addErrorMessage(`Error creating calendar event ${eventName}: ${createCalendarEventMutate.error.message}`);
+			console.log(createCalendarEventMutate.error);
+		}
+		else if(updateCalendarEventMutate.status === "error"){
+			updateCalendarEventMutate.reset();
+			addErrorMessage(`Error updating calendar event ${eventName}: ${updateCalendarEventMutate.error.message}`);
+			console.log(updateCalendarEventMutate.error);
+		}
+		else if(deleteCalendarEventMutate.status === "error"){
+			deleteCalendarEventMutate.reset();
+			addErrorMessage(`Error deleting calendar event ${eventName}: ${deleteCalendarEventMutate.error.message}`);
+			console.log(deleteCalendarEventMutate.error);
+		}
+	});
+
+	const createCalendarEvent = () => {
+		createCalendarEventMutate.mutate({eventName, eventDescription, eventStartDate, eventEndDate});
+	}
+
+	const updateCalendarEvent = () => {
+		updateCalendarEventMutate.mutate({calendarEventId: calendarEvent?.calendarEventId, eventName, eventDescription, eventStartDate, eventEndDate});
+	}
+
+	const deleteCalendarEvent = () => {
+		deleteCalendarEventMutate.mutate(calendarEvent as CalendarEvent);
+	}
+
+
+	useEffect(() => {
+		if(calendarEvent){
+			setEventName(calendarEvent?.eventName ?? "");
+			setEventDescription(calendarEvent?.eventDescription ?? "");
+			setEventStartDate(calendarEvent.eventStartDate);
+			setEventEndDate(calendarEvent.eventEndDate);
+		}
+		else{
+			setEventName("");
+			setEventDescription("");
+			setEventStartDate(new Date());
+			setEventEndDate(new Date());
+		}
+	}, [ calendarEvent ]);
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader={calendarEvent?.calendarEventId ? "Update Event" : "Create Event"}
+			modalBody={
+				<div
+					className="flex flex-col items-center justify-center gap-4"
+				>
+					<div
+						className="px-4"
+					>
+						<TextInput
+							id={`calendarEventModalNameInput${modalId}`}
+							placeholder="Event Name"
+							onChange={(e) => setEventName(e.target.value)}
+							value={eventName}
+						/>
+					</div>
+					<TextArea
+						id={`calendarEventModalDescriptionInput${modalId}`}
+						placeholder="Event Description"
+						onChange={(e) => setEventDescription(e.target.value)}
+						value={eventDescription}
+					/>
+					<div
+						className="w-full"
+					>
+						<DateInput
+							id={`calendarEventModalStartDateInput${modalId}`}
+							placeholder="Start Date"
+							value={moment(eventStartDate).format("YYYY-MM-DDTHH:mm")}
+							onChange={(e) => setEventStartDate(moment(e.target.value).toDate())}
+						/>
+						<DateInput
+							id={`calendarEventModalEndDateInput${modalId}`}
+							placeholder="End Date"
+							value={moment(eventEndDate).format("YYYY-MM-DDTHH:mm")}
+							onChange={(e) => setEventEndDate(moment(e.target.value).toDate())}
+						/>
+					</div>
+				</div>
+			}
+			modalFooter={
+				<div
+					className="flex flex-row items-center justify-center gap-4 w-full"
+				>
+					<div
+						className="flex flex-row items-center justify-start w-full"
+					>
+						&nbsp;
+					</div>
+					<div
+						className="flex flex-row items-center justify-center w-full gap-4"
+					>
+						<PrimaryButton
+							onClick={calendarEvent?.calendarEventId ? updateCalendarEvent : createCalendarEvent}
+						>
+							{calendarEvent?.calendarEventId ? "Update" : "Create"}
+						</PrimaryButton>
+						<SecondaryButton
+							onClick={close}
+						>
+							Cancel
+						</SecondaryButton>
+					</div>
+					<div
+						className="flex flex-row items-center justify-end w-full"
+					>
+						{
+							calendarEvent?.calendarEventId &&
+							<DangerButton
+								variant="ghost"
+								shape="square"
+								onClick={deleteCalendarEvent}
+							>
+								<BsTrash3
+									size={22}
+								/>
+							</DangerButton>
+						}
+						{
+							!calendarEvent?.calendarEventId &&
+							<>&nbsp;</>
+						}
+					</div>
+				</div>
+			}
+		/>
+	);
+}