Raid Instance Creator working

2025-03-15 12:20:05 -04:00
parent cff5e098b8
commit 56236fd2ac
32 changed files with 1524 additions and 20 deletions
--- a/src/ui/raidInstance/modals/RaidInstanceModal.tsx
+++ b/src/ui/raidInstance/modals/RaidInstanceModal.tsx
@@ -0,0 +1,156 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import DateInput from "@/components/input/DateInput";
+import TextInput from "@/components/input/TextInput";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import { useCreateRaidInstance, useUpdateRaidInstance } from "@/hooks/RaidInstanceHooks";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { RaidInstance } from "@/interface/RaidInstance";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import moment from "moment";
+import { useEffect, useState } from "react";
+
+
+export default function RaidInstanceModal({
+	display,
+	close,
+	raidInstance,
+	raidGroup
+}:{
+	display: boolean;
+	close: () => void;
+	raidInstance?: RaidInstance;
+	raidGroup: RaidGroup;
+}){
+	const [raidInstanceName, setRaidInstanceName] = useState("");
+	const [raidStartDate, setRaidStartDate] = useState(new Date());
+	const [raidEndDate, setRaidEndDate] = useState(new Date());
+	const [raidSize, setRaidSize] = useState(3);
+	const [numberRuns, setNumberRuns] = useState(1);
+	const modalId = crypto.randomUUID().replaceAll("-", "");
+
+	const createRaidInstanceMutate = useCreateRaidInstance(raidGroup.raidGroupId ?? "");
+	const updateRaidInstanceMutate = useUpdateRaidInstance(raidGroup.raidGroupId ?? "");
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+	useEffect(() => {
+		if(raidInstance){
+			setRaidInstanceName(raidInstance.raidInstanceName ?? "");
+			setRaidStartDate(raidInstance.raidStartDate);
+			setRaidEndDate(raidInstance.raidEndDate);
+			setRaidSize(raidInstance.raidSize ?? 0);
+			setNumberRuns(raidInstance.numberRuns);
+		}
+		else{
+			const currentDate = new Date();
+			const futureDate = new Date();
+			futureDate.setHours(futureDate.getHours() + 1);
+			setRaidInstanceName("");
+			setRaidStartDate(currentDate);
+			setRaidEndDate(futureDate);
+			setRaidSize(3);
+			setNumberRuns(1);
+		}
+	}, [ display, raidInstance ]);
+
+	useEffect(() => {
+		if(createRaidInstanceMutate.status === "success"){
+			createRaidInstanceMutate.reset();
+			addSuccessMessage("Raid Instance Created");
+			close();
+		}
+		else if(createRaidInstanceMutate.status === "error"){
+			createRaidInstanceMutate.reset();
+			addErrorMessage(`Error creating raid instance ${raidInstanceName}: ${createRaidInstanceMutate.error.message}`);
+			console.log(createRaidInstanceMutate.error);
+		}
+		else if(updateRaidInstanceMutate.status === "success"){
+			updateRaidInstanceMutate.reset();
+			addSuccessMessage("Raid Instance Updated");
+			close();
+		}
+		else if(updateRaidInstanceMutate.status === "error"){
+			updateRaidInstanceMutate.reset();
+			addErrorMessage(`Error updating raid instance ${raidInstanceName}: ${updateRaidInstanceMutate.error.message}`);
+			console.log(updateRaidInstanceMutate.error);
+		}
+	});
+
+	const createRaidInstance = () => {
+		createRaidInstanceMutate.mutate({
+				raidInstanceName,
+				raidStartDate,
+				raidEndDate,
+				raidSize,
+				numberRuns,
+				raidGroupId: raidGroup.raidGroupId ?? ""
+			});
+	}
+
+	const updateRaidInstance = () => {
+		updateRaidInstanceMutate.mutate({
+				raidInstanceId: raidInstance?.raidInstanceId,
+				raidInstanceName,
+				raidStartDate,
+				raidEndDate,
+				raidSize,
+				numberRuns,
+				raidGroupId: raidGroup.raidGroupId ?? ""
+			});
+	}
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader={raidInstance ? "Update Raid Instance" : "Create Raid Instance"}
+			modalBody={
+				<div
+					className="flex flex-col items-center justify-center gap-4"
+				>
+					<TextInput
+						id={`raidInstanceName${modalId}`}
+						placeholder="Raid Instance Name"
+						value={raidInstanceName}
+						onChange={(e) => setRaidInstanceName(e.target.value)}
+					/>
+					<br/>
+					{/*
+					<NumberInput
+						id="raidSizeInput"
+						min={1}
+						max={100}
+						value={raidSize}
+						onChange={setRaidSize}
+					/>
+					*/}
+					<DateInput
+						id="raidStartDateInput"
+						value={moment(raidStartDate).format("YYYY-MM-DDTHH:mm")}
+						onChange={(e) => setRaidStartDate(moment(e.target.value).toDate())}
+					/>
+					<DateInput
+						id="raidEndDateInput"
+						value={moment(raidEndDate).format("YYYY-MM-DDTHH:mm")}
+						onChange={(e) => setRaidEndDate(moment(e.target.value).toDate())}
+					/>
+				</div>
+			}
+			modalFooter={
+				<>
+					<PrimaryButton
+						onClick={raidInstance ? updateRaidInstance : createRaidInstance}
+					>
+						{raidInstance ? "Update" : "Create"}
+					</PrimaryButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}